diff --git a/css/style.css b/css/style.css
index e69de29..7c1565b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,248 @@
+*{
+ margin: 0;
+ padding: 0;
+}
+.container{
+    background-color: rgb(237, 245, 229);
+    width: auto;
+    height: 200rem;
+    
+}
+.container  .nav{
+    background-color:rgb(231, 231, 94);
+    display: flex;
+     align-items: center;
+    text-decoration: none;
+    height: 5rem;
+    border-radius: 2rem;
+
+ }
+ 
+ .container  .nav ul input{
+    margin-top: 5px;
+     list-style-type: none;
+     width: 20rem;
+     height: 10px;
+       margin: 1rem 16rem 1rem 1rem ;
+       padding: 1rem;
+       border-radius: 5rem;
+
+     }
+    
+.container  .nav  h1{
+    color: blueviolet;    background-color: inherit;
+    padding-left: 1rem;
+    font-weight: bold;
+    font-size: x-large;
+   
+}
+.container  .nav img{
+  float: left;
+  border-radius: 50%;
+  width: 4rem;
+  height: 4rem;
+  margin-left: 2rem;
+
+}
+
+ .container  .nav ul{
+  background-color: inherit;
+    display: flex;
+    justify-content: center;
+ 
+ }
+ .container  .nav ul li{
+    background-color: inherit;
+   list-style-type: none;
+   padding: 1.5rem 1rem 1rem 1rem;
+ }
+
+ .container  .nav ul li a{
+    background-color: inherit;
+    text-decoration: none;
+   color: rgb(105, 24, 211);
+   font-size: x-large;
+
+ }
+
+ .container .header{
+    height: 10rem;
+    text-align: center;
+    margin: 2rem 20rem;
+ }
+ 
+ .container .header h2{
+  color: blueviolet;
+  padding: 1rem 0;
+  font-size: xx-large;
+   
+ }
+
+
+ .container .main{
+ 
+  background-color:rgb(232, 232, 197);   width: 80%;
+   margin: 0 auto;
+   padding: 1rem 2rem ;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   
+ }
+ .container .main h1{
+  color: blueviolet;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  padding: 2rem;
+ }
+ .container .main .article{
+  background-color: lightblue;
+    height: 35rem;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    border: 1px solid rgb(86, 55, 177);
+    border-radius: 2rem;
+ }
+ .container .main .article1{
+ margin-bottom: 20px;
+     
+ }
+ .container .main .article img{
+  height: 20rem;
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius:   2rem 2rem 0rem 0rem;
+  
+}
+.container .main div {
+   text-align: center;
+  
+}
+.container .main div .btn1{
+  background-color: blueviolet;
+  padding: 15px 50px;
+  font-size: large;
+  border-radius: 5rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  color: white;
+}
+
+
+/* css form */
+.container .main .form{
+  height: 30rem;
+  background-color: rgb(190, 138, 238) ;
+  margin: 0rem 15rem;
+  border-radius: 2rem;
+  display: flex;
+  font-size:x-large;
+  flex-direction: column;
+  margin-top: 2rem;
+  padding: 2rem;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+ 
+.container .main .form label{
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+  font-size:x-large;
+}
+.container .main .form input{
+   padding: 15px;
+   border-radius: 20px;
+}
+.container .main .form input:last-child{
+  padding: 50px 20px;
+  border: 1px solid rgb(192, 29, 29);
+}
+.container .main .form .btn button{
+
+  border-radius: 20px;
+  background-color:rgb(231, 231, 94);
+  padding: 20px 80px;
+  border-radius: 5rem;
+  margin-top: 2rem;
+ }
+
+
+
+
+
+
+
+/* footer */
+footer{
+  padding: 20px;
+  background-color:rgb(231, 231, 94);
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  justify-content: space-between;
+ 
+}
+
+footer .container{
+  display: flex;
+  width: auto;
+flex-direction: row;
+padding-left: 50px;
+border-radius: 2rem;
+
+}
+footer .container .blog-info{
+  
+  padding: 2rem 2rem 0rem 0rem;
+}
+footer .container .blog-info  h2{
+  color: blueviolet;
+}
+footer .container .blog-info img{
+  float: left;
+  border-radius: 50%;
+  width: 4rem;
+  height: 4rem;
+  margin: 1rem 1rem 2rem 1rem;
+  
+}
+footer .container .section{
+  padding:10px 0 0 10px;
+  display: flex;
+  width: auto;
+  flex-direction: row;
+  justify-content: space-around;
+  
+
+}
+footer .container .section .sub{
+padding-right: 50px;
+
+width: 150px;
+display: flex;
+flex-direction: column;
+height: 150px;
+  
+
+}
+footer .container .section .sub h4{ 
+  color: blueviolet;
+     padding-bottom:10px ;
+ }
+ footer .container .section .sub ul li{ 
+      padding-bottom:10px ;
+  }
+li{
+  list-style-type: none;
+}
+footer .container .qoraal h2 span{
+  color: blueviolet;
+}
+footer h3{
+  font-weight:400;
+  color: blueviolet;
+  padding-bottom: 10px;
+  padding-top:15px ;
+  font-weight:bolder ;
+}
\ No newline at end of file
diff --git a/img/article2-img.jpg b/img/article2-img.jpg
new file mode 100644
index 0000000..5c36530
Binary files /dev/null and b/img/article2-img.jpg differ
diff --git a/img/img2.png b/img/img2.png
new file mode 100644
index 0000000..7877750
Binary files /dev/null and b/img/img2.png differ
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 0000000..cbd4d08
Binary files /dev/null and b/img/logo.png differ
diff --git a/index.html b/index.html
index 3db679e..396bf72 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,149 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <!-- Add your HTML  here -->
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <title>My Blog</title>
+  <link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+</head>
+
+<body>
+  <!-- Add your HTML  here -->
+  <div class="container">
+
+    <div class="nav">
+      <img src="/img/logo.png" alt="blog logo">
+      <h1>zayid blog</h1>
+
+      <ul>
+        <input type="text" placeholder="search">
+        <li>
+          <a href="#article">Article</a>
+        </li>
+        <li>
+          <a href="#contact">Contact</a>
+        </li>
+        <li><a href="#">Service</a></li>
+        <li>
+          <a href="#location"> About </a>
+        </li>
+
+      </ul>
+    </div>
+    <div class="header">
+      <h2>zayid mohamedy blog</h2>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat totam suscipit expedita. Molestiae, eligendi
+        cum nihil illum molestias exercitationem consequatur esse quisquam natus aut, sit nesciunt quae facere nulla
+        doloremque.</p>
+    </div>
+    <div class="main">
+      <h1>🚩Posts</h1>
+      <div id="article" class="article article1">
+        <h2> 🥇 deliver your order</h2>
+        <img src="/img/img2.png" alt="article1 image">
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et
+          veniam deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod
+          vel suscipit. <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus
+          repudiandae distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea?
+          Eius vero mollitia possimus omnis?
+          , ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et veniam
+          deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod vel
+          suscipit. <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus repudiandae
+          distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea? Eius vero
+          mollitia possimus omnis?</p>
+      </div>
+      <div class="article article2">
+        <h2>🥈customize your design</h2>
+        <img src="/img/article2-img.jpg" alt="article2 image">
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et
+          veniam deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod
+          vel suscipit. <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus
+          repudiandae distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea?
+          Eius vero mollitia possimus omnis?
+          , ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et veniam
+          deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod vel
+          suscipit. <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus repudiandae
+          distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea? Eius vero
+          mollitia possimus omnis?</p>
+
+      </div>
+    <div>
+      <button class="btn1">Read more</button>
+    </div>
+    <hr>
+<hr>
+    <h1 id="location"> 💧location</h1>
+    <div class="map">
+      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3934.2625146994715!2d44.028599313758875!3d9.572624582875598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1628bfb3d91cb0d7%3A0x94716fd2eb28822!2sFikrcamp!5e0!3m2!1sbn!2sbd!4v1666256676292!5m2!1sbn!2sbd" width="800" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    </div>
+    <h1> 📞contact</h1>
+<hr>
+    <div id="contact" class="form">
+      <h2>  Fill this form</h2>
+      <label for="name">Name</label>
+      <input type="text"  placeholder="enter your name" >
+      <label for="name">Number</label>
+      <input type="text"  placeholder="enter your number" >
+      <label for="name">Comment</label>
+      <input type="text"  placeholder="add you comment here" >
+      <div class="btn">
+        <button>submit</button>
+      </div>
+    </div>
+    
+    </div>
+
+
+
+ 
+    <footer>
+
+      <div class="container">
+          <div class="blog-info">
+            <img src="/img/logo.png" alt="blog logo">
+              <h2>zayid mohamedy blog  </h2>
+              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat totam suscipit expedita. Molestiae, eligendi cum nihil illum molestias exercitationem consequatur esse quisquam natus aut, sit nesciunt quae facere nulla doloremque.
+
+              </p>
+          </div>
+          <div class="section">
+             
+              <div class="sub sub2">
+                  <h4><u>Posts</u></h4>
+                  <ul>
+                      <li>article1</li>
+                      <li>article2</li>
+                      <li>article3</li>
+                  </ul>
+              </div>
+              <div class="sub sub3">
+                  <h4><u>Service</u></h4>
+                  <ul>
+                      <li>web design</li>
+                      <li>customizing design</li>
+                      <li>more ...</li>
+                  </ul>
+              </div>
+              <div class="sub4 sub">
+                  <h4><u>location</u></h4>
+                  <p>
+                     Cecilia Chapman
+                     711-2880 Nulla St.
+                      Mankato Mississippi 96522
+                      (257) 563-7401
+                  </p>
+              </div>
+          </div>
+      </div>
+
+      <center>
+          <h3>zayidmohamedy All right reserved © 2022</h3>
+      </center>
+  </footer>
+       
+</body>
+
+</html>
\ No newline at end of file
diff --git a/my output design.png b/my output design.png
new file mode 100644
index 0000000..bdc12c2
Binary files /dev/null and b/my output design.png differ