diff --git a/css/home.css b/css/home.css
new file mode 100644
index 0000000..ea4dd24
--- /dev/null
+++ b/css/home.css
@@ -0,0 +1,51 @@
+/* The sidebar menu */
+.sidenav {
+    height: 100%; 
+    width: 160px; 
+    position: fixed; 
+    top: 0; 
+    left: 0;
+    background:lightgray;
+    padding-top: 20px;
+    
+  }
+  /* The main menu */
+  .main {
+    margin-left: 300px; 
+    padding: 0px 10px;
+    font-color: green;
+    background-color: whitesmoke;
+  }
+  body {
+    background-color: powderblue;}
+    h1 {
+        color: blue;
+      }
+      p {
+        color: green;
+      }
+.header{
+    width: 100%;
+    height: 100vh;
+    padding: 0 10%;
+    background-color: lightblue;
+
+}
+
+nav {
+    width:100%;
+    display:flex;
+    align-items:flex-end;
+}
+#footer {
+    position : absolute;
+    bottom : 0;
+    height:0px;
+    margin-top : 0px;
+    text-align: flex ;
+    font-size: 10px ;
+    font-family: 'Lato' ;
+    border-top-width: 5px;
+    border-top-style: solid;
+    border-top-color: #FFF;
+    }
\ No newline at end of file
diff --git a/home.html b/home.html
new file mode 100644
index 0000000..7d13f50
--- /dev/null
+++ b/home.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<head>
+<title>Web-Blog</title>
+<link rel="stylesheet" href ="css/home.css"/>
+
+</head>
+
+
+<body>
+
+         <!-- Side navigation -->
+<div class="CONTENTS">
+    <h3>Contents</h3>
+    <ul>
+
+   
+    <li> What is Lorem Ipsum</li>
+    <li>HISTORY,PURPOSE AND USAGE</li>
+    <li>Origins and Discovery</li>
+    <li>DIGITAL IPSUM</li>
+</ul>
+  </div>
+  
+   <!-- Page content -->
+<div class="main">
+<h1 style: color: green;> What is Lorem Ipsum? </h1>
+<p> Posted on saturday <time datetime="2022-03-26"> 26 March 2022</time> by Mustafe</p></p>
+<h3> HISTORY, PURPOSE AND USAGE</h3>
+
+<p> Lorem ipsum, or lipsum's it is sometimes known, <br>
+    is dummy text used in laying out print, graphic or web designs. <br>
+    The passage is attributed to an unknown typesetter in the 15th <br>
+    century who is thought to have scrambled parts of Cicero's <br>
+    De Finibus Bonorum et Malorum for use in a type specimen book. <br>
+    It usually begins with: </p> 
+    <a href="/" title="https://loremipsum.io/#controversy">
+        Click the home page to read more.</a>
+
+<h1> Origins and Discovery </h1>
+<p> Until recently, the prevailing view assumed lorem ipsum was born <br>
+     as a nonsense text. “It's not Latin, though it looks like it, <br>
+     and it actually says nothing,” Before & After magazine answered a curious reader,<br>
+     “Its words loosely approximate the frequency with which letters occur in English, 
+     which is why at a glance it looks pretty real.”</p>
+
+
+     <h1> DIGITAL IPSUM</h1>
+     <p>
+
+        The decade that brought us Star Trek and Doctor Who also resurrected Cicero—or <br>
+        at least what used to be Cicero—in an attempt to make the days before computerized design <br>
+        a little less painstaking. <Pr>
+
+The French lettering company Letraset manufactured a set of dry-transfer sheets which included <br>
+the lorem ipsum filler text in a variety of fonts, sizes, and layouts. <Psr>
+These sheets of lettering could be rubbed on anywhere and were quickly adopted by graphic artists, <br>
+printers, architects, and advertisers for their professional look and ease of use.
+     </p>
+</div>
+</body>
+<div id="footer">
+    <p>help@lipsum.com <br>
+        Privacy Policy</p>
+    </div>
