update

Pré-finalização do menu galeria de fotos
Dreamer2h0 · Nov 18, 2023 · ab91c3d · ab91c3d
1 parent e366a4c
commit ab91c3d
Show file tree

Hide file tree

Showing 18 changed files with 176 additions and 11 deletions.
diff --git a/contato.html b/contato.html
diff --git a/galeria-fotos.html b/galeria-fotos.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="pt-br">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Dunk Blog</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <!--navbar start-->
+    <nav class="navbar navbar-expand-lg bg-body-tertiary" id="topo">
+        <div class="container-fluid" id="container-fluid">
+          <nav class="navbar bg-body-tertiary">
+            <div class="container-fluid">
+              <!--Logo-->
+              <a class="navbar-brand" href="index.html" style="color: #ff5900;">
+                <i class="fa-solid fa-xl fa-basketball d-inline-block align-text-top" alt="Logo" width="30" height="24" style="color: #ff5900; margin-top: 14px;"></i>
+                <span class="logo">Dunk Blog</span>
+              </a>
+            </div>
+          </nav>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <!--Nav Items-->
+              <li class="nav-item">
+                <a class="nav-link" aria-current="page" href="index.html">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="videos.html">Vídeos</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" href="#">Galeria de Fotos</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Contato</a>
+              </li>
+              <!--Nav Item disabled-->
+              <li class="nav-item">
+                <a class="nav-link disabled" aria-disabled="true">Em Breve: Jogadores</a>
+              </li>
+              <!--Dropdown Nav Item-->                
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <i class="fa-solid fa-gear" style="color: #ff5900;"></i>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="#">Tema</a></li>
+                    <li><a class="dropdown-item" href="#">Idioma</a></li>
+                  </ul>
+                </li>
+            </ul>
+            <!--Search Item-->
+            <form class="d-flex" role="search">
+              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+              <button class="btn btn-outline-success" type="submit">Search</button>
+            </form>
+          </div>
+        </div>
+    </nav>
+    <!--navbar end-->
+
+    <main class="container">
+      <h3 style="font-family: 'Poppins', sans-serif; font-weight: 600;" class="mb-3">Momentos Marcantes</h3>
+
+      <div class="gallery">
+        <img src="img/fim-da-carreira-de-jordan-no-bulls.jpg">
+        <img src="img/100-wilt-chamberlain.jpg">
+        <img src="img/dr-chegou.jpg">
+        <img src="img/heatles-nas-alturas.jpg">
+        <img src="img/jerry-west-pose.jpg">
+        <img src="img/jordan-voa.jpg">
+        <img src="img/kobe-e-shaq.jpg">
+        <img src="img/kobe-enterra-de-costas.jpg">
+        <img src="img/lagrimas-do-maior.jpg">
+        <img src="img/lebron-james-cleveland.jpg">
+        <img src="img/ray-allen-corda-amarela.jpg">
+        <img src="img/vinsanity.jpg">
+        <img src="img/bird-vs-magic.jpg">
+      </div>
+
+    </main>
+    <footer class="py-5 text-center text-body-secondary bg-body-tertiary">
+            <p>
+                Blog feito por <a href="https://www.instagram.com/gabd.uart/" target="_blank">Gabriel</a>.
+            </p>
+            <p class="mb-0">
+                <a href="#topo">voltar ao topo</a>
+            </p>
+    </footer>
+
+    <!-- JavaScript -->
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const gallery = document.querySelector('.gallery');
+        const images = gallery.querySelectorAll('img');
+        const lightbox = document.createElement('div');
+        lightbox.classList.add('lightbox');
+        document.body.appendChild(lightbox);
+
+        images.forEach(img => {
+          img.addEventListener('click', function () {
+            // Exibir a imagem clicada no lightbox
+            const imgClone = img.cloneNode();
+            lightbox.innerHTML = ''; // Limpar conteúdo anterior
+            lightbox.appendChild(imgClone);
+            lightbox.style.display = 'flex';
+          });
+        });
+
+        // Fechar o lightbox ao clicar fora da imagem
+        lightbox.addEventListener('click', function () {
+          lightbox.style.display = 'none';
+        });
+      });
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+  </body>
+</html>
diff --git a/img/100-wilt-chamberlain.jpg b/img/100-wilt-chamberlain.jpg
diff --git a/img/bird-vs-magic.jpg b/img/bird-vs-magic.jpg
diff --git a/img/dr-chegou.jpg b/img/dr-chegou.jpg
diff --git a/img/fim-da-carreira-de-jordan-no-bulls.jpg b/img/fim-da-carreira-de-jordan-no-bulls.jpg
diff --git a/img/heatles-nas-alturas.jpg b/img/heatles-nas-alturas.jpg
diff --git a/img/jerry-west-pose.jpg b/img/jerry-west-pose.jpg
diff --git a/img/jordan-voa.jpg b/img/jordan-voa.jpg
diff --git a/img/kobe-e-shaq.jpg b/img/kobe-e-shaq.jpg
diff --git a/img/kobe-enterra-de-costas.jpg b/img/kobe-enterra-de-costas.jpg
diff --git a/img/lagrimas-do-maior.jpg b/img/lagrimas-do-maior.jpg
diff --git a/img/lebron-james-cleveland.jpg b/img/lebron-james-cleveland.jpg
diff --git a/img/ray-allen-corda-amarela.jpg b/img/ray-allen-corda-amarela.jpg
diff --git a/img/vinsanity.jpg b/img/vinsanity.jpg
diff --git a/index.html b/index.html
@@ -39,13 +39,10 @@
                 <a class="nav-link" href="videos.html">Vídeos</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#">Galeria de Fotos</a>
+                <a class="nav-link" href="galeria-fotos.html">Galeria de Fotos</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#">Contato</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Jogos</a>
+                <a class="nav-link" href="contato.html">Contato</a>
               </li>
               <!--Nav Item disabled-->
               <li class="nav-item">

diff --git a/style.css b/style.css
@@ -116,6 +116,7 @@ figure {
 
   .card-video {
     width: 100%;
+    height: 354px;
     max-width: none; /* Remove a largura máxima para ocupar toda a largura disponível */
     margin-right: 0; /* Remove a margem direita */
     margin-bottom: 2rem; /* Mantém a margem inferior para espaçamento */
@@ -124,6 +125,46 @@ figure {
   .card-videos, iframe {
     width: 100%;
     max-width: none; /* Remove a largura máxima para ocupar toda a largura disponível */
-    height: auto;
+    height: 214px;
   }
+}
+
+/*Menu galeria de fotos*/
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.gallery img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+  transition: transform 0.2s;
+  align-self: start;
+}
+
+.gallery img:hover {
+  transform: scale(1.1);
+}
+
+/* Lightbox (inicialmente escondido) */
+.lightbox {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9);
+  justify-content: center;
+  align-items: center;
+}
+
+.lightbox img {
+  max-width: 90%;
+  max-height: 90%;
+  border-radius: 8px;
 }
diff --git a/videos.html b/videos.html
@@ -40,13 +40,10 @@
                 <a class="nav-link active" href="videos.html">Vídeos</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#">Galeria de Fotos</a>
+                <a class="nav-link" href="galeria-fotos.html">Galeria de Fotos</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#">Contato</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Jogos</a>
+                <a class="nav-link" href="contato.html">Contato</a>
               </li>
               <!--Nav Item disabled-->
               <li class="nav-item">