Minimalist Card Concept 2.0

index.html

<!-- Card -->

<section>
  <div class="card">
    <div class="card__image" style="background-image:url(https://images.pexels.com/photos/941693/pexels-photo-941693.jpeg)"></div>
    <div class="card__text">
      <h2>Half Stack Steve</h2>
      <h3>Skills</h3>
      <ul class="card__list">
        <li>Building rocketships</li>
        <li>Juggling monkeys</li>
      </ul>
    </div>
    <div class="card__footer">
     
    </div>
  </div>
</section>

minimalist-card-concept-2-0.markdown

Minimalist Card Concept 2.0

Minimalist card concept, with a futuristic approach.

A Pen by Jamie Hammond on CodePen.

License.

style.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500&display=swap');

// Colours
$plain: #FFFFFF;
$dark: #343434;
$petrol: #055e68;
$fadedblue: rgba(63, 127, 191, 0.5);
$lightgreen: #b9d2d2;
  
@mixin background-center($size: cover) {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: $size;
}
  
html,
body {
  height: 100%;
}

body {
  font-family: 'Ubuntu', sans-serif;
}

h2,
p {
  font-weight: 300;
}

section {
  background: $lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 15px;
}

.card {
  background: $plain;
  box-shadow: 11px 9px 1px;
  height: 400px;
  max-width: 300px;
  width: 100%;
  position: relative;
  
  &__image {
    @include background-center();
    height: 200px;
    margin: 0;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: "";
      width: 100%;
      height: 40px;
      background: $dark;
      position: absolute;
      bottom: -22px;
      transform: rotate(7deg);
    }
    
    &::after {
      content: "";
      width: 100%;
      height: 80px;
      background: $fadedblue;
      position: absolute;
      bottom: -22px;
      transform: rotate(7deg);
    }
  }
  
  &__text {
    color: $dark;
    font-weight: lighter;
    text-align: center;
  }
  
  &__list {
    padding: 0 60px;
  }
  
  &__footer {
    color: $dark;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    margin: 0 10px;
  }
}