0
\$\begingroup\$

I've done a small one page project with slider (owlcarousel) & CSS3 animations .

Could you please look at HTML, CSS & JS and check for possible improvements? Thanks in advance.

Here's a page

$(document).ready(function() {
     
        $('.menu-link,.btn-slider').smoothScroll({
            speed: 1000,
            offset: -80
        });
        
      $("#carousel").owlCarousel({
     
          navigation : false, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          singleItem: true,
          autoPlay: true,
          beforeMove: function() {
              //$('.slide-content').eq(this.owl.currentItem).css('opacity','0');
              $('.slide').eq(this.owl.currentItem).find('.slide-title').removeClass('active');
              $('.slide').eq(this.owl.currentItem).find('.slide-text').removeClass('active');
          },
          afterMove: function() {
              //$('.slide-content').eq(this.owl.currentItem).css('opacity','1');
              var currentSlide = this.owl.currentItem;
              $('.slide').eq(currentSlide).find('.slide-title').addClass('active');
              setTimeout(function() {
                  $('.slide').eq(currentSlide).find('.slide-text').addClass('active');
              },1000);
          }
     
      });
        
        $('.slide').eq(0).find('.slide-title').addClass('active');
          setTimeout(function() {
              $('.slide').eq(0).find('.slide-text').addClass('active');
          },1000);
        
        var $menu = $('#main-menu');
        $('[data-target="main-menu"]').on('click',function() {
            if ($menu.is(':visible')) {
                $menu.hide();
            } else {
                $menu.show();
            }
        });
        $(window).on('resize', function() {
           if ($(this).width() < 768) {
               $menu.hide();
           } else {
               $menu.show();
           }
        });
     
    });
/*=================================
\* 0. Reset
\* 1. Globals
\* 2. Header
\* 3. Intro (carousel)
\* 4. Countries list
\* 5. Call to action
\* 6. Footer
/*===============================*/

@import 'https://fonts.googleapis.com/css?family=David+Libre|Open+Sans:300,400,600';

/*=================================
\* 0. Reset
/*===============================*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*=================================
\* 1. Globals
/*===============================*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background-color: #efefef;
    font-family: 'David Libre', serif;
    font-size: 14px;
    line-height: 20px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    margin: 10px 0;
}
h1 {
    font-size: 40px;
    line-height: 50px;
}
h2 {
    font-size: 35px;
    line-height: 45px;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
}
.btn {
    padding: 10px 30px;
    border: 1px #39f solid;
    color: #39f;
    display: inline-block;
    text-decoration: none;
    margin-top: 20px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
/*=================================
\* 2. Header
/*===============================*/
header {
    position: fixed;
    width: 100%;
    z-index: 999;
    background-color: rgba(256,256,256,.8);
}
.navbar-toggle {
    display: none;
}
.brand {
    font-family: "David Libre";
    font-size: 30px;
    line-height: 40px;
}
.brand-link {
    text-decoration: none;
    color: #39f;
    text-shadow: 2px 2px 2px #06c;
    padding: 0 20px;
}
.nav-brand {
    float: left;
}
.nav-menu {
    float: right;
}
.menu-item {
    display: inline-block;
    margin-top: 20px;
}
.menu-link {
    display: inline-block;
    padding: 5px 20px;
    text-decoration: none;
    color: #39f;
    font-size: 20px;
}
.menu-link:hover {
    color: #a9a9a9;
}
/*=================================
\* 3. Intro (carousel)
/*===============================*/
#carousel {
    position: relative;
}
.owl-controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 99;
}
.owl-page span {
    background: #fff !important;
    border: 2px #39f solid;
}
.slide {
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-attachment: cover;
    position: relative;
}
.london { background-image: url("../img/slide-gb.jpg"); }
.france { background-image: url("../img/slide-fr.jpg"); }
.italy { background-image: url("../img/slide-it.jpg"); }
.spain { background-image: url("../img/slide-sp.jpg"); }

.slide-content {
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 50%;
}
.slide-title,
.slide-text {
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
    opacity: 0;
}
.slide-title {
    display: inline-block;
    background-color: #06c;
    padding: 10px 70px;
    z-index: 10;
    position: relative;
    top: -40px;
    color: #fff;
    -webkit-box-shadow: 2px 2px 1px rgba(0,0,0,.3);
    box-shadow: 2px 2px 1px rgba(0,0,0,.3);
}
.slide-text {
    background-color: rgba(256,256,256,.85);
    padding: 20px 30px;
    position: relative;
    left: 10px;
    top: -40px;
    z-index: 9;
    font-size: 17px;
    line-height: 25px;
    font-family: "Open Sans";
    font-weight: 300;
    overflow: hidden;
}

.slide-title.active {
    top: 0;
    opacity: 1;
}
.slide-text.active {
    top: -20px;
    opacity: 1;
}
.btn-slider {
   float: right;
}
/*=================================
\* 4. Countries list
/*===============================*/

.countries-list {
    width: 100%;
    position: relative;
}
.countries-list:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    border-left: 1px #9a9a9a dashed;
    left: 50%;
    top: 160px;
    z-index: -1;
}
.country-desc-wrapper,
.country-img-wrapper {
    width: 50%;
    float: left;
    padding: 100px;
}
.country-desc-wrapper {
    position: relative;
}
.country-desc-wrapper:after {
    content: "\f041";
    font-family: FontAwesome;
    font-size: 20px;
    display: block;
    position: absolute;
    right: -22px;
    top: 150px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    border: 1px #39f solid;
    background-color: #efefef;
    border-radius: 50%;
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.2);
    box-shadow: 2px 2px 2px rgba(0,0,0,.2);
    color: #39f;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.country-img {
    display: block;
    width: 100%;
    -webkit-box-shadow: 0 5px 5px -2px rgba(0,0,0,.2);
    box-shadow: 0 5px 5px -2px rgba(0,0,0,.5);
}

/*=================================
\* 5. Call to action
/*===============================*/
#call-to-action {
    background-color: #39f;
}
.call-to-action-wrapper {
    padding: 50px 100px;
    text-align: center;
    color: #fff;
}
.call-to-action-btn {
    color: #fff;
    border-color: #fff;
}
.call-to-action-btn:hover,
.call-to-action-btn:active,
.call-to-action-btn:focus {
    background-color: #fff;
    color: #39f;
}

/*=================================
\* 6. Footer
/*===============================*/
footer {
    background-color: #494949;
    color: #fff;
    padding: 20px 0;
}
.credits {
    text-align: center;
}
.credit-item {
    display: inline-block;
    padding: 0 7px;
}
.credit-item + .credit-item {
    border-left: 1px #fff solid;
}
.credit-link {
    color: #cce6ff;
    text-decoration: none;
}
.credit-link:hover {
    color: #99ceff;
}
/*=================================
\* 7. Media queries
/*===============================*/
@media (max-width: 979px) {
    .slide-content {
        width: 90%;
    }
    .country-desc-wrapper,
    .country-img-wrapper {
        padding: 30px 50px;
    }
    .countries-list::before {
        top: 110px;
    }
    .country-desc-wrapper::after {
        top: 100px;
    }
}
@media (max-width: 767px) {
    .slide {
        height: auto;
        padding-top: 60px;
        padding-left: 10px;
    }
    .slide-content {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }
    .country-desc-wrapper,
    .country-img-wrapper {
        padding: 30px 30px 30px 70px;
        width: 100%;
    }
    .countries-list::before {
        left: 30px;
        top: 60px;
    }
    .country-desc-wrapper::after {
        top: 50px;
        left: 10px;
    }
    .navbar-toggle {
        display: block;
        background-color: transparent;
        border: 1px #39f solid;
        padding: 5px 10px;
        font-family: 'David Libre', serif;
        color: #39f;
        margin-top: 20px;
        margin-right: 20px;
        float: right;
        cursor: pointer;
    }
    .nav-collapse {
        display: none;
    }
    .nav-menu {
        width: 100%;
    }
    .menu-item {
        display: block;
        text-align: center;
    }
}
@media (max-width: 500px) {
    h2 {
        font-size: 25px;
        line-height: 35px;
    }
    .slide-text {
        font-size: 13px;
        line-height: 15px;
    }
    .call-to-action-wrapper {
        padding: 40px 20px;
    }
    .credit-item {
        display: block;
    }
    .credit-item + .credit-item {
        border-left: none;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Countries</title>
    <link rel="stylesheet" href="css/owl/owl.carousel.css">
    <link rel="stylesheet" href="css/owl/owl.theme.css">
    <link rel="stylesheet" href="css/owl/owl.transitions.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   
   
   
    <header>
        <nav>
            <div class="container">
                <div class="nav-brand">
                    <h1 class="brand"><a href="/" class="brand-link">Countries</a></h1>
                </div>
                <!-- /.nav-logo -->
                <button type="button" class="navbar-toggle" data-target="main-menu">
                    Menu
                </button>
                <!-- /.navbar-toggle -->
                <div class="nav-menu nav-collapse" id="main-menu">
                    <ul class="menu">
                        <li class="menu-item"><a href="#france" class="menu-link">France</a></li>
                        <!-- /.menu-item -->
                        <li class="menu-item"><a href="#gb" class="menu-link">London</a></li>
                        <!-- /.menu-item -->
                        <li class="menu-item"><a href="#italy" class="menu-link">Italy</a></li>
                        <!-- /.menu-item -->
                        <li class="menu-item"><a href="#spain" class="menu-link">Spain</a></li>
                        <!-- /.menu-item -->
                    </ul>
                    <!-- /.menu -->
                </div>
                <!-- /.nav-menu -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
    
    
    
    <section id="intro">
        <div id="carousel" class="owl-carousel">
            <div class="slide france">
                <div class="slide-content">
                    <h2 class="slide-title">First slide</h2>
                    <!-- /.slide-title -->
                    <p class="slide-text">Duis ullamcorper leo sodales est pulvinar, ac imperdiet massa dapibus. Duis et ipsum a nulla tristique finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus lectus eu euismod condimentum. Fusce sit amet nunc tellus.
                        <a href="#france" class="btn btn-slider">More</a>
                    </p>
                    <!-- /.slide-text -->
                    
                </div>
                <!-- /.slide-content -->
            </div>
            <!-- /.slide -->
            <div class="slide london">
                <div class="slide-content">
                    <h2 class="slide-title">First slide</h2>
                    <!-- /.slide-title -->
                    <p class="slide-text">Duis ullamcorper leo sodales est pulvinar, ac imperdiet massa dapibus. Duis et ipsum a nulla tristique finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus lectus eu euismod condimentum. Fusce sit amet nunc tellus.
                        <a href="#gb" class="btn btn-slider">More</a>
                    </p>
                    <!-- /.slide-text -->
                    
                </div>
                <!-- /.slide-content -->
            </div>
            <!-- /.slide -->
            <div class="slide italy">
                <div class="slide-content">
                    <h2 class="slide-title">First slide</h2>
                    <!-- /.slide-title -->
                    <p class="slide-text">Duis ullamcorper leo sodales est pulvinar, ac imperdiet massa dapibus. Duis et ipsum a nulla tristique finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus lectus eu euismod condimentum. Fusce sit amet nunc tellus.
                        <a href="#italy" class="btn btn-slider">More</a>
                    </p>
                    <!-- /.slide-text -->
                </div>
                <!-- /.slide-content -->
            </div>
            <!-- /.slide -->
            <div class="slide spain">
                <div class="slide-content">
                    <h2 class="slide-title">First slide</h2>
                    <!-- /.slide-title -->
                    <p class="slide-text">Duis ullamcorper leo sodales est pulvinar, ac imperdiet massa dapibus. Duis et ipsum a nulla tristique finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus lectus eu euismod condimentum. Fusce sit amet nunc tellus.
                        <a href="#spain" class="btn btn-slider">More</a>
                    </p>
                    <!-- /.slide-text -->
                </div>
                <!-- /.slide-content -->
            </div>
            <!-- /.slide -->
        </div>
        <!-- /#carousel.owl-carousel -->
    </section>
    <!-- /#intro -->
    
    
    <section id="countries">
        <div class="countries-list-wrapper container">
            <ul class="countries-list">
                <li class="country-desc-wrapper">
                    <div id="france" class="country-desc">
                        <h2 class="country-title">France</h2>
                        <!-- /.country-title -->
                        <p class="country-desc-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend eros nec quam eleifend consequat. Nunc ultrices auctor sapien vel dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dapibus augue eu lectus dictum pharetra. Maecenas quis justo massa. Aenean at porta mauris. Duis ullamcorper leo sodales est pulvinar, ac imperdiet massa dapibus. Duis et ipsum a nulla tristique finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus lectus eu euismod condimentum. Fusce sit amet nunc tellus.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend eros nec quam eleifend consequat. Nunc ultrices auctor sapien vel dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dapibus augue eu lectus dictum pharetra. Maecenas quis justo massa. Aenean at porta mauris. Duis ullamcorper leo sodales est pulvinar, ac imperdiet massa dapibus. Duis et ipsum a nulla tristique finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus lectus eu euismod condimentum. Fusce sit amet nunc tellus.  </p>
                        <!-- /.country-desc-text -->
                    </div>
                    <!-- /.country-desc -->
                </li>
                <!-- /.country-desc-wrapper -->
                <li class="country-img-wrapper">
                    <div class="country-img">
                        <img class="country-img" src="img/france.jpg" alt="Eiffel Tower, France">
                    </div>
                    <!-- /.country-img -->
                </li>
                <li class="clearfix"></li>
                <!-- /.country-img-wrapper -->
                <li class="country-desc-wrapper">
                    <div id="gb" class="country-desc">
                        <h2 class="country-title">Great Britain</h2>
                        <!-- /.country-title -->
                        <p class="country-desc-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend eros nec quam eleifend consequat. Nunc ultrices auctor sapien vel dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dapibus augue eu lectus dictum pharetra. Maecenas quis justo massa. Aenean at porta mauris. Duis ullamcorper leo sodales est pulvinar, ac imperdiet massa dapibus. Duis et ipsum a nulla tristique finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus lectus eu euismod condimentum. Fusce sit amet nunc tellus. </p>
                        <!-- /.country-desc-text -->
                    </div>
                    <!-- /.country-desc -->
                </li>
                <!-- /.country-desc-wrapper -->
                <li class="country-img-wrapper">
                    <div class="country-img">
                        <img class="country-img" src="img/gb.jpg" alt="Big Ben, Great Britain">
                    </div>
                    <!-- /.country-img -->
                </li>
                <!-- /.country-img-wrapper -->
                <li class="clearfix"></li>
                <li class="country-desc-wrapper">
                    <div id="italy" class="country-desc">
                        <h2 class="country-title">Italy</h2>
                        <!-- /.country-title -->
                        <p class="country-desc-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend eros nec quam eleifend consequat. Nunc ultrices auctor sapien vel dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dapibus augue eu lectus dictum pharetra. Maecenas quis justo massa. Aenean at porta mauris. Duis ullamcorper leo sodales est pulvinar, ac imperdiet massa dapibus. Duis et ipsum a nulla tristique finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus lectus eu euismod condimentum. Fusce sit amet nunc tellus. </p>
                        <!-- /.country-desc-text -->
                    </div>
                    <!-- /.country-desc -->
                </li>
                <!-- /.country-desc-wrapper -->
                <li class="country-img-wrapper">
                    <div class="country-img">
                        <img class="country-img" src="img/italy.jpg" alt="Colloseum, Italy">
                    </div>
                    <!-- /.country-img -->
                </li>
                <!-- /.country-img-wrapper -->
                <li class="clearfix"></li>
                <li class="country-desc-wrapper">
                    <div id="spain" class="country-desc">
                        <h2 class="country-title">Spain</h2>
                        <!-- /.country-title -->
                        <p class="country-desc-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend eros nec quam eleifend consequat. Nunc ultrices auctor sapien vel dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dapibus augue eu lectus dictum pharetra. Maecenas quis justo massa. Aenean at porta mauris. Duis ullamcorper leo sodales est pulvinar, ac imperdiet massa dapibus. Duis et ipsum a nulla tristique finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus lectus eu euismod condimentum. Fusce sit amet nunc tellus. </p>
                        <!-- /.country-desc-text -->
                    </div>
                    <!-- /.country-desc -->
                </li>
                <!-- /.country-desc-wrapper -->
                <li class="country-img-wrapper">
                    <div class="country-img">
                        <img class="country-img" src="img/spain.jpg" alt="Spain">
                    </div>
                    <!-- /.country-img -->
                </li>
                <!-- /.country-img-wrapper -->
                <li class="clearfix"></li>
            </ul>
            <!-- /.countries-list -->
        </div>
        <!-- /.countries-list-wrapper -->
    </section>
    <!-- /#countries -->
    
    
    
    <section id="call-to-action">
        <div class="call-to-action-wrapper container">
            <h2 class="call-to-action-title">Find out more!</h2>
            <!-- /.call-to-action-title -->
            <p class="call-to-action-text">Nunc ultrices auctor sapien vel dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dapibus augue eu lectus dictum pharetra.</p>
            <!-- /.call-to-action-text -->
            <a href="" class="btn call-to-action-btn">Explore</a>
        </div>
        <!-- /.call-to-action-wrapper -->
    </section>
    <!-- /#call-to-action -->
    
    
    
    <footer>
        <ul class="credits">
            <li class="credit-item">Photos: <a href="https://pixabay.com/" class="credit-link" target="_blank">pixabay.com</a></li>
            <!-- /.credit-item -->
            <li class="credit-item">Carousel: <a href="http://owlgraphic.com/owlcarousel/" class="credit-link" target="_blank">owl carousel</a></li>
            <!-- /.credit-item -->
            <li class="credit-item">Icons: <a href="http://fontawesome.io/" class="credit-link" target="_blank">Font Awesome</a></li>
            <!-- /.credit-item -->
        </ul>
        <!-- /.credits -->
    </footer>
    
    <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="js/owl.carousel.min.js" type="text/javascript"></script>
    <script src="js/jquery.smooth-scroll.min.js" type="text/javascript"></script>
    
</body>
</html>

|improve this question
\$\endgroup\$
1
\$\begingroup\$

Looks pretty good overall. A few things:

  • Fewer file requests = faster page load. You can keep all the js and css separate while developing, but combine and minify before you publish. There are lots of tools that can automatically do this for you, including your text editor. Ideally you'd end up with all your css in one file (keep the order the same!) and all your js in one file (ditto), so you only have one <link rel="stylesheet"> and one <script src> on the page. (Or in your case, two, since you're loading in jquery from somewhere else.)

  • Speaking of imports, css @import is considered slow compared to just using a link tag to an external stylesheet. You can get that from Google Fonts as well. Include it before you include your own stylesheet link.

  • You've got JQuery loading in before your html tag even opens - don't. For most scripts, especially large ones, put the tags after your page content - generally right above </body>. Vendor/library scripts first, then your own.

  • You've got media queries, but no meta tag to tell the page to behave responsively. Put this in the <head>: <meta name="viewport" content="width=device-width, initial-scale=1">

|improve this answer
\$\endgroup\$
  • \$\begingroup\$ Thanks for the answer. jQuery loading was done by code snippet, mine is before </body> tag. \$\endgroup\$ – kr099 Oct 21 '16 at 7:39
1
\$\begingroup\$

It is always better to use any pre-processor like sass or less ( preferably sass) to write your code since it makes your code more manageable and avoids repeating. It is always better to seperate css completely from the html. For example rather than using bootstrap classes like nav-menu nav-collapse assigned to the same div you could do 

.nav-toogle{
   @extend .nav-menu;
   @extend .nav-collapse;
}

then assign nav-toogle class to that div. To make the code even more managble it is better to follow naming conventions using either smacss , BEM or OOCSS (preferably smacss). If you are not supporting internet explorer it is better to use flexbox it will make your code even cleaner and easier.

|improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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