<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen">
<div class="container">
<div class="process">
<div class="process-row">
<div class="process-step">
<button type="button" class="btn btn-success btn-circle" disabled="disabled"><i class="fa fa-envelope-o fa-3x"></i></button>
<p>verify work email</p>
</div>
<div class="process-step">
<button type="button" class="btn btn-success btn-circle" disabled="disabled"><i class="fa fa-linkedin fa-3x"></i></button>
<p>verify linkedin</p>
</div>
<div class="process-step">
<button type="button" class="btn btn-success btn-circle" disabled="disabled"><i class="fa fa-user fa-3x"></i></button>
<p>complete profile in 10s</p>
</div>
<div class="process-step">
<button type="button" class="btn btn-success btn-circle" disabled="disabled"><i class="fa fa-flag-checkered fa-3x"></i></button>
<p><strong>Donezo!</strong></p>
</div>
</div>
</div>
</>
<form class="form-horizontal">
<fieldset>
<!-- Agency User Response -->
<legend>Donezo!</legend>
<!-- Text input-->
Your account still needs to be validated
<!-- USER TYPE: VENDOR SUCCCES-->
<legend>Donezo! Here's how to get started on vendori in your company.</legend>
<!-- Text input-->
<!-- Job Function (Marketing, Inside Sales)-->
<h5>Marketing & Inside Sales Team: REACH MORE BRANDS & AGENCIES FASTER</h5>
<ul><li><a href="#">Build out your company's profile</a> with explainer videos, case studies and whitepapers.</li>
<li><a href="#">Update your offices and contact information</a> to make it easier for clients and prospects to find you.</li></ul>
<!-- Job Function (Outside Sales)-->
<h5>Outside Sales Team: REACH MORE PEOPLE AT YOUR NEXT SALES MEETING</h5>
<ul><li><a href="#">Publish your sales team's contact information</a> to your current and prospective client roster.</li>
<li><a href="#">Publish a recent pitch deck</a> to find new opportunities within your prospective company offices.</li>
</ul>
<!-- Job Function (Account Management)-->
<h5>Account Managers: SATISFY CLIENTS AND DRIVE ADOPTION ACROSS YOUR ACCOUNTS</h5>
<ul><li><a href="#">Publish your account team's contact information</a> to provide easy access for clients to connect with you.</li>
<li><a href="#">Publish a deck</a> or <a href="#">publish a video</a> showcasing new product features, announcements.</li>
</ul>
<!-- Marketer User Response -->
<legend>Donezo! Here's how to get your brand started on vendori.</legend>
<!-- Brand Management and Marketing Direction-->
<h5>Brand Managers: GET BETTER PERFORMANCE FROM YOUR AGENCY TEAMS</h5>
<ul><li><a href="#">Ask your agency team to provide contact info</a> and vendori will create org charts and contact lists so your entire team has access to the right people.</li>
<li><a href="#">Ask your agencies and vendors to submit capabilities decks</a>, <a href="#">campaign wrap-up decks</a>, and <a href="#">award submission videos</a> to build a searchable deck repository for your brand team.</li>
<li><a href="#">Ask your internal team to rate your agencies and vendors</a> to get a complete look at who's crushing it and who's missing the mark.</li>
</ul>
<!-- Marketer: Marketing support: Insights, Innovation, Agency Relations, Procurement, etc. -->
<h5>Marketing Support Teams: TURN INSIGHTS INTO ALWAYS-ON OPPORTUNITIES ACROSS BRAND TEAMS</h5>
<ul><li><a href="#">Publish & tag an internal, vendor or agency deck</a> to make it searchable across the enterprise.</li>
<li><a href="#">Ask agencies and vendors to submit capabilities decks</a> to build your company's agency & vendor document repository.</li>
<li><a href="#">Ask your internal team to rate your agencies and vendors</a> to get a complete look at who's crushing it and who's missing the mark.</li>
<li><a href="#">Ask your agency team to provide contact info</a> and vendori will create org charts and contact lists so your entire team has access to the right people.</li>
</ul>
<!-- Agency User Response -->
<legend>Donezo! Here's how to get started with vendori in your agency.</legend>
<!-- Agency User: Job Function Account Manager-->
<h5>Account Managers: GROW THE BUSINESS. LEAD THE TEAM.</h5>
<ul>
<li><a href="#">Invite your client team</a> or <a href="#">update you client contact info</a> and vendori will create org charts and contact lists so your entire team has access to the right people.</li>
<li><a href="#">Ask your agency team</a> or <a href="#">submit capabilities decks</a>, <a href="#">campaign wrap-up decks</a>, and <a href="#">award submission videos</a> to build a searchable deck repository for your client team.</li>
<li><a href="#">Ask your internal team to rate your agency and vendor partners</a> to get a complete look at who's crushing it and who's missing the mark.</li>
</ul>
<!-- Agency User: Job Function Strategy, Planning-->
<h5>Strategists: GET SMARTER. FIND CLIENT SOLUTIONS FASTER. PROVE YOUR STRATEGIC THINKING</h5>
<ul>
<li><a href="#">Publish & tag a deck</a> to make it searchable across your client's enterprise or across the industry.</li>
<li><a href="#">Ask agencies and vendors to submit capabilities decks</a> to build your company's agency & vendor partner document repository.</li>
<li><a href="#">Rate your agency partners and vendors</a> to share your knowledge of who's crushing it and who's missing the mark with your colleagues.</li>
<li><a href="#">Share your vendor contacts with your colleagues</a> so your teams can move faster and get the answers they need.</li>
</ul>
<!-- Agency User: Job Function Creative-->
<h5>Creatives: GET YOUR WORK THE CREDIT IT DESERVES</h5>
<ul>
<li><a href="#">Upload your awards show case studies</a> for your clients and the industry to discover while crediting the team who built them.</li>
<li><a href="#">Share your vendor contacts with your colleagues</a> so your teams can move faster and get the answers they need.</li>
<li><a href="#">Update your company profile</a> with your best work and client list so the world knows what your team can deliver.</li>
</ul>
<!-- Agency User: Job Function New Business, External Marketing-->
<h5>New Business: DRIVE NEW LEADS TO YOUR AGENCY</h5>
<ul>
<li><a href="#">Update your company profile</a> with your offices, key contacts, <a href="#">videos</a>, <a href="#">cases</a> , <a href="#">whitepapers</a>, <a href="#">decks</a> and <a href="#">client roster</a> so the industry knows what your team can deliver and how to connect.</li>
<li><a href="#">Publish & tag your decks, cases, whitepapers and videos</a> to make it searchable across the industry.</li>
</ul>
<!-- Agency User: Research-->
<h5>Marketing Support Teams: TURN INSIGHTS INTO ALWAYS-ON OPPORTUNITIES ACROSS BRAND TEAMS</h5>
<ul><li><a href="#">Publish & tag an internal, vendor or agency deck</a> to make it searchable across the enterprise.</li>
<li><a href="#">Ask vendors to submit capabilities decks</a> to build your company's agency & vendor document repository.</li>
<li><a href="#">Ask your internal team to rate your vendors</a> to get a complete look at who's crushing it and who's missing the mark.</li>
<li><a href="#">Ask your vendors to provide contact info</a> so your entire team has access to the right people.</li>
</ul>
<!-- Other User -->
<legend>Donezo!</legend>
<!-- Text input-->
Your account type is not yet supported by Vendori. If you have questions, feel free to reach out to nick@vendori.com
body{margin:40px;}
.stepwizard-step p {
margin-top: 10px;
}
.process-row {
display: table-row;
}
.process {
display: table;
width: 100%;
position: relative;
}
.process-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.process-row:before {
top: 50px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.process-step {
display: table-cell;
text-align: center;
position: relative;
}
.process-step p {
margin-top:10px;
}
.btn-circle {
width: 100px;
height: 100px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.panel > .list-group .list-group-item:first-child {
/*border-top: 1px solid rgb(204, 204, 204);*/
}
@media (max-width: 767px) {
.visible-xs {
display: inline-block !important;
}
.block {
display: block !important;
width: 100%;
height: 1px !important;
}
}
#back-to-bootsnipp {
position: fixed;
top: 10px; right: 10px;
}
.c-search > .form-control {
border-radius: 0px;
border-width: 0px;
border-bottom-width: 1px;
font-size: 1.3em;
padding: 12px 12px;
height: 44px;
outline: none !important;
}
.c-search > .form-control:focus {
outline:0px !important;
-webkit-appearance:none;
box-shadow: none;
}
.c-search > .input-group-btn .btn {
border-radius: 0px;
border-width: 0px;
border-left-width: 1px;
border-bottom-width: 1px;
height: 44px;
}
.c-list {
padding: 0px;
min-height: 44px;
}
.title {
display: inline-block;
font-size: 1.7em;
font-weight: bold;
padding: 5px 15px;
}
ul.c-controls {
list-style: none;
margin: 0px;
min-height: 44px;
}
ul.c-controls li {
margin-top: 8px;
float: left;
}
ul.c-controls li a {
font-size: 1.7em;
padding: 11px 10px 6px;
}
ul.c-controls li a i {
min-width: 24px;
text-align: center;
}
ul.c-controls li a:hover {
background-color: rgba(51, 51, 51, 0.2);
}
.c-toggle {
font-size: 1.7em;
}
.name {
font-size: 1.7em;
font-weight: 700;
}
.c-info {
padding: 5px 10px;
font-size: 1.25em;
}
