Rename from product to home

RecyLife · Oct 16, 2024 · 9641747 · 9641747
1 parent 682a4df
commit 9641747
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -72,7 +72,8 @@
         <h1 id="headerTitle" class="header-title">RecyTech</h1>
         <div class="header-separator"></div>
         <div id="headerLinks" class="header-links">
-            <p id="headerLinkProduct" class="header-link" onclick="smoothScroll('headerLinkProduct', 'product')">Accueil</p>
+            <p id="headerLinkhome" class="header-link" onclick="smoothScroll('headerLinkhome', 'home')">Accueil</p>
+            <p id="headerLinkGoals" class="header-link" onclick="smoothScroll('headerLinkhome', 'goals   ')">Nos objectifs</p>
             <p id="headerLinkAbout" class="header-link" onclick="smoothScroll('headerLinkAbout', 'about')">À propos</p>
             <p id="headerLinkTeam" class="header-link" onclick="smoothScroll('headerLinkTeam', 'team')">Équipe</p>
             <p id="headerLinkContact" class="header-link" onclick="smoothScroll('headerLinkContact', 'contact')">Contact</p>
@@ -86,8 +87,8 @@ <h1 id="headerTitle" class="header-title">RecyTech</h1>
     </header>
 
     <main>
-        <section id="product" class="main-section product">
-            <div class="product-container">
+        <section id="home" class="main-section home">
+            <div class="home-container">
                 <h2 class="slogan">Transformer les vieux<br> PC en nouvelles opportunités.</h2>
                 <div class="container-buy">
                     <div class="buy-images-container">

diff --git a/scripts/script.js b/scripts/script.js
@@ -2,7 +2,7 @@
 function smoothScroll(linkId, targetId) {
     const targetElement = document.getElementById(targetId);
     let elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
-    if (targetId === "product") {
+    if (targetId === "home") {
         elementPosition -= 80;
     }
     window.scrollTo({
@@ -46,7 +46,7 @@ function toggleHamburgerMenu() {
 hamburgerMenu.addEventListener("click", toggleHamburgerMenu);
 
 window.addEventListener("resize", () => {
-    if (window.innerWidth > 700 && header.classList.contains("is-hamburger-active")) {
+    if (window.innerWidth > 800 && header.classList.contains("is-hamburger-active")) {
         toggleHamburgerMenu();
     }
 });

diff --git a/styles/goals.css b/styles/goals.css
diff --git a/styles/header.css b/styles/header.css
@@ -135,7 +135,7 @@
     transform: translateY(-4px) scale(1.3);
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 800px) {
     .header-separator {
         display: none;
     }
@@ -183,4 +183,8 @@
     .header-links.is-hamburger-active .header-link:nth-child(4) {
         transition-delay: 0.15s;
     }
+
+    .header-links.is-hamburger-active .header-link:nth-child(5) {
+        transition-delay: 0.2s;
+    }
 }
diff --git a/styles/home.css b/styles/home.css
@@ -1,12 +1,12 @@
-.product {
+.home {
     display: flex;
     gap: 150px;
     align-items: center;
     justify-content: center;
     height: calc(100vh - var(--header-height));
 }
 
-.product-container {
+.home-container {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -135,11 +135,11 @@
 }
 
 @media screen and (max-width: 990px) {
-    .product {
+    .home {
         display: flex;
     }
 
-    .product-container {
+    .home-container {
 
         flex-direction: column;
         gap: 2vh;
@@ -203,7 +203,7 @@
         padding-right: 0;
     }   
 
-    .product-container {
+    .home-container {
         gap: 0px;
     }