Finished overall website

kfoolable · kfoolable · commit 21f1048e5761 · 2024-02-07T19:40:03.000+08:00
diff --git a/starter/07-Omnifood-Desktop/css/general.css b/starter/07-Omnifood-Desktop/css/general.css
@@ -57,6 +57,8 @@ html {
   /* Percentage of user's browser font-size setting */
   font-size: 62.5%;
   overflow-x: hidden;
+
+  scroll-behavior: smooth;
 }
 
 body {
diff --git a/starter/07-Omnifood-Desktop/css/queries.css b/starter/07-Omnifood-Desktop/css/queries.css
@@ -128,8 +128,10 @@ wtf is em? em is the root font size and rem is the current font size
   }
 
   /* MOBILE NAVIGATION */
+
   .btn-mobile-nav {
     display: block;
+    z-index: 1000;
   }
 
   .main-nav {
@@ -308,3 +310,5 @@ wtf is em? em is the root font size and rem is the current font size
 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
 
 */
+
+/* 09 Omnifood Project, 139 lecture is incomplete */
diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css
@@ -75,6 +75,24 @@
   display: none;
 }
 
+/* STICKY NAVIGATION */
+.sticky .header {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: rgba(255, 255, 255, 0.97);
+  z-index: 100;
+  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
+}
+
+.sticky .section-hero {
+  margin-top: 9.6rem;
+}
+
 /**************************/
 /* HERO SECTION */
 /**************************/
diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html
@@ -17,6 +17,8 @@
       src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
     ></script>
 
+    <script defer src="js/script.js"></script>
+
     <title>Omnifood</title>
   </head>
   <body>
@@ -26,11 +28,13 @@
       </a>
       <nav class="main-nav">
         <ul class="main-nav-list">
-          <li><a class="main-nav-link" href="#">How it works</a></li>
-          <li><a class="main-nav-link" href="#">Meals</a></li>
-          <li><a class="main-nav-link" href="#">Testimonials</a></li>
-          <li><a class="main-nav-link" href="#">Pricing</a></li>
-          <li><a class="main-nav-link nav-cta" href="#">Try for free</a></li>
+          <li><a class="main-nav-link" href="#how">How it works</a></li>
+          <li><a class="main-nav-link" href="#sample-meals">Meals</a></li>
+          <li>
+            <a class="main-nav-link" href="#sect-testimonials">Testimonials</a>
+          </li>
+          <li><a class="main-nav-link" href="#pricing">Pricing</a></li>
+          <li><a class="main-nav-link nav-cta" href="#cta">Try for free</a></li>
         </ul>
       </nav>
 
@@ -41,7 +45,7 @@
     </header>
 
     <main>
-      <section class="section-hero">
+      <section class="section-hero" id="hero">
         <div class="hero">
           <div class="hero-text-box">
             <h1 class="heading-primary">
@@ -52,10 +56,10 @@ <h1 class="heading-primary">
               eat healthy again. Tailored to your personal tastes and
               nutritional needs.
             </p>
-            <a href="#" class="btn btn--full margin-right-sm"
+            <a href="#cta" class="btn btn--full margin-right-sm"
               >Start eating well</a
             >
-            <a href="#" class="btn btn--outline">Learn more &darr;</a>
+            <a href="#how" class="btn btn--outline">Learn more &darr;</a>
             <div class="delivered-meals">
               <div class="delivered-imgs">
                 <img src="img/customers/customer-1.jpg" alt="Customer photo" />
@@ -80,7 +84,7 @@ <h1 class="heading-primary">
         </div>
       </section>
 
-      <section class="section-featured">
+      <section class="section-featured" id="feature">
         <div class="container">
           <h2 class="heading-featured-in">As featured in</h2>
           <div class="logos">
@@ -99,7 +103,7 @@ <h2 class="heading-featured-in">As featured in</h2>
         </div>
       </section>
 
-      <section class="section-how">
+      <section class="section-how" id="how">
         <div class="container">
           <span class="subheading">How it works</span>
           <h2 class="heading-secondary">
@@ -168,7 +172,7 @@ <h3 class="heading-tertiary">Receive meals at convenient time</h3>
         </div>
       </section>
 
-      <section class="section-meals">
+      <section class="section-meals" id="sample-meals">
         <div class="container center-text">
           <span class="subheading">Sample Meals</span>
           <h2 class="heading-secondary">
@@ -288,7 +292,7 @@ <h3 class="heading-tertiary">Works with any diet:</h3>
         </div>
       </section>
 
-      <section class="section-testimonials">
+      <section class="section-testimonials" id="sect-testimonials">
         <div class="testimonials-container">
           <span class="subheading">Testimonials</span>
           <h2 class="heading-secondary">Once you try it, you can't go back</h2>
@@ -425,7 +429,7 @@ <h2 class="heading-secondary">Once you try it, you can't go back</h2>
         </div>
       </section>
 
-      <section class="section-pricing">
+      <section class="section-pricing" id="pricing">
         <div class="container">
           <span class="subheading">Pricing</span>
           <h2 class="heading-secondary">
@@ -541,7 +545,7 @@ <h2 class="heading-secondary">
         </div>
       </section>
 
-      <section class="section-cta">
+      <section class="section-cta" id="cta">
         <div class="container">
           <div class="cta">
             <div class="cta-text-box">
@@ -624,7 +628,8 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
           </ul>
 
           <p class="copyright">
-            Copyright &copy; 2027 by Omnifood, Inc. All rights reserved.
+            Copyright &copy; <span class="year">2027</span> by Omnifood, Inc.
+            All rights reserved.
           </p>
         </div>
         <div class="address-col">
diff --git a/starter/07-Omnifood-Desktop/js/script.js b/starter/07-Omnifood-Desktop/js/script.js
@@ -1,7 +1,54 @@
 ///////////////////////////////////////////////////////////
+console.log("Hello World!");
+
+const myName = "Gillian Gavino";
+const h1 = document.querySelector(".heading-primary");
+
+// h1.addEventListener("click", function () {
+//   h1.textContent = myName;
+//   h1.style.backgroundColor = "red";
+//   h1.style.padding = "5rem";
+// });
+
+///////////////////////////////////////////////////////////
+// Set current year
+const yearEl = document.querySelector(".year");
+const currentYear = new Date().getFullYear();
+yearEl.textContent = currentYear;
+
+///////////////////////////////////////////////////////////
+// Make mobile navigation work
+const btnNav = document.querySelector(".btn-mobile-nav");
+const headerEl = document.querySelector(".header");
+
+btnNav.addEventListener("click", function () {
+  headerEl.classList.toggle("nav-open");
+});
+
+///////////////////////////////////////////////////////////
+// Making nav sticky
+const sectionHeroEl = document.querySelector(".section-hero");
+const bodyEl = document.querySelector("body");
+
+const obs = new IntersectionObserver(
+  function (entries) {
+    const ent = entries[0];
+
+    if (!ent.isIntersecting) bodyEl.classList.add("sticky");
+
+    if (ent.isIntersecting) bodyEl.classList.remove("sticky");
+  },
+  {
+    root: null,
+    threshold: 0,
+    rootMargin: "-80px",
+  }
+);
+obs.observe(sectionHeroEl);
+
 // Fixing flexbox gap property missing in some Safari versions
 function checkFlexGap() {
-  var flex = document.createElement("div");
+  const flex = document.createElement("div");
   flex.style.display = "flex";
   flex.style.flexDirection = "column";
   flex.style.rowGap = "1px";
@@ -10,7 +57,7 @@ function checkFlexGap() {
   flex.appendChild(document.createElement("div"));
 
   document.body.appendChild(flex);
-  var isSupported = flex.scrollHeight === 1;
+  const isSupported = flex.scrollHeight === 1;
   flex.parentNode.removeChild(flex);
   console.log(isSupported);
 

Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,8 @@ html {`
`57`	`57`	`/* Percentage of user's browser font-size setting */`
`58`	`58`	`font-size: 62.5%;`
`59`	`59`	`overflow-x: hidden;`
	`60`	`+`
	`61`	`+ scroll-behavior: smooth;`
`60`	`62`	`}`
`61`	`63`
`62`	`64`	`body {`
Original file line number	Diff line number	Diff line change
`@@ -128,8 +128,10 @@ wtf is em? em is the root font size and rem is the current font size`
`128`	`128`	`}`
`129`	`129`
`130`	`130`	`/* MOBILE NAVIGATION */`
	`131`	`+`
`131`	`132`	`.btn-mobile-nav {`
`132`	`133`	`display: block;`
	`134`	`+ z-index: 1000;`
`133`	`135`	`}`
`134`	`136`
`135`	`137`	`.main-nav {`
`@@ -308,3 +310,5 @@ wtf is em? em is the root font size and rem is the current font size`
`308`	`310`	`2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128`
`309`	`311`
`310`	`312`	`*/`
	`313`	`+`
	`314`	`+/* 09 Omnifood Project, 139 lecture is incomplete */`