CodeYourFuture · blasisi · Jun 10, 2021
diff --git a/img/Yellow cupcake.jpg b/img/Yellow cupcake.jpg
diff --git a/img/cake table.jpg b/img/cake table.jpg
diff --git a/img/candle cake.jpg b/img/candle cake.jpg
diff --git a/img/cherry cup cake.jpg b/img/cherry cup cake.jpg
diff --git a/img/cupcake logo.png b/img/cupcake logo.png
diff --git a/img/facebook-icon.svg b/img/facebook-icon.svg
diff --git a/img/instagram-icon.svg b/img/instagram-icon.svg
diff --git a/img/menu-hamburger.svg b/img/menu-hamburger.svg
diff --git a/img/ring donut.jpg b/img/ring donut.jpg
diff --git a/img/twitter-icon.svg b/img/twitter-icon.svg
diff --git a/index.html b/index.html
@@ -5,12 +5,88 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
     <title>Responsive Cake webpage</title>
-    <!-- Add a link to your css file here -->
+    <meta name="description" content="The cake cafe shop is where you can order your cake">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" type="image/x-icon" href="./img/cupcake logo.png">
 </head>
 
 <body>
     <!-- Add your markup here -->
+    <header>
+        <img class="logo" src="./img/cupcake logo.png" alt="cupcake logo" >
+        <p>The best cake in town delivered to your door </p>
+    </header>
+
+    <nav>
+
+
+        <ul>
+            <li><a href="home">Home</a></li>
+            <li><a href="cakes">Cakes</a></li>
+            <li><a href="ordering">Ordering</a></li>
+            <li><a href="lesson">Lesson</a></li>
+            <li><a href="about">About</a></li>
+            <li><a href="contact-us">Contact us</a></li>
+
+        </ul>
+        <!-- <div class="ham-menu"></div> -->
+    </nav>
+
+
+    <main>
+        <section class="intro">
+            <img src="./img/cake table.jpg" alt="cake table image ">
+            <article>
+                <h2>Welcome</h2>
+                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
+                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
+                        of type and scrambled it to make a type specimen book. It has survived not only five centuries,
+                        but also the leap into electronic typesetting, remaining essentially unchanged. </p>
+            </article>
+        </section>
+
+
+            <hr>
+
+
+        <section class="icons">
+            <ul>
+                <li>
+                    <img src="./img/candle cake.jpg " alt= "candle cake icon">
+                </li>
+                <li>
+                    <img src="./img/cherry cup cake.jpg " alt="cheery cake icon">
+                </li>
+                <li>
+                    <img src="./img/Yellow cupcake.jpg " alt="yellow cup cake icon">
+                </li>
+                <li>
+                    <img src="./img/ring donut.jpg" alt ="ring donut icon "">
+                </li>
+            </ul>
+        </section>
+    </main>
+
+    <hr>
+    <footer>
+
+    <div class="footer">
+
+            <img src="img/twitter-icon.svg" alt="twitter icon">
+        </li>
+            <img src="img/facebook-icon.svg" alt="facebook icon">
+        </li>
+            <img src="img/instagram-icon.svg" alt="instagram icon">
+        </li>
+    </ul>
+        <p>&copy; cupcake cafe, inc. </p>
+
+
+    </footer>
+    </main>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,217 @@
-/*  Add your styling here */
+  /* Add your styling here */
+  * {
+      box-sizing: border-box;
+      padding: 0;
+      margin: 0;
+  }
+
+  body {
+      background-color: white;
+      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+      font-size: 1.125rem;
+      font-weight: 200;
+  }
+
+  /* Header styling  */
+
+  header {
+      background-color: #D8BFD8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border: 1px solid;
+      width: 100vw;
+      height: 200px;
+      z-index: 999;
+      text-align: right;
+      padding: 4px;
+  }
+
+  header p {
+
+    align-self: flex-end;
+    font-family: 'poppins';
+    font-weight: bold;
+
+}
+
+  .logo {
+      width: 90px;
+  }
+
+  /* Navigation styling  */
+  nav {
+      display: none;
+
+  }
+
+  nav ul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+      margin-top: 1em;
+      display: flex;
+      justify-content: center;
+      line-height: 32px;
+      background-color: #800080;
+  }
+
+  nav li {
+      margin-bottom: 1em;
+      margin-left: 2em;
+      padding: 5px 0;
+  }
+
+
+  nav a {
+      text-decoration: none;
+      color: #F5F5F5;
+      z-index: 0;
+      font-weight: 700;
+      padding: .10px 5px;
+      text-transform: uppercase;
+      font-family: 'poppins'sans-serif;
+      box-shadow: 0 0 5px #010b11;
+
+  }
+
+
+  nav a:hover {
+      color: #010b11;
+      border-bottom: 3px solid;
+  }
+
+  nav a:focus {
+      color: #010b11;
+  }
+
+  nav ul li a:hover {
+      color: #DDA0DD;
+      transition: .9s;
+
+      box-shadow: 0 0 5px #010b11;
+  }
+
+
+  main {
+      margin: auto;
+      width: 90vw;
+
+  }
+
+  /* Introduction styling  */
+
+  .intro {
+      border-bottom: 3px solid;
+      display: grid;
+      grid-template-columns: 1fr;
+      align-items: center;
+      justify-items: center;
+      margin-top: 2em;
+
+  }
+
+  .intro article {
+
+      grid-row: 1/2;
+      color:#000033	;
+  }
+
+  .intro img {
+      width: 80vw;
+      margin: auto;
+  }
+
+  .intro h2 {
+      padding: 20px;
+  }
+
+  .intro p {
+      font-size: 20px;
+      padding: 20px;
+      font-family: 'Times New Roman', Times, serif;
+      font-weight: lighter;
+  }
+
+  .icons {
+      margin-top: 2em;
+  }
+
+  .icons ul {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+
+
+  }
+
+  .icons li {
+      list-style-type: none;
+  }
+
+  .icons img {
+      width: 40vw;
+      height: 40vw;
+      border: 1px solid black;
+  }
+
+  /* footer  */
+
+  footer {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      margin-top: 2em;
+      margin-left: 20px;
+      height: auto;
+      background-color: #D8BFD8;
+  }
+
+  footer img {
+      width: 5vw;
+
+  }
+
+  footer ul {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+  }
+
+  footer li {
+      list-style-type: none;
+
+  }
+    /* Media Query */
+ /* mobile */
+  @media screen and (min-width: 540px) {
+      /* ham burger */
+
+  }
+
+  @media screen and (min-width: 900px) {
+      .intro {
+          display: flex;
+          flex-direction: row;
+      }
+
+      .intro img {
+          width: 60vw;
+      }
+
+      nav {
+          display: block;
+
+      }
+
+      .icons ul {
+          grid-template-columns: 1fr 1fr 1fr 1fr;
+          gap: 15px;
+      }
+
+      .icons img {
+          width: 20vw;
+          height: 20vw;
+
+      }
+  }