adicionando estruturação inicial da seção "seu próximo jogo favorito"

GuhStvo · Feb 20, 2024 · a076d16 · a076d16
1 parent 8625d98
commit a076d16
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -77,5 +77,22 @@ <h3>Faça o seu</h3>
         </article>
     </section>
 
+    <section id="next-gamefav">
+
+        <h2>Descubra seu próximo jogo favorito</h2>
+
+        <div class="container">
+
+            <div class="card-wraper">
+                <img src="assets/imgs/section01/A-Little-to-the-Left.png" alt="">
+                <span>
+                    <h6>A Little to the Left</h6>
+                    <p>Puzzle e curiosidade</p>
+                </span>
+            </div>
+
+        </div>
+    </section>
+
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -245,3 +245,56 @@ header #header-portal nav img {
     content: url(assets/icons/seta.svg);
     margin-left: 14px;
 }
+
+/* |||||||||||||||||||||||||||||||| */
+
+#next-gamefav {
+    margin: 80px 33px 0;
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    gap: 55px;
+}
+
+#next-gamefav h2 {
+    text-align: center;
+}
+
+#next-gamefav .card-wraper img {
+    max-width: 266px;
+    min-height: 400px;
+}
+
+#next-gamefav .card-wraper {
+    position: relative;
+}
+
+#next-gamefav .card-wraper span {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    position: absolute;
+    bottom: 35px;
+    left: 23px;
+    right: 23px;
+}
+
+#next-gamefav span>h6 {
+    color: #FFF;
+    font-family: "Segoe UI";
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+}
+
+#next-gamefav span>p {
+    color: #FFF;
+    font-family: "Segoe UI";
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+}