create a Netflix homepage page clone tamplet usin html,css

By /
Views: 2

create a Netflix clone template

  • create a file for task-1(project 1)

then open Visual Studio code and start the HTML code

 1. give  the title of Netflix homepage

<html>
<head> 
      <title> netflix homepage</title>
</head>
</html>

  • output:-

2. then create the CSS file and add it to HTML using a tag

example:

3. Then style CSS file using CSS scripts and add background image :-

body{
    background: #000;
    color: #fff;
}
.header{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(images/netflixmain.jpg);
background-size: cover;
background-position: center;
padding: 10px 8%;
position: relative;
}

output:-

4. add logo and sign-in or English button in HTML

<html lang="en">
<head>
    <title>netflix homepage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <nav>
            <img src="images/logo.png" class="logo">
            <div>
                <button>english</button>
                <button>sing in</button>
            </div>
        </nav>
    </div>
</body>
</html>

output:-

5. add the email sing in button and add text(copy text official sit)

<div class="header-content">
            <h1>Unlimited movies, TV shows and more</h1>
            <h3>Watch anywhere. Cancel anytime.</h3>
            <p>Ready to watch? Enter your email to create or restart your membership.</p>
            <form class="email-singup">
                <input type="email" placeholder="Email address" required>
                <button type="submit">Get Started</button>
            </form>

        </div>

6. then design the email sing-in button and all texts using CSS

.header-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    margin-top: 100px;

}
.header-conten h1{
    font-size: 60px;
    line-height: 70px;
    font-weight: 600;
    max-width: 650px;
}
.header-content h3{
    font-weight: 600;
    margin-bottom: 20px;
}
.email-singup{
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    margin-top: 30px;
    overflow: hidden;
}
.email-singup input{
    flex: 1;
    border: 0;
    outline: 0;
    margin-left: 20px;
}
.email-singup button{
    background: #db0001;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 15px 30px;
}

.both output:-

7. add the new images and text using HTML and CSS(download images and copy the text from the official site of Netflix

<div class="features">
        <div class="row">
            <div class="text-col">
                <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="img-col">
                <img src="images/feature-1.png">
        </div>
    </div>
    <div class="features">
        <div class="row">
            <div class="img-col">
                <img src="images/feature-2.png" height="600" width="772">
        </div>
        <div class="text-col">
            <h2>
                Download your shows to watch offline
            </h2>
            <p>Save your favourites easily and always have something to watch.</p>
        </div>
    </div>
    <div class="features">
        <div class="row">
            <div class="text-col">
                <h2>
                    Watch everywhere
                </h2>
                <p>Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.</p>
            </div>
            <div class="img-col">
                <img src="images/feature-3.png" height="600" width="1000">
        </div>
    </div>
    <div class="features">
        <div class="row">
            <div class="img-col">
                <img src="images/f4.png" height="500" width="40000">
        </div>
            <div class="text-col">
                <h2>
                    Create profiles for kids
                </h2>
                <p>Send children on adventures with their favourite characters in a space made just for them—free with your membership.</p>
            </div>
    </div>

 

*-------------------features--------------------------*/
.features{
    padding: 50px 12%;
    font-size: 22px;
}
.row{
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    padding: 50px 0;
}
.text-col{
    flex-basis: 60%;
    margin-bottom: 30px;
}
.img-col{
    flex-basis: 50%;
    margin-bottom: 20px;
}
.img-col img{
    display: block;
    width: 70%;
    margin: auto;
}
.features h2{
    font-size: 60px;
    font-weight: 600;
  margin-bottom: 20px;  
}
.row{
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    padding: 50px 0;
}
.img-col{
    flex-basis: 50%;
    margin-bottom: 20px;
}
.img-col img{
    display: block;
    width: 70%;
    margin: auto;
}
.text-col{
    flex-basis: 50%;
    margin-bottom: 20px;
}
.features h2{
    font-size: 50px;
    font-weight: 600;
  margin-bottom: 20px;  
}

.output:-

8. add frequently asked questions and again add sing-in button

 

<div class="faq">
    <h2>frequetly asked questions</h2>
    <ul class="accordion">
        <li>
            <input type="radio" name="accordion" id="frist">
            <label for="frist">what is netflix?</label>
            <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda perspiciatis culpa molestiae quod, incidunt dolores dolor inventore modi suscipit magnam esse ea, temporibus voluptatum dignissimos, distinctio quisquam aperiam minima qui.</p>
            </div>
        </li>
        <li>
            <input type="radio" name="accordion" id="second">
            <label for="secod">how much does netflix cost?</label>
            <div class="content">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum sint culpa reiciendis amet at assumenda repellendus incidunt reprehenderit nobis aliquam quo deserunt deleniti, necessitatibus id ut, voluptates facere architecto eveniet.</p>
            </div>
        </li>
        <li>
            <input type="radio" name="accordion" id="third">
            <label for="third">where can i watch?</label>
            <div class="content">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum sint culpa reiciendis amet at assumenda repellendus incidunt reprehenderit nobis aliquam quo deserunt deleniti, necessitatibus id ut, voluptates facere architecto eveniet.</p>
            </div>
        </li>
        <li>
            <input type="radio" name="accordion" id="fourth">
            <label for="fourth">how can i do cancal?</label>
            <div class="content">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum sint culpa reiciendis amet at assumenda repellendus incidunt reprehenderit nobis aliquam quo deserunt deleniti, necessitatibus id ut, voluptates facere architecto eveniet.</p>
            </div>
        </li>
        <li>
            <input type="radio" name="accordion" id="fifth">
            <label for="fifth">what can i do watch netflix?</label>
            <div class="content">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum sint culpa reiciendis amet at assumenda repellendus incidunt reprehenderit nobis aliquam quo deserunt deleniti, necessitatibus id ut, voluptates facere architecto eveniet.</p>
            </div>
        </li>
        <li>
            <input type="radio" name="accordion" id="sixth">
            <label for="sixth">Is netflix are good for kids?</label>
            <div class="content">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum sint culpa reiciendis amet at assumenda repellendus incidunt reprehenderit nobis aliquam quo deserunt deleniti, necessitatibus id ut, voluptates facere architecto eveniet.</p>
            </div>
        </li>
    </ul>
    <small>Ready to watch? Enter your email to create or restart your membership.</small>
    <form class="email-singup">
        <input type="email" placeholder="Email address" >
        <button type="submit">Get Started</button>
    </form>
</div>

 

/*--------------------faq----------------*/
.faq{
    padding: 10px 12%;
    text-align: center;
    font-size: 18px;
}
.faq h2{
    font-weight: 500;
    font-size: 40ox;  
}
.accordion{
    margin: 60px auto;
    width: 100%;
    max-width: 750px;
}
.accordion li{
    list-style: none;
    width: 100%;
    padding: 5px;

}
.accordion li label{
    display: flex;
    align-items: center;
    padding: 20px;
    font-size: 18px;
    font-weight: 500;
    background: #303030;
    margin-bottom: 2px;
    cursor: pointer;
    position: relative;

}
label::after{
    content: '+';
    font-size: 34px;
    position: absolute;
    right: 20px;
    transition: transform 0.5s;
}
input[type="radio"]{
    display: none;
}
.accordion .content{
    background: #303030;
    text-align: left;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s, padding 0.5s;

}
.accordion input[type="redio"]:checked + label + .content{
    max-height: 600px;
    padding: 30px 20px;

}
.faq .email-singup{
    max-width: 600px;
    margin: 20px auto 60px;
}
.faq small{
    font-size: 13px;
}

.output :-

9. add-footer detail (contact,help center,media center etc..) and language buttons

 

<div class="footer">
        <h2>questions? call 22--33-33-44</h2>
        <div class="row">
            <div class="col">
                <a href="#">FAQ</a>
                <a href="#">Investor Relaton</a>
                <a href="#">Privacy</a>
                <a href="#">Speed Test</a>
            </div>
            <div class="col">
                <a href="#">Help Center</a>
                <a href="#">Jobs</a>
                <a href="#">Cookies Preference</a>
                <a href="#">Legal Notices</a>
            </div>
            <div class="col">
                <a href="#">account</a>
                <a href="#">Way to watch</a>
                <a href="#">Corporet Informaton</a>
                <a href="#">Only on netflix</a>
            </div>
            <div class="col">
                <a href="#">Madia center</a>
                <a href="#">Term of Use</a>
                <a href="#">Contect Us</a>
            </div>
        </div>
        <button class="languge-btn">english<img src="images/down-icon.png"></button>
        <p class="copyright-text">Netflix India</p>
    </div>

 

/*------------------------footer---------------*/
.footer{
    padding: 50px 15% 10px;
    border-top: 6px solid #333;
    color: #777;
}
.footer h2{
    font-size: 18px ;
    font-weight: 400;
    margin-bottom: 30px ;
}
.footer .col{
    flex-basis: 25%;
    flex-grow: 1;
    margin-bottom: 20px;

}
.footer .col a{
    display: block;
    text-decoration: none;
    color: #777;
    font-size: 14px;
    margin-bottom: 10px;
}
.footer .row{
    align-items: flex-start;
    padding: 10px 0;
}
.footer .languge-btn{
    color: #fff;
    padding: 10px 20px;
    border-radius: 3px;
}
.copyright-text{
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 10px;

}

. output :-

10. I add the Netflix clone homepage video

.video :-

 

 

 

 

 

 

 

 

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top