50/50 image text block

50-50-image-text-block.markdown

50/50 image text block

A Pen by Sam Price on CodePen.

License.

index.html

<div class="half-half-image-text">
<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>Our Mission</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-lg-6">
      <div class="content">
        <p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
        
      </div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="img" style="background: url('https://images.pexels.com/photos/89784/bmw-suv-all-terrain-vehicle-fog-89784.jpeg?cs=srgb&dl=automobile-bmw-car-89784.jpg&fm=jpg')no-repeat center;background-size:cover;"></div>
    </div>
  </div>
</div>
  </div>

style.scss

.half-half-image-text{
  padding: 70px 0px;
  h1{
    color: #800000;
  }
  .content{
    height: 100%;
    display:flex;
    align-items: center;
    padding: 35px 0px;
    p{
      font-size: 22px;
    }
  }
  .img{
    min-height: 320px;
    height: 100%;
    border-radius: 10px;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />