criscdev · criscdev · Aug 4, 2025 · Aug 4, 2025 · Aug 4, 2025 · Aug 4, 2025
diff --git a/README.md b/README.md
@@ -1,7 +1,8 @@
 # 🌐 web-project
 
 Welcome to **web-project**!  
-This repository is a simple web project, crafted with care using **HTML** and **CSS**. If you're looking for a clear, straightforward, and human example of a website, you've come to the right place! 😄
+
+This repository is a simple web project, crafted with care using **HTML** and **CSS**. If you're looking for a clear example of a website, you've come to the right place! 😄
 
 ## 🚀 What is this project?
 

diff --git a/src/pages/pagina1/home.html b/src/pages/pagina1/home.html
@@ -9,7 +9,7 @@
 </head>
 <body>
     <header>
-        <div class="logo">Fragpunk | simple gallery</div>
+        <div class="logo">gallery</div>
         <nav class="menu">
             <a href="../pagina2/galeria-flexbox.html">Flexbox</a>
             <a href="../pagina3/galeria-grid.html">Grid</a>
@@ -18,7 +18,7 @@
     </header>
     <main>
         <h2>Bem-vindo ao nosso site</h2>
-        <p>Esta é a página inicial usando Flexbox.</p>
+        <p>Esta é uma galeria de imagens do jogo FragPunk.</p>
     </main>
     <footer>
         <p>&copy; built by <a href="https://github.com/petrixia">cris</a>. all rights reserved.</p>

diff --git a/src/pages/pagina2/galeria-flexbox.html b/src/pages/pagina2/galeria-flexbox.html
@@ -9,7 +9,7 @@
 </head>
 <body>
     <header>
-        <div class="logo">Fragpunk | simple gallery</div>
+        <div class="logo">gallery</div>
         <nav class="menu">
             <a href="../pagina1/home.html">Home</a>
             <a href="../pagina3/galeria-grid.html">Grid</a>

diff --git a/src/pages/pagina3/galeria-grid.html b/src/pages/pagina3/galeria-grid.html
@@ -9,7 +9,7 @@
 </head>
 <body>
     <header>
-        <div class="logo">Fragpunk | simple gallery</div>
+        <div class="logo">gallery</div>
         <nav class="menu">
             <a href="../pagina1/home.html">Home</a>
             <a href="../pagina2/galeria-flexbox.html">Flexbox</a>

diff --git a/src/pages/pagina4/galeria-hibrida.html b/src/pages/pagina4/galeria-hibrida.html
@@ -9,7 +9,7 @@
 </head>
 <body>
     <header>
-        <div class="logo">Fragpunk | simple gallery</div>
+        <div class="logo">gallery</div>
         <nav class="menu">
             <a href="../pagina1/home.html">Home</a>
             <a href="../pagina2/galeria-flexbox.html">Flexbox</a>

diff --git a/src/styles/galeria-flexbox.css b/src/styles/galeria-flexbox.css
@@ -1,80 +1,45 @@
 body {
-    background: var(--color-bg-main);
-    display: flex;
-    flex-direction: column;
-    font-family: var(--font-family-main);
-    min-height: 100vh;
-}
-
-header {
-    align-items: center;
-    background: var(--color-bg-header);
-    color: var(--color-text-main);
-    display: flex;
-    justify-content: space-between;
-    padding: var(--space-lg) var(--space-page-side);
-}
-
-.logo {
-    color: var(--color-text-main);
-    font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-bold);
-    letter-spacing: var(--letter-spacing-logo);
-}
-
-.menu {
-    display: flex;
-    gap: var(--space-xl);
-}
-
-.menu a {
-    color: var(--color-text-link);
-    font-size: var(--font-size-base);
-    font-weight: var(--font-weight-normal);
-    text-decoration: none;
-    transition: color 0.2s;
-}
-
-.menu a:hover {
-    color: var(--color-text-link-hover);
-    text-shadow: 0 0 2px var(--color-accent-2);
-}
-
-.menu a:active {
-    color: var(--color-text-link-active);
+  display: flex;
+  flex-direction: column;
 }
 
 main {
-    align-items: flex-start;
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    min-height: 60vh;
-    padding: 0 4vw;
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+  justify-content: center;
 }
 
 section.gallery-container {
-    align-items: flex-start;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-md);
-    justify-content: center;
-    max-width: var(--max-width-gallery);
-    padding: var(--space-md) 0;
-    width: 100%;
-}
-
-section.gallery-container > div {
-    aspect-ratio: 1/1;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    border: var(--border-width-card) solid var(--color-card-border);
-    border-radius: var(--border-radius-card);
-    box-shadow: 0 2px 8px var(--color-card-shadow);
-    flex: 0 1 calc(33.33% - var(--space-md));
-    min-width: 200px;
-    width: 100%;
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  justify-content: center;
+  max-width: var(--max-width-gallery);
+  padding: var(--space-md) 0;
+  width: 100%;
+}
+
+section.gallery-container>div {
+  aspect-ratio: 1/1;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: var(--border-width-card) solid var(--color-card-border);
+  border-radius: var(--border-radius-card);
+  box-shadow: 0 2px 8px var(--color-card-shadow);
+  flex: 0 1 calc(33.33% - var(--space-md));
+  min-width: min(200px, 100vw);
+  width: 100%;
+}
+
+@media (max-width: 600px) {
+  section.gallery-container>div {
+    flex-basis: 100%;
+    min-width: 0;
+    padding-bottom: 20px;
+  }
 }
 
 .image1 { background-image: url('../assets/foto1.png'); }
@@ -86,17 +51,3 @@ section.gallery-container > div {
 .image7 { background-image: url('../assets/foto7.png'); }
 .image8 { background-image: url('../assets/foto8.png'); }
 .image9 { background-image: url('../assets/foto9.png'); }
-
-footer {
-    align-items: center;
-    background: var(--color-bg-footer);
-    bottom: 0;
-    color: var(--color-text-main);
-    display: flex;
-    font-size: var(--font-size-base);
-    justify-content: center;
-    min-height: 56px;
-    padding: var(--space-sm) 0;
-    position: fixed;
-    width: 100vw;
-}
diff --git a/src/styles/galeria-grid.css b/src/styles/galeria-grid.css
@@ -1,60 +1,19 @@
 body {
-    background: var(--color-bg-main);
     display: grid;
-    font-family: var(--font-family-main);
     grid-template-areas:
         "cabecalho"
         "galeria"
         "rodape";
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr auto;
-    min-height: 100vh;
 }
 
 header {
-    align-items: center;
-    background: var(--color-bg-header);
-    color: var(--color-text-main);
-    display: flex;
     grid-area: cabecalho;
-    justify-content: space-between;
-    padding: var(--space-lg) var(--space-page-side);
-}
-
-.logo {
-    color: var(--color-text-main);
-    font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-bold);
-    letter-spacing: var(--letter-spacing-logo);
-}
-
-.menu {
-    display: flex;
-    gap: var(--space-xl);
-}
-
-.menu a {
-    color: var(--color-text-link);
-    font-size: var(--font-size-base);
-    font-weight: var(--font-weight-normal);
-    text-decoration: none;
-    transition: color 0.2s;
-}
-
-.menu a:hover {
-    color: var(--color-text-link-hover);
-}
-
-.menu a:active {
-    color: var(--color-text-link-active);
 }
 
 main {
-    display: grid;
     grid-area: galeria;
-    min-height: 60vh;
-    padding: 0 4vw;
-    place-items: center;
 }
 
 section.gallery-container {
@@ -68,7 +27,14 @@ section.gallery-container {
     width: 100%;
 }
 
-section.gallery-container > div {
+@media (max-width: 600px) {
+    section.gallery-container {
+        grid-template-columns: 1fr;
+        padding-bottom: 40px;
+    }
+}
+
+section.gallery-container>div {
     aspect-ratio: 1/1;
     background-position: center;
     background-repeat: no-repeat;
@@ -89,17 +55,7 @@ section.gallery-container > div {
 .image8 { background-image: url('../assets/foto8.png'); }
 .image9 { background-image: url('../assets/foto9.png'); }
 
+
 footer {
-    align-items: center;
-    background: var(--color-bg-footer);
-    bottom: 0;
-    color: var(--color-text-main);
-    display: flex;
-    font-size: var(--font-size-base);
     grid-area: rodape;
-    justify-content: center;
-    min-height: 56px;
-    padding: var(--space-sm) 0;
-    position: fixed;
-    width: 100vw;
 }
diff --git a/src/styles/galeria-hibrida.css b/src/styles/galeria-hibrida.css
@@ -1,4 +1,3 @@
-/* Grid no body para estruturar as áreas principais */
 body {
     background: var(--color-bg-main);
     display: grid;
@@ -12,53 +11,12 @@ body {
     min-height: 100vh;
 }
 
-/* Flexbox no header */
 header {
-    align-items: center;
-    background: var(--color-bg-header);
-    color: var(--color-text-main);
-    display: flex;
     grid-area: cabecalho;
-    justify-content: space-between;
-    padding: var(--space-lg) var(--space-page-side);
-}
-
-.logo {
-    color: var(--color-text-main);
-    font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-bold);
-    letter-spacing: var(--letter-spacing-logo);
-}
-
-.menu {
-    display: flex;
-    gap: var(--space-xl);
-}
-
-.menu a {
-    color: var(--color-text-link);
-    font-size: var(--font-size-base);
-    font-weight: var(--font-weight-normal);
-    text-decoration: none;
-    transition: color 0.2s;
 }
 
-.menu a:hover {
-    color: var(--color-text-link-hover);
-    text-shadow: 0 0 2px var(--color-accent-2);
-}
-
-.menu a:active {
-    color: var(--color-text-link-active);
-}
-
-/* Grid no main para galeria de 9 imagens */
 main {
-    display: grid;
     grid-area: galeria;
-    min-height: 60vh;
-    padding: 0 4vw;
-    place-items: center;
 }
 
 section.gallery-container {
@@ -72,7 +30,14 @@ section.gallery-container {
     width: 100%;
 }
 
-.gallery-container > div {
+@media (max-width: 600px) {
+  section.gallery-container {
+    grid-template-columns: 1fr;
+    padding-bottom: 40px;
+  }
+}
+
+.gallery-container>div {
     aspect-ratio: 1/1;
     background-position: center;
     background-size: cover;
@@ -92,18 +57,8 @@ section.gallery-container {
 .image8 { background-image: url('../assets/foto8.png'); }
 .image9 { background-image: url('../assets/foto9.png'); }
 
-/* Flexbox no footer para centralizar conteúdo */
 footer {
-    align-items: center;
-    background: var(--color-bg-footer);
-    bottom: 0;
-    color: var(--color-text-main);
     display: flex;
-    font-size: var(--font-size-base);
     grid-area: rodape;
     justify-content: center;
-    min-height: 56px;
-    padding: var(--space-sm) 0;
-    position: fixed;
-    width: 100vw;
 }