How to Justify Hero Section Content
| SubscribeFavorite
Tagged: hero
Viewing 0 reply threads
-
AuthorPosts
-
-
Chris F
KeymasterHere is the Custom HTML shown in the video:
<div class="hero-section"> <div class="overlay-white"> <h2>Welcome to WPOptimal</h2> <p>This is Just a Line of Text</p> <div class="text-center"><a class="btn" href="#"><button class="btn btn-primary" type="button">Contact Us Today</button></a> </div> </div> <!-- close overlay-white --> </div> <!-- close hero-section -->
Here is the CSS shown in the video:
.hero-section { margin: 180px auto; } .hero-section h2 { font-size: 2.3rem; color: #fff; font-weight: 700; text-align: center; text-shadow: 1px 1px 1px #333; margin: 10px auto!important; } .hero-section p { font-size: 1.4rem; color: #333; text-align: center; margin: 10px auto!important; } .overlay-white { background-color: rgba(255, 255, 255, 0.5); max-width: 600px; margin: 0 auto; padding: 40px; }
-