diff --git a/css/style.css b/css/style.css
index e69de29..4340cd4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,96 @@
+body{
+    background-color: aquamarine; 
+}
+
+* { 
+ margin= 0px; 
+ padding = 0px;  
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
+ box-sizing:border-box;
+ align-content: space-around;
+}
+a {
+    text-decoration: none;
+    
+}
+ul { 
+    list-style: none; 
+
+}
+body { 
+    margin: 0px; 
+    padding: 0px; 
+    font-family: erdana, Geneva, Tahoma, sans-serif;
+}
+/*-- blog --------------------*/ 
+#blog{ 
+ display: flex;
+ justify-content: right; 
+ align-items: center; 
+ flex-direction: column; 
+ padding: 40px; 
+ border-bottom: 1px solid rgba(0,0,0,0,05);
+ align-content: flex-end;
+
+}
+.blog-heading {
+    display: flex; 
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    
+
+}
+.blog-heading span {
+    color: #f33c3c;
+}
+.blog-heading h3 {
+    font-size: 2.4rem;
+    color: #2b2b2b; 
+    font-weight: 600; 
+    
+
+}
+.blog-container {
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+    margin: 20px opx; 
+    flex-wrap: wrap; 
+    align-content: flex-start;
+}
+.blog-box{
+    width: 400px;
+    border: 1px solid #ececec;
+    margin: 20px; 
+    align-items: left;
+    
+}
+.blog-img img {
+    width:100%;
+    height: 100%;
+    object-fit:cover;
+    object-position: right; 
+    padding: 0px; 
+    margin: 0px; 
+    border-image:none;
+    box-sizing: border-box;
+
+
+}
+.blog-text{
+    padding:0px;
+    display:flex; 
+    flex-direction: column; 
+
+}
+.footer { 
+    background-color: black;
+    
+}
+
+
+
+
+
+
diff --git a/cunto.webp b/cunto.webp
new file mode 100644
index 0000000..7e469ee
Binary files /dev/null and b/cunto.webp differ
diff --git a/index.htm b/index.htm
new file mode 100644
index 0000000..2bc9795
--- /dev/null
+++ b/index.htm
@@ -0,0 +1,61 @@
+<!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 blog section 
+     -->  
+   <section id="blog"> 
+  
+  <div class="blog-heading"> 
+  <span> WELCOME TO MY FOOD BLOG </span>
+  <h3> My blog </h3> 
+   <h5> introduction to my blog </h5>
+  </div>
+   
+
+ 
+  <div class= "blog-box"> 
+ 
+   <!-----blog container------>
+   <p >hello I am trying to create a blog.Here is my  <br>
+     my first ugly blog I will be using  Lorem text to avoid my stupidity <br>
+    sit amet consectetur adipisicing elit. Id, magni. Harum dolorem, reprehe<br>
+    ipsa praesentium! Eius facere architecto provident, nesciunt sit, tempor<br><br></p></p>
+  </div> 
+ <div> 
+  <h2> first Article: How to make tahini salad  101 </h2>
+  <div class="blog-img" > 
+    <img src="cunto.webp">
+  
+  <p> what is this? should I use leorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui aperiam neque  <br>
+    fugit, sunt quidem amet culpa suscipit consectetur, similique repellat sit dolore  <br>
+     ! Minima maiores doloribus eaque tempore et similique repellat sit dolore <br></p>
+ <h2> Article 2: how to make Arabian dumpling </h2>
+ <div class="blog-img"> 
+    <img src="tahini-salad.jpeg" alt="blog image">
+  <p> If you want to learn how to make this delicious food read as follows<br>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui aperiam neque  <br>
+    fugit, sunt quidem amet culpa suscipit consectetur, similique repellat sit dolore  <br>
+     ! Minima maiores doloribus eaque tempore et s</br> </p> </div>
+   </div> 
+  </body>
+  <footer> And here is the footer for more >
+    <div class="buttom" </div>
+> <button click here> </button>
+</footer>
+</html>
diff --git a/index.html b/index.html
deleted file mode 100644
index 3db679e..0000000
--- a/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!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>
diff --git a/tahini-salad.jpeg b/tahini-salad.jpeg
new file mode 100644
index 0000000..25890f1
Binary files /dev/null and b/tahini-salad.jpeg differ
