Bizamajig UI - Setup Dashboard - With Sub-steps - MINIMALIST
HTML
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container" style="background-color: white;">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-info-section="1" class="info-section m-t-large m-b-large clearfix">
<div class="dp-table w-100">
<span class="dp-table-cell _40 xbtn xbtn-circle xbtn-sm">
<span class="icon-2x" aria-hidden="true" data-icon=""></span>
</span>
<div class="m-none dp-table-cell w-100 pull-left">
<h4 class="info-section-title m-b-mini pull-left color-6">
<strong>
Company
</strong>
</h4>
</div>
</div>
<div class="clear"></div>
<!--
<div class="info-section-description m-t-large">
The first step is to setup your initial model of how you will use Bizamajig to support your business. After completing, move on to creating and publishing your first work process, and finally start working with Bizamajig to build traffic, do commerce, and serve customers.
</div>
<div class="info-section-description m-t-large">
“Setup your company structure, and user accounts.”
</div>
-->
<ol class="info-task-list m-t-large">
<li class="info-task info-task-completed accordion-group" data-info-task="1">
<div class="accordion-heading">
<a class="info-task-title color-3 accordion-toggle" data-toggle="collapse" data-target="#info-task-description-1-1">
Enter your company name and locations
</a>
</div>
<div id="info-task-description-1-1" class="info-task-description collapse">
<div class="accordion-inner">
<p>
</p>
<a id="" class="info-task-next color-6">
Start this activity
</a>
</div>
</div>
</li>
<li class="info-task info-task-completed accordion-group"...
CSS
/*
**
** START Bizamajig Base CSS
**
*/
/* START BIZAMAJIG FONTS - IMPORT AS NEEDED */
/* @import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); */
/* END BIZAMAJIG FONTS - IMPORT AS NEEDED */
@media (min-width: 576px) {
.mt-large
/* START Bizamajig Base CSS - Bootstrap */
/* START Bootstrap */
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin:...