<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Greeting Cards</title>
</head>
<body>
<header>
<h1>Greeting Cards</h1>
</header>
<section class="card-container" id="birthday-cards">
<h2>Birthday Cards</h2>
<div class="card" onclick="showMessage('Happy Birthday!', 'Wishing you a fantastic day filled with joy and laughter.')">
<img src="birthday_card.jpg" alt="Birthday Card">
<h3>Card 1</h3>
</div>
<!-- Add more birthday cards as needed -->
</section>
<section class="card-container" id="greeting-cards">
<h2>Greeting Cards</h2>
<div class="card" onclick="showMessage('Hello!', 'Sending warm greetings your way.')">
<img src="greeting_card.jpg" alt="Greeting Card">
<h3>Card 1</h3>
</div>
<!-- Add more greeting cards as needed -->
</section>
<script src="script.js"></script>
</body>
</html>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
.card-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.card {
cursor: pointer;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.card img {
width: 100%;
height: auto;
border-radius: 4px;
}
.card h3 {
margin: 10px 0 0;
font-size: 1.2em;
color: #333;
}
function showMessage(title, message) {
alert(`${title}\n\n${message}`);
}