How to Justify Hero Section Content

 | SubscribeFavorite

Tagged: 

Viewing 0 reply threads
  • Author
    Posts
    • #6479REPLY
      Chris F

      Keymaster

      Here 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;
      }