Mobile App Dashboard

By Rafi

button mobile dashboard icons flexbox header

How do I use This?

A mobile app dashboard with large easy to click buttons.

HTML

<div class="mobile-app-dashboard-header">
  <h1>Your Next Adventure Awaits</h1>
</div>

<div class="mobile-app-dashboard">
  <a href="">
    <div class="mobile-app-dashboard-inner">
      <i class="fa fa-plane" aria-hidden="true"></i>
      <span>Book Flights</span>
    </div>
  </a>

  <a href="">
    <div class="mobile-app-dashboard-inner">
      <i class="fa fa-clock-o mobile-app-dashboard-icon" aria-hidden="true"></i>
      <span>Flight Status</span>
    </div>
  </a>

  <a href="">
    <div class="mobile-app-dashboard-inner">
      <i class="fa fa-check-square-o" aria-hidden="true"></i>
      <span>Check In</span>
    </div>
  </a>

  <a href="">
    <div class="mobile-app-dashboard-inner">
      <i class="fa fa-cutlery" aria-hidden="true"></i>
      <span>Eat Well</span>
    </div>
  </a>

  <a href="">
    <div class="mobile-app-dashboard-inner">
      <i class="fa fa-question" aria-hidden="true"></i>
      <span>FAQ</span>
    </div>
  </a>

  <a href="">
    <div class="mobile-app-dashboard-inner">
      <i class="fa fa-plus" aria-hidden="true"></i>
      <span>Miles and Benefits</span>
    </div>
  </a>

</div>

$mobile-app-dashboard-height: 60vh;
$mobile-app-dashboard-item-color: $dark-gray;
$mobile-app-dashboard-img-size: rem-calc(50);
$mobile-app-dashboard-bg: transparent;

.mobile-app-dashboard-header {
  display: flex;
  height: 100vh - $mobile-app-dashboard-height;
  align-items: center;
  justify-content: center;
  background: url('https://images.pexels.com/photos/59519/pexels-photo-59519.jpeg?h=350&auto=compress&cs=tinysrgb') center center no-repeat;

  h1 {
    color: $white;
    text-align: center;
    font-size: 22px;
    background: rgba($white, 0.2);
  }
}

.mobile-app-dashboard {
  background-color: $mobile-app-dashboard-bg;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  height: $mobile-app-dashboard-height;

  a {
    flex-basis: 50%;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    color: $mobile-app-dashboard-item-color;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid $mobile-app-dashboard-item-color;

    &:nth-child(2n-1){
      border-right: 1px solid $mobile-app-dashboard-item-color;
    }
  }

  .mobile-app-dashboard-inner {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

    img,
    svg,
    i {
      max-width: $mobile-app-dashboard-img-size;
      max-height: $mobile-app-dashboard-img-size;
      font-size: $mobile-app-dashboard-img-size;
    }
  }
}

.mobile-app-dashboard-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 40vh;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: url("https://images.pexels.com/photos/59519/pexels-photo-59519.jpeg?h=350&auto=compress&cs=tinysrgb") center center no-repeat;
}

.mobile-app-dashboard-header h1 {
  color: #fefefe;
  text-align: center;
  font-size: 22px;
  background: rgba(254, 254, 254, 0.2);
}

.mobile-app-dashboard {
  background-color: transparent;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex: 1 1 100%;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  height: 60vh;
}

.mobile-app-dashboard a {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin: 0;
  color: #8a8a8a;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  border-bottom: 1px solid #8a8a8a;
}

.mobile-app-dashboard a:nth-child(2n-1) {
  border-right: 1px solid #8a8a8a;
}

.mobile-app-dashboard .mobile-app-dashboard-inner {
  height: 75px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.mobile-app-dashboard .mobile-app-dashboard-inner img,
.mobile-app-dashboard .mobile-app-dashboard-inner svg,
.mobile-app-dashboard .mobile-app-dashboard-inner i {
  max-width: 3.125rem;
  max-height: 3.125rem;
  font-size: 3.125rem;
}

Mobile App Dashboard

By Rafi

Social buttons

Rounded Social buttons

Hover Like Button

Mobile App Dashboard

By Rafi

Similar Building Blocks

Social buttons

Rounded Social buttons

Hover Like Button