JSFiddle - React, Tailwind, and code Playground
by akash_payne
HTML
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Swiper Silder
================================================== -->
<!-- Slider main container -->
<div class="swiper-container main-slider" id="myCarousel">
<div class="swiper-wrapper">
<div class="swiper-slide slider-bg-position" style="background:url('http://grafreez.com/wp-content/temp_demos/burnout/img/1.jpg')" data-hash="slide1">
<h2>It is health that is real wealth and not pieces of gold and silver</h2>
</div>
<div class="swiper-slide slider-bg-position" style="background:url('http://grafreez.com/wp-content/temp_demos/burnout/img/3.jpg')" data-hash="slide2">
<h2>Happiness is nothing more than good health and a bad memory</h2>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-button-prev"><i class="fa fa-chevron-left"></i></div>
<div class="swiper-button-next"><i class="fa fa-chevron-right"></i></div>
</div>
<!-- Benefits
================================================== -->
<section class="service-sec" id="benefits">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="heading">
<h2><small>Benefits of Exercise</small>To enjoy the glow of good health, you must exercise</h2>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6 text-sm-center service-block"> <i class="fa fa-plus" aria-hidden="true"></i>
<h3>Better Sleep</h3>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe.</p>
</div>
<div class="col-md-6 text-sm-center service-block"> <i class="fa...CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
color: #5a5a5a;
font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5 {
font-family: 'Montserrat', sans-serif;
}
.parallax-section {
background-attachment: fixed!important;
}
.btn-capsul {
border-radius: 30px;
}
.btn-aqua {
background: #0297FF;
color: #fff;
}
.btn-aqua:hover {
background: #10629b;
color: #fff;
}
.btn-dark-blue {
background: #0C242E;
color: #fff;
}
.btn-dark-blue:hover {
background: #063d28;
color: #fff;
}
.btn-transparent-white {
border: 2px solid #fff;
color: #fff;
}
.btn-transparent-white:hover, .btn-transparent-white:focus {
background: #fff;
color: #0297FF
}
.relative-box {
position: relative
}
section {
float: left;
width: 100%;
padding: 80px 0;
}
/* TOP HEADER
-------------------------------------------------- */
.navbar.top-bar {
border-radius: 0;
padding: 16px 0;
z-index: 16;
}
.navbar-toggler {
border: 1px solid #fff;
color: #fff;
position: absolute;
right: 21px;
}
.sps {
padding: 1em .5em;
position: fixed;
top: 0;
left: 0;
transition: all 0.25s ease;
width: 100%;
}
.sps--abv {
background-color: transparent;
color: #000;
}
.sps--blw {
background-color: #fff;
color: #fff;
}
.top-bar a.navbar-brand {
color: #fff;
font-size: 26px;
font-weight: 800;
padding: 5px 0 0 10px;
text-transform: uppercase;
}
.sps--blw.top-bar a.navbar-brand {
color: #000;
}
.top-bar a.navbar-brand span {
color: #0297ff;
}
.top-bar .nav-link {
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 12px 18px!important;
}
.sps--blw.top-bar .nav-link {
color: #000
}
.top-bar .navbar-nav .nav-item {
margin: 0
}
.top-bar .nav-link:hover, .top-bar...JavaScript
/*------- Smooth Scroll -------*/
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
/**
* Swiper 3.4.0
* Most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2016, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: October 16, 2016
*/
!function(){"use strict";function e(e){e.fn.swiper=function(a){var s;return e(this).each(function(){var e=new t(this,a);s||(s=e)}),s}}var a,t=function(e,i){function n(e){return Math.floor(e)}function o(){var e=S.params.autoplay,a=S.slides.eq(S.activeIndex);a.attr("data-swiper-autoplay")&&(e=a.attr("data-swiper-autoplay")||S.params.autoplay),S.autoplayTimeoutId=setTimeout(function(){S.params.loop?(S.fixLoop(),S._slideNext(),S.emit("onAutoplay",S)):S.isEnd?i.autoplayStopOnLast?S.stopAutoplay():(S._slideTo(0),S.emit("onAutoplay",S)):(S._slideNext(),S.emit("onAutoplay",S))},e)}function l(e,t){var s=a(e.target);if(!s.is(t))if("string"==typeof t)s=s.parents(t);else if(t.nodeType){var i;return s.parents().each(function(e,a){a===t&&(i=t)}),i?t:void 0}if(0!==s.length)return s[0]}function p(e,a){a=a||{};var t=window.MutationObserver||window.WebkitMutationObserver,s=new t(function(e){e.forEach(function(e){S.onResize(!0),S.emit("onObserverUpdate",S,e)})});s.observe(e,{attributes:"undefined"==typeof a.attributes||a.attributes,childList:"undefined"==typeof a.childList||a.childList,characterData:"undefined"==typeof a.characterData||a.characterData}),S.observers.push(s)}function d(e){e.originalEvent&&(e=e.originalEvent);var...