UI dev complete, home page finished

raiyanu · Apr 13, 2024 · 557c417 · 557c417
1 parent e352571
commit 557c417
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -5,11 +5,13 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>FOODIE | Home</title>
-  <link rel="stylesheet" href="style.css" />
-  <link rel="stylesheet" href="menu.css">
+  <link rel="stylesheet" href="./styles/style.css" />
+  <link rel="stylesheet" href="./styles/menu.css">
+  <link rel="stylesheet" href="./styles/bottom.css">
 </head>
 
 <body>
+  <!-- menu and header -->
   <header>
     <div class="logo">
       <h2>FOODIE</h2>
@@ -22,14 +24,28 @@ <h4>MENU</h4>
       <a href="#">FAQs</a>
     </nav>
   </header>
+
+
+  <!-- navigation -->
   <nav class="section-nav" id="section_nav">
     <a href="#SHAKES" onclick="highlight('SHAKES')">SHAKES</a>
     <a href="#ICE" onclick="highlight('ICE')">ICE CREAM</a>
     <a href="#DESSERT" onclick="highlight('DESSERT')">DESSERT DELIGHTS</a>
     <a href="#SNACK" onclick="highlight('SNACK')">SNACK</a>
     <a href="#SAVORY" onclick="highlight('SAVORY')">SAVORY</a>
   </nav>
+
+
+  <!-- menu -->
   <main>
+    <article class="list">
+      <h2 style="text-align:center; width: 100%;">Scan to share Menu</h2>
+
+      <div id="qrcode"
+        style="display: flex; align-items: center;justify-content: center;padding: 10px;border: 1px solid white; width: fit-content; margin: auto; flex-direction: column;margin-top: .7rem;">
+
+      </div>
+    </article>
     <article class="list">
       <h2 id="SHAKES">SHAKES & SMOOTHIES</h2>
       <ul>
@@ -369,20 +385,63 @@ <h1><span>$</span>9.49</h1>
         </li>
       </ul>
     </article>
-
   </main>
 
-  <footer></footer>
 
-  <script src="./masonry.js"></script>
+  <!-- footer -->
+  <footer>
+    <div class="logo">
+      <h2>FOODIE</h2>
+      <h4>MENU</h4>
+      <p style="font-size: small;">Where people connect ❤️ with meals</p>
+    </div>
+    <hr style="width: 205px;margin-block: .5rem 1.5rem;">
+    <span style="z-index:99;">
+      <a href="#"><span style="color: red; font-weight: bolder;">Tel:</span>+91 7339677034</a>
+      <a href="#"><span style="color: red; font-weight: bolder;">Mob:</span>+91 733-967-7034</a>
+      <a href="#"><span style="color: red; font-weight: bolder;">E-Mail:</span>[email protected]</a>
+    </span>
+    <address>11/12,RZZ Road, ambur - 635810, Vellore District, TamilNadu, India.</address>
+  </footer>
+
+
+  <!-- credit -->
+  <section class="dev">
+    <span>Developed</span> &nbsp; By&nbsp;
+    <h2><a href="mailto:[email protected]">Raiyan Ahmed&nbsp;&nbsp;</a></h2>
+    <a href="tel:+91 7339677034"><span style="color: darkgreen; font-weight: bolder;">Tel:</span> &nbsp;+91
+      7339677034&nbsp;</a>
+    <a href="#"><span style="color: darkgreen; font-weight: bolder;">E-Mail:</span>
+      &nbsp;[email protected]&nbsp;</a>
+  </section>
+
+
+  <!-- for qr code -->
+  <script src="./js/qrcode.min.js"></script>
+  <script type="text/javascript">
+    let qrcode = new QRCode("qrcode", {
+      text: window.location.href,
+      width: 160,
+      height: 160,
+      colorDark: "#ffffff",
+      colorLight: "#000000",
+      correctLevel: QRCode.CorrectLevel.H
+    });
+  </script>
+
+
+  <!-- for grid -->
+  <script src="./js/masonry.js"></script>
   <script>
     var grid = document.querySelector('main');
     var masonry = new Masonry(grid, {
       itemSelector: '.list',
       columnWidth: 10, gutter: 10, fitWidth: true
     });
   </script>
-  <script src="./main.js"></script>
+  <script src="./js/main.js"></script>
+
+
 </body>
 
 </html>
diff --git a/main.js → js/main.js b/main.js → js/main.js
diff --git a/masonry.js → js/masonry.js b/masonry.js → js/masonry.js
diff --git a/js/qrcode.min.js b/js/qrcode.min.js
diff --git a/temp.js → js/temp.js b/temp.js → js/temp.js
diff --git a/styles/bottom.css b/styles/bottom.css
@@ -0,0 +1,38 @@
+footer {
+  padding-inline: 3rem;
+  padding-block: 3rem;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--primary-accent);
+  flex-direction: column;
+  height: fit-content;
+  border-radius: 1rem;
+  margin-inline: 1rem;
+}
+footer span a {
+  color: wheat;
+  display: flex;
+}
+footer > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+.dev {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  flex-wrap: wrap;
+}
+.dev h2 a {
+  color: var(--numb-white);
+}
+.dev > a {
+  color: #fff;
+}
diff --git a/menu.css → styles/menu.css b/menu.css → styles/menu.css
@@ -27,6 +27,11 @@ main {
   border-radius: 5px;
   margin: 1rem 1rem;
 }
+@media (max-width: 380px) {
+  .list {
+    width: 260px;
+  }
+}
 .list ul,
 .list ul li {
   width: 100%;
@@ -72,7 +77,7 @@ main {
   background-color: var(--seconday-clr);
 }
 .section-nav.move {
-  background-color: var(--seconday-accent);
+  background-color: var(--numb-white);
   color: black;
 }
 @media (max-widht: 450px) {

diff --git a/style.css → styles/style.css b/style.css → styles/style.css
@@ -15,7 +15,7 @@
 body {
   /* background-color: var(--primary-clr); */
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
-    url("./assets/bg-1.jpg");
+    url("../assets/bg-1.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;