Skip to content

Instantly share code, notes, and snippets.

@nitincoded

nitincoded/dashing03.html

Created July 20, 2017 05:04
Show Gist options
  • Save nitincoded/99bf42e7ddd6614a02b2645616684a30 to your computer and use it in GitHub Desktop.
Save nitincoded/99bf42e7ddd6614a02b2645616684a30 to your computer and use it in GitHub Desktop.
Download ZIP
Dashboard prototype using FlexBox
Raw
dashing03.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<style>
.red-bg { background-color: red; }
.green-bg { background-color: green; }
.blue-bg { background-color: blue; }
.red { color: red; }
.green { color: green; }
.hide { display: none; }
.dashing .num-big { display: inline-block; width: 100%; text-align: center; font-size: 40pt; font-family: Arial; font-weight: bold; color: white; }
.dashing .box { border-radius: 9px; padding: 8px; }
.dashing .sub { display: inline-block; width: 100%; text-align: center; font-size: 12pt; font-family: Arial; font-weight: bold; color: white; }
.box .num-big .fa { margin-left: -2%; }
</style>
</head>
<body>
<div class="row hide">
<div class="col-xs-12">
<div class="box red-bg">12</div>
</div>
</div>
<div class="dashing">
<div class="row">
<div class="col-xs-4">
<div class="box green-bg">
<span class="num-big">
<i class="fa fa-caret-up" aria-hidden="true"></i>
25
</span>
<span class="sub">Ice Cream Bars</span>
</div>
</div>
<div class="col-xs-4">
<div class="box red-bg">
<span class="num-big">
<i class="fa fa-caret-down" aria-hidden="true"></i>
25
</span>
<span class="sub">Ice Cream Cones</span>
</div>
</div>
<div class="col-xs-4">
<div class="box blue-bg">
<span class="num-big">25</span>
<span class="sub">Ice Cream Cups</span>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment