Criando cardJogo.

AlexSimao · Jul 20, 2023 · 704af9e · 704af9e
1 parent dbf1c3a
commit 704af9e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/Desafios/desafio-08/imagens/imgJogo.jpg b/Desafios/desafio-08/imagens/imgJogo.jpg
diff --git a/Desafios/desafio-08/script.js b/Desafios/desafio-08/script.js
@@ -48,16 +48,20 @@ document.write(`
     `)
 //======================================================
 
-document.write("<h2> Objeto jogo </h2>")
-
 const jogoObj = {
     jogo: "The Last Of Us 2",
     desenvolvedora: "Naughty Dog",
     anoLancamento: 2020
 }
 
 document.write(`
-    <p> Jogo: ${jogoObj.jogo} </p>
-    <p> Desenvolvido por: ${jogoObj.desenvolvedora} </p>
-    <p> Ano de Lançamento: ${jogoObj.anoLancamento} </p>
+    <div class="cardJogo">
+        <h2> jogo </h2>
+        <p class="titulo"> Título: </p>
+        <p class="conteudo"> ${jogoObj.jogo} </p>
+        <p class="titulo"> Desenvolvido por: </p>
+        <p class="conteudo"> ${jogoObj.desenvolvedora} </p>
+        <p class="titulo"> Ano de Lançamento: </p>
+        <p class="conteudo"> ${jogoObj.anoLancamento} </p>
+    </div>
 `)
diff --git a/Desafios/desafio-08/style.css b/Desafios/desafio-08/style.css
@@ -78,4 +78,35 @@ body{
 
 .arrayMeses p{
     margin: 5px 0 0 0;
+}
+
+.cardJogo{
+    width: 300px;
+    height: 300px;
+    margin: 30px 0 0 0;
+    padding: 15px;
+    background-image: url(imagens/imgJogo.jpg);
+    background-position: center center;
+    background-size: cover;
+    border: 2px solid #303030;
+    border-radius: 15px;
+}
+
+.cardJogo h2{
+    color: white;
+    text-shadow: 1.5px 1.5px 0 black;
+    margin: 5px 0 30px 0;
+}
+
+.titulo{
+    color: white;
+    text-shadow: 1px 1px 0 black;
+    margin: 5px 0 3px 0;
+}
+
+.conteudo{
+    background-color: rgba(255, 255, 255, 0.7);
+    padding: 10px;
+    border: 1px solid #303030;
+    border-radius: 8px;
 }