Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 72 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
63 changes: 63 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -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;
}