<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Ricardes.net</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f4f4f9;
color: #333;
text-align: center;
}
header {
background: #222;
color: white;
padding: 30px 20px;
}
header h1 {
margin: 0;
font-size: 2em;
}
.photos {
display: flex;
justify-content: center;
gap: 20px;
padding: 40px 20px;
flex-wrap: wrap;
}
.photos img {
width: 45%;
max-width: 400px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.buttons {
margin: 30px;
}
.buttons a {
display: inline-block;
margin: 10px;
padding: 12px 24px;
background: #0077cc;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
}
.buttons a:hover {
background: #005fa3;
}
footer {
background: #222;
color: #aaa;
padding: 15px;
font-size: 14px;
margin-top: 40px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Ricardes.net</h1>
</header>
<section class="photos">
<img src="sherri1.jpeg" alt="Sherri 1">
<img src="sherri2.jpeg" alt="Sherri 2">
</section>
<div class="buttons">
<a href="about.html">About Me</a>
<a href="contact.html">Contact</a>
<a href="projects.html">Projects</a>
</div>
<footer>
© 2025 Ricardes.net
</footer>
</body>
</