Building The Dogs For Adoption Section- Summary
In today's video tutorial, we've walked you through the process of crafting a Dogs For Adoption section as a part of our "Dog Shelter Website Project." You've gained valuable insights on creating captivating cards featuring our lovable furry companions, as well as adding an enticing interactive hover effect. To recap, we've also provided the HTML and CSS code used in this tutorial for your reference
Dogs For Adoption Section: HTML Code
< section class="dogs-for-adoption">
< h2 > Meet Your New Best Friend </h2 >
< p > Your Text Here </p >
<div class="adoption-section" id="adopt">
< h2 > Dogs Available For Adoption </h2 >
<div class="dog-container">
<div class="dog-card">
<img class="dog-image" src="image.jpg" alt="">
<div class="dog-name">Luna </div>
</div >
</div >
</div >
</section>
"Get Involved" Section: CSS Code
.adoption-section {
padding: 60px 0;
background-color: #fff;
text-align: center;
}
.dog-container {
display: flex;
justify-content: center;
gap: 10px;
}
.dog-card {
flex: 1;
max-width: 30%;
border: 1px solid #ddd;
padding: 20px;
text-align: center;
transition: transform 0.3s;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 400px;
overflow: hidden;
}
.dog-card:hover {
transform: translateY(-5px);
}
.dog-image {
flex: 1;
border-radius: 5px;
object-fit: cover;
overflow:hidden;
}
.dog-name {
font-size: 18px;
margin-top: 10px;
}
@media (max-width: 870px) {
.dog-container {
flex-direction: column;
}
.dog-card {
max-width: 100%;
margin-bottom: 20px;
}
}
Now is your turn! Remember: "Practice makes perfect"!
Please Do Not Copy & Paste the above code as it will not display. Please type in the above code to practice.