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>