epdNba

epdNba.markdown

epdNba

A Pen by Code on CodePen.

License.

index.html

<div class=content>
  <div class="card-container">
    <div class="top-split">
      <div class="muted-title">Ending 8801 - September 2017</div>
      <div class="title">Visa Dual Currency</div>
    </div>
    <div class="mid-split"></div>
    <div class="bottom-split">
      <div class="bdt">
        <span class="currency-name">BDT</span>
        <span class="balance-amount">630,100</span>
      </div>
      <div class="usd">
        <span class="currency-name">USD</span>
        <span class="balance-amount">176</span>
      </div>
    </div>    
  </div>    
</div>

style.css

@import url(https://fonts.googleapis.com/css?family=Abel)
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900)

$background-white: #fbfcfc
$white: #FAFAFC
$deep-yellow: #FDBE10
$yellow: #FDD20E
$black: #333333

$top-radius: 12px
$bottom-radius: 6px

// EDIT BELOW TO CHANGE FONT-SIZES
$muted-title-size: 0.9rem
$title-size: 1.5rem
$currency-name-font-size: 1.2rem
$balance-amount-font-size: 1.2rem


=material-shadow($level)
  @if $level == 1 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
  
  @else if $level == 2 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)

  @else if $level == 3 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)

  @else if $level == 4 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
  
  @else if $level == 5 
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)

html, body
  margin: 0
  padding: 0
  min-height: 100vh
  font-family: Abel
  color: $black

.content
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  min-height: 100vh
  background: $white
  
  .card-container
    display: flex
    flex-direction: column
    min-width: 25rem
    
    .bottom-split
      font-family: Raleway
      background: $yellow
      padding: 0.5rem
      display: flex
      align-items: center
      height: 3rem
      border-top-left-radius: 0
      border-top-right-radius: 0
      border-bottom-left-radius: $bottom-radius
      border-bottom-right-radius: $bottom-radius
      +material-shadow(1)
      
      .currency-name
        font-weight: 500
        font-size: $currency-name-font-size
        
      .balance-amount
        font-size: $balance-amount-font-size
        
      .bdt
        flex: 1
        
      .usd
        flex: 1
        text-align: right
      
    .mid-split
      background: $deep-yellow
      min-height: 4px
      margin-bottom: 5px
      box-shadow: 0 1px 10px 1px $yellow
      
      
    .top-split
      background: $white
      display: flex
      flex-direction: column
      justify-content: center
      align-items: flex-end
      min-height: 6rem
      flex: 1
      +material-shadow(1)
      
      padding: 10px 10px
      border-top: 1px solid #eee
      border-left: 1px solid #eee
      border-right: 1px solid #eee
      
      border-top-right-radius: $top-radius
      border-top-left-radius: $top-radius
      border-bottom-right-radius: 0
      border-bottom-left-radius: 0
      line-height: 1.5
      
      .muted-title
        font-family: Raleway
        color: #BABABB
        font-size: $muted-title-size
      .title
        font-size: $title-size