Bootstrap Snippet Featured Jobs Layout using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<section class="featured-jobs">
    <div class="container">
        <div class="center-block"><h1>Featured Jobs</h1></div>
        <div class="row">
                <!-- first feature job -->
                <div class="col-sm-6 col-md-4">
                    
                        <div class="thumbnail">
                                <img data-src="holder.js/90x70" alt="advetiser logo">
                                <a href="" class="feature-link"><h3>Job Title heading</h3></a>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia...</p>
                                <span class="meta">Posted by Recruiter - 12/12/2014</span>
                                <div class="feature-btns"><a href="#" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-file"></span> View Details</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-star-empty"></span> Shortlist</a></div>
                        </div>
                    
                </div>
                <!-- second feature job -->
                <div class="col-sm-6 col-md-4">
                    
                            <div class="thumbnail">
                                <img data-src="holder.js/90x70" alt="advetiser logo">
                                <a href="" class="feature-link"><h3>Job Title heading</h3></a>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia...</p>
                                <span class="meta">Posted by Recruiter - 12/12/2014</span>
                                <div class="feature-btns"><a href="#" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-file"></span> View Details</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-star-empty"></span> Shortlist</a></div>
                        </div>
                    
                </div>
                <!-- third feature job -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.featured-jobs {
  padding: 70px 0px;
  background: #f2f0f1;
}
.featured-jobs .thumbnail {
  padding: 20px;
}
.featured-jobs .thumbnail img {
  float: left;
  margin: 0 10px 10px 0;
}
.featured-jobs .thumbnail .feature-link {
  color: #77c7dc;
}
.featured-jobs .thumbnail .feature-link h3 {
  padding-left: 10px;
  margin: 0 0 6px;
  font-size: 18px;
}
.featured-jobs .thumbnail .meta {
  color: #f16060;
  font-size: 11px;
}
.featured-jobs .thumbnail p {
  font-size: 12px;
  margin: 0 0 5px;
}
.featured-jobs .thumbnail .feature-btns {
  position: absolute;
  bottom: -13px;
  left: 15px;
}
@media only screen and (max-width: 1024px) {
.thumbnail { margin-bottom:50px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!
Holder - 2.3.2 - client side image placeholders
(c) 2012-2014 Ivan Malopinsky / http://imsky.co
Provided under the MIT License.
Commercial use requires attribution.
*/
var Holder = Holder || {};
(function (app, win) {
var system_config = {
    use_svg: false,
    use_canvas: false,
    use_fallback: false
};
var instance_config = {};
var preempted = false;
canvas = document.createElement('canvas');
var dpr = 1, bsr = 1;
var resizable_images = [];
if (!canvas.getContext) {
    system_config.use_fallback = true;
} else {
    if (canvas.toDataURL("image/png")
        .indexOf("data:image/png") < 0) {
        //Android doesn't support data URI
        system_config.use_fallback = true;
    } else {
        var ctx = canvas.getContext("2d");
    }
}
if(!!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect){
    system_config.use_svg = true;
    system_config.use_canvas = false;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Featured Jobs Layout"
Bootstrap 3.1.0 Snippet by Neilo

Related: See More

Questions / Comments:

"Featured Jobs Layout" Bootstrap 3.1.0 Snippet by Neilo

Related: See More

Questions / Comments:

"Featured Jobs Layout"
Bootstrap 3.1.0 Snippet by Neilo