Netflix Clone With HTML and CSS

HTML 

<!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">
</head>

<body>
    <div class="main">
        <nav>
            <span><img src="assests/img/nlogo.jpg" alt=""></span>
            <div>
                <button class="btn">English</button>
                <button class="btn btn-red-sm">Sign In</button>
            </div>

        </nav>
        <div class="box">

        </div>

        <div class="hero">
            <span>Enjoy big movies, hit series and more from ₹ 149.</span>
            <span>Join today. Cancel anytime.</span>
            <span>Ready to watch? Enter your email to create or restart your membership.</span>
            <div class="hero-buttons">
                <input type="text" placeholder="Email address">
                <button class="btn red-btn">Get Started ></button>
            </div>
        </div>
    </div>

    <div class="separation"></div>
    <section class="first">
        <div>
            <span>Enjoy on your TV</span>
            <span>Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more</span>
        </div>

        <div class="secimg">
            <img src="assests/img/necl1.jpg" alt="">
            <video src="assests/vid/video-tv-in-0819.m4v" autoplay loop muted></video>
        </div>
    </section>
    <div class="separation"></div>

    <section class="first second">

        <div class="secimg">
            <img src="assests/img/necl2.jpg" alt="">

        </div>
        <div>
            <span>Download your shows to watch offline</span>
            <span>Save your favourites easily and always have something to watch.</span>
        </div>
    </section>
    <div class="separation"></div>

    <section class="first third">
        <div>
            <span>Watch everywhere</span>
            <span>Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.</span>
        </div>

        <div class="secimg">
            <img src="assests/img/necl1.jpg" alt="">
            <video src="assests/vid/video-devices-in.m4v" autoplay loop muted></video>
        </div>
    </section>
    <div class="separation"></div>

    <section class="first fourth">

        <div class="secimg">
            <img src="assests/img/necl4.jpg" alt="">

        </div>
        <div>
            <span>Create profiles for kids</span>
            <span>Send children on adventures with their favourite characters in a space made just for them—free with
                your membership.</span>
        </div>
    </section>
    <div class="separation"></div>

    <section class="faq">
        <h2>Frequently Asked Questions</h2>
        <div class="ques">
            <span>What Is Netflix?</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </div>

        <div class="ques">
            <span>How Much Does Netflix Cost?</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </div>

        <div class="ques">
            <span>Where Can I Watch?</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </div>

        <div class="ques">
            <span>How Do I Cancel?</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </div>

        <div class="ques">
            <span>What Can I Watch On Netflix?</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </div>

        <div class="ques">
            <span>Is Netflix Good For Kids?</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </div>
        <div class="separation"></div>

        <footer>
            <div class="footer-item">
                <a href="faq">Faq</a>
                <a href="faq">Investor Relation</a>
                <a href="faq">Privacy</a>
                <a href="faq">Speed Test</a>
            </div>

            <div class="footer-item">
                <a href="faq">Help Center</a>
                <a href="faq">Jobs</a>
                <a href="faq">Cookies Preference</a>
                <a href="faq">Legal Notice</a>
            </div>

            <div class="footer-item">
                <a href="faq">Account</a>
                <a href="faq">Ways To Watch</a>
                <a href="faq">Corporate Information</a>
                <a href="faq">Only On Netflix</a>
            </div>

            <div class="footer-item">
                <a href="faq">Media Center</a>
                <a href="faq">Terms Of Use</a>
                <a href="faq">Contact Us</a>
                <a href="faq">Netflix India</a>
            </div>


        </footer>
    </section>
</body>

</html>



CSS

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: black;
}

.main {
    background-image: url("assests/img/bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    height: 75vh;
    position: relative;
    background-size: max(1500px, 100vh);


}

.main .box {
    height: 75vh;
    width: 100%;
    opacity: 0.21;
    background-color: black;
    position: absolute;
    top: 0;
}

nav {
    max-width: 80vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;

}

nav img {
    color: red;
    width: 114px;
    position: relative;
    z-index: 10;
}

.hero {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    position: relative;
    gap: 21px;
    padding: 0 23px;
}

.hero> :first-child {
    font-weight: 900;
    font-size: 48px;
    text-align: center;
}

.hero> :nth-child(2) {
    font-weight: 600;
    font-size: 32px;
    text-align: center;
}

.hero> :nth-child(3) {
    font-weight: 500;
    font-size: 27px;
    text-align: center;
}

.separation {
    height: 7px;
    background-color: gray;
}

.btn {
    padding: 3px 8px;
    font-weight: bold;
    background-color: rgba(248, 243, 243, 0.023);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid white;
}

.red-btn {
    background-color: red;
    color: white;
    padding: 5px 81px 5px 11px;
    font-size: 20px;
    border-radius: 4px;
    font-weight: 400;
    cursor: pointer;
}

.main input {
    padding: 7px 101px 8px 14px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 4px;
    background-color: rgba(23, 35, 30, 0.4);
    border: 1px solid rgba(246, 238, 238, 0.5);
    color: white;

}

.btn-red-sm {
    background-color: red;
    color: white;
    cursor: pointer;
}

.hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
}

.first {
    display: flex;
    justify-content: center;
    max-width: 70vw;
    margin: auto;
    color: white;
    justify-content: center;
    align-items: center;

}

@media screen and (max-width: 500px) {
    .first{
        flex-wrap: wrap;
    }
}



.secimg {
    position: relative;
}

.secimg img {
    width: 516px;
    position: relative;
    z-index: 15;
    right: 2px;
    left: 2px;

}

.secimg video {
    position: absolute;
    top: 91px;
    right: 0;
    left: 1;
    z-index: 10;
    width: 450px;
}

section.first>div {
    display: flex;
    flex-direction: column;
    padding: 34px 0;
}

section.first>div :nth-child(1) {
    font-size: 48px;
    font-weight: bolder;
}

section.first>div :nth-child(2) {
    font-size: 24px;
}

.faq {
    background: black;
    color: white;
    padding: 34px;
    font-size: 24px;
}

.faq h2 {
    text-align: center;
    font-size: 48px;
}

.ques:hover {
    background-color: gray;
}

.gues svg {
    filter: invert(1);
}

.ques {
    display: flex;
    background-color: #2d2d2d;
    padding: 12px;
    max-width: 60vw;
    margin: 34px auto;
    justify-content: space-between;
    cursor: pointer;
    transition: all 1s ease-out;
}

footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: white;
    max-width: 60vw;
    margin: auto;
    padding: 34px;
}


@media screen and (max-width: 1300px) {
    .footer{
        display: grid;
        grid-template-columns: 1fr 1fr;
   
    }
}

.footer-item {
    display: flex;
    flex-direction: column;
}

footer a {
    text-decoration: none;
    color: white;
    font-size: 24px;
    gap: 23px;
    margin-top: 10px;
    display: flex;
    align-items: center;
}



Note - This Website Is Only responsible in some devices.




RESULT







Comments

Post a Comment

Popular posts from this blog

Launching Page(Javascript)

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Launching </ title >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < div class = "container" >         < img src = "logo.png" alt = "" class = "logo" >         < div class = "content" >             < p > Website Is Under Maintenance </ p >             < h1 > We're < span > Launching </ span > Soon </ h1 >             < div class = "time" >                 < div >                  ...
Read more

AMAZON HOME PAGE CLONE PROJECT

Image
HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Amazon </ title >     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity = "sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin = "anonymous" referrerpolicy = "no-referrer" />     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < header >         < div class = "navbar border" >             < div class = "nav-logo border" >                 < div class = "logo" ></ div >             ...
Read more

Array in function Javascript

  const ranger = [ "Troy" , "Jake" , "Noah" ] const rangerd = [ "Tylor" , "Chase" , "Koda" ] // ranger.push(rangerd) // const allranger = ranger.concat(rangerd) // console.log(allranger); // console.log(Array.isArray("Debadatta")); // console.log(Array.from("Debadatta")); // console.log(Array.isArray({name:"Debadatta"}));// Intresting let score1 = 100 let score2 = 200 let score3 = 300 console . log ( Array . of ( score1 , score2 , score3 ));
Read more