add screenshot

README.md

@@ -1 +1,14 @@
-https://marina-barbosa.github.io/htmlcssjs-ghost-maisprati/
+## Ghost Boo - Aula 14
+
+Este projeto faz parte de uma atividade prática do curso Fullstack Jr da '+PraTi'
+
+ deploy -> https://marina-barbosa.github.io/htmlcssjs-ghost-maisprati/
+
+ ## Screenshots
+
+<img src="assets/screencapture-light.png" alt="Screenshot do Site">
+
+<br>
+<br>
+
+<img src="assets/screencapture-dark.png" alt="Screenshot do Site">

index.html

@@ -28,7 +28,7 @@
       <div class="logo">
         <ion-icon name="logo-ionic"></ion-icon>
         <div>
-          <h2>Ghost</h2>
+          <h2>Ghost Boo</h2>
           <p>Spectral Ipsum</p>
         </div>
       </div>
@@ -169,7 +169,7 @@ <h1 class="heading">Carousel</h1>
             <div class="logo">
               <ion-icon name="logo-ionic"></ion-icon>
               <div>
-                <h2>Ghost</h2>
+                <h2>Ghost Boo</h2>
               </div>
             </div>
             <div class="buttons">

scripts/carousel.js

@@ -23,16 +23,16 @@ document.addEventListener('DOMContentLoaded', function () {
 
 
 const slider = document.querySelector('.slider');
-// Adiciona um ouvinte de evento de rolagem para a página inteira
+
 slider.addEventListener('wheel', function (event) {
-  // Verifica se o cursor está sobre o slider
+
   if (event.target.closest('.wrapper')) {
-    // Se estiver, previne a rolagem vertical padrão
+
     event.preventDefault();
-    // E redireciona para rolagem horizontal no slider
+
     slider.scrollLeft += event.deltaY;
   } else {
-    // Permite a rolagem vertical padrão se o cursor não estiver sobre o slider
+
     window.scrollBy(0, event.deltaY);
   }
 }, { passive: false });

scripts/menu-burgue.js

@@ -1,11 +1,4 @@
-// const hamMenu = document.querySelector(".menu-burgue");
 
-// const offScreenMenu = document.querySelector(".off-screen-menu");
-
-// hamMenu.addEventListener("click", () => {
-//   hamMenu.classList.toggle("active");
-//   offScreenMenu.classList.toggle("active");
-// });
 
 const hamburger = document.querySelector(".hamburger");
 const nav = document.querySelector("nav");

scripts/theme-switch.js

@@ -2,21 +2,28 @@ document.addEventListener('DOMContentLoaded', (event) => {
   const checkbox = document.getElementById('checkbox');
   const currentTheme = localStorage.getItem('theme') || 'light';
   const themeImage = document.getElementById('theme-image');
+  const currentImageSrc = localStorage.getItem('theme-image-src') || 'assets/fear.png';
 
   if (currentTheme === 'dark') {
     document.documentElement.setAttribute('data-theme', 'dark');
     checkbox.checked = true;
+  } else {
+    document.documentElement.setAttribute('data-theme', 'light');
+    checkbox.checked = false;
   }
+  themeImage.src = currentImageSrc;
 
   checkbox.addEventListener('change', () => {
     if (checkbox.checked) {
       document.documentElement.setAttribute('data-theme', 'dark');
       localStorage.setItem('theme', 'dark');
       themeImage.src = 'assets/awake.png';
+      localStorage.setItem('theme-image-src', 'assets/awake.png');
     } else {
       document.documentElement.setAttribute('data-theme', 'light');
       localStorage.setItem('theme', 'light');
       themeImage.src = 'assets/fear.png';
+      localStorage.setItem('theme-image-src', 'assets/fear.png');
     }
   });
-});
+});

style/footer.css

@@ -54,8 +54,7 @@
 
 .footer .logo:hover,
 .footer ul a:hover,
-.footer ion-icon:hover
- {
+.footer ion-icon:hover {
   cursor: pointer;
   color: var(--primary);
 }
@@ -72,6 +71,10 @@
   margin: 25px auto;
 }
 
+.footer p {
+  padding-inline: 40px;
+}
+
 @media (max-width: 1025px) {
   .footer {
     margin-bottom: 50px;