# Netflix clone V1 (HTML & CSS)![](https://i.imgur.com/7gjPp5i.png) ### Tasks - [x] Build Html structure ```html= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Netflix</title> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <div class="wrapper"> </div> </body> </html> ``` #### coverage - [x] Header ```html= <header> </header> ``` - [x] logo ```html= <div class="netflixLogo"> <a id="logo" href="#home"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/logo.PNG?raw=true" alt="Logo Image"></a> </div ``` - [x] Navbar ```html= <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> </nav> ``` - [x] Main Body ```html= <section class="main-container"> </section> ``` - [x] Popular on Netflix ```html= <h1>Popular on Netflix</h1> <div class="box"> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/47781/p47781_v_v8_ac.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/23342/p23342_v_v8_ab.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/4232/p4232_v_v8_aa.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/39804/p39804_v_v8_ab.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/40518/p40518_v_v8_aa.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/42171/p42171_v_v8_ab.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/46755/p46755_v_v8_aa.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/58122/p58122_v_v8_aa.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/93417/p93417_v_v8_aa.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/45367/p45367_v_v8_aa.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/11850/p11850_v_v8_aa.jpg" alt=""></a> </div> ``` - [x] Trending Now ```html= <h1>Trending Now</h1> <div class="box"> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/37991/p37991_v_v8_aa.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/23342/p23342_v_v8_ab.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/43468/p43468_v_v8_aa.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/4232/p4232_v_v8_aa.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/39804/p39804_v_v8_ab.jpg" alt=""></a> <a href=""><img src="https://www.gstatic.com/tv/thumb/v22vodart/40518/p40518_v_v8_aa.jpg" alt=""></a> </div> ``` - [ ] Footer - [ ] style using css grid #### coverage - [x] css rules - [ ] css selectors - [x] css variables - [ ] media queries ### Resources #### primary colors ```css= :root { --primary: #141414; --light: #f3f3f3; --dark: #686868; } html, body { width: 100vw; min-height: 100vh; margin: 0; padding: 0; background-color: var(--primary); color: var(--light); font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; line-height: 1.4; } .wrapper { margin: 0; padding: 0; } img { max-width: 100%; } /*HEADER*/ header { padding: 20px 20px 0 20px; position: fixed; top: 0; display: grid; grid-gap: 5px; grid-template-columns: 1fr 4fr 1fr; grid-template-areas: "nt mn mn sb . . . "; background-color: var(--primary); width: 100%; margin-bottom: 0px; } .netflixLogo { grid-area: nt; object-fit: cover; width: 100px; max-height: 100%; padding-left: 30px; padding-top: 0px; } .netflixLogo img { height: 35px; } #logo { color: #e50914; margin: 0; padding: 0; } .main-nav { grid-area: mn; padding: 0 30px 0 20px; } .main-nav a { color:var(--light); text-decoration: none; margin: 5px; } .main-nav a:hover { color: var(--dark); } .main-container { padding: 50px; } h1 { padding-top: 60px; } .box { display:grid; grid-gap: 20; grid-template-columns: repeat(6, minmax(100px, 1fr)); } .box a { transition: transform 0.3s; } .box a:hover { transition: transform 0.3s; -ms-transform: scale (1.4); -webkit-transform: scale(1.4); transform: scale(1.4); } .box img { border-radius: 2px; height: 300px; } ```