codesandbox · bergsantos0 · Nov 2, 2023
diff --git a/img/Vector.png b/img/Vector.png
diff --git a/img/image 1.png b/img/image 1.png
diff --git a/img/image 10.png b/img/image 10.png
diff --git a/img/image 11.png b/img/image 11.png
diff --git a/img/image 12.png b/img/image 12.png
diff --git a/img/image 2.png b/img/image 2.png
diff --git a/img/image 3.png b/img/image 3.png
diff --git a/img/image 4.png b/img/image 4.png
diff --git a/img/image 5.png b/img/image 5.png
diff --git a/img/image 6.png b/img/image 6.png
diff --git a/img/image 7.png b/img/image 7.png
diff --git a/img/image 8.png b/img/image 8.png
diff --git a/img/image 9.png b/img/image 9.png
diff --git a/img/youtube--v1 1.png b/img/youtube--v1 1.png
diff --git a/index.html b/index.html
@@ -1,12 +1,69 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
+<html lang="pt-br">
+<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Static Template</title>
-  </head>
-  <body>
-    <h1>This is a static template, there is no bundler or bundling involved!</h1>
-  </body>
+    <link rel="stylesheet" href="style.css">
+    <title>Desafio 2</title>
+</head>
+<body>
+
+    <header>
+        <nav class="header-nav">
+            <ul>
+               <a href="">Inicio</a>
+               <a href="">Filmes</a>
+               <a href="">Series</a>
+            </ul>
+        </nav>
+        <div class="header-banner">
+            <img class="prime" src="img/image 1.png" alt="primevideo">
+        </div>
+    </header>
+
+<main>
+
+<section class="film"> 
+
+    <div class="seta"><img src="img/image 10.png" alt="seta"></div>
+
+<div class="films"><img src="img/image 2.png" alt="the boys">
+<p>The Boys</p></div>
+<div class="films"><img src="img/image 3.png" alt="top gun">
+<p>Top Gun</p></div>
+<div class="films"><img src="img/image 4.png" alt="Interstellar">
+<p>Interstellar</p></div>
+<div class="seta"><img src="img/image 9.png" alt="seta"></div>
+</section>
+<section class="film">
+
+ <div class="seta"><img src="img/image 11.png" alt="seta"></div>
+<div class="films"><img src="img/image 5.png" alt="o Senhor dos aneis">
+<p>O Senhor dos Aneis</p></div>
+<div class="films"><img src="img/image 6.png" alt="todo Mundo Odeia O Cris">
+<p>Todo Mundo Odeia O Cris</p></div>
+<div class="films"><img src="img/image 7.png" alt="the Bigbang theory">
+<p>The Bigbang theory</p></div>
+<div class="seta"><img src="img/image 12.png" alt="seta"></div>
+
+</section>
+
+</main>
+<footer class="main">
+    <div class="text">
+        <p>
+            © Prime Video © Prime•Video © & ™ Aneis do Poder LTD © 2022 MARVERICK. Reservados todos os direitos, Prime Video
+        </p>
+
+        <div class="icons">
+           <img class="logo" src="img/youtube--v1 1.png" alt="Logo youtube"></a>
+           <img class="logo" src="img/Vector.png" alt="lOgo Instragram"></a>
+         <img class="logo" src="img/image 8.png" alt="Logo Prime•Video"></a>
+        </div>
+    </div>
+</footer>
+
+
+
+</body>
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "static",
+  "name": "desafio-2",
   "version": "1.0.0",
-  "description": "This is a static template with no bundling",
+  "description": "",
   "main": "index.html",
   "scripts": {
     "start": "serve",
@@ -11,11 +11,7 @@
     "type": "git",
     "url": "git+https://github.com/codesandbox-app/static-template.git"
   },
-  "keywords": [
-    "static",
-    "template",
-    "codesandbox"
-  ],
+  "keywords": [],
   "author": "Ives van Hoorne",
   "license": "MIT",
   "bugs": {
@@ -25,4 +21,4 @@
   "devDependencies": {
     "serve": "^11.2.0"
   }
-}
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,86 @@
+* {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+.header-nav ul {
+  display: flex;
+  gap: 15rem;
+}
+a {
+  color: #ffffff;
+  cursor: pointer;
+  text-decoration: none;
+  font-family: sans-serif;
+}
+
+.header-nav {
+  background-color: #1e1e1e;
+  width: 100%;
+  height: 6.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.header-banner {
+  width: 100vw;
+  height: 50vh;
+  background-color: #1798ff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.prime {
+  width: 70vw;
+  height: 50vh;
+}
+
+a {
+  text-decoration: none;
+  color: aliceblue;
+  padding: 10px;
+  font-family: sans-serif;
+}
+
+.seta img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 5vw;
+  height: 8vh;
+}
+.films img {
+  width: 20vw;
+  height: 50vh;
+}
+.film {
+  font-weight: bolder;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  text-align: center;
+  margin-top: 20px;
+}
+.logo {
+  width: 5vw;
+  height: 8vh;
+  margin-left: 20px;
+}
+.text {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+}
+.main {
+  display: flex;
+  justify-content: center;
+  background-color: #1e1e1e;
+  color: #ffffff;
+  width: 100vw;
+  height: 20vh;
+  margin-top: 2rem;
+}