Bootstrap Practice

by Suryar Praveen

HTML

<div class="bundlebgContainer mar-top-20  bundle-bg-offer new_landing">
  <div class="new_landing_offers">
    <div class="text-center">
      <h2 class="offer_name">
        Free phone with <span>Bundle</span>
      </h2>
    </div>

    <div class="col-xs-12 offer-module">
      <div class="offer-section offer-one">
        <div class="col-md-6 col-xs-12"> </div>
        <div class="col-md-6 col-xs-12 offer-text">
          <h4 class="offer-data">FREE phone when you buy UK plan Mega for 3 months</h4>
          <a href="https://stage-uk.ldsvcplatform.com/en/bundle/uk-plan-mega/" class="et_pb_more_button et_pb_button" target="_blank">Buy Now </a>
        </div>

      </div>
    </div>
    <div class="col-xs-12 offer-module">
      <div class="offer-section offer-two">
        <div class="col-md-6 col-xs-12"> </div>
        <div class="col-md-6 col-xs-12 offer-text">
          <h4 class="offer-data">FREE phone when you buy UK plan Mega for 3 months</h4>
          <a href="https://stage-uk.ldsvcplatform.com/en/bundle/uk-plan-mega/" class="et_pb_more_button et_pb_button" target="_blank">Buy Now </a>
        </div>

      </div>
    </div>
    <div class="col-xs-12 offer-module">
      <div class="offer-section offer-three">
        <div class="col-md-6 col-xs-12"> </div>
        <div class="col-md-6 col-xs-12 offer-text">
          <h4 class="offer-data">FREE phone when you buy UK plan Mega for 3 months</h4>
          <a href="https://stage-uk.ldsvcplatform.com/en/bundle/uk-plan-mega/" class="et_pb_more_button et_pb_button" target="_blank">Buy Now </a>
        </div>

      </div>
    </div>

    <div class="col-xs-12 offer-module">
      <div class="offer-section offer-four">
        <div class="col-md-6 col-xs-12"> </div>
        <div class="col-md-6 col-xs-12 offer-text">
          <h4 class="offer-data">FREE phone when you buy UK plan Mega for 3 months</h4>
          <a href="https://stage-uk.ldsvcplatform.com/en/bundle/uk-plan-mega/" class="et_pb_more_button...

CSS

.bundleBg .bundle-bg-offer.new_landing {
  background: #f5f4f9 !important;
}

.new_landing .offer_name {
  margin-top: 2%;
}

.new_landing .offer_name span {
  font-weight: 700;
}

.new_landing .offer-data {
  font-weight: 700;
}

.new_landing .offer-section.offer-one {
  background: url('https://s3-eu-west-2.amazonaws.com/lycamobileukwebsite/lycauk/dev/lycamobile-uk-cms/wp-content/uploads/2019/04/26133122/Free-Phone-Offer-Page-inside1.png') no-repeat;
  background-size: 330px 240px;
}

.new_landing .offer-section.offer-two {
  background: url('https://s3-eu-west-2.amazonaws.com/lycamobileukwebsite/lycauk/dev/lycamobile-uk-cms/wp-content/uploads/2019/04/26133122/Free-Phone-Offer-Page-inside1.png') no-repeat;
  background-size: 330px 240px;
}

.new_landing .offer-section.offer-three {
  background: url('https://s3-eu-west-2.amazonaws.com/lycamobileukwebsite/lycauk/dev/lycamobile-uk-cms/wp-content/uploads/2019/04/26133122/Free-Phone-Offer-Page-inside1.png') no-repeat;
  background-size: 330px 240px;
}

.new_landing .offer-section.offer-four {
  background: url('https://s3-eu-west-2.amazonaws.com/lycamobileukwebsite/lycauk/dev/lycamobile-uk-cms/wp-content/uploads/2019/04/26133122/Free-Phone-Offer-Page-inside1.png') no-repeat;
  background-size: 330px 240px;
}

.new_landing .offer-section.offer-five {
  background: url('https://s3-eu-west-2.amazonaws.com/lycamobileukwebsite/lycauk/dev/lycamobile-uk-cms/wp-content/uploads/2019/04/26133122/Free-Phone-Offer-Page-inside1.png') no-repeat;
  background-size: 330px 240px;
}

.new_landing .offer-section {
  overflow: hidden;
  background-position: top left;
  border-radius: 10px;
  min-height: 240px;
}

.new_landing .offer-module {
  border-radius: 10px;
  padding-left: 0px;
  background: #fff;
  margin: 10px 15px;
  width: 47%;
}

.new_landing .offer-section .offer-text {
  padding-left: 5%;
  margin-top: 8%;
  text-align: right;
}

.new_landing_offers {
  margin: 1.5%;
}

.new_landing_offers .offer-more a {
  background:...