JavaScript – CSS: Responsive design with position text and CTA buttons on hero image

This is a B2B landing page I am developing on a WordPress site. I need to get the hero section exactly as the picture below shows.

I couldn't go any further than what the HTML below does. Positioning using CSS seems a bit challenging to me. Could you please have a look at it and help me add CSS to match it to the image above?

<div class="corp-hero relative mb-row">
  
    <div class="corp-hero-img relative no-touch select-none">
    <picture>
      <source media="(max-width: 480px)" srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy-640x200.jpg">
      <source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy-1024x320.jpg">
      <source media="(max-width: 1280px)" srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy-1500x469.jpg">
      <source srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy.jpg">
      <img src="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy.jpg" alt="">
    </picture>
  </div>
    
  <div class="wrap-x">
    <div class="inside">

            <h1 class="mb0 color-tan-dark">
        CORPORATE GIFTS      </h1>
      
            <h2 class="mb0 mt2 alt-heading h4">
        Impressive Business Gifts That Create Impact      </h2>
      
  </div>
  </div>

      <div class="inside mt2x">
        <div class="center-xs">
        <a href="http://pwp-wordpress/corporate-gifts-new/" class="btn cta-btn-purple" role="button" target="" title="Shop Gifts">
            Shop Gifts        </a>
        </div>
    </div>

Add a Comment

Your email address will not be published. Required fields are marked *