Preview

Create a Story

Raquel Silva

Jorge Miranda

HTML

SCSS

*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700;900&display=swap');

.story-list {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
}

.story-card {
  background-color: #ffffff;
  border-radius: 10px;
  margin: 5px;
  width: 111px;
  height: 198px;
  position: relative;
  overflow: hidden;
  text-decoration: none;

  &.friend-story {
    img {
      width: 100%;
      max-width: 111px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
    
    &:hover {
      img {
        -webkit-transform: scale(1.01);
        -ms-transform: scale(1.01);
        transform: scale(1.01);
      }
    }
    
    &::after {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      content: '';
      z-index: 3;
      border-radius: 10px;
      background: rgba(0,0,0,0.1);
      background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.1)), color-stop(100%, rgba(0,0,0,0.35)));
      background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 100%);
      background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 100%);
      background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 100%);
      background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
    }
    .user-photo {
      width: 40px;
      height: 40px;
      border: 4px solid #24AD5E;
      overflow: hidden;
      border-radius: 100%;
      position: absolute;
      z-index: 4;
      top: 12px;
      left: 12px;
    }
    
    .name {
      font-family: 'Fira Sans', sans-serif;
      color: #ffffff;
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      position: absolute;
      z-index: 4;
      left: 0;
      bottom: 0;
      padding: 12px;
      width: 111px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }
    
  &.create-story {
    .photo {
      width: 100%;
      height: 128px;
      position: relative;
      overflow: hidden;
      -webkit-border-top-left-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      
      &::after {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        content: '';
        z-index: 3;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background: rgba(0,0,0,0.1);
        background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.1)), color-stop(100%, rgba(0,0,0,0.2)));
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
        background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
        background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
      }
      
      img {
        width: 100%;
      }
    }
    
    &:hover {
      .photo {
        img {
          -webkit-transform: scale(1.01);
          -ms-transform: scale(1.01);
          transform: scale(1.01);
        }
      }
    }
    
    .create-block {
      position: relative;
      text-align: center;
      padding: 20px 12px 0 12px;
      
      .circle {
        width: 40px;
        height: 40px;
        border: 4px solid #ffffff;
        background-color: #24AD5E;
        border-radius: 100%;
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -20px;
        line-height: 30px;
        z-index: 5;
        
        svg {
          fill: #ffffff;
          width: 26px;
          vertical-align: middle;
        }
      }
      
      .create-text {
        font-family: 'Fira Sans', sans-serif;
        color: #162B39;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        display: block;
      }
    }
  }
}

@media (max-width:576px) {
  .story-list {
    justify-content: left;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .story-card {
    flex: 0 0 auto;
  }
}