Building The "Get Involved" Section - Summary:
In today's video tutorial, we've crafted an engaging section featuring a compelling heading, an inviting introductory paragraph, and three responsive cards that gracefully move upon hover. This tutorial not only showcases the power of responsive design but also adds an element of interactivity to encourage user engagement. In summary, here is HTML & CSS code that we have used.
"Get Involved" Section: HTML Code
< section class="get-involved">
< div class="involvement-section" id="involvement" > < /div >
< h2 class="involvement-heading"> Get Involved </h2 >
< p class="involvement-description-paragraph" > Content Here </p >
< div class="involvement-options" >
< div class="involvement-option">
< div class="involvement-icon" > 🙌 lt; /div>
< div class="involvement-title" > Volunteer < /div >
<div class="involvement-description" > Join our team of dedicated volunteers and help care for our dogs. < /div >
Please repeat for two more cards.
"Get Involved" Section: CSS Code
.involvement-section {
padding: 80px 0;
background-color: #f4f4f4;
text-align: center;
}
.involvement-heading {
font-size: 28px;
margin-bottom: 30px;
margin-top:-15px;
}
.involvement-options {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 30px;
}
.involvement-option {
flex: 1;
max-width: 300px;
padding: 20px;
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
transition: transform 0.3s;
margin-top:40px;
}
.involvement-option:hover {
transform: translateY(-5px);
}
.involvement-icon {
font-size: 36px;
margin-bottom: 10px;
}
.involvement-title {
font-size: 20px;
margin-bottom: 10px;
}
.involvement-description {
font-size: 16px;
color: #666;
}
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.