Bootstrap Snippet Responsive project layout using HTML CSS Bootstrap jQuery

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 ---------->
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<body>
        <nav id="header" class="navbar navbar-fixed-top" style="background: rgba(31, 29, 29, 0.54);height: 60px;" >
            <div id="header-container" class="container navbar-container" style="margin: 0;">
                <div class="navbar-header"">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Навигация</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a id="brand" class="navbar-brand" href="Vestnik2.0.html" style="color: white; padding-bottom: 3%!important"><h4><b>Company</b></h4></a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav" style="transition: all 0.3s ease;">
                        <li></li>
                        <li></li>
                        
                    </ul>
                </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
        </nav><!-- /.navbar -->
<div class="wrapper">
<div class="row mainHeading" style="background: url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/itCjTBE/social-communication-icons-on-grey-wavy-animated-background-video-graphic-design-hd-1920x1080_enncwo2sl__F0011.png);background-size: cover; background-repeat: no-repeat;  height: 600px; margin: 0!important;">
  <div class="col-lg-12">
    <h1 style="margin-top: 17%;padding: 10px;background: rgba(31, 29, 29, 0.54); color: white; text-align: center;">PROJECT NAME</h1>
  </div>
</div>
<div class="container" ">
<div class="row">
<div class="col-lg-12">
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
*:not(span) {
  font-family: 'Exo 2', sans-serif!important;
}
.nav.nav-justified > li > a { position: relative; }
.nav.nav-justified > li > a:hover,
.nav.nav-justified > li > a:focus { background-color: transparent; }
.nav.nav-justified > li > a > .quote {
    position: absolute;
    right: 20px;
    bottom: 0;
    opacity: 0;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: #13c0ba;
    border-radius: 15px;
    color: #fff;  
}
.nav.nav-justified > li.active > a > .quote { opacity: 1; }
.nav.nav-justified > li > a > img { box-shadow: 0 0 0 5px silver; }
.nav.nav-justified > li > a > img { 
    max-width: 100%;
    width: 100%; 
    opacity: .3; 
    -webkit-transform: scale(.8,.8);
            transform: scale(.8,.8);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img { 
    opacity: 1; 
    -webkit-transform: none;
            transform: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
  $('.go-top').hide(0)
  
  $(window).scroll(function(){
    if($(this).scrollTop() > 100){
      $('.go-top').fadeIn(200);      
    } else {
      $('.go-top').fadeOut(300);
    }
  });
  $('.go-top').click(function() {
    event.preventDefault();
    
    $('html , body').animate({scrollTop: 0}, 1000);
  });
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive project layout"
Bootstrap 3.0.0 Snippet by avistheripper

Related: See More

Questions / Comments:

"Responsive project layout" Bootstrap 3.0.0 Snippet by avistheripper

Related: See More

Questions / Comments:

"Responsive project layout"
Bootstrap 3.0.0 Snippet by avistheripper