<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthy Blog</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f8f9fa;
margin: 20px;
}
.card-title {
background: linear-gradient(to right, #ffcccb, #ccffcc, #add8e6);
-webkit-background-clip: text;
color: transparent;
}
.card-body {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
margin: 15px;
width: 30rem;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<img src="https://via.placeholder.com/600x400" class="card-img-top" alt="Healthy Eating">
<div class="card-body">
<h5 class="card-title">Healthy Eating</h5>
<p class="card-text">Discover the benefits of a balanced diet and how to incorporate nutritious foods into your daily routine.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600x400" class="card-img-top" alt="Exercise Tips">
<div class="card-body">
<h5 class="card-title">Exercise Tips</h5>
<p class="card-text">Learn the best exercise routines to stay fit and healthy, whether you're a beginner or an experienced athlete.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600x400" class="card-img-top" alt="Mental Health">
<div class="card-body">
<h5 class="card-title">Mental Health</h5>
<p class="card-text">Find out how to maintain your mental well-being with tips and advice from health professionals.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600x400" class="card-img-top" alt="Healthy Recipes">
<div class="card-body">
<h5 class="card-title">Healthy Recipes</h5>
<p class="card-text">Try out these delicious and healthy recipes that are easy to make and good for your body.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>