CodeYourFuture · tersiakoetzee · Jun 23, 2022
diff --git a/images/background.jpeg b/images/background.jpeg
diff --git a/images/cake.jpg b/images/cake.jpg
diff --git a/images/cheesecake.jpg b/images/cheesecake.jpg
diff --git a/images/choclate cake.jpg b/images/choclate cake.jpg
diff --git a/images/chocolate cake.jpg b/images/chocolate cake.jpg
diff --git a/images/croissant.jpg b/images/croissant.jpg
diff --git a/images/cupcakes.jpg b/images/cupcakes.jpg
diff --git a/images/macarons.jpg b/images/macarons.jpg
diff --git a/index.html b/index.html
@@ -6,11 +6,87 @@
     <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">
     <!-- Add a link to your css file here -->
 </head>
 
 <body>
-    <!-- Add your markup here -->
+    <!-- Add your markup here  -->
+
+    <header class="logo">
+        <img src="/images/cake.jpg" alt="cake">
+        <h1>Cake Co</h1>
+        <p class="slogan">The best cakes in town delivered to your door</p>
+    </header>
+    <nav class="nav-container">
+
+
+        <input type="checkbox" id="tab-nav" class="tab-nav">
+        <label for="tab-nav" class="label">
+            <div class="burger"></div>
+            <div class="burger"></div>
+            <div class="burger"></div>
+        </label>
+        <ul class="content_nav">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">Cake</a></li>
+            <li><a href="#">Order In</a></li>
+            <li><a href="#">Lessons</a></li>
+            <li><a href="#">About</a></li>
+        </ul>
+
+        <!-- <input class="menu-btn" type="checkbox" id="menu-btn" />
+        <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
+
+        <ul class="menu">
+            <li><a href="#home">Home</a></li>
+            <li><a href="#cake">Cake</a></li>
+            <li><a href="#order-in">Order in</a></li>
+            <li><a href="#lessons">Lessons</a></li>
+            <li><a href="about">About</a></li>
+        </ul> -->
+    </nav>
+
+    <div class="content">
+        <div class="content-info">
+            <h1>welcome</h1>
+            <p>Lorem ipsum dolor sit amet. Qui voluptatum quis est voluptatem recusandae et velit corrupti sed esse quia
+                qui asperiores facilis sed voluptates deserunt. Est dolores architecto qui dolorem voluptatibus ea
+                debitis repellat.<br>
+
+                Id amet error et eveniet magnam in mollitia delectus ex omnis voluptatibus id consequuntur perferendis?
+                Qui expedita blanditiis eos repudiandae optio non eius quos et alias deleniti eos illum velit ad
+                inventore molestiae sed blanditiis minima.</p>
+        </div>
+        <div class="content-img">
+            <img src="/images/chocolate cake.jpg" alt="" width="300px">
+        </div>
+    </div>
+
+    <div class="products">
+        <div class="product-img">
+            <img src="/images/cheesecake.jpg" alt="" width="200px" height="140px">
+        </div>
+
+        <div class="product-img">
+            <img src="/images/macarons.jpg" alt="" width="200px" height="140px">
+        </div>
+
+        <div class="product-img">
+            <img src="/images/cupcakes.jpg" alt="" width="200px" height="140px">
+        </div>
+
+        <div class="product-img">
+            <img src="/images/croissant.jpg" alt="" width="200px" height="140px">
+        </div>
+    </div>
+    <footer class="foot-info">
+        <div><P>Email Us At: <br> [email protected]</P></div>
+        <div><p>Privacy Policy</p></div>
+        <div><p>&copy 2022 Cake Co</p></div>
+    </footer>
+
+
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,152 @@
 /*  Add your styling here */
+
+.tab-nav {
+    outline: none;
+    display: none;
+}
+
+.label {
+    display: none;
+}
+
+.burger {
+    width: 35px;
+    height: 5px;
+    background-color: white;
+    margin-top: 5px;
+}
+
+.content_nav {
+    grid-column: 3;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+}
+a {
+    box-shadow: inset 0 0 0 0 #54b3d6;
+    color: #54b3d6;
+    margin: 0 -.25rem;
+    padding: 0 .25rem;
+    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
+  }
+  a:hover {
+    box-shadow: inset 100px 0 0 0 #54b3d6;
+  }
+
+.content_nav li {
+
+    display: inline-block;
+    padding-right: 10px;
+
+}
+
+.content_nav li a {
+
+    text-decoration: none;
+    color: rgb(5, 5, 5);
+
+}
+
+
+@media screen and (max-width: 770px) {
+
+    .label {
+
+        display: grid;
+        cursor: pointer;
+        padding-left: 60px;
+
+    }
+
+    .content_nav {
+
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-column: 1/4;
+        text-align: center;
+        max-height: 0;
+        overflow: hidden;
+        transition: all ease-in-out 0.6s;
+    }
+
+}
+
+
+.nav-container {
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    padding: 10px 0px;
+    background-image: linear-gradient(to right, rgb(0, 47, 255), rgb(0, 255, 247), rgb(0, 255, 119));
+    position: relative;
+    overflow: hidden;
+    z-index: 3;
+
+}
+
+body {
+    background-image: linear-gradient(to right, rgb(216, 5, 157), orange, rgb(186, 177, 7), rgb(6, 245, 6), rgb(0, 191, 255), rgb(160, 50, 238), violet);
+    background-size: cover;
+}
+
+.logo {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    margin: 10px;
+    text-align: center;
+    font-size: large;
+    align-items: center;
+    justify-items: center;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.slogan {
+    margin-top: 50px;
+}
+
+.content {
+    display: grid;
+    position: relative;
+    align-items: center;
+    justify-items: center;
+    margin: 20px;
+    padding: 20px;
+    margin-top: 100px;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+
+@media (min-width: 600px) {
+    .content {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+}
+
+.products {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    position: relative;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    align-items: center;
+    justify-items: center;
+    margin: 20px;
+    padding: 20px;
+}
+
+img {
+    border: solid;
+    border-radius: 5px;
+    border-color: bisque;
+
+}
+
+.foot-info {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    align-items: center;
+    justify-items: center;
+}