CodeYourFuture · shafiekdavids · Jun 29, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/images/cake1.jpg b/images/cake1.jpg
diff --git a/images/cake2.jpg b/images/cake2.jpg
diff --git a/images/cake6.jpg b/images/cake6.jpg
diff --git a/images/cupcake.png b/images/cupcake.png
diff --git a/images/cupcake1.webp b/images/cupcake1.webp
diff --git a/images/cupcake2.jpg b/images/cupcake2.jpg
diff --git a/images/cupcakes-5.jpg b/images/cupcakes-5.jpg
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>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="images" href="/images" />
     <!-- Add a link to your css file here -->
-</head>
+  </head>
 
-<body>
+  <body>
     <!-- Add your markup here -->
-</body>
 
-</html>
+    <!-- START OF HEADER -->
+    <header class="header">
+      <div class="logo">
+        <img src="/images/cupcake.png" alt="logo" />
+      </div>
+
+      <div class="headline">The best cakes in town delivered to your door</div>
+    </header>
+
+    <!-- END OF HEADER -->
+
+    <!-- NAV -->
+    <div class="nav">
+      <a href="#home">HOME</a>
+      <a href="#cakes">CAKES</a>
+      <a href="#orderin">ORDERIN</a>
+      <a href="#lessons">LESSONS</a>
+      <a href="#about">ABOUT</a>
+    </div>
+
+    <!-- END OF NAV -->
+
+    <article class="article">
+      <div>
+        <h2>Welcome</h2>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse eaque
+          ratione dolor qui veritatis tempore suscipit? Possimus omnis odio sint
+          totam. Earum expedita voluptates enim nam sit optio magni magnam?
+        </p>
+        <br />
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse eaque
+          ratione dolor qui veritatis tempore suscipit? Possimus omnis odio sint
+          totam. Earum expedita voluptates enim nam sit optio magni magnam?
+        </p>
+      </div>
+
+      <img class="cake1" src="/images/cake1.jpg" alt="cake with chocolates" />
+    </article>
+    <br />
+
+    <article class="more">
+      <img class="cake2" src="/images/cake2.jpg" alt="white_cake" />
+      <img class="cake3" src="/images/cupcake1.webp" alt="cupcakes" />
+      <img class="cake4" src="/images/cupcake2.jpg" alt="chocolate_cupcakes" />
+      <img class="cake5" src="/images/cake6.jpg" alt="wedding_cakes" />
+    </article>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -1 +1,63 @@
 /*  Add your styling here */
+body {
+  margin: 20px;
+}
+
+.header {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: end;
+}
+
+.headline {
+  text-align: center;
+  font-size: 1em;
+  margin-bottom: 2em;
+}
+
+.article {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+h2 {
+  margin-left: 10px;
+}
+
+p {
+  margin-left: 10px;
+  font-size: 20px;
+}
+
+.article img {
+  width: 100%;
+  display: flex;
+}
+
+.more {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 1rem;
+}
+
+.more img {
+  width: 100%;
+}
+
+@media only screen and (min-width: 540px) {
+  .more {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+@media only screen and (min-width: 900px) {
+  .more {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+
+  .article {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+}