CodeYourFuture · HThanki · Nov 29, 2021 · Nov 29, 2021 · Nov 29, 2021 · Nov 30, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/apple-pie.png b/images/apple-pie.png
diff --git a/images/birthday-cake.png b/images/birthday-cake.png
diff --git a/images/burger-menu.png b/images/burger-menu.png
diff --git a/images/candle-cake.png b/images/candle-cake.png
diff --git a/images/cupcake.png b/images/cupcake.png
diff --git a/images/donut.png b/images/donut.png
diff --git a/images/piece-of-cake.png b/images/piece-of-cake.png
diff --git a/index.html b/index.html
@@ -1,16 +1,65 @@
 <!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>
+    <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=Rochester&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
     <!-- Add your markup here -->
-</body>
+    <header>
+      <img src="images/piece-of-cake.png" />
+      <p>The best cakes in town delivered to your door</p>
+      <div class="burger">
+        <img src="images/burger-menu.png" />
+      </div>
+    </header>
+    <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>
 
-</html>
+    <main>
+      <section class="welcome">
+        <div class="welcome-text">
+          <h1>Welcome</h1>
+          <p>
+            Welcome to Harsheek's Cakes, your favourite online cake shop!
+            Established in 1969, we bake and serve a tantalising selection of
+            traditional and affordable cakes and pies that brighten everyone’s
+            mood! Grab some cakes your family and friends for every occasion.
+          </p>
+        </div>
+        <div class="welcome-image">
+          <img src="images/birthday-cake.png" />
+        </div>
+      </section>
+      <section class="products">
+        <div class="product-img"><img src="images/apple-pie.png" /></div>
+        <div class="product-img"><img src="images/candle-cake.png" /></div>
+        <div class="product-img"><img src="images/cupcake.png" /></div>
+        <div class="product-img"><img src="images/donut.png" /></div>
+      </section>
+    </main>
+    <footer>
+      <img src="images/burger-menu.png" />
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -1 +1,222 @@
 /*  Add your styling here */
+
+body {
+  font-family: "Rochester", cursive;
+  -webkit-font-smoothing: antialiased;
+  color: black;
+  background-color: #fff1e6;
+  margin: 0;
+  text-align: center;
+  /* padding: 10px; */
+}
+
+main {
+  padding: 1em 3em;
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(2, 1fr);
+
+  grid-template-areas:
+    "header header"
+    "welcome welcome"
+    "products products"
+    "footer footer";
+}
+
+header,
+footer,
+.products img {
+  background-color: #eddcd2;
+}
+
+header {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    "image burger"
+    "image best-cakes";
+}
+
+header img {
+  grid-area: image;
+  width: 60%;
+  padding: 20px;
+}
+
+header p {
+  grid-area: best-cakes;
+  text-align: right;
+  padding-right: 1em;
+}
+
+nav {
+  display: grid;
+  justify-items: end;
+  padding-right: 1em;
+}
+
+nav img {
+  grid-area: burger;
+  width: 15%;
+  padding-top: 40px;
+}
+
+nav ul {
+  display: none;
+}
+
+h1 {
+  font-size: 4em;
+  font-weight: bold;
+  margin-top: 0;
+  text-align: left;
+}
+
+p {
+  font-size: 30px;
+  text-align: left;
+}
+
+.welcome {
+  grid-area: welcome;
+  padding-bottom: 30px;
+}
+
+.welcome img {
+  padding: 40px 80px;
+  width: 50%;
+  border: 3px solid black;
+  border-radius: 20px;
+  background-color: #ddbea9;
+}
+
+.products {
+  grid-area: products;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 2rem;
+}
+
+.products img {
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 100%;
+  padding: 10px;
+}
+
+footer {
+  grid-area: footer;
+  justify-items: start;
+
+  border: 2px solid black;
+}
+
+footer img {
+  width: 200px;
+}
+
+@media screen and (min-width: 540px) {
+  main {
+    grid-template-columns: repeat (4, 1fr);
+
+    grid-area: "header header header header" "nav nav nav nav"
+      "image image welcome welcome" "products products products products"
+      "footer footer footer footer";
+  }
+
+  header {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "image best-cakes";
+  }
+
+  header img {
+    grid-area: image;
+    width: 60%;
+    padding: 20px;
+  }
+
+  header p {
+    grid-area: best-cakes;
+    align-self: end;
+  }
+
+  .welcome-text {
+    display: welcome;
+  }
+
+  .welcome-image {
+    display: image;
+  }
+
+  .burger {
+    display: none;
+  }
+
+  header img {
+    width: 100px;
+  }
+
+  nav ul {
+    display: nav;
+    display: flex;
+    list-style: none;
+    font-size: 30px;
+    background-color: #eddcd2;
+  }
+
+  nav ul li {
+    /* padding: 0px 5px; */
+    margin: 0px 10px;
+    background-color: #ddbea9;
+  }
+
+  a {
+    text-decoration: none;
+    color: black;
+  }
+
+  a:visited {
+    text-decoration: none;
+    color: black;
+  }
+
+  a:hover {
+    text-decoration: none;
+    color: white;
+  }
+
+  .welcome {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .welcome-text {
+    margin-left: 100px;
+  }
+
+  .welcome-image {
+    display: grid;
+    align-items: center;
+    margin: 10px;
+  }
+
+  .products {
+    display: flex;
+  }
+
+  .products img {
+    width: 70%;
+  }
+
+  footer img {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  nav ul li {
+    margin: 0px 40px;
+    background-color: #ddbea9;
+  }
+}