CodeYourFuture · Khlil1313 · Feb 4, 2023 · Feb 4, 2023 · Feb 7, 2023 · Feb 8, 2023
diff --git a/images/Pancake.jpg b/images/Pancake.jpg
diff --git a/images/birthday_cake.jpg b/images/birthday_cake.jpg
diff --git a/images/birthday_cake1.jpg b/images/birthday_cake1.jpg
diff --git a/images/croissants.jpg b/images/croissants.jpg
diff --git a/images/croissants1.jpg b/images/croissants1.jpg
diff --git a/images/cupcake.jpg b/images/cupcake.jpg
diff --git a/images/logo.jpg b/images/logo.jpg
diff --git a/images/pancake1.jpg b/images/pancake1.jpg
diff --git a/images/pancake2.jpg b/images/pancake2.jpg
diff --git a/index.html b/index.html
@@ -7,10 +7,68 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Responsive Cake webpage</title>
     <!-- Add a link to your css file here -->
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <script type="text/javascript">
+        function classToggle() {
+        const navs = document.querySelectorAll('.navbar_items')
+        navs.forEach(nav => nav.classList.toggle('navbar_toggleShow'));
+        }
+        document.querySelector('.navbar_links_toggle')
+        .addEventListener('click', classToggle);
+    </script>
+
 </head>
 
 <body>
+
     <!-- Add your markup here -->
+    <div class="navbar">
+        <div class="navbar_links navbar_title">CakeCo</div>
+        <div class="navbar_links navbar_links_toggle">Menu</div>
+        <nav class="navbar_items">       
+            <div class="navbar_links"><a href="#">Home</a></div>
+            <div class="navbar_links"><a href="#">Cakes</a></div>
+        </nav>
+        <nav class="navbar_items navbar_items_right">
+            <div class="navbar_links"><a href="#">Order in</a></div>
+            <div class="navbar_links"><a href="#">Lessons</a></div>
+            <div class="navbar_links"><a href="#">About</a></div>
+        </nav>
+
+
+
+    </div>
+
+    <div class="upper_part">
+        <div class="upper_part_text">
+            <h2>Welcome to CakeCo bakery</h2>
+            <p>We are proud to deliver cakes and pasteries for over 50 years</p>
+        </div>
+        <img src="./images/birthday_cake.jpg" width="100%">
+    </div>
+    <div class="lower_part">
+        <div class="lower_part_section1">
+            <div><img class="birthday_cake" src="./images/birthday_cake1.jpg"><a href="#">Birthday Cake</a></div>
+            <div><img class="croissants" src="./images/croissants.jpg"><a href="#">croissants</a></div>
+        </div>
+        <div class="lower_part_section2">
+            <div><img class="cupcake" src="./images/cupcake.jpg"><a href="#">Cupcake</a></div>
+        </div>
+    </div>
+    <div class="navbar_footer">
+        <div class="lower_navbar">
+
+            <div class="lower_navbar_links"><a href="#">Our policy</a></div>
+            <div class="lower_navbar_links"><a href="#">Recipes</a></div>
+            <div class="lower_navbar_links"><a href="#">Find us on social media</a></div>
+
+
+
+        </div>
+        <footer>
+            <p>Thanks for visiting our website, we hope to see you again soon.</p>
+        </footer>
+    </div>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,192 @@
 /*  Add your styling here */
+.navbar {
+    display: flex;
+    background-color: black;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: beige;
+    padding: 10px;
+    font-weight: bold;
+
+}
+.navbar a:hover {
+    color: coral;
+}
+.navbar_items, .navbar_items_right {
+    display: flex;
+
+}
+.navbar_links {
+    padding-right: 30px;
+    font-size: 20px;
+
+
+}
+.navbar_items_right {
+    margin-left: auto;
+
+}
+.navbar_links_toggle {
+    display: none;
+}
+
+@media only screen and (max-width: 540px){
+    .navbar_items, .navbar {
+        flex-direction: column;
+    }
+    .navbar_items {
+        display: none;
+    }
+    .navbar_items_right {
+        margin-left: 0;
+    }
+    .navbar_links_toggle {
+        display: initial;
+        align-self: flex-end;
+        position: absolute;
+        cursor: pointer;
+    }
+    .navbar_toggleShow {
+        display: flex;
+    }
+    .upper_part {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+    }
+    .upper_part > img {
+        margin-bottom: 80px;
+    }
+    .lower_part {
+        margin-left: 80px;
+        display: grid;
+        grid-template-areas: 
+        "b cr"
+        "cu .";
+    }
+    .birthday_cake {
+        grid-area: b;
+        width: 150px;
+        height: 150px;
+    }
+    .croissants {
+        grid-area: cr;
+        width: 150px;
+        height: 150px;
+    }
+    .cupcake {
+        grid-area: cu;
+        width: 150px;
+        height: 150px;
+    }
+    .lower_part_section1 {
+        display: flex;
+        flex-direction: column;
+        justify-content:space-between;
+
+
+    }
+
+    .lower_part a {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        margin-bottom: 40px;
+        color: brown;
+
+    }
+    .lower_navbar {
+        display: flex;
+        flex-direction: column;
+        margin-left: 15px;
+
+    }
+    .lower_navbar a {
+        margin-left: 10px;
+        text-decoration: none;
+        text-align: center;
+        display:inline-flex;
+        color: beige;
+    }
+
+    footer p {
+        margin-left: 20px;
+        color: beige;
+    }
+    .navbar_footer {
+        background-color: black;
+    }
+
+
+
+}
+@media screen and (min-width: 540px) {
+    .upper_part {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content:center;
+
+
+
+    }
+    .upper_part_text {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-end;
+    }
+    .upper_part  img {
+        height: 300px;
+        width: 600px;
+        margin-top: 40px;
+        margin-right: 50px;
+    }
+    .navbar_items a {
+        text-decoration: none;
+        color:beige
+    }
+    .navbar_title {
+        color:cadetblue
+    }
+    .lower_part, .lower_part_section1, .lower_part_section2 {
+        display:flex;
+    }
+
+    .lower_part img {
+        height: 150px;
+        width: 250px;
+        margin-top: 300px;
+        margin-left: 30px;
+
+    }
+    .lower_part_section1 a, .lower_part_section2 a {
+        margin-left: 10px;
+        text-decoration: none;
+        display:block;
+        text-align: center;
+        color:coral;
+        margin-bottom: 150px;
+    }
+    .lower_part  {
+        display: flex;
+        justify-content:center;
+    }
+    .navbar_footer {
+        background-color: coral;
+
+    }
+    .lower_navbar a {
+        text-decoration: none;
+        margin-left: 20px;
+        font-size: 20px;
+        font-weight: bold;
+        color: beige;
+
+    }
+    footer p {
+        margin-left: 20px;
+    }
+
+}