"Dashboard Boxes"
Bootstrap 3.0.0 Snippet by sainisagar310

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 --> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="dbox dbox--color-1"> <div class="dbox__icon"> <i class="glyphicon glyphicon-cloud"></i> </div> <div class="dbox__body"> <span class="dbox__count">8,252</span> <span class="dbox__title">Lesson Plan</span> </div> <div class="dbox__action"> <button class="dbox__action__btn">More Info</button> </div> </div> </div> <div class="col-md-4"> <div class="dbox dbox--color-2"> <div class="dbox__icon"> <i class="glyphicon glyphicon-download"></i> </div> <div class="dbox__body"> <span class="dbox__count">100</span> <span class="dbox__title">Learning Resources</span> </div> <div class="dbox__action"> <button class="dbox__action__btn">More Info</button> </div> </div> </div> <div class="col-md-4"> <div class="dbox dbox--color-3"> <div class="dbox__icon"> <i class="glyphicon glyphicon-heart"></i> </div> <div class="dbox__body"> <span class="dbox__count">2502</span> <span class="dbox__title">Enrichment Content</span> </div> <div class="dbox__action"> <button class="dbox__action__btn">More Info</button> </div> </div> </div> </div> </div>
.dbox { position: relative; background: rgb(255, 86, 65); background: -moz-linear-gradient(top, rgba(255, 86, 65, 1) 0%, rgba(253, 50, 97, 1) 100%); background: -webkit-linear-gradient(top, rgba(255, 86, 65, 1) 0%, rgba(253, 50, 97, 1) 100%); background: linear-gradient(to bottom, rgba(255, 86, 65, 1) 0%, rgba(253, 50, 97, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff5641', endColorstr='#fd3261', GradientType=0); border-radius: 4px; text-align: center; margin: 60px 0 50px; } .dbox__icon { position: absolute; transform: translateY(-50%) translateX(-50%); left: 50%; } .dbox__icon:before { width: 75px; height: 75px; position: absolute; background: #fda299; background: rgba(253, 162, 153, 0.34); content: ''; border-radius: 50%; left: -17px; top: -17px; z-index: -2; } .dbox__icon:after { width: 60px; height: 60px; position: absolute; background: #f79489; background: rgba(247, 148, 137, 0.91); content: ''; border-radius: 50%; left: -10px; top: -10px; z-index: -1; } .dbox__icon > i { background: #ff5444; border-radius: 50%; line-height: 40px; color: #FFF; width: 40px; height: 40px; font-size:22px; } .dbox__body { padding: 50px 20px; } .dbox__count { display: block; font-size: 30px; color: #FFF; font-weight: 300; } .dbox__title { font-size: 13px; color: #FFF; color: rgba(255, 255, 255, 0.81); } .dbox__action { transform: translateY(-50%) translateX(-50%); position: absolute; left: 50%; } .dbox__action__btn { border: none; background: #FFF; border-radius: 19px; padding: 7px 16px; text-transform: uppercase; font-weight: 500; font-size: 11px; letter-spacing: .5px; color: #003e85; box-shadow: 0 3px 5px #d4d4d4; } .dbox--color-2 { background: rgb(252, 190, 27); background: -moz-linear-gradient(top, rgba(252, 190, 27, 1) 1%, rgba(248, 86, 72, 1) 99%); background: -webkit-linear-gradient(top, rgba(252, 190, 27, 1) 1%, rgba(248, 86, 72, 1) 99%); background: linear-gradient(to bottom, rgba(252, 190, 27, 1) 1%, rgba(248, 86, 72, 1) 99%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fcbe1b', endColorstr='#f85648', GradientType=0); } .dbox--color-2 .dbox__icon:after { background: #fee036; background: rgba(254, 224, 54, 0.81); } .dbox--color-2 .dbox__icon:before { background: #fee036; background: rgba(254, 224, 54, 0.64); } .dbox--color-2 .dbox__icon > i { background: #fb9f28; } .dbox--color-3 { background: rgb(183,71,247); background: -moz-linear-gradient(top, rgba(183,71,247,1) 0%, rgba(108,83,220,1) 100%); background: -webkit-linear-gradient(top, rgba(183,71,247,1) 0%,rgba(108,83,220,1) 100%); background: linear-gradient(to bottom, rgba(183,71,247,1) 0%,rgba(108,83,220,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b747f7', endColorstr='#6c53dc',GradientType=0 ); } .dbox--color-3 .dbox__icon:after { background: #b446f5; background: rgba(180, 70, 245, 0.76); } .dbox--color-3 .dbox__icon:before { background: #e284ff; background: rgba(226, 132, 255, 0.66); } .dbox--color-3 .dbox__icon > i { background: #8150e4; }

Related: See More


Questions / Comments:

Thanks for this

undisputedking (-3) - 4 years ago - Reply 0


Glad to hear that.

sainisagar310 () - 4 years ago - Reply 0