"Signup Success"
Bootstrap 2.3.2 Snippet by ncavet

<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; }

Related: See More


Questions / Comments: