Skip to main content
.card {
width: 300px;
border: 1px solid #4CAF50;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 20px;
background-color: #DFF0D8; /* Light green background */
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.05); /* Slight scale up on hover for an elegant effect */
}
.card img {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card-content {
padding: 20px;
text-align: center;
}
.card-content h2 {
font-size: 1.8rem;
margin: 0;
color: #4CAF50; /* Green title */
font-family: "Georgia", serif; /* Elegant font */
}
.card-content p {
font-size: 1.2rem;
color: #333;
font-family: "Arial", sans-serif; /* Standard font for readability */
}
.card-content a {
display: inline-block;
text-decoration: none;
background-color: #4CAF50; /* Green button background */
color: #fff; /* White text color */
padding: 10px 20px;
border-radius: 5px;
margin-top: 15px;
font-weight: bold;
transition: background-color 0.3s;
}
.card-content a:hover {
background-color: #388E3C; /* Darker green on hover */
}
Comments
Post a Comment