public/index/index.html

<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Netflix Catalog | JS Expert Week</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="./lib/js/fontawesome.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./lib/css/index.css">
</head>
<body>
  <div class="wrapper">

    <!-- HEADER -->
    <header>
      <div class="netflixLogo">
        <a id="logo" href="#home"><img src="./lib/img/logo.PNG" alt="Logo Image"></a>
      </div>      
      <nav class="main-nav">                
        <a href="#home">Home</a>
        <a href="#tvShows">TV Shows</a>
        <a href="#movies">Movies</a>
        <a href="#originals">Originals</a>
        <a href="#">Recently Added</a>
        <a target="_blank" href="https://codepen.io/cb2307/full/NzaOrm">Portfolio</a>        
      </nav>
      <nav class="sub-nav">
        <a href="#"><i class="fas fa-search sub-nav-logo"></i></a>
        <a href="#"><i class="fas fa-bell sub-nav-logo"></i></a>
        <a href="#">Account</a>        
      </nav>      
    </header>
    <!-- END OF HEADER -->
    
    <!-- MAIN CONTAINER -->
    <section class="main-container" >
      <div class="location" id="home">
          <h1 id="home">Popular on Netflix</h1>
          <div class="box">
            <a href="./../bandersnatch/index.html"><img src="./lib/img/jsexpert.png" alt="jsexpert"></a>
            <a href="#"><img src="./lib/img/p2.PNG" alt=""></a>
            <a href="#"><img src="./lib/img/p3.PNG" alt=""></a>
            <a href="#"><img src="./lib/img/p4.PNG" alt=""></a>
            <a href="#"><img src="./lib/img/p5.PNG" alt=""></a>
            <a href="#"><img src="./lib/img/p6.PNG" alt=""></a>
    
            <a href="#"><img src="./lib/img/p7.PNG" alt=""></a>
            <a href="#"><img src="./lib/img/p8.PNG" alt=""></a>
            <a href="#"><img src="./lib/img/p9.PNG" alt=""></a>
            <a href="#"><img src="./lib/img/p10.PNG" alt=""></a>
            <a href="#"><img src="./lib/img/p11.PNG" alt=""></a>
            <a href="#"><img src="./lib/img/p12.PNG" alt=""></a>        
          </div>
      </div>
      

      <h1 id="myList">Trending Now</h1>
      <div class="box">
        <a href="./../bandersnatch/index.html"><img src="./lib/img/jsexpert.png" alt="jsexpert"></a>
        <a href="#"><img src="./lib/img/t2.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/t3.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/t4.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/t5.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/t6.PNG" alt=""></a>                  
      </div>
      
      <h1 id="tvShows">TV Shows</h1>
      <div class="box">
        <a href="./../bandersnatch/index.html"><img src="./lib/img/jsexpert.png" alt="jsexpert"></a>
        <a href="#"><img src="./lib/img/tv2.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/tv3.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/tv4.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/tv5.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/tv6.PNG" alt=""></a>

        <a href="#"><img src="./lib/img/tv7.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/tv8.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/tv9.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/tv10.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/tv11.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/tv12.PNG" alt=""></a>              
      </div>
      

      <h1 id="movies">Blockbuster Action & Adventure</h1>
      <div class="box">
        <a href="#"><img src="./lib/img/m1.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/m2.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/m3.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/m4.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/m5.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/m6.PNG" alt=""></a>                
      </div>

      <h1 id="originals">Netflix Originals</h1>
      <div class="box">
        <a href="#"><img src="./lib/img/o1.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/o2.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/o3.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/o4.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/o5.PNG" alt=""></a>
        <a href="#"><img src="./lib/img/o6.PNG" alt=""></a>                
      </div>
     
    <!-- END OF MAIN CONTAINER -->

    <!-- LINKS -->
    <section class="link">
      <div class="logos">
        <a href="#"><i class="fab fa-facebook-square fa-2x logo"></i></a>
        <a href="#"><i class="fab fa-instagram fa-2x logo"></i></a>
        <a href="#"><i class="fab fa-twitter fa-2x logo"></i></a>
        <a href="#"><i class="fab fa-youtube fa-2x logo"></i></a>
      </div>
      <div class="sub-links">
        <ul>
          <li><a href="#">Audio and Subtitles</a></li>
          <li><a href="#">Audio Description</a></li>
          <li><a href="#">Help Center</a></li>
          <li><a href="#">Gift Cards</a></li>
          <li><a href="#">Media Center</a></li>
          <li><a href="#">Investor Relations</a></li>
          <li><a href="#">Jobs</a></li>
          <li><a href="#">Terms of Use</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Legal Notices</a></li>
          <li><a href="#">Corporate Information</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </section>
    <!-- END OF LINKS -->

    <!-- FOOTER -->
    <footer>
      <p>&copy Erick Wendel
      </p>
      <p><a href="https://codepen.io/cb2307/pen/XYxyeY" target="__blank">Acesse o Criador do Layout!</a></p>
    </footer>
  </div>
</body>
</html>