<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 ----------> <div class="mq-wrapper"> <!-- Sidebar --> <div class="mq-sidebar"> <div class="mq-branding"> <h3>Muhammad Qasim</h3> </div> <nav> <ul class="nav navbar-nav"> <li><a href="#">home</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">social</a></li> </ul> </nav> </div> <!-- widgets --> <div class="mq-container"> <!-- Breadcrums --> <div class="mq-bread-crumbs"> <ul> <li><a href="#">dashboard</a></li> <li><a href="#">main</a></li> </ul> </div> <!-- widget --> <div class="mq-service-box"> <div class="mq-box-header"> </div> <div class="mq-box-body"> </div> </div> <!-- widget --> <div class="mq-service-box"> <div class="mq-box-header"> </div> <div class="mq-box-body"> </div> </div> <!-- widget --> <div class="mq-service-box"> <div class="mq-box-header"> </div> <div class="mq-box-body"> </div> </div> <!-- widget --> <div class="mq-service-box"> <div class="mq-box-header"> </div> <div class="mq-box-body"> </div> </div> <!-- small widget --> <div class="mq-small-service-box"> <div class="small-box"> </div> <div class="small-box"> </div> <div class="small-box"> </div> <div class="small-box"> </div> </div> </div> </div>

/* Author : Muhammad Qasim; Designation : Web Developer at xgrid; Description :Template for Professional resume; */ body{ font-size: 8pt; font-weight: 300; background: #2d2d2d !important; color: #fff !important; text-transform: uppercase; } /* Buttons for wesite */ /* Wrapper class */ .mq-wrapper{ width: 100%; } /* Sidebar */ .mq-sidebar{ width: 30%; margin-right: 10px; float: left; position: absolute; height: 100%; background-color: #1c1c1c; } .mq-branding{ width: 100%; height: 70px; background: rgb(0, 153, 255); display: table; position: relative; } .mq-branding h3::first-letter{ color:#2d2d2d; font-weight: 900; font-size: 42pt; } .mq-branding h3{ display: table-cell; vertical-align: middle; text-align: center; } /* Sidebar end */ /* Body container */ .mq-container{ width:70%; height: 100%; position: absolute; left: 30%; float: right; background-color: #313131; } .mq-bread-crumbs{ width: 100%; height: 70px; border-bottom: 1px solid #212121; margin-bottom: 10px; position: relative; display: table; } .mq-bread-crumbs ul{ display: table-cell; vertical-align: middle; } .mq-bread-crumbs li, .mq-bread-crumbs a{ display: inline; padding-right: 10px; font-size: 8pt; color: #fff; } .mq-service-box{ width: 31.9%; height: 250px; background: #1c1c1c; margin: 0px 0px 10px 10px; float: left; } .mq-box-header{ width: 100%; height: 40px; background-color: #212121; } /* Body Container end*/