CodeYourFuture · HeniMKH · Nov 8, 2022 · Nov 8, 2022 · Nov 11, 2022 · Dec 20, 2022
diff --git a/img/cupcake.jpg b/img/cupcake.jpg
diff --git a/img/photo_2022-11-08_20-11-20.jpg b/img/photo_2022-11-08_20-11-20.jpg
diff --git a/img/photo_2022-11-08_20-11-59.jpg b/img/photo_2022-11-08_20-11-59.jpg
diff --git a/img/photo_2022-11-08_20-12-09.jpg b/img/photo_2022-11-08_20-12-09.jpg
diff --git a/img/photo_2022-11-08_20-12-17.jpg b/img/photo_2022-11-08_20-12-17.jpg
diff --git a/img/photo_2022-11-11_16-24-55.jpg b/img/photo_2022-11-11_16-24-55.jpg
diff --git a/index.html b/index.html
@@ -1,16 +1,74 @@
-<!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 -->
+<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 -->
+<!-- Add your markup here -->
+<div class="main-container">
+<header>        
+    <div class ="logo">
+        <img  src="img/cupcake.jpg" alt="logo">
+    </div>
+    <div class="nav-p-container">
+      <div class="hamburger-menu">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <div class="intro">
+        <span>The best cakes in town delivered to your door</span>
+      </div>
+    </div>
+</header>
+<main>
+   <!---- <section>
+        <nav>
+            <ul>
+                <li>Home</li>
+                <li>Cake</li>
+                <li>Orderin</li>
+                <li>Lessons</li>
+                <li>About</li>                   
+            </ul>            </nav>
+    </section> -->
+    <div class="second-container">
+    <section class="content">
+        <h1 class="content-1">Welcome</h1>
+        <p class="content-2">By ordering a custom cake, macarons or other sweet treats from The Sweetest Gift, you’re directly contributing to our charity mission of supporting transplant recipients and those living with chronic illness. 
+
+            For corporate events, we can also arrange for a speaker from The Sweetest Gift to highlight our "sweetness with substance" philosophy.
+
+            For a sample of some of the work our team has created, take a look at our gallery below.</p>
+    </section>
+
+    <div class="main-img-container">
+        <img src= "img/photo_2022-11-11_16-24-55.jpg" alt="\M cake">
+    </div>
+    </div>
+
+    <section class="images-container">
+           <div class="images"> <img src="img/photo_2022-11-08_20-11-20.jpg" alt="A-cupcake"></div>
+           <div class="images"> <img src= "img/photo_2022-11-08_20-11-59.jpg" alt=" F cake"></div>
+           <div class="images"> <img src="img/photo_2022-11-08_20-12-09.jpg" alt="Mac-cake"></div>
+           <div class="images"> <img src="img/photo_2022-11-08_20-12-17.jpg" alt="ch"></div>
+    </section>
+
+</main>
+<footer class="footer">
+
+    <div class="links-container">
+        <a href="#">Instagram</a>
+        <a href="#">Facebook</a>
+        <a href="#">E-mail</a>
+    </div>
+
+    <div class="copyright">
+        <p>© Hengameh.</p>
+    </div>
+</footer>
+</div>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,139 @@
-/*  Add your styling here */
+body { 
+    margin: 0px;
+    border: 0px;
+    font: size 16px;
+  }
+  .main-container{
+  width: 100%; 
+  height: 100%;
+
+  max-width: 1800px;
+  margin: 0px auto;
+  font-size: 1em;
+  }
+  /*header style*/
+
+  header{
+  background-color: rgb(240, 235, 245);
+  display: flex;
+  justify-content: space-between; 
+  font-size: 2em;  
+  }
+
+  /*logo style*/
+  .logo{
+  margin: 10px 10px 10px 10px;
+  width: 200px;
+  }
+  .logo img{  
+  width: 100%;
+  }
+
+
+  .hamburger-menu {
+  height: 30px;
+  width: 30px;
+  display: flex;
+  flex-direction: column;    
+  justify-content: space-between;
+
+  }
+  .hamburger-menu span {
+  height: 20%;    
+  background-color: gray;
+  border-radius: 2px;
+  }
+  .nav-p-container {
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin: 5px 5px 10px 10px;
+  }
+
+  /*main style */
+
+
+
+  main{
+  margin: 10px 10px 0px 10px;
+  }
+  .content-2{
+    text-align:justify
+  }
+  .main-img-container img{
+  width: 250px;
+  height: 250px;
+  width: 100%;
+  }
+  .images img{
+  width: 250px;
+  height: 250px;
+  width: 100%;
+
+  }
+  .images-container {    
+  display: grid;
+  grid-template-columns: 1fr 1fr ;
+
+  }
+
+  /*footer style*/
+  footer{
+  background-color: rgb(195, 177, 211);
+  font-size: 2em;
+  }
+  .links-container{
+  display: flex;
+  flex-direction: column;
+  margin-left: 10px;
+  }
+  .copyright {
+  text-align: center;
+  }
+
+  /*media style 540-900*/
+  @media (min-width: 540px) 
+   {
+    .images-container {    
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;  
+     gap:5px; } 
+
+    .second-container{
+      display: grid;
+      grid-template-columns:1fr 1fr;
+
+    }
+    .content{
+      grid-column: 2/3;
+
+    }
+    .main-img-container {
+      grid-column: 1/2;
+    } 
+
+  header ,footer{
+    background-color: rgb(78, 202, 186);
+
+  }
+  .content{
+    text-align: right;
+  }
+  }
+
+  /*media style min900px*/
+  @media (min-width: 900px) {
+  header ,footer{
+    background-color: rgb(241, 188, 119);
+      }
+     .links-container{
+        display: flex;
+        flex-direction:row;
+        justify-content: space-around;
+
+
+      }
+
+  }