NETFLIX
<!DOCTYPE html>
<html>
  <head>
    <title>Netflix India - Watch TV Shows Online , Watch Movies Online</title>
  </head>
  <body>
    <div class="root">
      <nav class="navbar">
        <img class="img-logo" src="https://download.logo.wine/logo/Netflix/Netflix-Logo.wine.png" alt="Netflix"/>
        <div class="btn-signin">Sign In</div>
      </nav>
      <div class="main-content">
        <div class="main-title-content">
          <h1 class="main-title">Unlimited Movies, TV <br>shows and more</h1>
          <h2 class="sub-title">Watch anywhere. Cancel anytime.</h2>
          <p class="main-call-to-action">Ready to watch? Enter your email to create or restart your membership.
</p>
        </div>
        <div class="main-email-container">
          <input class="main-email-container-input" type="text" placeholder="Email address">
          <div class="btn-get-started">Get Started ></div>
        </div>
      </div>
    </div>
  </body>
</html>
body{
  margin: 0px;
  padding: 0px;
  overflow-y: hidden;
}
.root{
  background-size: cover;
  background-image: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)),url("https://assets.nflxext.com/ffe/siteui/vlv3/0bd3a69d-6790-4edc-9818-1c8c558946c2/e1a8a32a-a07a-4bae-965a-9b218881763e/IN-en-20220329-popsignuptwoweeks-perspective_alpha_website_medium.jpg");
  background-position: center;
  background-repeat: no-repeat;
}
.navbar{
  padding-top: 1%;
  padding-left: 2vw;
  padding-right: 4vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 10vh;
}
.img-logo{
  width: 14%;
  color: #e50914;
}
.btn-signin{
  background-color: #e50914;
  color: #fff;
  padding-top: 8px;
  padding-right: 20px;
  padding-bottom: 8px;
  padding-left: 20px;
  border-radius: 5px;
  cursor: pointer;
  width: fit-content;
}
.main-content{
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.main-title-content{
  color: #fff;
  text-align: center;
  width: 50%;
}
.main-title{
  font-size: 3.2em;
}
.sub-title{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  margin-bottom: 30px;
}
.main-call-to-action{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
}
.main-email-container{
  width: 55%;
  height: fit-content;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.main-email-container-input{
  outline: none;
  border: none;
  padding: 20px 10px;
  font-size: 1em;
}
.btn-get-started{
  cursor: pointer;
  padding: 20px 32px;
  font-family: Arial, Helvetica, sans-serif;
  height: fit-content;
  background-color: #e50914;
  color: #fff;
  font-size: 1.4em;
  text-transform: uppercase;
}
.btn-get-started:hover{
  background-color: #ff0b18;
}
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */
  • Archivos
  • Index
  • Style
  • Script
  • README
  • CDN Agregar
HTML
PLEASE WAIT...