Skip to content

Added netflix landing page clone #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vikasganiga05 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added netflix landing page clone #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8328b1e
Add ar-constructions landing page
vikasganiga05 Oct 30, 2021
c1e1b0d
Add netflix-landing-clone
vikasganiga05 Oct 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 215 additions & 0 deletions vikasganiga05/ar-constructions/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>AR Construction | About Page</title>
</head>
<body>

<header>
<div class="logo">
AR
<span class="white-txt">CONSTRUCTION</span>
</div>
<nav>
<ul class="hide">
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="active">about</a></li>
<li><a href="services.html">services</a></li>
<li><a href="projects.html">projects</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>

<div id="menu-wrapper">
<div id="responsive-menu" class="menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
</div>
</div>
</header>

<div id="showcase-about">
<h1>ABOUT</h1>
<h2>During all this time we stayed true to one and the same principles of business operations.</h2>
<a href="projects.html" class="btn"><span>SEE OUR </span>RECENT PROJECTS</a>
<a href="#container" class="scrolldown">
<div class="scroll-down">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>

<div id="container">
<div class="about-us">
<div class="about-one">
<section class="icons">
<img class="img-1" src="img/flag.png">
<img class="img-2" src="img/flag-hover.png">
</section>
<h2>Core values</h2>
<p>Construction's core values have been shaped over more than 10 years of delivering the finest construction services to our clients. They stood to the test of time and these principles remain our bedrock lynchpins. We never tried to cut on either quality, the pace of work or any other construction aspect. We stay true to our full promise of efficiency!</p>
</div>
<div class="about-two">
<section class="icons">
<img class="img-1" src="img/rocket.png">
<img class="img-2" src="img/rocket-hover.png">
</section>
<h2>pace</h2>
<p>Our love for detailed, bullet-point preparations, as well as to open and clear project management and communication is what makes us faster than the competition. Recently we compared a technically similar 10-stories building that we built, and the other built by our main competitor. Their price and pace was 2 times lower than hours!</p>
</div>
<div class="about-three">
<section class="icons">
<img class="img-1" src="img/trophy.png">
<img class="img-2" src="img/trophy-hover.png">
</section>
<h2>quality</h2>
<p>Quality is focal in every little aspect of the construction. The mindset of both our senior employees and all the way to our on-site contractors and construction workers centers on attention. It's out attention to details that allows us to work on a multitude of projects simultaneously, while staying on schedule!</p>
</div>
<div class="about-four">
<section class="icons">
<img class="img-1" src="img/leaf.png">
<img class="img-2" src="img/leaf-hover.png">
</section>
<h2>projects completed</h2>
<p>Besides valuing your time, your money and your vision for the project, we also value the Mother Nature as well...It cannot be denied anymore, that even the small construction implements the nature in a bad way... That's why we're leading the effort to use only eco-friendly materials and comply with keeping the environment unpollluted by the work we do!</p>
</div>
</div>
</div>

<div class="count-downs">
<div class="parts">
<h1>500</h1>
<h3>Projects Completed</h3>
</div>
<div class="parts">
<h1>350</h1>
<h3>Staff members</h3>
</div>
<div class="parts">
<h1>15</h1>
<h3>Million man-hours</h3>
</div>
<div class="parts">
<h1>99</h1>
<h3>awards won</h3>
</div>
</div>

<div id="container">
<h1 id="lead" class="lead">OUR TEAM</h1>
<div class="our-team">
<div class="team">
<img src="img/team-1.jpg">
<h2>CALVIN FITZGERALD</h2>
<p class="highlight">President</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor massa. Suspendisse tincidunt ipsum non velit bibendum, eu dictum dolor dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque et quam sed dui molestie lobortis. Nunc ac nisi vel mauris rutrum mollis vitae non augue. Donec auctor sollicitudin lacinia. Suspendisse rutrum libero leo, sit amet cursus velit faucibus quis. Nunc nec imperdiet orci, sed dapibus est. Nunc vitae nisl dolor Donec.</p>
</div>
<div class="team">
<img src="img/team-2.jpg">
<h2>TAYLOR WILSON</h2>
<p class="highlight">Chief Executive Officer</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor massa. Suspendisse tincidunt ipsum non velit bibendum, eu dictum dolor dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque et quam sed dui molestie lobortis. Nunc ac nisi vel mauris rutrum mollis vitae non augue. Donec auctor sollicitudin lacinia. Suspendisse rutrum libero leo, sit amet cursus velit faucibus quis. Nunc nec imperdiet orci, sed dapibus est. Nunc vitae nisl dolor Donec.</p>
</div>
<div class="team">
<img src="img/team-3.jpg">
<h2>JOSH WAGNER</h2>
<p class="highlight">Chief Design Officer</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor massa. Suspendisse tincidunt ipsum non velit bibendum, eu dictum dolor dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque et quam sed dui molestie lobortis. Nunc ac nisi vel mauris rutrum mollis vitae non augue. Donec auctor sollicitudin lacinia. Suspendisse rutrum libero leo, sit amet cursus velit faucibus quis. Nunc nec imperdiet orci, sed dapibus est. Nunc vitae nisl dolor Donec.</p>
</div>
<div class="team">
<img src="img/team-4.jpg">
<h2>LUIS MAXWELL</h2>
<p class="highlight">Contractors Operations Head</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor massa. Suspendisse tincidunt ipsum non velit bibendum, eu dictum dolor dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque et quam sed dui molestie lobortis. Nunc ac nisi vel mauris rutrum mollis vitae non augue. Donec auctor sollicitudin lacinia. Suspendisse rutrum libero leo, sit amet cursus velit faucibus quis. Nunc nec imperdiet orci, sed dapibus est. Nunc vitae nisl dolor Donec.</p>
</div>
<div class="team">
<img src="img/team-5.jpg">
<h2>KEN FERGUSON</h2>
<p class="highlight">Chief Financial Officer</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor massa. Suspendisse tincidunt ipsum non velit bibendum, eu dictum dolor dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque et quam sed dui molestie lobortis. Nunc ac nisi vel mauris rutrum mollis vitae non augue. Donec auctor sollicitudin lacinia. Suspendisse rutrum libero leo, sit amet cursus velit faucibus quis. Nunc nec imperdiet orci, sed dapibus est. Nunc vitae nisl dolor Donec.</p>
</div>
<div class="team">
<img src="img/team-6.jpg">
<h2>EDWARD ELLIOTT</h2>
<p class="highlight">Vice President of Operations</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor massa. Suspendisse tincidunt ipsum non velit bibendum, eu dictum dolor dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque et quam sed dui molestie lobortis. Nunc ac nisi vel mauris rutrum mollis vitae non augue. Donec auctor sollicitudin lacinia. Suspendisse rutrum libero leo, sit amet cursus velit faucibus quis. Nunc nec imperdiet orci, sed dapibus est. Nunc vitae nisl dolor Donec.</p>
</div>
</div>
</div>

<div class="footer">
<div class="info">
<div class="logo">
AR
<span class="white-txt">CONSTRUCTION</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor massa. Suspendisse tincidunt ipsum non velit bibendum, eu dictum dolor dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque et quam sed dui molestie lobortis. Nunc ac nisi vel mauris rutrum mollis vitae non augue. Donec auctor sollicitudin lacinia. Suspendisse rutrum libero leo, sit amet cursus velit faucibus quis. Nunc nec imperdiet orci, sed dapibus est. Nunc vitae nisl dolor Donec.</p>
</div>
<div class="navigation">
<h3>NAVIGATION</h3>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Our services</a></li>
<li><a href="projects.html">Our Projects</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="faq">
<h3>F. A. Q.</h3>
<section class="faq-1">
<h4>Why should we choose you?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor.</p>
</section>
<section class="faq-2">
<h4>Are you nice to work with?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor.</p>
</section>
<section class="faq-3">
<h4>Why do i need an architect?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor.</p>
</section>
</div>
<div class="contact">
<h3>CONTACTS</h3>
<ul>
<li>
<p>Address : 10/7 Madhyam Marg, Swarnpath <span class="spacing">Chauragh, Mansarover, Jaipur,</span> <span class="spacing">PIN:302020, Rajasthan</span></p>
</li>
<li>
<p>Phone : (+555) 123-0045 <br> <span class="spacing" style="margin-left: 60px;">(+666) 456-0078</span></p>
</li>
<li>
<p>
E-mail : <span class="highlight"><a href="mailto:info@brarch.com">info@brarch.com</a></span> <br> <span class="highlight" style="margin-left: 60px;"><a href="mailto:contact@brarch.com">contact@brarch.com</a></span>
</p>
</li>
<li>
<p>We are open : Mon-Fri : 10am - 8pm</p>
</li>
</ul>
</div>
</div>

<footer>
<div class="column column-1">
<p>&copy; <span id="current-year">2018</span> AR Construction, All Rights Reserved.</p>
</div>
<div class="column column-2">
<a href="https://facebook.com/"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
<a href="https://instagram.com/"><i class="fab fa-instagram"></i></a>
<a href="https://youtube.com/"><i class="fab fa-youtube"></i></a>
<a href="https://linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
<a href="https://pinterest.com/"><i class="fab fa-pinterest-p"></i></a>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
154 changes: 154 additions & 0 deletions vikasganiga05/ar-constructions/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>AR Construction | Contact Page</title>
</head>
<body>

<header>
<div class="logo">
AR
<span class="white-txt">CONSTRUCTION</span>
</div>
<nav>
<ul class="hide">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="services.html">services</a></li>
<li><a href="projects.html">projects</a></li>
<li><a href="contact.html" class="active">contact</a></li>
</ul>
</nav>

<div id="menu-wrapper">
<div id="responsive-menu" class="menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
</div>
</div>
</header>

<div id="showcase-contact">
<h1>CONTACT</h1>
<h2>this year we took more complex constructions than ever before. contact us...</h2>
<a href="#container" class="btn scrolldown">CONTACT US</a>
<a href="#container" class="scrolldown">
<div class="scroll-down">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>

<div id="container">
<div class="contact-us">
<div class="contact-details">
<h1>Contact Details</h1>
<ul>
<li>
<span class="bold">Address</span> : 4578 Marmora Road, Glasgow, D04 89GR
</li>
<li>
<span class="bold">Phone</span> : (+555) 123-0045
</li>
<li>
<span class="bold">E-mail</span> : <a href="mailto:info@brarch.com">info@brarch.com</a>
</li>
<li>
<span class="bold">We Are Open</span> : Mon-Fri : 10am - 8pm
</li>
</ul>
<a href="https://facebook.com/"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
<a href="https://instagram.com/"><i class="fab fa-instagram"></i></a>
<a href="https://youtube.com/"><i class="fab fa-youtube"></i></a>
<a href="https://linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
<a href="https://pinterest.com/"><i class="fab fa-pinterest-p"></i></a>
</div>
<div class="get-in-touch">
<h1>Get In Touch</h1>
<form>
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<textarea placeholder="Your Message"></textarea>
<input type="submit" value="SEND">
</form>
</div>
</div>
</div>

<div class="footer">
<div class="info">
<div class="logo">
AR
<span class="white-txt">CONSTRUCTION</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor massa. Suspendisse tincidunt ipsum non velit bibendum, eu dictum dolor dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque et quam sed dui molestie lobortis. Nunc ac nisi vel mauris rutrum mollis vitae non augue. Donec auctor sollicitudin lacinia. Suspendisse rutrum libero leo, sit amet cursus velit faucibus quis. Nunc nec imperdiet orci, sed dapibus est. Nunc vitae nisl dolor Donec.</p>
</div>
<div class="navigation">
<h3>NAVIGATION</h3>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Our services</a></li>
<li><a href="projects.html">Our Projects</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="faq">
<h3>F. A. Q.</h3>
<section class="faq-1">
<h4>Why should we choose you?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor.</p>
</section>
<section class="faq-2">
<h4>Are you nice to work with?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor.</p>
</section>
<section class="faq-3">
<h4>Why do i need an architect?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed arcu dictum, suscipit orci quis, auctor.</p>
</section>
</div>
<div class="contact">
<h3>CONTACTS</h3>
<ul>
<li>
<p>Address : 10/7 Madhyam Marg, Swarnpath <span class="spacing">Chauragh, Mansarover, Jaipur,</span> <span class="spacing">PIN:302020, Rajasthan</span></p>
</li>
<li>
<p>Phone : (+555) 123-0045 <br> <span class="spacing" style="margin-left: 60px;">(+666) 456-0078</span></p>
</li>
<li>
<p>
E-mail : <span class="highlight"><a href="mailto:info@brarch.com">info@brarch.com</a></span> <br> <span class="highlight" style="margin-left: 60px;"><a href="mailto:contact@brarch.com">contact@brarch.com</a></span>
</p>
</li>
<li>
<p>We are open : Mon-Fri : 10am - 8pm</p>
</li>
</ul>
</div>
</div>

<footer>
<div class="column column-1">
<p>&copy; <span id="current-year">2018</span> AR Construction, All Rights Reserved.</p>
</div>
<div class="column column-2">
<a href="https://facebook.com/"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
<a href="https://instagram.com/"><i class="fab fa-instagram"></i></a>
<a href="https://youtube.com/"><i class="fab fa-youtube"></i></a>
<a href="https://linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
<a href="https://pinterest.com/"><i class="fab fa-pinterest-p"></i></a>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
Loading