CodeYourFuture · kostiantynkovalchuk · Sep 20, 2024 · Sep 20, 2024 · Sep 20, 2024 · Sep 20, 2024
diff --git a/Cakes-Co/images/Cake 1.jpg b/Cakes-Co/images/Cake 1.jpg
diff --git a/Cakes-Co/images/Cake 2.jpg b/Cakes-Co/images/Cake 2.jpg
diff --git a/Cakes-Co/images/Cupcake.jpg b/Cakes-Co/images/Cupcake.jpg
diff --git a/Cakes-Co/images/Donut.jpg b/Cakes-Co/images/Donut.jpg
diff --git a/Cakes-Co/images/Featured Cake.jpg b/Cakes-Co/images/Featured Cake.jpg
diff --git a/cakes-co.css b/cakes-co.css
@@ -0,0 +1,107 @@
+/* Default Mobile First CSS */
+body {
+  font-family: "Arial, sans-serif";
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #fff8f0;
+}
+
+header {
+  text-align: center;
+  padding: 1em;
+  background-color: #ffb6c1;
+  color: white;
+}
+
+.menu-toggle {
+  display: block;
+}
+
+.main {
+  padding: 1em;
+}
+
+.featured-cakes img {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+}
+
+.categories {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  padding: 1em;
+}
+
+.category img {
+  width: 100%;
+  border-radius: 8px;
+}
+
+footer {
+  text-align: center;
+  padding: 1em;
+  background-color: #ffb6c1;
+  color: white;
+}
+
+/* Medium Screen Styles */
+@media (min-width: 540px) {
+  header {
+    padding: 1.5em;
+  }
+
+  .categories {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+  }
+
+  .featured-cakes img {
+    width: 80%;
+    margin: 0 auto;
+    display: block;
+  }
+
+  footer {
+    padding: 2em;
+  }
+}
+
+/* Large Screen Styles */
+@media (min-width: 900px) {
+  body {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .main {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .featured-cakes img {
+    width: 60%;
+    height: auto;
+  }
+
+  .welcome {
+    width: 40%;
+    padding: 2em;
+  }
+
+  .categories {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  footer {
+    padding: 3em;
+  }
+}
diff --git a/cakes-co.html b/cakes-co.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CakeLand</title>
+    <link rel="stylesheet" href="cakes-co.css" />
+  </head>
+  <body>
+    <header>
+      <div class="logo">CakeLand</div>
+      <button class="menu-toggle">☰</button>
+      <h1>The best cakes in town delivered to your door</h1>
+    </header>
+
+    <main>
+      <section class="welcome">
+        <h2>Welcome</h2>
+        <p>
+          Our cakes will make your life brighter and sweeter. Order them for
+          your special moments or everyday joy.
+        </p>
+      </section>
+
+      <section class="featured-cakes">
+        <img src="images/Featured Cake.jpg" alt="Featured Cake" />
+      </section>
+
+      <section class="categories">
+        <div class="category">
+          <img src="images/Cake 1.jpg" alt="Cake 1" />
+        </div>
+        <div class="category">
+          <img src="images/Cake 2.jpg" alt="Cake 2" />
+        </div>
+        <div class="category">
+          <img src="images/Cupcake.jpg" alt="Cupcake" />
+        </div>
+        <div class="category">
+          <img src="images/Donut.jpg" alt="Donut" />
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <p>Want some cake? CALL 090005678489 NOW</p>
+    </footer>
+  </body>
+</html>