CodeYourFuture · zelihapala · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1 @@
+
diff --git a/Cakes-Co/design/my-design.png b/Cakes-Co/design/my-design.png
diff --git a/Cakes-Co/img/297.jpg b/Cakes-Co/img/297.jpg
diff --git a/Cakes-Co/img/Cheese-kek-tarifi.jpg b/Cakes-Co/img/Cheese-kek-tarifi.jpg
diff --git a/Cakes-Co/img/Peanut-Butter-Chocolate-Cupcakes_730px-2.jpg.webp b/Cakes-Co/img/Peanut-Butter-Chocolate-Cupcakes_730px-2.jpg.webp
diff --git a/Cakes-Co/img/baklava-honey-pisctachio-cupcakes-kays-kitchen.webp b/Cakes-Co/img/baklava-honey-pisctachio-cupcakes-kays-kitchen.webp
diff --git a/Cakes-Co/img/diana-polekhina-GokMXT9Dx1U-unsplash.jpg b/Cakes-Co/img/diana-polekhina-GokMXT9Dx1U-unsplash.jpg
diff --git a/Cakes-Co/img/hamburger-menu.png b/Cakes-Co/img/hamburger-menu.png
diff --git a/Cakes-Co/img/icons8-hamburger-menu-100.svg b/Cakes-Co/img/icons8-hamburger-menu-100.svg
diff --git a/Cakes-Co/img/icons8-hamburger-menu-64.svg b/Cakes-Co/img/icons8-hamburger-menu-64.svg
diff --git a/Cakes-Co/img/images.jpeg b/Cakes-Co/img/images.jpeg
diff --git a/Cakes-Co/img/logo.png b/Cakes-Co/img/logo.png
diff --git a/Cakes-Co/img/twincupcake-2749204_1280.jpg b/Cakes-Co/img/twincupcake-2749204_1280.jpg
diff --git a/Cakes-Co/img/u1Ivx5yA_1200x.webp b/Cakes-Co/img/u1Ivx5yA_1200x.webp
diff --git a/Cakes-Co/img/yaspasta-rizem.jpg b/Cakes-Co/img/yaspasta-rizem.jpg
diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html
@@ -1,16 +1,91 @@
 <!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">
+  <head>
+    <title>Document</title>
+  </head>
+  <body></body>
+</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Responsive Cake webpage</title>
-    <!-- Add a link to your css file here -->
-</head>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <div class="header-top">
+        <img class="logo-img" src="img/u1Ivx5yA_1200x.webp" alt="Logo2" />
+
+        <div class="right">
+          <label for="menu-icon">
+            <img
+              class="hamburger-menu"
+              src="img/icons8-hamburger-menu-100.svg"
+              alt="Hamburger Menu"
+          /></label>
+
+          <h3 id="name">The best cakes in town<br />delivered to your door</h3>
+        </div>
+      </div>
+      <input type="checkbox" id="menu-icon" />
+      <nav>
+        <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="hero">
+        <h1>Cakes Time</h1>
+        <p>
+          Discover our expertly crafted cake selection, a legacy of quality born
+          from decades of dedication. From classic to unique flavors, we've
+          delighted generations with our cakes. Join us in celebrating this
+          tradition of excellence. Choose from our range of cheesecakes,
+          chocolate cakes, cupcakes, and birthday cakes to satisfy your sweet
+          cravings, and make each choice an experience to remember.
+        </p>
+      </section>
+
+      <section class="img-area">
+        <img class="img-big" src="img/297.jpg" alt="" />
+      </section>
 
-<body>
-    <!-- Add your markup here -->
-</body>
+      <section class="cake-section">
+        <img class="grid-img" src="img/yaspasta-rizem.jpg" alt="" />
+        <img
+          class="grid-img"
+          src="img/Peanut-Butter-Chocolate-Cupcakes_730px-2.jpg.webp"
+          alt=""
+        />
+        <img
+          class="grid-img"
+          src="img/baklava-honey-pisctachio-cupcakes-kays-kitchen.webp"
+          alt=""
+        />
+        <img class="grid-img" src="img/twincupcake-2749204_1280.jpg" alt="" />
+      </section>
+    </main>
 
-</html>
+    <footer>
+      <div>
+        <a class="footer-links" href="traditional_cakes.html"
+          >Traditional Cakes</a
+        >
+        <a class="footer-links" href="special_cake.html">Special Cake</a>
+        <a class="footer-links" href="add_recipe.html">Add Your Recipe</a>
+      </div>
+      <hr />
+      <p class="copyright">
+        &copy; ISTANBUL 2023 Cakes Time. All rights reserved.
+      </p>
+    </footer>
+  </body>
+</html>
diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css
@@ -1 +1,197 @@
-/*  Add your styling here */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: Arial, sans-serif;
+  font-size: 1em;
+}
+
+/* header styles */
+
+header {
+  width: 100vw;
+  /* height: 25vh; */
+  display: flex;
+  flex-direction: column;
+  background-color: #fad3f8;
+  color: #b60a7d; /* text color */
+
+  box-shadow: rgb(153, 161, 153) -5px 20px 30px -10px;
+}
+
+.header-top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-start;
+  padding: 1.3rem;
+}
+nav ul {
+  display: none;
+  column-gap: 40px;
+  font-size: 1.2em;
+  list-style-type: none;
+  justify-content: center;
+  margin: 20px 0;
+  flex-direction: column;
+  align-items: center;
+}
+ul li a {
+  text-decoration: none;
+  color: rgb(35, 130, 194);
+  font-weight: 300;
+}
+.logo-img {
+  height: 7em;
+}
+
+.right {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: end;
+}
+.hamburger-menu {
+  height: 4em;
+}
+#menu-icon {
+  display: none;
+}
+#menu-icon:checked + nav ul {
+  display: flex;
+}
+.right h3 {
+  font-size: 1.1em;
+  font-weight: 200;
+}
+#name {
+  text-align: right;
+  color: #c221a7;
+  font-weight: bold;
+  text-shadow: #f5f5f5;
+}
+
+/* main styles */
+
+main {
+  margin: 2.6em 0;
+  padding: 1.3rem;
+  display: grid;
+  grid-template-rows: repeat(3, auto);
+  gap: 2em;
+  background: linear-gradient(
+    135deg,
+    #e1afebd3 0%,
+    #f5f5f5 30%,
+    #83dac465 100%
+  );
+}
+
+/* image area styles */
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+}
+
+.hero p {
+  text-align: justify;
+}
+h1 {
+  color: #c221a7;
+}
+
+/* image area styles */
+
+main img {
+  border-radius: 1em;
+  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+}
+.img-big {
+  width: 100%;
+  height: auto;
+}
+
+.cake-section {
+  display: grid;
+  gap: 1.3em;
+  grid-template-columns: repeat(2, auto);
+  grid-template-rows: repeat(2, 30vw);
+}
+
+.grid-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* footer styles */
+
+footer {
+  width: 100vw;
+  height: 25vh;
+  padding: 1.3rem;
+  background-color: #fad3f8;
+  color: #9b5de5; /* text color */
+}
+.copyright {
+  text-align: center;
+}
+.footer-links {
+  display: block;
+  margin-bottom: 1rem;
+}
+@media screen and (min-width: 540px) {
+  main {
+    margin: 2.6em 0;
+    padding: 1.3rem;
+
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 2fr 1fr;
+
+    gap: 2em;
+  }
+
+  .logo-img {
+    height: 15em;
+  }
+
+  .hero {
+    grid-row: 1/2;
+    grid-column: 2/-1;
+    text-align: end;
+    align-content: flex-start;
+    gap: 2em;
+  }
+  .hero p {
+    margin-bottom: 2em;
+    font-size: 1.5em;
+  }
+
+  .img-area {
+    grid-row: 1/2;
+    grid-column: 1/2;
+  }
+
+  .cake-section {
+    grid-row: 2/-1;
+    grid-column: 1/-1;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(1, 15vw);
+  }
+  nav ul {
+    display: flex;
+    flex-direction: row;
+    column-gap: 40px;
+    list-style-type: none;
+    justify-content: center;
+    margin: 20px 0;
+  }
+  .hamburger-menu {
+    display: none;
+  }
+}