Netflix-Clone|rahulpgupta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix-Clone</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Martel:wght@200;300;
400;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;
0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
;
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
background-color: rgb(0, 0, 0);
color: white;
}
.sepration {
width: 100%;
height: 0.5rem;
background-color: rgb(35, 35, 35);
}
#main {
background-image: url(assets/images/bg.jpg);
height: 100vh;
background-repeat: no-repeat;
background-size: max(100vw, 1200px);
background-position: center, center;
}
#main .blackbg {
display: flex;
background-color: black;
height: 100vh;
position: relative;
opacity: 0.44;
}
nav {
display: flex;
justify-content: space-between;
width: 93%;
padding: 24px 34px 24px 34px;
position: absolute;
z-index: 1;
}
nav span {
position: relative;
z-index: 100;
}
nav span img {
width: 148px;
}
.head-button button {
background-color: red;
width: 80px;
height: 30px;
border-radius: 3px;
border: none;
color: white;
font-size: 1rem;
font-weight: 600;
}
#main #main-textarea {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
position: absolute;
z-index: 2;
color: #f9f9f9;
top: 42%;
}
#main-textarea .firtext {
font-family: sans-serif;
font-size: 1.6rem;
font-weight: 800;
}
#main-textarea .sectext {
font-size: 1.3rem;
font-weight: 400;
line-height: 2;
}
#main-textarea .thirdtext {
font-size: 1.25rem;
font-weight: 400;
}
.email-textarea {
width: 100%;
color: rgb(255, 255, 255);
}
.email-textarea #getstarted-email {
padding: 1rem 1rem 0.5rem;
font-size: 1rem;
font-family: sans-serif;
width: 27%;
border: none;
background: rgba(22, 22, 22, 0.7);
border-color: rgba(128, 128, 128, 0.7);
line-height: 25px;
color: rgb(255, 255, 255);
}
.email-textarea button a {
text-decoration: none;
color: white;
font-family: sans-serif;
font-size: 1.2rem;
font-weight: 600;
}
.email-textarea button {
padding: 1rem 1rem 0.5rem;
background-color: red;
border-style: solid;
border-width: 0.0625rem;
border-radius: 0.1875rem;
border-color: rgba(0, 0, 0, 0);
}
/* ------------------watch section starts here */
#watch {
position: relative;
background-color: #000;
}
#tv {
display: flex;
justify-content: center;
align-items: center;
width: 75vw;
margin: auto;
}
.tv-png {
position: relative;
}
.tv-png img {
position: relative;
z-index: 10;
}
.tv-png video {
position: absolute;
width: 555px;
top: 51px;
right: 0;
}
.first-text h2 {
font-size: 3rem;
}
.first-text p {
font-size: 1.2rem;
}
#sec-mobile {
display: flex;
justify-content: center;
align-items: center;
width: 75vw;
margin: auto;
}
#sec-mobile img {
width: 30rem;
}
#sec-mobile h2 {
width: 100%;
font-weight: 900;
font-size: 3rem;
}
#sec-mobile p {
width: 100%;
font-weight: 400;
font-size: 1.2rem;
}
#third-img {
display: flex;
justify-content: center;
align-items: center;
width: 75vw;
margin: auto;
padding: 3rem;
}
.third-text h1 {
font-weight: 900;
font-size: 3rem;
width: 50%;
}
.third-text p {
font-size: 1.5rem;
font-weight: 400;
width: 50%;
}
#forth-kids {
display: flex;
width: 75vw;
margin: auto;
justify-content: center;
align-items: center;
}
.forth-img img {
width: 86%;
}
.forth-text {
width: 50%;
}
.forth-text h2 {
font-size: 3rem;
font-weight: 800;
}
.forth-text p {
font-size: 1.5rem;
font-weight: 400;
}
/* ------------------Faq begins here-------------------- */
#faq {
background-color: black;
}
#head-faq {
width: 90%;
text-align: center;
margin: auto;
}
#head-faq h1 {
font-size: 3rem;
font-weight: 800;
}
.faq-main {
width: 75%;
margin: auto;
}
.faq-main .first {
display: flex;
font-size: 1.5rem;
font-weight: 400;
background-color: #2d2d2d;
margin-bottom: 2%;
padding: 2%;
justify-content: space-between;
}
.faq-main .second {
display: flex;
font-size: 1.5rem;
font-weight: 400;
background-color: #2d2d2d;
margin-bottom: 2%;
padding: 2%;
justify-content: space-between;
}
.faq-main .third {
display: flex;
font-size: 1.5rem;
font-weight: 400;
background-color: #2d2d2d;
margin-bottom: 2%;
padding: 2%;
justify-content: space-between;
}
.faq-main .forth {
display: flex;
font-size: 1.5rem;
font-weight: 400;
background-color: #2d2d2d;
margin-bottom: 2%;
padding: 2%;
justify-content: space-between;
}
.faq-main .fifth {
display: flex;
font-size: 1.5rem;
font-weight: 400;
background-color: #2d2d2d;
margin-bottom: 2%;
padding: 2%;
justify-content: space-between;
}
.faq-main .sixth {
display: flex;
font-size: 1.5rem;
font-weight: 400;
background-color: #2d2d2d;
margin-bottom: 2%;
padding: 2%;
justify-content: space-between;
}
.faq-main span {
font-size: 2rem;
cursor: pointer;
}
/* Faq foot */
.faq-foot {
width: 75%;
margin: auto;
}
.ready p {
width: 70%;
margin: auto;
}
.email-foot {
display: flex;
justify-content: center;
}
.email-foot #footmail {
margin: 1.25rem 0.25rem;
width: 20rem;
height: 3.5rem;
border: 0.12rem solid #2d2d2d;
background-color: rgb(22, 22, 22);
color: white;
font-family: sans-serif;
font-size: 1.2rem;
font-weight: 400;
padding: 0 0.5rem;
}
.email-foot a {
text-decoration: none;
color: white;
font-family: sans-serif;
font-size: 1.5rem;
font-weight: 600;
}
.email-foot button {
margin: 1.25rem 0px;
width: 14rem;
height: 3.5rem;
background-color: red;
border: none;
border-radius: 0.1825rem;
}
/* ------------------footer begins---------------------- */
footer {
width: 75%;
margin: auto;
padding: 3rem;
color: rgba(255, 255, 255, 0.7);
text-decoration: underline;
}
.foot-list {
margin-top: 2rem;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1rem;
}
.lang-button {
background-color: red;
cursor: pointer;
color: #ffffff;
text-align: center;
font-size: 1.1rem;
}
</style>
</head>
<body>
<div id="main">
<nav>
<span>
<img src="assets/images/logo.svg" alt="Netflix-Logo">
</span>
<div class="head-button">
<button>Sign In</button>
</div>
</nav>
<div class="blackbg"></div>
<div id="main-textarea">
<div class="firtext">
<h1>
Unlimited movies, TV shows, and more
</h1>
</div>
<div class="sectext">
Watch anywhere. Cancel anytime.
</div>
<div class="thirdtext">
<p>Ready to watch? Enter your email to create or restart your
membership.</p>
</div>
<div class="email-textarea">
<label for="email">
<input type="email" name="getstarted-email" id="getstarted-email"
placeholder="Email or mobile number" required>
</label>
<button><a href="index.html">Get Started ></a></button>
</div>
</div>
</div>
<div class="sepration">
</div>
<section id="watch">
<div id="tv">
<div class="first-text">
<h2>Enjoy on your TV</h2>
<p> Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV,
Blu-ray players, and more.</p>
</div>
<div class="tv-png">
<img src="assets/images/tv.png" alt="TV">
<video src="assets/video/bg.m4v" autoplay muted loop width="75%">
</video>
</div>
</div>
<div class="sepration">
</div>
<div id="sec-mobile">
<img src="assets/images/mobile-0819.jpg" alt="Strange-Things">
<div class="sec-text">
<h2>Download your shows to watch offline</h2>
<p>Save your favorites easily and always have something to watch.</p>
</div>
</div>
<div class="sepration">
</div>
<div id="third-img">
<div class="third-text">
<h1>
Watch everywhere
</h1>
<p>
Stream unlimited movies and TV shows on your phone,
tablet, laptop, and TV.
</p>
</div>
</div>
<div class="sepration">
</div>
<div id="forth-kids">
<div class="forth-img">
<img src="assets/images/kids.png" alt="Kids image">
</div>
<div class="forth-text">
<h2>Create profiles for kids</h2>
<p>Send kids on adventures with their favorite characters in
a space made just for them—free with your
membership.</p>
</div>
</div>
<div class="sepration">
</div>
</section>
<section id="faq">
<div id="head-faq">
<h1>Frequently Asked Questions</h1>
</div>
<div class="faq-main">
<div class="first">
<p> What is Netflix?</p>
<p>+</p>
</div>
<div class="second">How much does Netflix cost?<span>+</span></div>
<div class="third">Where can i watch?<span>+</span></div>
<div class="forth">How do i cancel?<span>+</span></div>
<div class="fifth">What can i watch on Netflix?<span>+</span></div>
<div class="sixth">Is Netflix good for kids?<span>+</span></div>
</div>
<!-- ready section begins here -->
<div class="faq-foot">
<div class="ready">
<p>Ready to watch? Enter your email to create or restart
your membership.</p>
</div>
<div class="email-foot">
<label for="email">
<input type="email" name="footmail" id="footmail"
placeholder="Email or mobile number">
</label>
<button><a href="index.html">Get Started ></a></button>
</div>
</div>
</div>
</section>
<div class="sepration">
</div>
<footer>
<div class="foot-head">
<p>Questions? Contact us.</p>
</div>
<ul class="foot-list">
<li>FAQ</li>
<li>Investor Relations</li>
<li>Privacy</li>
<li>Speed Test</li>
<li>Help Center</li>
<li>Jobs</li>
<li>Cookie Preferences</li>
<li>Legal Notices</li>
<li>Account</li>
<li>Ways to Watch</li>
<li>Corperate Information</li>
<li>Only on Netflix</li>
<li>Media Center</li>
<li>Terms of Use</li>
<li>Contact Us</li>
</ul>
<div class="footbutton">
<button class="lang-button">
<svg width="24" height="24" viewBox="0 0 24 24" focusable="false"
fill="#ffffff">
<path
d="M12.87 15.07l-2.54-2.51.03-.03A17.52
17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07
10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11
3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62
7l1.62-4.33L19.12 17h-3.24z">
</path>
</svg>
English ▼
</button>
</div>
</footer>
</body>
Comments