CodeYourFuture · filkovskyy · Feb 4, 2023 · Feb 9, 2023 · Feb 10, 2023 · Feb 10, 2023
diff --git a/basic-muffin-recipe-8cde647.jpg b/basic-muffin-recipe-8cde647.jpg
diff --git a/design/1.jpeg b/design/1.jpeg
diff --git a/design/2.jpeg b/design/2.jpeg
diff --git a/design/3.jpg b/design/3.jpg
diff --git a/design/4.jpg b/design/4.jpg
diff --git a/design/My project-1(3).png b/design/My project-1(3).png
diff --git a/design/big_cake.jpg b/design/big_cake.jpg
diff --git a/design/big_img.jpg b/design/big_img.jpg
diff --git a/design/white_logo.png b/design/white_logo.png
diff --git a/index.html b/index.html
@@ -1,16 +1,112 @@
 <!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>
+    <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>
-    <!-- Add a link to your css file here -->
-</head>
-
-<body>
-    <!-- Add your markup here -->
-</body>
+    <link rel="stylesheet" href="/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-</html>
+  <body>
+    <header>
+      <div id="logo">
+        <img src="/design/white_logo.png" alt="Logo" />
+      </div>
+      <div id="parag">
+        <h1>The best cakes in town delivered to your door</h1>
+      </div>
+    </header>
+    <main class="content">
+      <div class="frist">
+        <article id="article">
+          <h2>Welcome</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet congue dui.
+            Maecenas quis magna enim. Ut dignissim facilisis tortor, nec volutpat neque placerat
+            volutpat. Praesent venenatis cursus dui malesuada volutpat. Vivamus in convallis magna.
+            Phasellus iaculis velit nibh, id fermentum sapien accumsan nec. Phasellus dictum nulla
+            sit amet dui auctor, eu pharetra libero tempus. Donec vulputate sem vel nibh tristique,
+            vitae placerat ipsum gravida. Vivamus vulputate eros et nulla accumsan, in porta sapien
+            commodo. Vivamus ultrices sit amet sapien id facilisis. Phasellus sed efficitur diam,
+            nec gravida ipsum. Sed vitae fermentum libero, sed accumsan arcu. Vivamus semper tellus
+            eu lectus ultricies, at sollicitudin augue scelerisque. Donec fermentum velit orci, id
+            mollis augue facilisis mattis. Pellentesque scelerisque felis in viverra dapibus.
+          </p>
+        </article>
+        <div id="large_img">
+          <p class="price">
+            Cake <br />
+            $10.99
+          </p>
+          <img src="/design/big_cake.jpg" alt="Big_cakes" />
+        </div>
+      </div>
+      <div class="small_images">
+        <div id="small_img1">
+          <p class="price">
+            Cake <br />
+            $10.99
+          </p>
+          <img src="/design/1.jpeg" alt="Cake_1" />
+        </div>
+        <div id="small_img2">
+          <p class="price">
+            Cake <br />
+            $10.99
+          </p>
+          <img src="/design/2.jpeg" alt="Cake_2" />
+        </div>
+        <div id="small_img3">
+          <p class="price">
+            Cake <br />
+            $10.99
+          </p class="price">
+          <img src="/design/3.jpg" alt="Cake_3" />
+        </div>
+          <div id="small_img4">
+            <p class="price">
+              Cake <br />
+              $10.99
+            </p>
+            <img src="/design/4.jpg" alt="Cake_4" />
+          </div>
+      </div>
+      <div class="ad">
+        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet congue dui. Maecenas quis magna enim. Ut dignissim facilisis tortor, nec volutpat neque placerat volutpat. Praesent venenatis cursus dui malesuada volutpat. Vivamus in convallis magna. Phasellus iaculis velit nibh, id fermentum sapien accumsan nec. Phasellus dictum nulla sit amet dui auctor, eu pharetra libero tempus. </p>
+        <img src="/design/My project-1(3).png" alt="Ad Image">
+      </div>
+    </main>
+    <footer>
+      <div id="contact_section">
+        <h3>Contact us:</h3>
+        <p>+123456789 <br>
+          <a href="#">tasty.cakes@email.com</a>
+        </p>
+      </div>
+      <div id="visitus_section">
+        <h3>Visit us:</h3>
+        <p>
+          1 Tasty Cake Str. <br />
+          Glasgow <br />
+          G00 0AA
+        </p>
+        <p></p>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -1 +1,210 @@
-/*  Add your styling here */
+:root {
+  --chicken-yellow: rgba(250, 252, 209, 0.8);
+  --yellow: #ffeead;
+  --light-green: rgba(218, 255, 211, 0.5);
+  --light-blue: #9bf6ff;
+  --blue: #3d58d1;
+}
+body {
+  margin: 0;
+  display: grid;
+  grid-template-rows: auto 6fr 1fr;
+  width: 100vw;
+  font-family: 'Comfortaa', cursive;
+}
+/* Header */
+header {
+  display: grid;
+  grid-template-areas:
+    'logo button'
+    'heading heading';
+  background: var(--blue);
+  font-family: 'Permanent Marker', cursive;
+}
+
+#logo img {
+  grid-area: logo;
+  height: 8vw;
+}
+#parag {
+  width: 100vw;
+  grid-area: heading;
+}
+
+#parag > h1 {
+  font-size: 3rem;
+  font-style: italic;
+  text-align: center;
+}
+
+#menu_button {
+  margin: 0.5rem 0.5rem;
+  background-color: var(--chicken-yellow);
+  padding: 0 1vw 0 1vw;
+  border-radius: 5px;
+}
+#menu_button > div {
+  width: 35px;
+  height: 5px;
+  background-color: black;
+  margin: 6px 0;
+}
+/* Content */
+main {
+  margin: 1vw;
+  display: grid;
+  grid-template-rows: auto auto;
+}
+
+.frist {
+  display: flex;
+  height: 65vh;
+}
+article > p,
+h2 {
+  text-align: justify;
+  text-indent: 4vw;
+  padding: 0 5vw 0 5vw;
+}
+
+/* Images */
+#large_img {
+  position: relative;
+  display: grid;
+  grid-gap: 1vw;
+  color: #ffeead;
+  margin: 0;
+  align-items: end;
+}
+
+#large_img > img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.small_images > div {
+  display: flex;
+  align-items: end;
+}
+.price {
+  z-index: 2;
+  position: absolute;
+  font-size: 1rem;
+  background: var(--chicken-yellow);
+  border-radius: 0.5em;
+  padding: 0.4vw;
+  color: black;
+  margin-left: 0.4vw;
+}
+
+.small_images > div > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.small_images {
+  display: grid;
+  grid-gap: 1vw;
+  grid-template-columns: repeat(4, minmax(200px, 1fr));
+  grid-template-rows: 40vh;
+}
+/* Advertisement */
+.ad {
+  margin-top: 1vw;
+  display: flex;
+  flex-direction: row-reverse;
+  height: fit-content;
+  gap: 1vw;
+  background: #ffeead;
+  width: 98vw;
+  padding-right: 1vw;
+}
+.ad img {
+  height: 20vh;
+}
+.ad p {
+  text-align: justify;
+  text-indent: 1vw;
+}
+
+/* Footer */
+footer {
+  padding-left: 5vw;
+  padding-right: 5vw;
+  display: flex;
+  gap: 3vw;
+  justify-content: center;
+  background: var(--blue);
+}
+footer div > h3 {
+  font-family: 'Permanent Marker', cursive;
+  color: white;
+}
+
+footer div p > a {
+  line-height: 2vw;
+  color: white;
+}
+#contact_section {
+  text-align: right;
+}
+@media (max-width: 400px) {
+  #parag h1 {
+    font-size: 2rem;
+  }
+  #logo img {
+    height: 10vh;
+  }
+  #large_img {
+    display: none;
+  }
+  .frist {
+    position: absolute;
+  }
+  footer {
+    position: relative;
+    top: 33vh;
+  }
+
+  .small_images {
+    position: relative;
+    top: 100vh;
+    display: grid;
+    grid-gap: 1vw;
+    grid-template-columns: repeat(2, minmax(200px, 1fr));
+    grid-template-rows: repeat(2, 40vh);
+  }
+
+  .small_images > img {
+    width: 2vw;
+  }
+  .ad {
+    display: none;
+  }
+}
+
+@media (max-width: 800px) {
+  .frist {
+    flex-direction: column;
+  }
+
+  #large_img {
+    display: none;
+  }
+
+  .small_images {
+    display: grid;
+    grid-gap: 1vw;
+    grid-template-columns: repeat(2, minmax(200px, 1fr));
+    grid-template-rows: repeat(2, 40vh);
+  }
+
+  .small_images > img {
+    width: 10vw;
+  }
+  .ad {
+    display: none;
+  }
+}