diff --git a/index.html b/index.html
index 504dc31..d8c7cb1 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,82 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+  <header>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="stylesheet" href="style.css" />
-    
-  </head>
+    <title>Tribute to my wife</title>
+    <nav>
+      <ul>
+      <li><a href="https://www.google.com//">ABOUT</a> </li>
+      <li><a href="https://www.pexels.com/">PHOTOS</a> </li>
+      <li><a href="https://twitter.com/">MEMORIES</a> </li>
+      <li><a href="https://consent.yahoo.com/">FAVORITE THINGS</a>
+      </ul>
+      
+    </nav>
+  </header>
   <body>
+    
+<div>
+  <h1>TRIBUTE TO MY LOVELY WIFE</h1>
+<img src="https://images.pexels.com/photos/2061101/pexels-photo-2061101.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="I got this from Pexel" 
+width = "500"
+height = "350">
+</div>
+
+<h2>HERE ARE SOME QUALITY MY WIFE POSSESS </h2>
+<ul>
+  <div>
+  <li><h3> Her Kindness </li></h3>
+    <ol> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptatibus commodi veritatis velit suscipit tenetur itaque iure, sint facere! Facilis molestias, iure quam ab fuga distinctio? Asperiores vel expedita architecto.</ol>
+    <button><a href="https://boolean.teachable.com/"> Read more </a></button>
+  </div>
+
+  <div>
+  <li><h3> Her Intelligence </li></h3>
+    <ol>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nobis officia laboriosam dolorem eius, neque laborum delectus tempora doloribus, magnam iusto. Cumque minus voluptates debitis quisquam consequuntur rem reprehenderit recusandae.</ol>
+    <button><a href="https://boolean.teachable.com/">Read more</a>` </button>
+  </div>
+
+  <div>
+  <li><h3> Her Strength </li></h3>
+    <ol>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil, earum illum quaerat est sed minus sunt, veniam at tempora odit? Illo, soluta odio eaque possimus minus hic eum dolore.</ol>
+    <button><a href="https://wikipedia.org/">Read more</a></button>
+  </div>
+
+  <div>
+  <li><h3> Her Passion </li></h3>
+    <ol>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error eveniet veritatis hic fugiat doloremque laboriosam cumque nostrum numquam. Quas modi consequuntur odio dignissimos rerum quod quibusdam laborum. Veritatis, facilis totam.</ol>
+    <button><a href="https://statista.com/">Read more</a></button>
+  </div>
+
+  <div>
+  <li><h3> Her Creativity </li></h3>
+    <ol>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, aperiam excepturi? Voluptates iusto at numquam, quis asperiores voluptate id voluptatem minima! Expedita, nemo quidem aut nobis molestiae doloremque et vero.</ol>
+    <button><a href="https://hostinger.com/">Read more</a></button>
+
+  </div>
+
+
+  <div>
+  <li><h3> Her Generosity </li></h3>
+    <ol>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit unde aut voluptatem magni! Accusamus, enim, doloremque repudiandae illum quia praesentium exercitationem ipsam nemo sint illo, maxime deleniti eaque hic corrupti!</ol>
+    <button><a href="https://boolean.teachable.com/">Read more</a></button>
+  </div>
+
+<div>
+  <li><h3> Her Beauty </li></h3>
+    <ol>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos possimus, labore magnam perferendis esse dolore quam praesentium cupiditate consectetur repellat sapiente dolorum ut tempore, consequuntur fugit ea soluta pariatur neque.</ol>
+    <button><a href="https://boolean.teachable.com/">Read more</a></button>
+
+
+  <li><h3> Her Love </li></h3>
+    <ol>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis animi possimus nobis eaque consequuntur ullam similique sed quis tenetur veritatis, ipsum labore non eveniet sunt nisi? Quos ad cumque atque.</ol>
+    <button><a href="https://boolean.teachable.com/">Read more</a></button>
+  </div>
+</ul>
+
 
   </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b6d91c5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,63 @@
+body {
+    background-color: aliceblue;
+}
+
+h1 {
+    color: rgb(0, 204, 255);
+    text-align: center;
+}
+
+h2 {
+    text-align: center;
+    text-decoration: solid;
+    color: rgb(0, 204, 255);
+}
+
+p {
+    letter-spacing: 5px;
+    font-size: medium;
+}
+
+img {
+    display: block;
+    margin: auto;
+}
+
+div {        
+        border: 5px solid;
+        margin: auto;
+        width: 50%;
+        padding: 10px;
+      }
+
+nav {
+    display: block;
+    margin: auto;
+    padding: 10px;
+    background-color: #333;
+    text-align: center;
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+
+}
+
+nav ul li a:hover {
+    background-color: #555;
+}
+
+button {
+    background-color: red;
+}
+
