BNYreZ

BNYreZ.markdown

BNYreZ

A Pen by Michael Mathews on CodePen.

License.

index.html

<div class="promo hasimage">
  <h2>A Title Here</h2>
  <img src="http://placehold.it/120x120" alt="image content">
  <p>
    The content text here. The content text here.
  </p>
</div>

<div class="promo hasimage">
  <h2>Another Title Here</h2>
  <img src="http://placehold.it/120x120" alt="image content">
  <p>
    Some more content text here. The content text here. The content text here. The content text here. The content text here. The content text here. The content text here.
  </p>
</div>

<div class="promo">
  <h2>Yet More Title Here</h2>
  <p>
    Even more content text here. The content text here. The content text here. The content text here.
  </p>
  <p>
    Etcetera and so forth.
  </p>
</div>

<div class="promo">
  <h2>Last One</h2>
  <p>
    This is it.
  </p>
</div>

style.css

.promo {
  border: 1px solid lightblue;
  padding: 8px;
  margin: 8px inherit;
  min-width: 320px;
  max-width: 480px;
}

.promo.hasimage {
  min-height: 120px;
  position: relative;
}

.promo img {
  border-radius: 50%;
  position: absolute;
  top: 8px;
}

.promo h2 {
  margin-top: 8px;
  font: bold 24px/28px Arial, sans-serif;
}

.promo.hasimage h2,
.promo.hasimage p {
  margin-left: 128px;
}