Family Tree
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
background-color: #F5DEB3;
color: #8B4513;
font-family: Arial, sans-serif;
}
h1 {
color: #8B4513;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.box {
width: 300px;
height: 300px;
margin: 20px;
border-radius: 10px;
box-shadow: 5px 5px 5px #8B4513;
overflow: hidden;
}
.box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.box:hover img {
transform: scale(1.1);
}
.box a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #8B4513;
font-size: 24px;
font-weight: bold;
text-align: center;
padding-top: 100px;
transition: background-color 0.5s ease;
}
.box:hover a {
background-color: rgba(139, 69, 19, 0.5);
}
.box1 {
background-color: #F5DEB3;
}
.box2 {
background-color: #8B4513;
}
.box3 {
background-color: #FFF8DC;
}
</style>
</head>
<body>
<h1>My Website</h1>
<div class="container">
<div class="box box1">
<a href="webpage1.html">Webpage 1</a>
<img src="https://i.imgur.com/7JlXQJZ.jpg" alt="Image 1">
</div>
<div class="box box2">
<a href="webpage2.html">Webpage 2</a>
<img src="https://i.imgur.com/7JlXQJZ.jpg" alt="Image 2">
</div>
<div class="box box3">
<a href="webpage3.html">Webpage 3</a>
<img src="https://i.imgur.com/7JlXQJZ.jpg" alt="Image 3">
</div>
</div>
</body>
</html>