A Pen by Pralie

Thumbnail
This awesome code was written by praliedutzel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright praliedutzel ©
  • HTML
  • CSS
  • JavaScript
    <div class="banner">
  <a href="#" class="banner__item banner--inverted">
    <img src="http://placehold.it/960x900/000000/ffffff?text=&nbsp;" alt="" class="banner__media" />
    <div class="banner__overlay">
      <h2 class="banner__headline">lorem</h2>
      <p class="banner__content">impsum dolor</p>
    </div>
  </a>
  <a href="#" class="banner__item">
    <img src="http://placehold.it/960x900?text=&nbsp;" alt="" class="banner__media" />
    <div class="banner__overlay">
      <h2 class="banner__headline">sit amet</h2>
      <p class="banner__content">consectetur adipisicing elit</p>
    </div>
  </a>
  <a href="#" class="banner__item">
    <img src="http://placehold.it/960x900?text=&nbsp;" alt="" class="banner__media" />
    <div class="banner__overlay">
      <h2 class="banner__headline">Lorem</h2>
      <p class="banner__content">ipsum dolor sit</p>
<!--       <div class="button">Shop</div> -->
    </div>
  </a>
  <a href="#" class="banner__item banner--inverted">
    <img src="http://placehold.it/960x900/000000/ffffff?text=&nbsp;" alt="" class="banner__media" />
    <div class="banner__overlay">
      <h2 class="banner__headline">Ipsum</h2>
      <p class="banner__content">dolor sit amet consectetur</p>
<!--       <div class="button">Learn More</div> -->
    </div>
  </a>
</div>

/*Downloaded from https://www.codeseek.co/praliedutzel/a-pen-by-pralie-WoGvbo */
    .banner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.banner__item {
  width: 100%;
  position: relative;
  display: block;
  float: left;
  color: #000;
  transition: all 0.3s;
  
  @media screen and (max-width: 48em) {
    &:nth-child(3) { order: 4; }
  }
  
  @media screen and (min-width: 48em) {
    width: 50%;
  }
  
  &.banner--inverted { color: #fff; }
}

.banner__media {
  width: 100%;
  display: block;
}

.banner__overlay {
  top: 50%;
  left: 50%;
  padding: 15px;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
}

.banner__headline {
  font-family: Impact;
  text-transform: uppercase;
}

.button {
  padding: 5px 15px;
  display: inline-block;
  border: 1px solid #000;
  color: #000;
  font-family: Arial Black;
  text-transform: uppercase;
}

.button--inverted,
.banner--inverted .button {
  border-color: #fff;
  color: #fff;
}


/*Downloaded from https://www.codeseek.co/praliedutzel/a-pen-by-pralie-WoGvbo */
    

Comments