3
\$\begingroup\$

I've made a simple one page site to practise using Bootstrap. Could you please look at the HTML & CSS and check for possible improvements?

Here's a page.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/ionicons.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target="#main-navbar">


    <header>
        <nav class="navbar navbar-default navbar-intro navbar-fixed-top" id="main-navbar">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div>
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#intro">Start <span class="sr-only">(current)</span></a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#pricing">Pricing</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                        <li><a href="#blog">Blog</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <section id="intro" data-stellar-background-ratio="0.5">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center">
                    <h1>Landing page for business</h1>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec arcu ac nisi pharetra venenatis in non dolor. Donec suscipit sagittis erat. Vivamus tempus quam luctus nibh euismod, nec malesuada sed.</p>
                    <!-- /.lead -->
                    <div class="row">
                        <div class="col-xs-6 col-xs-offset-0 col-sm-4 col-sm-offset-2">
                            <a href="#about" class="btn btn-block btn-intro">About us</a>
                        </div>
                        <!-- /.col-md-6 -->
                        <div class="col-xs-6 col-sm-4">
                            <a href="#pricing" class="btn btn-block btn-intro">Pricing</a>
                        </div>
                        <!-- /.col-md-6 -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.col-md-6 col-md-offset-3 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /#intro -->


    <section id="services">
        <div class="container">
            <h2 class="text-center section-title">Services</h2>
            <p class="section-lead text-center">Cras nec nulla erat. Donec laoreet nec lorem ac molestie. Morbi non malesuada elit. Mauris volutpat.</p>
            <!-- /.section-lead -->
            <div class="row">
                <div class="col-md-4 md-margin-bottom-40">
                    <i class="icon ion-home icon-services"></i>
                    <p class="service-desc">Quisque nec nisl dictum, sollicitudin lacus vitae, rhoncus ex. Donec velit orci, sollicitudin quis accumsan ut, tempor ut urna. Curabitur rhoncus elementum diam in venenatis. Ut aliquet enim quis sed. </p>
                    <!-- /.service-desc -->
                </div>
                <!-- /.col-md-4 -->
                <div class="col-md-4 md-margin-bottom-40">
                    <i class="icon ion-search icon-services"></i>
                    <p class="service-desc">Quisque nec nisl dictum, sollicitudin lacus vitae, rhoncus ex. Donec velit orci, sollicitudin quis accumsan ut, tempor ut urna. Curabitur rhoncus elementum diam in venenatis. Ut aliquet enim quis sed. </p>
                    <!-- /.service-desc -->
                </div>
                <!-- /.col-md-4 -->
                <div class="col-md-4">
                    <i class="icon ion-flag icon-services"></i>
                    <p class="service-desc">Quisque nec nisl dictum, sollicitudin lacus vitae, rhoncus ex. Donec velit orci, sollicitudin quis accumsan ut, tempor ut urna. Curabitur rhoncus elementum diam in venenatis. Ut aliquet enim quis sed. </p>
                    <!-- /.service-desc -->
                </div>
                <!-- /.col-md-4 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-md-4 md-margin-bottom-40">
                    <i class="icon ion-map icon-services"></i>
                    <p class="service-desc">Quisque nec nisl dictum, sollicitudin lacus vitae, rhoncus ex. Donec velit orci, sollicitudin quis accumsan ut, tempor ut urna. Curabitur rhoncus elementum diam in venenatis. Ut aliquet enim quis sed. </p>
                    <!-- /.service-desc -->
                </div>
                <!-- /.col-md-4 -->
                <div class="col-md-4 md-margin-bottom-40">
                    <i class="icon ion-compass icon-services"></i>
                    <p class="service-desc">Quisque nec nisl dictum, sollicitudin lacus vitae, rhoncus ex. Donec velit orci, sollicitudin quis accumsan ut, tempor ut urna. Curabitur rhoncus elementum diam in venenatis. Ut aliquet enim quis sed. </p>
                    <!-- /.service-desc -->
                </div>
                <!-- /.col-md-4 -->
                <div class="col-md-4">
                    <i class="icon ion-arrow-graph-up-left icon-services"></i>
                    <p class="service-desc">Quisque nec nisl dictum, sollicitudin lacus vitae, rhoncus ex. Donec velit orci, sollicitudin quis accumsan ut, tempor ut urna. Curabitur rhoncus elementum diam in venenatis. Ut aliquet enim quis sed. </p>
                    <!-- /.service-desc -->
                </div>
                <!-- /.col-md-4 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /#services -->


    <section id="about" data-stellar-background-ratio="0.5">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                   <div class="about-content">
                        <h2 class="section-title-left">About us</h2>
                        <p>Vestibulum blandit libero nulla, quis ultricies leo eleifend non. Cras in odio eget justo accumsan mollis et vitae orci. Suspendisse auctor purus vitae lacus tempus, id mattis turpis fringilla. In convallis erat nec nulla vestibulum, et consectetur lacus imperdiet. Donec elementum eros vitae metus scelerisque lobortis. Vestibulum id dui eget augue maximus sollicitudin non at lacus. Phasellus dui eros, imperdiet vitae quam et, consectetur porttitor lorem. Vestibulum viverra dignissim nisi nec molestie. Aliquam felis diam, porttitor non ex ut, facilisis hendrerit felis. Etiam nec ex eu diam dictum convallis. Phasellus sit amet ante tortor. Sed non semper risus, ut aliquam massa. Morbi sit amet consequat sapien, at maximus neque. Maecenas luctus sem id odio fermentum mollis. Nam at porttitor nibh.</p>
                   </div>
                   <!-- /.about-content -->
                </div>
                <!-- /.col-md-6 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /#about -->


    <section id="pricing">
        <div class="container">
            <h2 class="text-center section-title">Pricing</h2>
            <p class="section-lead text-center">Cras nec nulla erat. Donec laoreet nec lorem ac molestie. Morbi non malesuada elit. Mauris volutpat.</p>
            <div class="row">
                <div class="col-md-4 md-margin-bottom-30">
                    <div class="pricing-table text-center">
                        <header class="pricing-header">
                            <h4>Basic license</h4>
                            <p>$<span>30</span>/month</p>
                        </header>
                        <!-- /.pricing-header -->
                        <div class="pricing-body">
                            <ul class="pricing-list">
                                <li>Donec faucibus</li>
                                <li>Praesent gravida</li>
                                <li>Cras augue nunc</li>
                                <li>Sed ullamcorper ligula</li>
                                <li>Etiam feugiat</li>
                            </ul>
                        </div>
                        <!-- /.pricing-body -->
                        <footer class="pricing-footer">
                            <button class="btn btn-block btn-pricing">Purchase now</button>
                        </footer>
                        <!-- /.pricing-footer -->
                    </div>
                    <!-- /.pricing-table -->
                </div>
                <!-- /.col-md-4 -->
                <div class="col-md-4 md-margin-bottom-30">
                    <div class="pricing-table pricing-featured text-center">
                        <header class="pricing-header">
                            <h4>Standard license</h4>
                            <p>$<span>50</span>/month</p>
                        </header>
                        <!-- /.pricing-header -->
                        <div class="pricing-body">
                            <ul class="pricing-list">
                                <li>Donec faucibus</li>
                                <li>Praesent gravida</li>
                                <li>Cras augue nunc</li>
                                <li>Sed ullamcorper ligula</li>
                                <li>Etiam feugiat</li>
                            </ul>
                        </div>
                        <!-- /.pricing-body -->
                        <footer class="pricing-footer">
                            <button class="btn btn-block btn-pricing">Purchase now</button>
                        </footer>
                        <!-- /.pricing-footer -->
                    </div>
                    <!-- /.pricing-table -->
                </div>
                <!-- /.col-md-4 -->
                <div class="col-md-4">
                    <div class="pricing-table text-center">
                        <header class="pricing-header">
                            <h4>Pro license</h4>
                            <p>$<span>80</span>/month</p>
                        </header>
                        <!-- /.pricing-header -->
                        <div class="pricing-body">
                            <ul class="pricing-list">
                                <li>Donec faucibus</li>
                                <li>Praesent gravida</li>
                                <li>Cras augue nunc</li>
                                <li>Sed ullamcorper ligula</li>
                                <li>Etiam feugiat</li>
                            </ul>
                        </div>
                        <!-- /.pricing-body -->
                        <footer class="pricing-footer">
                            <button class="btn btn-block btn-pricing">Purchase now</button>
                        </footer>
                        <!-- /.pricing-footer -->
                    </div>
                    <!-- /.pricing-table -->
                </div>
                <!-- /.col-md-4 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /#pricing -->


    <section id="testimonials" data-stellar-background-ratio="0.5">
        <div class="container">
            <h2 class="text-center section-title">Testimonials</h2>
            <p class="section-lead text-center">Cras nec nulla erat. Donec laoreet nec lorem ac molestie. Morbi non malesuada elit. Mauris volutpat.</p>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="testimonials-content text-center">
                        <i class="icon ion-ios-chatboxes icon-testimonial"></i>
                        <p class="testimonial">Vestibulum et tincidunt nulla. Vivamus eget turpis magna. Phasellus et ligula vitae nisl tincidunt posuere. Suspendisse tellus tortor, tincidunt in consectetur vitae, fringilla ut erat. Praesent ipsum dui, porta non elit a, maximus sollicitudin dui. Maecenas molestie nunc vulputate, pulvinar urna at, vulputate metus. </p>
                        <!-- /.testimonial -->
                        <p class="author">John Doe <span class="company-name">Some Company</span></p>
                        <!-- /.author -->
                    </div>
                    <!-- /.testimonials-content -->
                </div>
                <!-- /.col-md-8 col-md-offset-2 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /#testimonials -->


    <section id="blog">
        <div class="container">
            <h2 class="text-center section-title">Blog</h2>
            <p class="section-lead text-center">Cras nec nulla erat. Donec laoreet nec lorem ac molestie. Morbi non malesuada elit. Mauris volutpat.</p>
            <div class="row">
                <div class="col-md-6 md-margin-bottom-30">
                    <div class="blog-post">
                        <img class="blog-img" src="images/blog1.jpg" alt="">
                        <div class="blog-post-content">
                            <h4 class="post-title">Some blog post</h4>
                            <!-- /.post-title -->
                            <p class="post-content">Nulla nec risus quis orci fermentum vestibulum. Nunc tristique est commodo, pulvinar nisi et, molestie tortor. Mauris iaculis arcu eget massa interdum tempus vel non orci. Proin ac dolor eu nulla suscipit egestas.</p>
                            <!-- /.post-content -->
                            <a href="#" class="btn btn-more">More</a>
                        </div>
                        <!-- /.blog-post-content -->
                    </div>
                    <!-- /.blog-post -->
                </div>
                <!-- /.col-md-6 -->
                <div class="col-md-6">
                    <div class="blog-post">
                        <img class="blog-img" src="images/blog2.jpg" alt="">
                        <div class="blog-post-content">
                            <h4 class="post-title">Some blog post</h4>
                            <!-- /.post-title -->
                            <p class="post-content">Nulla nec risus quis orci fermentum vestibulum. Nunc tristique est commodo, pulvinar nisi et, molestie tortor. Mauris iaculis arcu eget massa interdum tempus vel non orci. Proin ac dolor eu nulla suscipit egestas.</p>
                            <!-- /.post-content -->
                            <a href="#" class="btn btn-more">More</a>
                        </div>
                        <!-- /.blog-post-content -->
                    </div>
                    <!-- /.blog-post -->
                </div>
                <!-- /.col-md-6 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /#blog -->

    <section id="contact" data-stellar-background-ratio="0.5">
        <div class="container">
            <h2 class="text-center section-title">Contact</h2>
            <p class="section-lead text-center">Cras nec nulla erat. Donec laoreet nec lorem ac molestie. Morbi non malesuada elit. Mauris volutpat.</p>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="name" class="col-md-2 control-label">Name</label>
                            <div class="col-md-10"><input type="text" name="name" id="name" class="form-control"></div>
                            <!-- /.col-md-10 -->
                        </div>
                        <!-- /.form-group -->
                        <div class="form-group">
                            <label for="email" class="col-md-2 control-label">Email</label>
                            <div class="col-md-10">
                                <input type="email" name="email" id="email" class="form-control">
                            </div>
                            <!-- /.col-md-10 -->
                        </div>
                        <!-- /.form-group -->
                        <div class="form-group">
                            <label for="message" class="col-md-2 control-label">Message</label>
                            <div class="col-md-10"><textarea name="message" id="message" cols="30" rows="10" class="form-control"></textarea></div>
                            <!-- /.col-md-10 -->
                        </div>
                        <!-- /.form-group -->
                        <button type="submit" class="btn btn-submit">Send message</button>
                    </form>
                    <!-- /.form-horizontal -->
                </div>
                <!-- /.col-md-8 col-md-offset-2 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /#contact -->


    <footer id="footer">
        <div class="container text-center">
            <p class="page-info">&copy; Copyright | Icons: <a href="http://ionicons.com/" target="_blank">Ionicons</a> | Images: <a href="https://pixabay.com" target="_blank">Pixabay</a> | Parralax: <a href="http://markdalgleish.com/projects/stellar.js/" target="_blank">Stellar.js</a> | Framework: <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a></p>
            <!-- /.page-info -->
        </div>
        <!-- /.container -->
    </footer>


    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.stellar.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery.smooth-scroll.min.js"></script>
    <script>
    $(document).ready(function() {
        $('body').scrollspy({ target: '#main-navbar' });
        $.stellar({
            horizontalScrolling: false,
            verticalOffset: 300
        });
        $('a').smoothScroll({
            speed: 1000
        });
        var $mainNavbar = $('#main-navbar');
        var $intro = $('#intro');

        $(document).on('scroll',function() {
            if ($(document).scrollTop() > $intro.innerHeight() - 50)
                $mainNavbar.removeClass('navbar-intro');
            else {
                if (!$mainNavbar.hasClass('navbar-intro'))
                    $mainNavbar.addClass('navbar-intro');
            }

        });
    });
    </script>
</body>
</html>

CSS

@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700';
@import 'https://fonts.googleapis.com/css?family=Lato:300,400';
/* =================================== */
/*    Globals    */
/* =================================== */

body {
    font-family: "Lato", sans-serif;
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto Condensed", sans-serif;
}
h1 {
    font-size: 50px;
    line-height: 60px;
}
h2 {
    font-size: 40px;
    line-height: 50px;
}
h3 {
    font-size: 30px;
    line-height: 35px;
}
.section-title:after,
.section-title-left:after {
    content: "";
    display: block;
    width: 50px;
    border-bottom: 2px #efefef solid;
}
.section-title:after {
    margin: 0 auto;
}
.section-title-left:after {
    margin-left: 10px;
}

.section-lead {
    margin-bottom: 30px;
}
section {
    padding: 50px 0;
}
#intro,
#about,
#testimonials,
#contact {
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* =================================== */
/*    Bootstrap overrides    */
/* =================================== */
.navbar-default {
    transition: all .3s linear;
}

.btn {
    border-radius: 0;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
.control-label {
    color: #fff;
    text-shadow:  2px 2px 2px #333;
}
.form-control {
    background-color: rgba(0,0,0,.6);
    border-radius: 0;
    color: #fff;
}
.form-control:focus {
    border-color: rgba(256,256,256,.8);
}
.control-label {
    font-weight: 300;
}
/* =================================== */
/*    Intro section    */
/* =================================== */
.navbar-intro {
    background-color: transparent;
    border: none;
    transition: all .3s linear;
}
.navbar-intro .navbar-nav > li > a {
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    line-height: 20px;
}
.navbar-intro .navbar-nav > li > a:hover,
.navbar-intro .navbar-nav > li > a:active,
.navbar-intro .navbar-nav > li > a:focus {
    color: #afafaf;
}
.navbar-intro .navbar-nav > .active > a {
    background-color: transparent;
    border-bottom: 1px #afafaf solid;
    color: #afafaf;
}
.navbar-intro .navbar-brand {
    color: #fff;
}
/* =================================== */
/*    Intro section    */
/* =================================== */
#intro {
    background-image: url("../images/bg-main.jpg");
    background-position: center center;
    height: 100vh;
    padding: 200px 0;
    padding: 30vh 0;
}
#intro h1,
#intro p {
    color: #fff;
}
.btn-intro {
    border: 2px #fff solid;
    color: #fff;
    background: rgba(0,0,0,.5);
}
.btn-intro:hover,
.btn-intro:focus,
.btn-intro:active {
    background: #fff;
    color: #333;
}
/* =================================== */
/*    Services section    */
/* =================================== */
#services .row {
    padding: 20px 0;
}
.section-lead {
    color: #999;
}
.icon-services {
    float: left;
    font-size: 30px;
    width: 50px;
    color: #999;
    text-align: center;
}
.service-desc {
   overflow: hidden;
    padding-left: 10px;
    border-left: 1px #efefef solid;
}
/* =================================== */
/*    About section    */
/* =================================== */
#about {
    background-image: url("../images/bg-about.jpg");
    background-position: center bottom;
    color: #fff;
}
.about-content {
    background: rgba(0,0,0,.6);
    padding: 30px;
}

/* =================================== */
/*    Pricing section    */
/* =================================== */
.pricing-table {
    -webkit-box-shadow: 8px 8px 0 #999;
    box-shadow: 8px 8px 0 #999;
    position: relative;
    top: 20px;
    margin: 20px auto;
    max-width: 370px;
}

.pricing-table.pricing-featured .pricing-header {
    background: #333;
    color: #fff;
}
.pricing-table.pricing-featured .pricing-header span {
    color: #fff;
}
.pricing-header {
    background: #efefef;
    padding: 20px 0;
    color: #999;
}
.pricing-header span {
    font-size: 3em;
    color: #000;
}
.pricing-body {
    padding: 20px 0;
    border-left: 1px #efefef solid;
    border-right: 1px #efefef solid;
}
.pricing-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pricing-list li {
    margin: 7px 0;
}
.pricing-list li:before {
    content: "\f375";
    font-family: Ionicons;
    color: #999;
    margin: 0 10px;
}
.btn-pricing {
    background: #efefef;
}
.btn-pricing:hover,
.btn-pricing:active,
.btn-pricing:focus {
    background: #333;
    color: #fff;
}
/* =================================== */
/*    Testimonials section    */
/* =================================== */
#testimonials {
    background-image: url("../images/bg-testimonials.jpg");
    background-position: center bottom;
    color: #fff;
}
#testimonials .section-title,
#testimonials .section-lead {
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
.testimonials-content {
    padding: 50px;
    background: rgba(0,0,0,.3);
}
.icon-testimonial {
    font-size: 50px;
}
.testimonial {
    font-size: 17px;
    line-height: 25px;
}
.author {
    font-size: 1.5em;
}
.author .company-name {
    font-size: 0.7em;
    text-transform: uppercase;
    color: #999;
}
/* =================================== */
/*    Blog section    */
/* =================================== */
.blog-post {
    background: #efefef;
    overflow: hidden;
}
.blog-img {
    max-width: 200px;
    float: left;
}
.blog-post-content {
    overflow: hidden;
    padding: 20px;
}
.btn-more {
    color: #333;
    padding: 5px 20px;
    border: 1px #333 solid;
}
.btn-more:hover,
.btn-more:active,
.btn-more:focus {
    background: #333;
    color: #fff;
}
/* =================================== */
/*    Contact section    */
/* =================================== */
#contact {
    background-image: url("../images/bg-contact.jpg");
    background-position: center 30%;
}
#contact .section-title,
#contact .section-lead {
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
.btn-submit {
    display: block;
    padding: 10px 50px;
    margin: 0 auto;
    background: rgba(0,0,0,.8);
    color: #fff;
}
.btn-submit:hover,
.btn-submit:active,
.btn-submit:focus {
    background: #fff;
    color: #333;
}
/* =================================== */
/*    Footer    */
/* =================================== */
#footer {
    padding: 10px;
    background: #161616;
    color: #fff;
}
#footer a {
    color: #9a9a9a;
}
/* =================================== */
/*    Media queries    */
/* =================================== */
@media (min-width: 992px) {
    .pricing-table.pricing-featured {
        top: 0;
    }
    .pricing-table.pricing-featured .pricing-header {
        padding: 40px 0;
    }
}
@media (max-width: 991px) {
    .md-margin-bottom-30 {
        margin-bottom: 30px;
    }
    .md-margin-bottom-40 {
        margin-bottom: 40px;
    }
}
@media (max-width: 500px) {
    body {
        font-size: 13px;
    }
    .testimonial {
        font-size: 14px;
        line-height: 20px;
    }
    .testimonials-content {
        padding: 25px;
    }
    .blog-img {
        margin-left: -120px;
    }

}
@media (max-width: 400px) {
    .blog-post-content {
        padding: 10px;
    }
}
\$\endgroup\$

2 Answers 2

Reset to default
4
\$\begingroup\$

You should add 

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

to your <head> section after the charset. This will insure proper browser support and page rendering.

\$\endgroup\$
1
  • \$\begingroup\$ Thanks, I focused on body markup and completely forgot about head section. \$\endgroup\$
    – kr099
    Commented Sep 12, 2016 at 8:17
0
\$\begingroup\$

Feedback

The code looks pretty good. It appears to be a good application of the Bootstrap Grid layout. I also like how transitions are incorporated. The responsive design (e.g. collapsing the menu into a hamburger menu for narrow widths) is also nice.

Suggestions

jQuery simplification

The last block of the JavaScript code - i.e.:

$(document).on('scroll',function() {
        if ($(document).scrollTop() > $intro.innerHeight() - 50)
            $mainNavbar.removeClass('navbar-intro');
        else {
            if (!$mainNavbar.hasClass('navbar-intro'))
                $mainNavbar.addClass('navbar-intro');
        }
    });

This can be simplified using the method .toggleClass() (and reversing the logic):

$(document).on('scroll',function() {
    $mainNavbar.toggleClass('navbar-intro', $(document).scrollTop() <= $intro.innerHeight() - 50);
});

Excessive CSS rules for headers

There is a CSS style for all headers (i.e. h1, h2, h3, h4, h5, h6) but I don't see any <h3>, <h5> or <h6> tags. Unless you plan to add those tags, the selector could be simplified.

Optionally, a class name could be added to those header tags (e.g. header) but then the HTML would have to be altered just to simplify a selector. Another option is using SASS or LESS (refer to this answer).

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.