new style

MohammedTsmu · Apr 9, 2023 · a17f686 · a17f686
1 parent f70ed9f
commit a17f686
Showing 1 changed file with 41 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -1,30 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
+  <!-- Head -->
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Healthy Meals</title>
-    <title>Random Healthy Meals Generator</title>
+    <title>Meal's picker</title>
+
+    <!-- Stylesheet -->
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
       integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
       crossorigin="anonymous"
     />
+
     <link rel="stylesheet" href="greeting.css" />
     <link rel="stylesheet" href="style.css" />
+    <link rel="shortcut icon" href="favicon-16x16.png" type="image/x-icon" />
+    <link rel="shortcut icon" href="favicon-32x32.png" type="image/x-icon" />
+    <link
+      rel="shortcut icon"
+      href="android-chrome-192x192.png"
+      type="image/x-icon"
+    />
+    <link
+      rel="shortcut icon"
+      href="android-chrome-512x512.png"
+      type="image/x-icon"
+    />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="shortcut icon" href="apple-touch-icon.png" type="image/x-icon" />
   </head>
 
-  <body style="transition: all 1s ease" onload="loadName()">
+  <!-- Body -->
+  <body onload="loadName()">
+    <!-- Header -->
     <header>
-      <h1>Healthy Meals Planner</h1>
-      <nav>
-        <ul>
-          <li><a href="index.html">Home</a></li>
-        </ul>
-      </nav>
+      <h1>Meals's Picker <span class="orange">{Weight Lose}</span></h1>
     </header>
-    <!-- ================== S T A R T  -  G R E E T I N G ================== -->
+
+    <!-- Greeting -->
     <div id="greeting">
       <div id="nameInputContainer" class="nameInputContainer">
         <label for="nameInput">Enter your name:</label>
@@ -34,40 +49,37 @@ <h1>Healthy Meals Planner</h1>
         </button>
       </div>
     </div>
-    <!-- ================== E N D  -  G R E E T I N G ================== -->
 
-    <!-- ================== S T A R T  -  G R E E T I N G ================== -->
+    <!-- Motivational message -->
     <div id="motivation-message">
       <div class="card">
-        <div class="card-header">Motivational Message</div>
         <div class="card-body">
           <blockquote class="blockquote mb-0">
+            <div class="card-header">Motivational Message</div>
             <p id="message">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
               posuere erat a ante.
             </p>
             <footer class="blockquote-footer">
-              Written by
+              by✍
               <cite title="https://type.fit/api/quotes"
-                ><p>&copy; Mohammed-qasim</p></cite
+                ><p>Mohammed-qasim</p></cite
               >
             </footer>
           </blockquote>
         </div>
       </div>
     </div>
-    <!-- ================== E N D  -  G R E E T I N G ================== -->
 
-    <!-- ================== S T A R T  -  M E A L  -  P L A N N E R ================== -->
+    <!-- Meal's picker -->
     <main>
       <div class="container">
-        <h5 class="card-title">Meals for today</h5>
-        <p class="card-text">Here are your meals for today:</p>
+        <h5 class="card-title">Meals of the day</h5>
         <div class="row">
           <div class="col-sm-12">
             <div class="card">
               <div class="card-body">
-                <h5 class="card-title">Meal One</h5>
+                <h5 class="card-title">Meal One - الوجبة الأولى</h5>
                 <p class="card-text" id="meal1">
                   This is the description for meal one.
                 </p>
@@ -77,7 +89,7 @@ <h5 class="card-title">Meal One</h5>
           <div class="col-sm-12">
             <div class="card">
               <div class="card-body">
-                <h5 class="card-title">Meal Two</h5>
+                <h5 class="card-title">Meal Two - الوجبة الثانية</h5>
                 <p class="card-text" id="meal2">
                   This is the description for meal two.
                 </p>
@@ -87,9 +99,9 @@ <h5 class="card-title">Meal Two</h5>
           <div class="col-sm-12">
             <div class="card">
               <div class="card-body">
-                <h5 class="card-title">Total Calories</h5>
+                <h5 class="card-title">Total Calories - السعرات الكلية</h5>
                 <p class="card-text">
-                  Total calories for today: <span id="totalCalories"></span>
+                  Total calories for today:<span id="totalCalories"></span>
                 </p>
               </div>
             </div>
@@ -98,15 +110,14 @@ <h5 class="card-title">Total Calories</h5>
       </div>
     </main>
 
-    <!-- ================== E N D  -  M E A L  -  P L A N N E R ================== -->
+    <!-- Scroll to top -->
+    <a href="#" id="scrollTopButton" title="Scroll To Top">&#8593;UP</a>
 
-    <!-- ================== S T A R T  -  F O O T E R ================== -->
+    <!-- Footer -->
     <footer>
-      <p>Mohammed-qasim &copy; 2023 all rights reserved</p>
+      <p id="footerText"></p>
     </footer>
 
-    <!-- ================== E N D  -  F O O T E R ================== -->
-
     <script
       src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
       integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
@@ -122,8 +133,10 @@ <h5 class="card-title">Total Calories</h5>
       integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
       crossorigin="anonymous"
     ></script>
+    <script src="footer.js"></script>
     <script src="script.js"></script>
     <script src="greeting.js"></script>
     <script src="dark.js"></script>
+    <script src="scrollToTop.js"></script>
   </body>
 </html>