HTML5 22
Hulu Clone Guest on 17th July 2021 11:42:12 AM
  • Copy
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="css/style.css" />
  8.     <title>Stream TV and Movies Live and Online | Hulu</title>
  9.   </head>
  10.   <body>
  11.     <header class="header">
  12.       <nav>
  13.         <ul>
  14.           <li>
  15.             <button class="login-btn">Log In</button>
  16.           </li>
  17.         </ul>
  18.       </nav>
  19.  
  20.       <div class="header-content">
  21.         <h4>Try up to one month free</h4>
  22.         <img src="img/logo.png" alt="Hulu" class="logo" />
  23.         <div class="header-text-1">Watch thousands of TV shows and movies.</div>
  24.         <div class="header-text-2">
  25.           HBO Max™, SHOWTIME®, CINEMAX® and STARZ® available as add-ons.
  26.         </div>
  27.         <button class="btn btn-cta">Start Your Free Trial</button>
  28.         <div class="legal-text">
  29.           Free trial for new & eligible returning subscribers only.
  30.        </div>
  31.      </div>
  32.    </header>
  33.  
  34.    <section class="sub-header">
  35.      <img src="img/logos.png" alt="" />
  36.      <div>
  37.        <h4>Bundle with any Hulu plan & save</h4>
  38.        <h3>Get Hulu, Disney+, and ESPN+.</h3>
  39.        <a href="#" class="sub-link">Details</a>
  40.      </div>
  41.      <div>
  42.        <a href="#" class="btn btn-outline">Get Bundle</a>
  43.        <a href="#" class="sub-link">Terms apply</a>
  44.      </div>
  45.    </section>
  46.  
  47.    <section class="categories">
  48.      <h4>Included in all plans</h4>
  49.      <div class="text-xl">All The TV You Love</div>
  50.      <div class="sub-text">
  51.        Stream full seasons of exclusive series, current-season episodes, hit
  52.        movies, Hulu Originals, kids shows, and more.
  53.      </div>
  54.  
  55.      <div class="covers">
  56.        <div class="cover-1">
  57.          <div class="cover-grad"></div>
  58.          <div class="cover-text">
  59.            <div class="sub-title">Past & Current Seasons</div>
  60.            <h3>TV Shows</h3>
  61.          </div>
  62.        </div>
  63.        <div class="cover-2">
  64.          <div class="cover-grad"></div>
  65.          <div class="cover-text">
  66.            <div class="sub-title">New & Classics</div>
  67.            <h3>Movies</h3>
  68.          </div>
  69.        </div>
  70.        <div class="cover-3">
  71.          <div class="cover-grad"></div>
  72.          <div class="cover-text">
  73.            <div class="sub-title">Groundbreaking</div>
  74.            <h3>Hulu Originals</h3>
  75.          </div>
  76.        </div>
  77.        <div class="cover-4">
  78.          <div class="cover-grad"></div>
  79.          <div class="cover-text">
  80.            <div class="sub-title">Add-On</div>
  81.            <h3>Premiums</h3>
  82.          </div>
  83.        </div>
  84.      </div>
  85.    </section>
  86.  
  87.    <section class="live">
  88.      <div class="live-border">
  89.        <h4>Hulu + Live TV</h4>
  90.        <div class="text-xl">Live TV Makes It Better</div>
  91.        <div class="sub-text">
  92.          Make the switch from cable. Get 75+ top channels with your favorite
  93.          live sports, news, and events - plus the entire Hulu streaming
  94.          library.
  95.        </div>
  96.        <div class="legal-text">
  97.          Live TV plan required. Regional restrictions, blackouts and additional
  98.          terms apply. See details
  99.        </div>
  100.        <a href="#">View Channels in Your Area</a>
  101.      </div>
  102.    </section>
  103.  
  104.    <section class="live-sports">
  105.      <div class="live-sports-content">
  106.        <div class="text-xl">Live Sports</div>
  107.        <div class="sub-text">
  108.          Catch your games at home or on the go. Stream live games from major
  109.          college and pro leagues including the NCAA®, NBA, NHL, NFL, and more.
  110.        </div>
  111.  
  112.        <div class="live-sports-logos">
  113.          <div>
  114.            <img src="img/live-sports-logo-1.png" alt="" />
  115.          </div>
  116.          <div>
  117.            <img src="img/live-sports-logo-2.png" alt="" />
  118.          </div>
  119.          <div>
  120.            <img src="img/live-sports-logo-3.svg" alt="" />
  121.          </div>
  122.          <div>
  123.            <img src="img/live-sports-logo-4.png" alt="" />
  124.          </div>
  125.        </div>
  126.  
  127.        <div class="legal-text">
  128.          Live TV plan required. Regional restrictions, blackouts and additional
  129.          terms apply. See details
  130.        </div>
  131.      </div>
  132.    </section>
  133.  
  134.    <footer class="footer">
  135.      <div class="footer-container">
  136.        <div class="footer-lists">
  137.          <ul>
  138.            <li class="list-head">BROWSE</li>
  139.            <li><a href="#">Streaming Library</a></li>
  140.            <li><a href="#">Live TV</a></li>
  141.            <li><a href="#">Live News</a></li>
  142.            <li><a href="#">Live Sports</a></li>
  143.          </ul>
  144.          <ul>
  145.            <li><a href="#">TV Shows</a></li>
  146.            <li><a href="#">Movies</a></li>
  147.            <li><a href="#">Originals</a></li>
  148.            <li><a href="#">Networks</a></li>
  149.            <li><a href="#">Kids</a></li>
  150.            <li><a href="#">FX on Hulu</a></li>
  151.          </ul>
  152.          <ul>
  153.            <li><a href="#">Hulu, Disney+, and ESPN+</a></li>
  154.            <li><a href="#">Disney Bundle</a></li>
  155.            <li><a href="#">HBO Max</a></li>
  156.            <li><a href="#">Cinimax</a></li>
  157.            <li><a href="#">Showtime</a></li>
  158.            <li><a href="#">STARZ</a></li>
  159.          </ul>
  160.          <ul>
  161.            <li class="list-head">HELP</li>
  162.            <li><a href="#">Account & Billing</a></li>
  163.            <li><a href="#">Plans & Pricing</a></li>
  164.            <li><a href="#">Supported Devices</a></li>
  165.            <li><a href="#">Accesibility</a></li>
  166.          </ul>
  167.          <ul>
  168.            <li class="list-head">ABOUT US</li>
  169.            <li><a href="#">Press</a></li>
  170.            <li><a href="#">Jobs</a></li>
  171.            <li><a href="#">Contact</a></li>
  172.          </ul>
  173.        </div>
  174.        <div class="divider"></div>
  175.  
  176.        <div class="social-icons">
  177.          <a href="#"><img src="img/facebook.svg" alt="" /></a>
  178.          <a href="#"><img src="img/twitter.svg" alt="" /></a>
  179.          <a href="#"><img src="img/youtube.svg" alt="" /></a>
  180.          <a href="#"><img src="img/instagram.svg" alt="" /></a>
  181.        </div>
  182.      </div>
  183.    </footer>
  184.  
  185.    <div class="modal">
  186.      <div class="modal-box">
  187.        <div class="modal-body">
  188.          <h3>Log In</h3>
  189.          <form>
  190.            <div class="form-control">
  191.              <label for="email">Email</label>
  192.              <input type="email" id="email" />
  193.            </div>
  194.            <div class="form-control">
  195.              <label for="password">Password</label>
  196.              <input type="password" id="password" />
  197.            </div>
  198.            <p><a href="#">Forgot your email or password</a></p>
  199.            <button class="btn btn-dark">Log In</button>
  200.          </form>
  201.        </div>
  202.        <div class="modal-footer">
  203.          <p>Don't have an account? <a href="#">Start your free trial</a></p>
  204.        </div>
  205.        <img class="close" src="img/close.svg" alt="close" />
  206.      </div>
  207.    </div>
  208.  
  209.    <script src="js/main.js"></script>
  210.  </body>
  211. </html>