<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Surfers Co</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i" rel="stylesheet">
<!-- Custom CSS -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> -->
<link href="https://rashanoureldin.github.io/surfers/css/font-awesome.min.css" rel="stylesheet">
<link href="https://rashanoureldin.github.io/surfers/css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="image-bg-fluid-height">
<!-- Navigation -->
<nav class="main-nav navbar navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
<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="logo" href="#">Surfers Co.</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li>
<a href="#">Boards</a>
</li>
<li>
<a href="#">Accessories</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Technology</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Dealers</a>
</li>
</ul>
<ul class="social navbar-right">
<li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Slogan -->
<section>
<div class="container">
<div class="row">
<div class="slogan col-xs-12 col-xs-offset-0 col-md-8 col-md-offset-2">
<h1>Ride every wave as if it's your last</h1>
<p>We love the motion of the ocean</p>
</div>
</div>
</div>
</section>
<!-- Slider -->
<section>
<div class="container">
<div class="row">
<div class="slider-wrap">
<!-- <span class="rotate">BOARDS</span> -->
<a class="slider-counter">05/25</a>
<div class="bxslider">
<div class="slider-content">
<div class="img-gallery-wrap">
<div class="big-img">
<img src="images/boards.png" alt="Boards">
</div>
<div class="thumbwrap">
<ul>
<li class="thumb_x added-select"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
</ul>
</div>
</div>
<div class="prod-desc-wrap">
<div class="prod-heading">
<h2>JR Surfboards The Donny Stoker Yellow/Green Rail Fade</h2>
<div class="rating">
<div class="lead">
<div id="stars" class="starrr"></div>
<div class="rate-counter"><a href="">(52)</a></div>
</div>
<div class="rate-counter"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="detail-tabs">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target=".menu_1" href="#" >Description</a></li>
<li><a data-toggle="tab" data-target=".menu_2" href="#" >Features</a></li>
<li><a data-toggle="tab" data-target=".menu_3" href="#" >Dimensions</a></li>
</ul>
<div class="tab-content">
<div class="menu_1 tab-pane fade in active">
<p>Easy to ride, care free surfing craft that's fun for everyone, paddles well, super fast down the line and great for any level of surfing depending on who rides it. The Donny Stoker, a rework on design from stokesys first ever pro model. A super easy to surf and fun board. The Donny Stoker is a board for total freesurfing expression.</p>
<div class="order">
<ul>
<li><a class="price" href="">$499.99</a></li>
<li><a class="buynow" href="">Buy now</a></li>
</ul>
</div>
<div class="viewall"><a href="" class="view-all">View all boards</a></div>
</div>
<div class="menu_2 tab-pane fade">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="menu_3 tab-pane fade">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
</div> <!-- Slider-Content-End -->
<div class="slider-content">
<div class="img-gallery-wrap">
<div class="big-img">
<img src="images/boards.png" alt="Boards">
</div>
<div class="thumbwrap">
<ul>
<li class="thumb_x added-select"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
</ul>
</div>
</div>
<div class="prod-desc-wrap">
<div class="prod-heading">
<h2>JR Surfboards The Donny Stoker Yellow/Green Rail Fade</h2>
<div class="rating">
<div class="lead">
<div id="stars" class="starrr"></div>
<div class="rate-counter"><a href="">(52)</a></div>
</div>
<div class="rate-counter"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="detail-tabs">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target=".menu__1" href="#" >Description</a></li>
<li><a data-toggle="tab" data-target=".menu__2" href="#" >Features</a></li>
<li><a data-toggle="tab" data-target=".menu__3" href="#" >Dimensions</a></li>
</ul>
<div class="tab-content">
<div class="menu__1 tab-pane fade in active">
<p>Easy to ride, care free surfing craft that's fun for everyone, paddles well, super fast down the line and great for any level of surfing depending on who rides it. The Donny Stoker, a rework on design from stokesys first ever pro model. A super easy to surf and fun board. The Donny Stoker is a board for total freesurfing expression.</p>
<div class="order">
<ul>
<li><a class="price" href="">$499.99</a></li>
<li><a class="buynow" href="">Buy now</a></li>
</ul>
</div>
<div class="viewall"><a href="" class="view-all">View all boards</a></div>
</div>
<div class="menu__2 tab-pane fade">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="menu__3 tab-pane fade">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
</div> <!-- Slider-Content-End -->
</div>
</div> <!-- Slider-Wrap-End -->
</div> <!-- Row End -->
</div> <!-- Container End -->
</section>
<!-- Content Section -->
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="section-heading">Section Heading</h1>
<p class="lead section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="section-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</div>
</div>
</section>
<!-- Fixed Height Image Aside -->
<!-- Image backgrounds are set within the full-width-pics.css file. -->
<aside class="image-bg-fixed-height"></aside>
<!-- Content Section -->
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="section-heading">Section Heading</h1>
<p class="lead section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="section-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2018</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.thumb_x a').click(function(e){
e.preventDefault();
var thisThumbItem = $(this);
//set large image src
thisThumbItem.parents('.img-gallery-wrap').find('.big-img img').fadeTo("slow",0.7,function(){
var thisBigImg = $(this);
thisBigImg.attr('src', thisThumbItem.attr('data-largeImg') );
thisBigImg.fadeTo("slow",1);
});
//set selected thumbnail
thisThumbItem.parents('.thumbwrap').find('.thumb_x').removeClass('added-select');
thisThumbItem.parents('.thumb_x').addClass('added-select');
});
$('.bxslider').bxSlider({
pager:false,
infiniteLoop: false
});
});
$(".alert").addClass("in").fadeOut(3500);
// starrr plugin (https://github.com/dobtco/starrr)
var __slice = [].slice;
(function($, window) {
var Starrr;
Starrr = (function() {
Starrr.prototype.defaults = {
rating: void 0,
numStars: 5,
change: function(e, value) {}
};
function Starrr($el, options) {
var i, _, _ref,
_this = this;
this.options = $.extend({}, this.defaults, options);
this.$el = $el;
_ref = this.defaults;
for (i in _ref) {
_ = _ref[i];
if (this.$el.data(i) != null) {
this.options[i] = this.$el.data(i);
}
}
this.createStars();
this.syncRating();
this.$el.on('mouseover.starrr', 'span', function(e) {
return _this.syncRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('mouseout.starrr', function() {
return _this.syncRating();
});
this.$el.on('click.starrr', 'span', function(e) {
return _this.setRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('starrr:change', this.options.change);
}
Starrr.prototype.createStars = function() {
var _i, _ref, _results;
_results = [];
for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) {
_results.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>"));
}
return _results;
};
Starrr.prototype.setRating = function(rating) {
if (this.options.rating === rating) {
rating = void 0;
}
this.options.rating = rating;
this.syncRating();
return this.$el.trigger('starrr:change', rating);
};
Starrr.prototype.syncRating = function(rating) {
var i, _i, _j, _ref;
rating || (rating = this.options.rating);
if (rating) {
for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
this.$el.find('span').eq(i).removeClass('glyphicon-star-empty').addClass('glyphicon-star');
}
}
if (rating && rating < 5) {
for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
this.$el.find('span').eq(i).removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
}
if (!rating) {
return this.$el.find('span').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
};
return Starrr;
})();
return $.fn.extend({
starrr: function() {
var args, option;
option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var data;
data = $(this).data('star-rating');
if (!data) {
$(this).data('star-rating', (data = new Starrr($(this), option)));
}
if (typeof option === 'string') {
return data[option].apply(data, args);
}
});
}
});
})(window.jQuery, window);
$(function() {
return $(".starrr").starrr();
});
$( document ).ready(function() {
$('#stars').on('starrr:change', function(e, value){
$('#count').html(value);
$('.alert').removeClass('hide').show().delay(1000).addClass("in").fadeOut(3500);
});
});
</script>
</body>
</html>
