CodeYourFuture · Zobeir-Rigi · Apr 12, 2023
diff --git a/design/logo.svg b/design/logo.svg
diff --git a/index.html b/index.html
@@ -6,11 +6,41 @@
     <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 -->
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-    <!-- Add your markup here -->
+    <header >
+        <div class="logo">
+            <img src="./design/logo.svg" alt="">
+        </div>
+        <nav id="nav-mobile">≡</nav>
+        <h4>The best cakes in town delivered to your door</h3>
+
+    </header>
+    <main class="main">
+        <section class="introduction">
+            <h2>Welcome</h2>
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, explicabo dolorum, nemo illum nihil consequuntur in magnam architecto mollitia minus aperiam accusamus molestiae. Temporibus, molestiae.</p>
+
+        </section>
+        <section class="cakes">
+            <div class="first">
+                <img src="https://img.taste.com.au/hbNtzI2Q/taste/2021/08/clinkers-cake-173208-2.jpg" alt="">
+            </div>
+            <div class="second">
+                <img src="https://www.recipetineats.com/wp-content/uploads/2020/08/My-best-Vanilla-Cake_9-SQ.jpg" alt="">
+                <img src="https://img.delicious.com.au/pkTPC5NE/w1200/del/2016/11/peach-melba-cake-39925-1.jpg" alt="">
+            </div>
+            <div class="third">
+               <img src="https://cdn.shopify.com/s/files/1/0272/5848/6851/products/ice-cream-cone-drip-cake-851397.jpg" alt="">
+                <img src="https://www.baking-sense.com/wp-content/uploads/2015/04/vanilla-cake-featured.jpg" alt="">
+            </div>
+        </section>
+    </main>
+    <footer>
+        created by @Zobeir
+    </footer>
 </body>
 
 </html>
diff --git a/readme.md b/readme.md
@@ -8,7 +8,8 @@ Two wireframes are provided down below (scroll to the bottom).
 ## Task
 
  - **Fork and clone** this repo.
-   - To fork, hit the 'fork' button in the top right corner of this page on Github. 
+   - To fork, hit the 'fork' button in the top right corner of this page 
+  on Github. 
   Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page. 
    - To clone, click the green button that says 'Code' on that page.
   Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Cakes repository on Github (which was created when you forked).

diff --git a/style.css b/style.css
@@ -1 +1,103 @@
-/*  Add your styling here */
+/* Screen for Mobile */
+*{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+Header {
+  display: flex;
+  position: relative;
+  height: 200px;
+  width: 100%;
+  background-color: brown;
+}
+
+.logo {
+  width: 150px;
+  height: 100px;
+  position: absolute;
+  top: 20%;
+  left: 2%;
+}
+.logo > img {
+  width: 100px;
+  height: 90px;
+}
+#nav-mobile{
+position: absolute;
+top: 1%;
+right: 1%;
+color: white;
+}
+/* header > nav {
+  position: relative;
+} */
+/* nav > ul {
+}
+nav > ul > li {
+} */
+
+header > h4 {
+  position: absolute;
+  bottom: 2%;
+  right: 2%;
+  color: white;
+}
+.main{
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.introduction{
+  height: 200px;
+ }
+
+ .cakes{
+  padding: 10px;
+  background-color: pink;
+}
+.first{
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+}
+.first >img{
+  border-radius: 10px;
+    width:90%;
+    height: 400px;
+
+}
+.second{
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 10px;
+}
+.second>img{
+  width: 45%;
+  height: 300px;
+  border-radius: 10px;
+}
+.third{
+   margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 10px;
+}
+.third>img{
+  width: 45%;
+  height: 300px;
+  border-radius: 10px;
+}
+footer{
+  display: flex;
+  justify-content: center;
+  height: 50px;
+  width: 100%;
+  background-color: brown;
+  padding: 10px;
+  color: white;
+}