Another Unit Converter Logo

by wvega

HTML

<div class="logo">
  <div class="currency-symbol dollar">$</div>
  <div class="currency-symbol euro">€</div>
  <div class="currency-symbol yuan">¥</div>
  <div class="currency-symbol pound">£</div>
  <div class="arrows">
    <svg fill="#8BDFBF" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </div>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Lora:700|Roboto:900|Rubik);

$cell_width: 350px;

$color_start: #35b084;
$color_start: #1F7491;
$color_start: #46A8F3;

$color_end: #2f936d;
$color_end: #13425F;

$arrows_color: #32B4FF;
$arrows_color: #82D3FF;
$arrows_color: #ADE2FF;


.logo {
  display: grid;
  font-family: Rubik;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: $cell_width;
  width: 2 * $cell_width;
  align-items: center;
}
.currency-symbol, .arrows {
  text-align: center;
}
.currency-symbol {
  color: white;
  font-size: 0.5 * $cell_width;
  line-height: $cell_width;
  z-index: 20;
}
.dollar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.euro {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.yuan {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.pound {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

.arrows {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  line-height: 2 * $cell_width;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrows svg {
  fill: $arrows_color;
  width: 1.2 * $cell_width;
  height: 1.2 * $cell_width;
  z-index: 10;
}

.logo {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#35b084+0,2f936d+100 */
background: $color_start; /* Old browsers */
background: -moz-linear-gradient(top,  $color_start 0%, $color_end 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  $color_start 0%,$color_end 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  $color_start 0%,$color_end 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$color_start, endColorstr=$color_end,GradientType=0 ); /* IE6-9 */
}