Update index.html

top nav-bar is revised

week3/2-website/index.html

@@ -38,29 +38,46 @@
     </nav>
   </header>
   <br>
-  <section class="button-top">
-    <div class="row rounded bg-light mx-3 my-3 px-3 py-3">
-      <div class="col-md "><button type="button" class="btn btn-outline-secondary">Home</button></div>
-      <div class="col-md "><button type="button" class="btn btn-outline-secondary">Cakes</button></div>
-      <div class="col-md "><button type="button" class="btn btn-outline-secondary">Orderings</button></div>
-      <div class="col-md "><button type="button" class="btn btn-outline-secondary">Lessons</button></div>
-      <div class="col-md "><button type="button" class="btn btn-outline-secondary">About</button></div>
-    </div>
+  <section class="nav-top">
+    <ul class="nav justify-content-center">
+      <li class="nav-item">
+        <a class="nav-link active" href="#">Home</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Cakes</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Ordering</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Lessons</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+
+    </ul>
   </section>
   <br>
   <main>
     <section class="aside-left-with-carossel">
-      <div class="row rounded bg-light mx-3">
-        <div class="col mh-100 ">
+      <div class="row rounded  bg-light mx-3">
+        <div class="col mh-100 border border-secondary ">
           <br>
           <h1 class="h1"> Hello, and welcome to the Cakestore.</h1>
           <br>
           <br>
-          <p class="text-sm-left text-md-left">We do produce wonderful cakes for nearly 30 years. We love our products
-            and want
-            everyone to
-            taste these
-            art of triets.</p>
+          <p class="text-sm-left text-md-left">We do produce wonderful cakes for nearly 30 years.
+            We love our products and want everyone to taste these art of triets. We are specialised
+            in making tasteful, unique, inspirational masterpiece for wedding, party and celebration.
+            All of our cakes are expertly handcrafted from our studios in Bristol. We use only the
+            finest ingredients in our cakes therefore ensuring our cakes are of the highest possible
+            standard from the inside out. We have over 25 years of professional cake designing and
+            decorating experience. Our award-winning cake designer who has achieved high levels of
+            expertise winning many competitions with her sugar crafting skills.
+            Creating new and unique designs for our customers is our passion. We understand
+            how important special occasions are to our customers, and will endeavour to make
+            your cake a lasting memory.</p>
         </div>
 
         <div class="col">
@@ -102,10 +119,11 @@ <h1 class="h1"> Hello, and welcome to the Cakestore.</h1>
 
     <br>
     <br>
+
     <section class="cake-cards">
 
       <div class="row">
-        <div class="card w-25">
+        <div class="card w-25 ">
           <img src="images/Cakes/cupcakes.jpg" class="card-img-top img-fluid img-thumbnail" alt="cupcakes">
           <div class="card-body">
             <h5 class="card-title">CYF Cakes</h5>
@@ -126,7 +144,7 @@ <h5 class="card-title">Emojicake</h5>
           </div>
         </div>
 
-        <div class="card w-25">
+        <div class="card w-25 ">
           <img src="images/Cakes/bunny-mini-cake.jpg" class="card-img-top img-fluid img-thumbnail"
             alt="bunny-mini-cake">
           <div class="card-body">
@@ -153,8 +171,38 @@ <h5 class="card-title">Vanilla cake</h5>
     <br>
     <br>
 
-    <footer>
-
+    <footer class="footer-navbar">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand" href="#">Vision</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
+          aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavDropdown">
+          <ul class="navbar-nav">
+            <li class="nav-item active">
+              <a class="nav-link" href="#">Contact <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Address</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Privacy Policy</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
+                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Sitemap
+              </a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                <a class="dropdown-item" href="#">Cake products</a>
+                <a class="dropdown-item" href="#">Partner companies</a>
+                <a class="dropdown-item" href="#">Social media</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
     </footer>