CodeYourFuture · ISTANBULBEKLE · May 31, 2020 · May 31, 2020 · May 31, 2020 · Jun 1, 2020
diff --git a/week3/.DS_Store b/week3/.DS_Store
diff --git a/week3/2-website/images/.DS_Store b/week3/2-website/images/.DS_Store
diff --git a/week3/2-website/images/01_rainbowcake_brand_logo.jpg b/week3/2-website/images/01_rainbowcake_brand_logo.jpg
diff --git a/week3/2-website/images/Cakes/Vanilla-cake.jpg b/week3/2-website/images/Cakes/Vanilla-cake.jpg
diff --git a/week3/2-website/images/Cakes/bunny-mini-cake.jpg b/week3/2-website/images/Cakes/bunny-mini-cake.jpg
diff --git a/week3/2-website/images/Cakes/emoji-cakes.jpg b/week3/2-website/images/Cakes/emoji-cakes.jpg
diff --git a/week3/2-website/images/Cakes/galaxy-cake.jpg b/week3/2-website/images/Cakes/galaxy-cake.jpg
diff --git a/week3/2-website/images/Cakes/nutella-cake.jpg b/week3/2-website/images/Cakes/nutella-cake.jpg
diff --git a/week3/2-website/images/Cakes/panda-bear-cakes.jpg b/week3/2-website/images/Cakes/panda-bear-cakes.jpg
diff --git a/week3/2-website/index.html b/week3/2-website/index.html
@@ -1,94 +1,234 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Responsive Cake webpage</title>
-    <link rel="stylesheet" href="style.css" />
-    <link
-      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-
-  <body>
-    <header>
-      <div class="top-header">
-        <img
-          class="header-image"
-          src="https://i.postimg.cc/Zq6Jqk9D/2a6c1858-0fe8-48a7-82fe-1976833b8691-200x200.png"
-          alt="Let Them Eat Cake logo"
-        />
-
-        <button class="contact-button">Contact</button>
-      </div>
 
-      <nav class="navigation">
-        <ul>
-          <li><a href="">Home</a></li>
-          <li><a href="">Cakes</a></li>
-          <li><a href="">Ordering</a></li>
-          <li><a href="">Lessons</a></li>
-          <li><a href="">About</a></li>
-        </ul>
-      </nav>
-    </header>
-
-    <main>
-      <section class="about">
-        <h1>Let Them Eat Cake</h1>
-
-        <h3>Feeding the cake deprived since 2020</h3>
-
-        <img
-          class="cupcakes"
-          src="../images/Cakes/cupcakes.jpg"
-          alt="Cupcakes with sprinkles"
-        />
-      </section>
-
-      <section class="example-cakes">
-        <h3>Just a small sample of our bakes:</h3>
-        <ul>
-          <li>
-            <img
-              class="images"
-              src="../images/Cakes/cake-with-blackberries.jpg"
-              alt="Sponge cake with blackberries and flowers"
-            />
-          </li>
-          <li>
-            <img
-              class="images"
-              src="../images/Cakes/wedding-cake.jpg"
-              alt="Wedding cake"
-            />
-          </li>
-          <li>
-            <img
-              class="images"
-              src="../images/Cakes/cake-with-macarons.jpg"
-              alt="Cake decorated with macarons"
-            />
-          </li>
-          <li>
-            <img
-              class="images"
-              src="../images/Cakes/not-technically-a-cake.jpg"
-              alt="Frangipane with raspberries"
-            />
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="stylesheet" href="style.css" />
+  <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+  <title>Cakestore</title>
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+      <a class="navbar-brand" href="#">
+        <img src="images/01_rainbowcake_brand_logo.jpg" width="30" height="30"
+          class="d-inline-block align-top font-weight-bold" alt="" loading="lazy">
+        Cakestore
+      </a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link font-weight-bold" href="#">Contact</a>
           </li>
+
         </ul>
-      </section>
-    </main>
-
-    <footer class="footer">
-      <ul>
-        <li><a href="">Sitemap</a></li>
-        <li><a href="">Contact</a></li>
-        <li><a href="">Delivery</a></li>
-      </ul>
+        <form class="form-inline my-2 my-lg-0">
+          <input class="form-control mr-sm-2" type="search" placeholder="Search for cake types" aria-label="Search">
+          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+        </form>
+      </div>
+    </nav>
+  </header>
+  <br>
+  <section class="nav-top">
+    <ul class="nav justify-content-center">
+      <li class="nav-item">
+        <a class="nav-link active font-weight-bold" href="#">Home</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link font-weight-bold" href="#">Cakes</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link font-weight-bold" href="#">Ordering</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link font-weight-bold" href="#">Lessons</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link font-weight-bold" 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 border border-secondary rounded">
+          <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. 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">
+          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+            <ol class="carousel-indicators">
+              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+              <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
+            </ol>
+            <div class="carousel-inner">
+              <div class="carousel-item active">
+                <img src="images/Cakes/cake-with-blackberries.jpg" class="d-block w-100 img-fluid img-thumbnail"
+                  alt="cakes-with-blackberries">
+              </div>
+              <div class="carousel-item">
+                <img src="images/Cakes/cake-with-macarons.jpg" class="d-block w-100 img-fluid img-thumbnail"
+                  alt="cake-with-macarons">
+              </div>
+              <div class="carousel-item">
+                <img src="images/Cakes/wedding-cake.jpg" class="d-block w-100 img-fluid img-thumbnail"
+                  alt="wedding-cake">
+              </div>
+              <div class="carousel-item">
+                <img src="images/Cakes/emoji-cakes.jpg" class="d-block w-100 img-fluid img-thumbnail" alt="emoji-cakes">
+              </div>
+
+            </div>
+            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+              <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              <span class="sr-only">Next</span>
+            </a>
+          </div>
+
+        </div>
+
+      </div>
+
+    </section>
+
+    <br>
+    <br>
+
+    <section class="cake-cards">
+
+      <div class="row">
+        <div class="card col-lg-3 col-md-3 col-sm-6">
+          <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>
+            <p class="card-text">In appriciation of the CYF weekends with great members of the CYF family.
+            </p>
+            <a href="#" class="btn btn-primary">Go for details</a>
+          </div>
+        </div>
+
+        <div class="card col-lg-3 col-md-3 col-sm-6">
+          <img src="images/Cakes/emoji-cakes.jpg" class="card-img-top img-fluid img-thumbnail"
+            alt="not-technically-a-cake">
+          <div class="card-body">
+            <h5 class="card-title">Emojicake</h5>
+            <p class="card-text">In appriciation of the CYF weekends with great members of the CYF family.
+            </p>
+            <a href="#" class="btn btn-primary">Go for details</a>
+          </div>
+        </div>
+
+        <div class="card col-lg-3 col-md-3 col-sm-6">
+          <img src="images/Cakes/bunny-mini-cake.jpg" class="card-img-top img-fluid img-thumbnail"
+            alt="bunny-mini-cake">
+          <div class="card-body">
+            <h5 class="card-title">Bunny mini cake</h5>
+            <p class="card-text">In appriciation of the CYF weekends with great members of the CYF family.
+            </p>
+            <a href="#" class="btn btn-primary">Go for details</a>
+          </div>
+        </div>
+
+        <div class="card col-lg-3 col-md-3 col-sm-6">
+          <img src="images/Cakes/Vanilla-cake.jpg" class="card-img-top img-fluid img-thumbnail" alt="vanilla-cake">
+          <div class="card-body">
+            <h5 class="card-title">Vanilla cake</h5>
+            <p class="card-text">In appriciation of the CYF weekends with great members of the CYF family.
+            </p>
+            <a href="#" class="btn btn-primary">Go for details</a>
+          </div>
+        </div>
+
+      </div>
+
+    </section>
+    <br>
+    <br>
+
+    <footer class="footer-navbar">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand font-weight-bold" href="#">Company</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 font-weight-bold" href="#">Contact <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link font-weight-bold" href="#">Address</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link font-weight-bold" href="#">Privacy Policy</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle font-weight-bold" 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>
-  </body>
-</html>
+    <br>
+    <br>
+    <br>
+
+
+  </main>
+
+
+  <!-- Optional JavaScript -->
+  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+    crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+    crossorigin="anonymous"></script>
+</body>
+
+</html>