Building The Hero Section - Summary:
In this engaging video tutorial, we've successfully crafted a captivating Hero Section for our Dog Shelter website project. With a stunning background image that instantly draws visitors in, a compelling headline that conveys our mission, and a prominent Call to Action (CTA) button inviting users to take action, our website is off to an impressive start. We delved into the intricacies of both HTML and CSS to bring this visually appealing and impactful section to life. By learning how to structure the HTML content and style it with CSS, you've acquired essential skills to make any website shine right from the moment visitors land on it. Stay tuned for more exciting tutorials as we continue to build our dog-loving online haven
Hero Section: HTML Code
< section class="hero " >
< div class="hero-section" >
< div class="hero-text-div" >
< h1 class="hero-heading" > Saving Lives, One Paw at a Time < /h1 >
< p class="hero-subheading" > Join us in providing a loving home for our furry friends < /p >
<a class="hero-cta" href="#about" > Learn More < /a >
< /div>
< /div>
< / section >
Hero Section: HTML Code
.hero-section {
position: relative;
height: 90vh;
background-image: url(./images/dog\ shelter.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center ;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero-text-div {
margin-top:30%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
position:absolute;
left:20%;
bottom: 10%;
text-align: center;
}
.hero-heading {
font-size: clamp(1.8rem, 4.5vw, 4rem);
margin: 15px auto;
text-shadow: 4px 4px 8px rgb(21, 21, 21);
text-align: center;
}
.hero-subheading {
font-size: clamp(1.2rem, 2.5vw, 2.5rem);
margin-top:-10px;
color:white;
text-shadow: 4px 4px 8px rgb(83, 82, 82);
}
.hero-cta {
width:200px;
margin: 30px auto;
text-transform: uppercase;
letter-spacing: 2px;
border: 2px solid white;
padding: 10px 20px;
color: white;
background-color:rgba(25, 25, 26, 0.866);
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.hero-cta:hover {
background-color: white;
color: black;
}
@media (max-width: 768px) {
.hero-text-div {
margin: 10px auto;
text-align: center;
left:15px;
bottom: 7%;
}
h2 {
text-align: center;
padding:10px;
}
}
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.