SCSS

by Pratik Galoria

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="main">
  <div class="nav"></div>
  <div class="container">
    <div class="header">
      <div class="nav-icon">
        <i class="fas fa-bars bars"></i>
      </div>
      <div class="menu">
        Dashboard
      </div>
      <div class="actions">
        <i class="fas fa-cog"></i>
        <i class="fas fa-user-circle"></i>
      </div>
    </div>
    <div class="content">
      <div class="topbar">
        <div class="quotes">
          <div class="cards">
            <div class="title">P&L</div>
            <div class="value green">
              <span>3.6K <span class="info">(<i class="fa fa-caret-up"></i> 1.5%)</span></span></div>
          </div>
        </div>
        <div class="props">
          <div class="cards">
            <div class="title">Balance</div>
            <div class="value"><span><i class="fa fa-rupee-sign"></i> 142.5</span></div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="widget">
          <div class="header">
            Equities
          </div>
          <div class="content">
            <ul class="equities">
              <li>
                <div class="title">
                  Axisbank
                </div>
                <div class="value">
                  4.67 <span class="extra">(<i class="fas fa-caret-up"></i> 1.2%)</span>
                </div>
              </li>
              <li>
                <div class="title">
                  Hdil
                </div>
                <div class="value">
                  2.88 <span class="extra">(<i class="fas fa-caret-down"></i> 6.9%)</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
  </div>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Krub);

$color-brandy-punch: #994058;
$color-heather: #a3b6c1;
$color-solitude: #e2e4ea;
$font-oswald: 'Krub';

@mixin bp-narrow {
  @media (max-width: 640px), (max-height: 480px) {
    @content;
  }
}

body {
  font-family: $font-oswald;
  margin: 0;
  padding: 0;
  
  i {
    font-size: 20px;
  }
}

.main {
  background-color: $color-solitude; 
  height: 100vh;
  width: 100vw;
  
  display: flex;
  
  @include bp-narrow {
    flex-flow: column;
  }
}

.nav {
  background: linear-gradient(to bottom, rgba(153,64,88,1) 0%, rgba(179,76,65,1) 100%);

  flex: 0 0 220px;
  
  @include bp-narrow {
    display: none;
  }
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1 0 auto;
  
  > .header {
    background-color: #fff;
    box-shadow: 0 2px 10px #ccc;
    font: 700 18px/1.33 $font-oswald;
    padding: 0 20px;
    
    align-items: center;
    display: flex;
    flex: 0 0 60px;
    justify-content: space-between;
    
    .nav-icon {
      display: none;
      
      @include bp-narrow {
        display: block;
        padding-right: 20px;
      }
    }
    
    .bars {
      color: $color-brandy-punch;
    }
    
    .menu {
      flex: 1 0 auto;
    }
    
    .actions {
      i {
        color: $color-heather;
        padding-left: 5px;
        
        &:hover {
          color: $color-brandy-punch;
        }
      }
    }
  }
  
  > .content {
    padding: 20px;

    display: flex;
    flex-flow: column wrap;
    flex: 1 0 auto;

    .topbar {
      display: flex;
      flex: 0 0 60px;

      .quotes {
        display: flex;
        flex: 1 0 auto;
      }
      .props {
        display: flex;
        flex: 0 0 100px;
        justify-content: flex-end;

        > .cards {
          text-align: right;
        }
      }
    }

    .box {
      color: #aaa;
      flex: 1 0 auto;
      margin: 20px 0;
    }
  }
}

.cards {
  padding: 6px 0 0 20px;
  
  display: flex;
  flex: 0 0 auto;
  flex-flow:...