#13 Cloud Storage

Preview

  • Dropbox

    Last Update: 1 hour ago
    4.5 GB of 25 GB used
  • Google Drive

    Last Update: 2 hours ago
    15.8 GB of 25 GB used

HTML

SCSS


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

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

ul.cloud-storage {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 350px;

  li {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    
    .icon {
      width: 68px;
      height: 68px;
      border-radius: 15px;
      text-align: center;
      line-height: 68px;
      
      svg {
        width: 40px;
        vertical-align: middle;
      }
      
      &.dropbox {
        background-color: #0061FF;
      }
      
      &.google-drive {
        background-color: #EDF0F5;
      }
    }
    
    .info {
      font-family: 'Montserrat', sans-serif;
      margin-left: 20px;
      padding-top: 10px;
      width: calc(100% - 90px);
      
      h3 {
        color: #162B39;
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 7px 0;
      }
      
      .last-update {
        color: #8492A6;
        font-size: 12px;
        font-weight: 400;
        display: block;
      }
      
      .progress-block {
        margin-top: 25px;
        
        .storage {
          color: #627288;
          font-size: 14px;
          font-weight: 500;
          display: block;
          margin-bottom: 10px;
        }
        
        .progress-bar {
          background-color: #EDF0F5;
          width: 100%;
          height: 8px;
          border-radius: 10px;
        }
        
        .progress {
          background-color: #108AF9;
          height: 8px;
          border-radius: 10px;
        }
      }
    }
  }
}


Notes

In the code you can replace the images, icons and font. For icons and font you may have to change the size in the css.

Help the Project

Your help is important for the success of this project. We will make this project grow for everyone.