CodeYourFuture · AkramIzedi · Feb 11, 2023 · Feb 14, 2023 · Feb 14, 2023 · May 23, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}
diff --git a/gallery.css b/gallery.css
@@ -0,0 +1,31 @@
+.container {
+    width: 24rem;
+    margin: 4rem;
+    padding: 2rem;
+    background-color: white;
+    }
+
+  .icon {
+    font-size: 3rem;
+    padding-left: 1rem;
+  }
+
+  h3 {
+    margin: 0;
+  }
+
+  p {
+    margin: 5px 0 0;
+  }
+
+  .item {
+    padding: 0 0 1.4rem 0;
+  }
+
+  /* Generic Styles End */
+
+  .container {
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
+
diff --git a/git_commands.txt b/git_commands.txt
@@ -0,0 +1,11 @@
+   history 10 
+   16  git config --add user.name afsoon
+   17  git config --list
+   18  git config --add user.email afsoonewss@gmail.com
+   19  git config --get user.email
+
+   21  git remote
+   22  git remote -v
+   23  git push origin 
+   24  history 10
+   25  history 10 > git_commands.txt
diff --git a/git_lazy.sh b/git_lazy.sh
@@ -0,0 +1,4 @@
+#!bin/bash
+git status
+git add .
+git commit -m "lazy"
diff --git a/images/pexels-felicity-tai-7966522.jpg b/images/pexels-felicity-tai-7966522.jpg
diff --git a/images/pranjall-kumar-lRAApjOIaFs-unsplash.jpg b/images/pranjall-kumar-lRAApjOIaFs-unsplash.jpg
diff --git a/images/slashio-photography-XxWxPGXwDU0-unsplash.jpg b/images/slashio-photography-XxWxPGXwDU0-unsplash.jpg
diff --git a/index.html b/index.html
@@ -1,16 +1,107 @@
 <!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">
     <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 -->
-</body>
+    <header class="header">
+      <div class="wrapper2">
+        <div class="menu2">
+          <ul>
+            <li><a href="#">Gallery</a></li>
+            <li><a href="#">Order</a></li>
+            <li><a href="#">Contact</a></li>
+        </ul>
+
+        </div>
+      </div>
+    </header>
+     <main class="wrapper">
+<div class="content">
+    <h1>Welcome</h1>
+        <h1>Love at First Bite</h1>
+        <h2> <em>The best cakes in town delivered to your door</em></h2>
+        <h2>OUR COLLECTION</h2>
+</div>
+<div class="container">
+    <div class="item">
+
+      <h3>French cake</h3>
+      <p>French cake, also known as "gateau," is a delectable culinary 
+        delight renowned for its intricate designs, rich flavors, and 
+        delicate textures. From classic pastries like croquembouche and 
+        tarte Tatin to indulgent creations like the decadent opera cake, 
+        French cakes showcase the artistry and culinary expertise that
+         France is famous for.
+
+</p>
+    </div>
+    <img class="icon" src="images/pexels-felicity-tai-7966522.jpg">
+
+
+    </span>
+    <div class="item">
+      <h3>Italian cake</h3>
+      <p>Italian cake, also known as "torta," is renowned for its decadent 
+        flavors and rich textures, often incorporating ingredients like creamy
+         mascarpone, fragrant citrus, and velvety chocolate. From classic
+          tiramisu to luscious ricotta-filled cannoli, Italian cakes showcase
+           the country's passion for indulgent and delightful desserts.</p>
+    </div>
+    <img class="icon" src="images/pranjall-kumar-lRAApjOIaFs-unsplash.jpg">
+
+</img>
 
-</html>
+    <div class="item" >
+      <h3>Classic cake</h3>
+      <p>
+        Classic cake is a timeless dessert loved by people of all ages, featuring
+         a tender and moist texture paired with a delectable combination of flavors.
+          Its traditional appeal and versatile nature make it a delightful treat for 
+          any occasion.
+      </p>
+    </div>
+    <img class="icon" src="images/slashio-photography-XxWxPGXwDU0-unsplash.jpg">
+
+
+</img>
+<button class="button">Order now</button>
+  </div>
+
+        </main>
+    <footer class="footer">
+        <div class="mainfoot">
+            <div class="wix">
+                <p>
+                    © 2023 by Mickey Haile.</p>
+            </div>
+            <div class="call">
+              <p>Call</p>>
+                <p>123-123-1234</p>
+
+            </div>
+
+
+            <div class="follow">
+              <p>Follow</p>
+                <div class="footer3">
+                  <ul>
+                        <li><a href="#">twitter</a></li>
+                        <li><a href="#">facebook</a></li>
+                        <li><a href="#">instagram</a></li>
+                    </ul>
+
+                  </div>
+            </div>
+            </div>
+        </footer>
+</body>
+</html>
+
diff --git a/style.css b/style.css
@@ -1 +1,151 @@
 /*  Add your styling here */
+body {
+    background-color: #e5e8ea;
+    color: #333;
+    font-size: 0.9rem;
+    line-height: 1.2;
+  }
+
+  .container {
+    width: 24rem;
+    margin: 4rem;
+    padding: 2rem;
+    background-color: rgb(236, 237, 238);
+  }
+
+  .icon {
+    font-size: 3rem;
+    padding-left: 1rem;
+    width: 100px;
+  }
+
+  h3 {
+    margin: 0;
+  }
+
+  p {
+    margin: 5px 0 0;
+  }
+
+  .item {
+    padding: 0 0 1.4rem 0;
+  }
+
+  /* Generic Styles End */
+
+  .container {
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+body {
+    font-family: roboto;
+  }
+
+  .wrapper2 {
+    padding: 3rem;
+    text-align: center;
+    color: #333;
+    background-color: #DDD6FE;
+  }
+
+  .menu {
+    background-color: white;
+    padding: 0.5rem;
+    border-radius: 2rem;
+  }
+
+  .menu a {
+    background-color: #EFF6FF;
+    padding: 0.6rem 1.5rem;
+    border-radius: 2rem;
+    color: black;
+    text-decoration: none;
+    font-size: 0.9rem;
+  }
+
+  .menu a.active {
+    background-color: #949aa3;
+    color: white;
+  }
+
+  /* Generic Styles End */
+
+  .menu {
+    display: flex;
+    justify-content: space-between;
+  }
+
+
+body {
+    background-color: #F1F5F9;
+  }
+
+  p {
+    text-align: center;
+    margin-top: 40px;
+  }
+
+  ul {
+    padding: 0;
+    list-style-type: none;
+    width: 300px;
+    margin: 30px auto;
+    background-color: rgba(203, 201, 201, 0.521);
+    display: flex;
+    flex-direction: row;
+  }
+
+  ul li {
+    padding: 20px;
+    text-align: center;
+    transition: flex;
+    transition-duration: 0.2s;
+  }
+
+  ul li:hover {
+    cursor: pointer;
+    border-bottom: solid 3px #2DD4BF;
+    }
+  @media screen and (min-width: 320px) {
+    body {
+        background: lightgrey
+    }
+  }
+    @media screen and (max-width: 540px) {
+    body {
+        background: #0077b6;
+    }
+  }
+  .container {
+    width: 24rem;
+    margin: 4rem;
+    padding: 2rem;
+    background-color: white;
+    }
+
+  .icon {
+    font-size: 3rem;
+    padding-left: 1rem;
+  }
+
+  h3 {
+    margin: 0;
+  }
+
+  p {
+    margin: 5px 0 0;
+  }
+
+  .item {
+    padding: 0 0 1.4rem 0;
+  }
+
+  /* Generic Styles End */
+
+  .container {
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
+