"Job details page FULL"
Bootstrap 3.3.0 Snippet by explotter

<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 ----------> <!-- Bootstrap Line Tabs by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div class="content"> <div class="container"> <div class="row"> <div class="col-md-12 margin-bottom-30"> <!-- BEGIN Portlet PORTLET--> <div class="portlet"> <div class="portlet-title"> <div class="caption"> <i class="glyphicon glyphicon-building"></i> <span class="caption-subject text-uppercase">Administrative Specialist - Washington</span> <span class="glyphicon glyphicon-map-marker caption-helper"></span> <span class="caption-helper job-location">Washington</span> </div> <div class="actions"> <a href="javascript:;" class="btn"> <i class="glyphicon glyphicon-record"></i> Apply </a> </div> </div> <div class="portlet-body"> <h4>Job Description</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> </div> <br /> <div class="portlet-body"> <h4>Key Responsibilities</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> </div> <br /> <div class="portlet-body"> <h4>Key Skills, Experience and Education</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> </div> <br /> <div class="portlet-body"> <h4>Other Responsibilities</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> </div> <br /> <div class="portlet-body"> <h4>Task Description</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> </div> <br /> <div class="portlet-body"> <h4>Administration</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> </div> <br /> <div class="portlet-body"> <h4>Human Resources</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> </div> <br /> <div class="portlet-body"> <h4>Board of Directors</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> </div> <br /> <div class="portlet-body"> <h4>Supervision</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> </div> </div> <!-- END Portlet PORTLET--> <div class="col-sm-12 text-center"> <a href="javascript:;" class="btn btn-default btn-round-lg btn-lg"> <i class="glyphicon glyphicon-record"></i> Apply </a> </div> </div> </div> </div> </div> <br> <br> <center> <strong>TWITTER - LINKEDIN - FACEBOOK SHARE</strong> </center> <br> <br>
/*** Bootstrap Line Tabs by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ .content { padding: 30px; background: #f1f3fa; } .margin-bottom-30 { margin-bottom: 30px; } /* Portlet */ .portlet { background: #fff; padding: 20px; } .portlet.portlet-gray { background: #f7f7f7; } .portlet.portlet-bordered { border: 1px solid #eee; } /* Portlet Title */ .portlet-title { padding: 0; min-height: 40px; border-bottom: 1px solid #eee; margin-bottom: 18px; } .caption { float: left; display: inline-block; font-size: 18px; line-height: 18px; } .caption.caption-green .caption-subject, .caption.caption-green i { color: #4db3a2; font-weight: 200; } .caption.caption-red .caption-subject, .caption.caption-red i { color: #e26a6a; font-weight: 200; } .caption.caption-purple .caption-subject, .caption.caption-purple i { color: #8775a7; font-weight: 400; } .caption i { color: #777; font-size: 15px; font-weight: 300; margin-top: 3px; } .caption-subject { color: #666; font-size: 21px; font-weight: 600; } .caption-helper { padding: 0; margin: 0; line-height: 13px; color: #9eacb4; font-size: 13px; font-weight: 400; } /* Actions */ .actions { float: right; display: inline-block; } .actions a { margin-left: 3px; } .actions .btn { color: #666; padding: 3px 9px; font-size: 13px; line-height: 1.5; background-color: #fff; border-color: #ccc; border-radius: 50px; } .actions .btn i { font-size: 12px; } .actions .btn:hover { background: #f2f2f2; } /* Pagination */ .pagination { margin: -3px 0 0; border-radius: 50px; } .pagination > li > a, .pagination > li > span { padding: 4px 10px; font-size: 12px; color: #8775a7; background: #f7f7f7; } .pagination > li:hover > a, .pagination > li.active > a, .pagination > li.active:hover > a { color: #fff; background: #8775a7; border-color: #8775a7; } /* Inputs */ .inputs { float: right; display: inline-block; padding: 4px 0; margin-top: -10px; } .input-inline { width: 240px; display: inline-block; vertical-align: middle; } /* Tab */ .portlet-title > .nav-tabs { background: none; margin: 0; float: right; display: inline-block; border: 0; } .portlet-title > .nav-tabs > li { background: none; margin: 0; border: 0; } .portlet-title > .nav-tabs > li > a { background: none; border: 0; padding: 2px 10px 13px; color: #444; } .portlet-title > .nav-tabs > li.active, .portlet-title > .nav-tabs > li.active:hover { border-bottom: 4px solid #f3565d; position: relative; } .portlet-title > .nav-tabs > li:hover { border-bottom: 4px solid #f29b9f; } .portlet-title > .nav-tabs > li.active > a, .portlet-title > .nav-tabs > li:hover > a { color: #333; background: #fff; border: 0; } /* Btn Circle */ .actions .btn.btn-circle { width: 28px; height: 28px; padding: 3px 7px; text-align: center; } .actions .btn.btn-circle i { font-size: 11px; } /* Btn Grey Salsa */ .actions .btn.grey-salsa { border: none; margin-left: 3px; box-shadow: none; border-radius: 50px !important; } .actions .btn.grey-salsa.active { color: #fafcfb; background: #8e9bae; } .actions .grey-salsa.btn:hover, .actions .grey-salsa.btn:focus, .actions .grey-salsa.btn:active, .actions .grey-salsa.btn.active { color: #fafcfb; background: #97a3b4; } /* Btn Red */ .actions .btn.btn-red.active, .actions .btn.btn-red:hover { color: #fff; box-shadow: none; background: #e26a6a; border-color: #e26a6a; } /* Btn Red */ .actions .btn.btn-purple.active, .actions .btn.btn-purple:hover { color: #fff; box-shadow: none; background: #8775a7; border-color: #8775a7; } .btn-round-lg { border-radius: 22.5px; margin:10px 0; }

Related: See More


Questions / Comments: