Services Page with Image, Description and More (Horizontal)

Title 1

Sed mattis, quam tempus venenatis mattis, nisi eros vulputate ex, eu euismod mauris urna sed ligula. Donec facilisis iaculis mauris sit amet hendrerit. Sed quis bibendum dui, in blandit lorem.

Learn More »

Title 2

Sed mattis, quam tempus venenatis mattis, nisi eros vulputate ex.

eu euismod mauris urna sed ligula.

Learn More »

Title 3

Sed quis bibendum dui, in blandit lorem.

Learn More »

I’m calling this a Services Page, but it’s basically a page that lists an abreviated list that displays an image, a summary, and a call to action. You need one HTML/CSS block and add the information below. Just edit the image link, URL, and description.

HTML


<section class="section">
  <a href="link-here" class="section__image"><img src="image-1.jpg" alt="Alt Text Here" width="350" height="233" /></a>
  <div class="section__wrap">
    <h3 class="section__title">Title 1</h3>
    <div class="section__details"><p>Sed mattis, <a href="#">quam tempus venenatis</a> mattis, nisi eros vulputate ex, <strong>eu euismod mauris urna sed ligula</strong>. Donec facilisis iaculis mauris sit amet hendrerit. Sed quis bibendum dui, <em>in blandit</em> lorem.</p></div>
    <div class="section__button"><a href="#">Learn More »</a></div>
  </div>
</section>

<section class="section">
  <a href="link-here" class="section__image"><img src="image-2.jpg" alt="Alt Text Here" width="350" height="233" /></a>
  <div class="section__wrap">
    <h3 class="section__title">Title 2</h3>
    <div class="section__details">
      <p>Sed mattis, quam tempus venenatis mattis, nisi eros vulputate ex.</p>
      <p><strong>eu euismod</strong> mauris urna sed ligula.</p>
    </div>
    <div class="section__button"><a href="#">Learn More »</a></div>
  </div>
</section>

<section class="section">
  <a href="link-here" class="section__image"><img src="image-3.jpg" alt="Alt Text Here" width="350" height="233" /></a>
  <div class="section__wrap">
    <h3 class="section__title">Title 3</h3>
    <div class="section__details"><p>Sed quis bibendum dui, in blandit lorem.</p></div>
    <div class="section__button"><a href="#">Learn More »</a></div>
  </div>
</section>

CSS


/**
* Services with Image, Description and See More Link
*****************************************************/
.section {
  display: flex;
  max-width: 950px;
  margin: 0 auto 2rem;
  padding: 1rem;
  background: #f7f7f7;
  border: 1px solid #e3e3e3;
}

.section__image {margin: 0 1rem 0 0;}

  .section__image:hover {opacity: .9;}

  .section__image img {
    flex: 1;
    height: 100%;
  }  

.section__wrap {
  display: flex;
  flex-direction: column;
  justify-section: space-between;
  width: 100%;
}

.section__title {
  font-size: 1.25rem;
  color: #000;
  margin-bottom: 1rem;
}

.section__details {
  flex-grow: 1;
  font-size: 1rem;
}

.section__button {
  display: inline-flex;
  justify-content: flex-end;
}

  .section__button a {
    padding: 1rem 2rem;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #151515;
    background-color: #151515;
    color: #ccc;
  }

    .section__button a:hover {
      background-color: transparent;
      color: #151515;
    }

/* Transitions */
.section__image,
.section__button a {transition-duration: 0.4s;}

@media (max-width: 736px) {

  .section,
  .section__wrap {
    display: block;
    text-align: center;
    width: auto;
  }

  .section__wrap {flex-flow: column nowrap;}

  .section__image {margin: 0 auto 1em;}

}
/* Services with Image, Description and See More Link End */