index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Netflix India - Watch TV Shows Online, And Watch Movies Online</title>
    <link rel="shortcut icon" href="./assets/favicon.svg" type="image/x-icon" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="overlay"></div>
    <header>
    <nav>
        <img src="./assets/logo.png" alt="">
        <div class="nav-info">
            <button id="btn-1">
                <img src="./assets/language-logo.svg" alt="">
                <span>English</span>
                <img src="./assets/lang-drop-down.svg" alt="">
            </button>
            <button  id="btn-2"> Sign In</button>
        </div> 
    </nav>
        <div class ="hero">
            <h1>Unlimited movies,<br>TV shows and more</h1>
            <p id="p1">Starts at ₹149. Cancel at any time.</p>
            <p id="p2">Ready to watch? Enter your email to create or restart your membership</p>
            <div class="details-for-login">    
                 <input type="email" placeholder="Email address" required>
                 <button ><span>Get Started</span>
                  <img src="./assets/get-start-arrow.svg" alt="">
                  </button>
                </div>
        </div>
    </header>
    <div id ="curve-divider"></div>
    <div id="trending">
        <h2>Trending Now</h2>
        <div id="card-cont">
          <div class="card c1">
            <div class="num">1</div>
          </div>
          <div class="card c2">
            <div class="num">2</div>
          </div>
          <div class="card c3">
            <div class="num">3</div>
          </div>
          <div class="card c4">
            <div class="num">4</div>
          </div>
          <div class="card c5">
            <div class="num">5</div>
          </div>
        </div>
      </div>
    <div class="join">
        <h2>More reason to join</h2>
        <div class="feat-count">
            <div class ="feat-card">
                <h3>Enjoy on your TV</h3>
                <p>
                  Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray
                  players and more.
                </p>
                <img src="./assets/r1.svg" alt="" />
              </div>
              <div class="feat-card">
                <h3>Download your shows to watch offline</h3>
                <p>Save your favourites easily and always have something to watch.</p>
                <img src="./assets/r2.svg" alt="" />
              </div>
              <div class="feat-card">
                <h3>Watch everywhere</h3>
                <p>
                  Stream unlimited movies and TV shows on your phone, tablet, laptop
                  and TV.
                </p>
                <img src="./assets/r3.svg" alt="" />
              </div>
              <div class="feat-card">
                <h3>Create profiles for kids</h3>
                <p>
                  Send kids on adventures with their favourite characters in a space
                  made just for them — free with your membership.
                </p>
                <img src="./assets/r4.svg" alt="" />
              </div>
            
            </div>
          </div> 
        
        </div>
    </div>
    <div class="faq">
        <h3>Frequently Asked Questions</h3>
        <div class="faq-count">
          <div class="faq-qa">
            <p>What is Netflix?</p>
            <img src="./assets/plus.svg" alt="" />
          </div>
          <div class="faq-qa">
            <p>How much does Netflix cost?</p>
            <img src="./assets/plus.svg" alt="" />
          </div>
          <div class="faq-qa">
            <p>Where can I watch?</p>
            <img src="./assets/plus.svg" alt="" />
          </div>
          <div class="faq-qa">
            <p>How do I cancel?</p>
            <img src="./assets/plus.svg" alt="" />
          </div>
          <div class="faq-qa">
            <p>What can I watch on Netflix?</p>
            <img src="./assets/plus.svg" alt="" />
          </div>
          <div class="faq-qa">
            <p>Is Netflix good for kids?</p>
            <img src="./assets/plus.svg" alt="" />
          </div>
        </div>
      </div>
      <div class="another-cta">
        <p>
          Ready to watch? Enter your email to create or restart your membership.
        </p>
        <div class ="details-for-login">
          <input type="email" placeholder="Email address" />
          <button>
            <span>Get Started</span>
            <img src="./assets/get-start-arrow.svg" alt="" />
          </button>
        </div>
      </div>
      <footer>
        <h4>Questions? Call 000-800-919-1743</h4>
        <div class ="link-cont">
          <div class="link-box">
            <a href="#">FAQ</a>
            <a href="#">Investor Relations</a>
            <a href="#">Privacy</a>
            <a href="#">Speed Test</a>
          </div>
          <div class="link-box">
            <a href="#">Help Centre</a>
            <a href="#">Jobs</a>
            <a href="#">Cookie Preferences</a>
            <a href="#">Legal Notices</a>
          </div>
          <div class="link-box">
            <a href="#">Account</a>
            <a href="#">Ways to Watch</a>
            <a href="#">Corporate Information</a>
            <a href="#">Only on Netflix</a>
          </div>
          <div class="link-box">
            <a href="#">Media Centre</a>
            <a href="#">Terms of Use</a>
            <a href="#">Contact Us</a>
          </div>
        </div>
        <button class="btn-1">
          <img src="./assets/language-logo.svg" alt="" /><span>English</span
          ><img src="./assets/lang-drop-down.svg" alt="" />
        </button>
        <h5>Netflix India</h5>
      </footer>
</body>
</html>