Bootstrap Snippet 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 ---------->
<body>
    <!-- START PRELOADER -->
    <div id="preloader">
        <div id="status">·</div>
    </div>
    <!-- END PRELOADER -->
    <!-- Return to Top -->
    <a href="javascript:" id="return-to-top"><span class="fa fa-arrow-up" aria-hidden="true"></span></a>
    <!-- navigation -->
    <!-- start Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#about">
                    <img alt="Marina Marques" class="navbar-brand" src="http://marinamarques.pt/img/marina_marques_logo.png">
                </a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ResponsiveNav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right" id="ResponsiveNav">
                <ul class="nav navbar-nav">
                    <li><a href="#about-me" class="page-scroll">ABOUT</a></li>
                    <li><a href="#portfolio" class="page-scroll">PORTFOLIO</a></li>
                    <li><a href="#services" class="page-scroll">SERVICES</a></li>
                    <li><a href="#contact" class="page-scroll">CONTACT</a></li>
                </ul>
            </div>
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
body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    width: 100%;
    height: 100%;
    background: #fff;
    margin: 0;
    padding: 0;
}
h2 {
    color: #008080;
    font-weight: 700;
    font-size: 50px;
    font-family: 'Montserrat', sans-serif;
    text-transform: lowercase;
}
h2:after {
    content: '';
    width: 50px;
    height: 3px;
    background: #40E0D0;
    display: block;
    margin: 15px auto;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
h2:hover:after {
    width: 100px;
}
h3,
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
// PreLoader
jQuery.noConflict();
(function($) {
    $(window).on('load', function() { // makes sure the whole site is loaded
        $('#status').fadeOut(); // will first fade out the loading animation
        $('#preloader').delay(200).fadeOut('slow'); // will fade out the white DIV that covers the website.
    });
})(jQuery);
// Scroll to Top
jQuery.noConflict();
(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
            $('#return-to-top').fadeIn(200); // Fade in the arrow
        } else {
            $('#return-to-top').fadeOut(200); // Else fade out the arrow
        }
    });
    $('#return-to-top').click(function() { // When arrow is clicked
        $('body,html').animate({
            scrollTop: 0 // Scroll to top of body
        }, 500);
    });
})(jQuery);
// jQuery for page scrolling feature - requires jQuery Easing plugin
jQuery.noConflict();
(function($) {
    $(function() {
        $('a.page-scroll').bind('click', function(event) {
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1500, 'easeInOutExpo');
            event.preventDefault();
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"layout"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"layout" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"layout"
Bootstrap 3.0.0 Snippet by evarevirus