Bootstrap Snippet NSCN Tabs using HTML CSS Bootstrap

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.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>
  <!-- Nav tabs -->
  <ul id="jobseekers-tabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active col-sm-2"><a href="#other-resources" aria-controls="other-resources" role="tab" data-toggle="tab">I want help with other resources while I'm unemployed</a><a href="#" class="btn">Learn More</a></li>
    <li role="presentation" class="col-sm-2"><a href="#education" aria-controls="education" role="tab" data-toggle="tab">I want more education or training</a><a href="#" class="btn">Learn More</a></li>
    <li role="presentation" class="col-sm-2"><a href="#same-industry" aria-controls="same-industry-job" role="tab" data-toggle="tab">I want to find a job in the same occupation or industry</a><a href="#" class="btn">Learn More</a></li>
    <li role="presentation" class="col-sm-2"><a href="#job-openings" aria-controls="job-openings" role="tab" data-toggle="tab">I want to view job openings and career resources</a><a href="#" class="btn">Learn More</a></li>
    <li role="presentation" class="col-sm-2"><a href="#services" aria-controls="services" role="tab" data-toggle="tab">I'd like to see what resources and services your provide</a><a href="#" class="btn">Learn More</a></li>
    <li role="presentation" class="col-sm-2"><a href="#career-change" aria-controls="career-change" role="tab" data-toggle="tab">I want to make a career change</a><a href="#" class="btn">Learn More</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="other-resources">
        <ul>
            <li><a href="#">Mental Health and Substance Abuse Report</a></li>
            <li><a href="#">Housing assistance</a></li>
            <li><a href="#">Food pantries and NJ snap</a></li>
            <li><a href="#">Energy and utility cost assistance</a></li>
            <li><a href="#">Social services</a></li>
            <li><a href="#">NSCN non-profit partners with services for job seekers</a></li>
            <li><a href="#">Financial educatoin and advising</a></li>
            <li><a href="#">Low cost high speed internet</a></li>
            <li><a href="#">Mature and older worker support</a></li>
            <li><a href="#">Pbulic libraries</a></li>
        </ul>
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
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
#jobseekers-tabs li {
    text-transform:uppercase;
    text-align:center;
    font-weight:700;
    font-family:'Roboto';
    font-size:18px;
}
#jobseekers-tabs li a {
    color: #7e7e7e;
    border:none;
}
#jobseekers-tabs li a:first-child {
    height:150px;
}
#jobseekers-tabs li.active a, #jobseekers-tabs li:hover a {
    color:#e51837;
}
#jobseekers-tabs li:hover a.btn {
    color:#fff;
    background:#e51837;
}
#jobseekers-tabs li.active {
    border-bottom:10px solid #e51837;
    padding-bottom:1em;
}
#jobseekers-tabs li.active .btn {
    color:#fff;
    background:#e51837;
    cursor:pointer;
}
#jobseekers-tabs li .btn {
    background:#7e7e7e;
    color:#fff;
    position:relative;
    bottom:0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"NSCN Tabs"
Bootstrap 3.0.0 Snippet by wondermarq

Related: See More

Questions / Comments:

"NSCN Tabs" Bootstrap 3.0.0 Snippet by wondermarq

Related: See More

Questions / Comments:

"NSCN Tabs"
Bootstrap 3.0.0 Snippet by wondermarq