"Dashboard"
Bootstrap 3.3.0 Snippet by jeevan123456

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- 1 Containner left & right side --> <div class="container"> <div class="row"> <div class ="col-md-8"> <div class="well"> <h3><strong>See who you know on www.pixi.com </strong></h3> <p>Invite friends who are looking for work or need to outsource a job <button type="button" class="btn btn-success btn-md pull-right">Vote Now!</button></p> </div> <!-- well ends --> <div class="well" style="background-color:#ff5733"> <span style="font-size:3.5em;" class="glyphicon glyphicon-th-list"></span> <h3><strong>Claim 100 Bids for Free </strong></h3> <h4>Get started with a <strong>Free Trial</strong> for 100 bids and more! <button type="button" class="btn btn-default btn-md pull-right">Vote Now!</button></h4> </div> <!-- well ends --> <div class="well" style="background-color:#ffffff"> <p> Welcome to pixi.com! To help you get started, we would like to offer you a <strong>free upgrade to our Professional Membership</strong> for 30 days (valued at ₹1999 INR). You'll receive these great benefits: </p> <div class="well"> <span class="glyphicon glyphicon-share-alt Try it " style="color:#009900; font-size: 20px; vertical-align: middle;" aria-hidden="true"></span> <strong>300 Bids Per Month </strong>- Bid on more projects!<br> <span class="glyphicon glyphicon-share-alt Try it " style="color:#009900; font-size: 20px; vertical-align: middle;" aria-hidden="true"></span> <strong>100 Skills on your Profile </strong>- Apply for more projects across multiple categories!<br> <span class="glyphicon glyphicon-share-alt Try it " style="color:#009900; font-size: 20px; vertical-align: middle;" aria-hidden="true"></span> <strong>300 Bids Per Month </strong>- Bid on more projects!<br> <span class="glyphicon glyphicon-share-alt Try it " style="color:#009900; font-size: 20px; vertical-align: middle;" aria-hidden="true"></span> <strong>300 Bids Per Month </strong>- Bid on more projects!<br> <span class="glyphicon glyphicon-share-alt Try it " style="color:#009900; font-size: 20px; vertical-align: middle;" aria-hidden="true"></span> <strong>300 Bids Per Month </strong>- Bid on more projects!<br> <span class="glyphicon glyphicon-share-alt Try it " style="color:#009900; font-size: 20px; vertical-align: middle;" aria-hidden="true"></span> <strong>300 Bids Per Month </strong>- Bid on more projects!<br> <p>+ More Projects</p> <button type="button" class="btn btn-warning btn-md pull-left">Claim it for free!</button> <br> <br> </div> </div> <!-- well ends --> </div> <!-- column ends --> <div class ="col-md-4"> <div class="well text-center" style="background-color:#ffffff"> <p>Welcome back,bigpixi01 </p> <a href="#">Free Member</a><br><br> <button type="button" class="btn btn-success btn-md pull-center">Upgrade now</button><br><br> <div class="well text-center" style="background-color:#e6ffe6"> You are eligible for a FREE 30 day trial of Professional Membership! Get features to help grow your business. Get started! </div> <strong>Setup Your Account </strong> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) </div> </div> <!-- well ends --> </div> <!-- column ends --> </div> <!-- row ends --> </div><!--container ends here --> <!-- 1 Containner Ends left & right side -->
.well { box-shadow: 0 0 4px 0 rgba(0,0,0,.08),0 2px 4px 0 rgba(0,0,0,.12); border-radius: 4px; }

Related: See More


Questions / Comments: