green banner h376

by ian_smithz

HTML

<link rel="stylesheet" href="https://cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.278/images/general/assets/css/home-page.css?yocs=p_t_u_">
<link rel="stylesheet" href="https://cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.278/assets/css/sfx.min.css?yocs=p_t_u_">
<style>
  body {
    background: yellow
  }

</style>



<main id="container-main" class="wrp">
  <div class="inner">




<!-- this is banner code -->

    <div class="hp-click-collect">
      <div class="hp-click-collect-wrapper">
        
        <a href="//www.screwfix.com/help/clickandcollect" class="" title="" tabindex="-1">  
          <div class="hp-click-collect-content-wrapper">

            <h3>CLICK & COLLECT</h3>

            <p>Order products online & pick up at store</p>

            <div class="icon-box">
              <div class="follow">
                <p>Follow these steps:</p>
              </div>

              <figure>
<svg version="1.1" id="Layer_1" width="67" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 73.5 132.8" style="enable-background:new 0 0 73.5 132.8;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<path id="phone" transform="translate(0)" class="st0" d="M61.7,0H11.9C5.3,0,0,5.3,0,11.9v109c0,6.6,5.3,11.9,11.9,11.9h49.7
	c6.6,0,11.9-5.3,11.9-11.9c0,0,0,0,0,0v-109C73.5,5.3,68.2,0,61.7,0L61.7,0z M29.3,8.8h15.1c0.6,0,1.1,0.4,1.2,1s-0.4,1.1-1,1.2
	c0,0-0.1,0-0.1,0H29.3c-0.6,0-1.1-0.4-1.2-1s0.4-1.1,1-1.2C29.2,8.8,29.2,8.8,29.3,8.8L29.3,8.8z M36.8,126.5c-4.4,0-7.9-3.6-7.9-8
	s3.6-7.9,8-7.9s7.9,3.6,7.9,8c0,2.1-0.8,4.1-2.3,5.6C40.9,125.7,38.9,126.5,36.8,126.5L36.8,126.5z M68.9,105.9H4.7V19.2h64.2
	L68.9,105.9z M27.6,82L15.4,59.5l4.5-2.7l9.7,17.8c7.8-15.1,17.1-27.2,25.3-35.4l3.9,3.9C48.6,53,39,66.2,31.6,82H27.6z"/>
</svg>
                <figcaption>Wait for SMS confirmation</figcaption>
              </figure>


              <figure>
...

CSS

.hp-click-collect {
  background-color: #1b9c40;
  margin: 0 -0.3em;
}

.homepage_carousel .hp-click-collect-wrapper {
    margin-top: 30px;
}

.hp-click-collect-wrapper {
    margin-bottom: 12px;
}

.hp-click-collect a {
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  border: 7px solid #fff;
  text-decoration: none;
}

@media (min-width: 641px) {
  .hp-click-collect a {
    border: 11px solid #fff;
  }
}

.hp-click-collect-wrapper {
  border: 1px solid #d1d1d1;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .2);
  height: 205px;
}

@media (min-width: 641px) {
  .hp-click-collect-wrapper {
	    /*height: 356px;*/
    height: 376px;
  }
}

.hp-click-collect-content-wrapper {
  padding: 0 3%;
}

@media (min-width: 768px) {
  .hp-click-collect-content-wrapper {
    padding: 0 10%;
  }
}

.hp-click-collect h3 {
  color: #fff;
  margin: 12px 0 6px;
  font-family: 'screwfix_betaheavy', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
}

@media (min-width: 480px) {
  .hp-click-collect h3 {
    font-size: 24px;
  }
}

@media (min-width: 641px) {
  .hp-click-collect h3 {
    font-size: 42px;
    margin: 18px 0 6px;
  }
}

@media (min-width: 1025px) {
  .hp-click-collect h3 {
    font-size: 70px;
    margin: 24px 0 0;
  }
}

.hp-click-collect p {
  color: #fff;
  font-family: 'screwfix_betaregular', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  margin: 0 0 6px;
}

@media (min-width: 641px) {
  .hp-click-collect p {
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 12px;
  }
}

@media (min-width: 1025px) {
  .hp-click-collect p {
    font-size: 24px;
    margin: 0 0 24px;
  }
}

.icon-box {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.icon-box .follow {
  display: flex;
  align-items: center;
  margin: 0 0 6px;
}

@media (max-width: 1024px) {
  .icon-box .follow {
    flex: 0 1 100%;
  }
}

.icon-box figure {
  margin: 0;
  display: flex;
...