/r/web_design challenge 2 - Service Pricing Selection

index.html

<div id="page">
  <a class="card option" href="#">
    <i class="fa fa-heart" aria-hidden="true"></i>
    <div class="price">FREE</div>
    <div class="title">Spotify</div>
  </a>
  <a class="card option" href="#">
    <i class="fa fa-user" aria-hidden="true"></i>
    <div class="price">$9.99</div>
    <div class="title">Spotify Premium</div>
    <div class="desc"></div>
  </a>
  <a class="card option" href="#">
    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
    <div class="price">$4.99</div>
    <div class="title">Premium for Students</div>
    <div class="desc"></div>
  </a>
  <a class="card option" href="#">
    <i class="fa fa-users" aria-hidden="true"></i>
    <div class="price">$14.99</div>
    <div class="title">Premium for Family</div>
    <div class="desc"></div>
  </a>
  
  <div class="card features">
    <div>
      <p>Listen to your favourite artists</p>
      <p>Play on all your devices</p>
      <p>Play on demand on mobile</p>
      <p>Unlimited skips on mobile</p>
      <p>Download music to listen offline</p>
      <p>No ads</p>
      <p>High quality sound</p>
      <p>First 30 days free*</p>
      <p>Cancel anytime</p>
    </div>
  </div>
</div>

r-web_design-challenge-2-service-pricing-selection.markdown

/r/web_design challenge 2 - Service Pricing Selection

A Pen by ryuuseiistar on CodePen.

License.

style.scss

@mixin transition($time) {
          transition: $time ease-in-out;
       -o-transition: $time ease-in-out;
      -ms-transition: $time ease-in-out;
     -moz-transition: $time ease-in-out;
  -webkit-transition: $time ease-in-out;
}

html {
  background: linear-gradient(#D20B54, #FFB894);
  min-height: 100%;
}

#page {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr 2fr 1fr;
  grid-template-rows: .5fr 1fr fr .5fr;
  grid-row-gap: 2vw;
  grid-column-gap: 1vw;
  height: 100%;
  width: 100%;

  .card {
    &:nth-child(1) {
      grid-row: 2;
      grid-column: 2;
    }

    &:nth-child(2) {
      grid-row: 2;
      grid-column: 3;
    }

    &:nth-child(3) {
      grid-row: 2;
      grid-column: 4;
    }

    &:nth-child(4) {
      grid-row: 2;
      grid-column: 5;
    }
  }

  .features {
    grid-row: 3;
    grid-column-start: 2;
    grid-column-end: 6;
  }
}

.card {
  width: 100%;
  height: auto;
  padding-bottom: .5em;
  background: rgba(0, 0, 0, .25);
  border-radius: .5em;
  font-family: 'Montserrat', sans-serif;
  color: rgba(255, 255, 255, .9);
  text-align: center;
  text-decoration: none;

  .fa {
    font-size: 3em;
    padding: .5em;
  }

  .price {
    font-weight: bold;
    font-size: 1.5em;
    padding-bottom: .5em;
  }

  &.option {
    &:hover{
      background: rgba(0, 0, 0, .4);
    }
  }
  
  &.features {
    > div {
      padding: 0 1em;
      > p {
        color: rgba(0, 0, 0, .25);
        @include transition(.5s); 
      }
    }
  }
}

.option:nth-child(1):hover ~ .features div p:nth-child(1),
.option:nth-child(1):hover ~ .features div p:nth-child(2),
.option:nth-child(1):hover ~ .features div p:nth-child(8),
.option:nth-child(1):hover ~ .features div p:nth-child(9), {
  color: rgba(255, 255, 255, 1);
  @include transition(.5s);
}

.option:nth-child(2):hover ~ .features div p {
  color: white;
  @include transition(.5s);
}

.option:nth-child(3):hover ~ .features div p:nth-child(1),
.option:nth-child(3):hover ~ .features div p:nth-child(2),
.option:nth-child(3):hover ~ .features div p:nth-child(3),
.option:nth-child(3):hover ~ .features div p:nth-child(4),
.option:nth-child(3):hover ~ .features div p:nth-child(5),
.option:nth-child(3):hover ~ .features div p:nth-child(6),
.option:nth-child(3):hover ~ .features div p:nth-child(7),
.option:nth-child(3):hover ~ .features div p:nth-child(9), {
  color: white;
  @include transition(.5s);
}

.option:nth-child(4):hover ~ .features div p:nth-child(1),
.option:nth-child(4):hover ~ .features div p:nth-child(2),
.option:nth-child(4):hover ~ .features div p:nth-child(3),
.option:nth-child(4):hover ~ .features div p:nth-child(4),
.option:nth-child(4):hover ~ .features div p:nth-child(5),
.option:nth-child(4):hover ~ .features div p:nth-child(6),
.option:nth-child(4):hover ~ .features div p:nth-child(7),
.option:nth-child(4):hover ~ .features div p:nth-child(9),  {
  color: white;
  @include transition(.5s);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />