<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="thumbnail-preview-indicators" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#thumbnail-preview-indicators" data-slide-to="0" class="active">
<div class="thumbnail">
<img class="img-responsive" src="http://www.spirosart.com/images/D/rainy%20Boulevard.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="1">
<div class="thumbnail">
<img class="img-responsive" src="http://www.spirosart.com/images/D/alley%20of%20lovers.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="2">
<div class="thumbnail">
<img class="img-responsive" src="http://www.spirosart.com/images/D/Canal%20in%20the%20evening.jpg">
</div>
</li>
</ol>
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="container">
<div class="carousel-caption">
<h1>Dmitry Spiros</h1>
<p>Rainy Boulevard </p>
<p><a class="btn btn-lg btn-primary" href="http://www.spirosart.com/" role="button">Browse gallery</a></p>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="container">
<div class="carousel-caption">
<h1>Dmitry Spiros</h1>
<p>Alley of Lovers</p>
<p><a class="btn btn-lg btn-primary" href="http://www.spirosart.com/" role="button">Browse gallery</a></p>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="container">
<div class="carousel-caption">
<h1>Dmitry Spiros</h1>
<p>Canal in the Evening </p>
<p><a class="btn btn-lg btn-primary" href="http://www.spirosart.com/" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<br>
<div class="row text-center">
<div class="col-sm-4">
<img src="http://www.spirosart.com/images/D/rainy%20Boulevard.jpg" alt="Painting1"style="width:500px;height:500px;">
<a href="http://www.spirosart.com/Paris-autumn-Oils-with-Palette-Knife-Painting-on-Canvas-by-Dmitry-Spiros.-Size-28-x40-70-cm-x100-cm-SKU83121/"><p>Rainy Boulevard</p>
<br>
<a href="http://www.spirosart.com/Paris-autumn-Oils-with-Palette-Knife-Painting-on-Canvas-by-Dmitry-Spiros.-Size-28-x40-70-cm-x100-cm-SKU83121/"><button class="btn" data-toggle="modal" data-target="#myModal">See more.</button>
</div>
<div class="col-sm-4">
<img src="http://www.spirosart.com/images/D/alley%20of%20lovers.jpg" alt="Painting2"style="width:500px;height:500px;">
<p>Alley of Lovers</p>
<br>
<a href="http://www.spirosart.com/-Alley-of-lovers-PALETTE-KNIFE-Oil-Acrylic-Painting-on-Canvas-by-Dmitry-Spiros-Size-24x32-60-x-80-cm/"><button class="btn" data-toggle="modal" data-target="#myModal">See more.</button>
</div>
<div class="col-sm-4">
<img src="http://www.spirosart.com/images/D/Canal%20in%20the%20evening.jpg" alt="Painting3"style="width:500px;height:500px;">
<p>Canal in the Evening</p>
<br>
<a href="http://www.spirosart.com/RAINY-BOULEVARD-OIL-ON-CANVAS-PALETTE-KNIFE-PAINTING-SIZE-100CM-X-70CM-40-X28-2017/"><button class="btn" data-toggle="modal" data-target="#myModal">See more.</button>
</div>
</div>
<br>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="row text-center">
<div class="icon-circle">
<a href="https://www.facebook.com/Spirosfineart/" target="_blank" class="ifacebook" title="Facebook"><button class="fa fa-facebook"></button></a>
</div>
</div>
/*
-----------------------------------
Code snippet by @maridlcrmn
Credits images: www.unsplash.com
-----------------------------------
*/
body{
background:url("http://qpattern.info/wp-content/uploads/2016/06/white-background-pattern-tumblr.jpg");
}
#thumbnail-preview-indicators {
position: relative;
overflow: hidden;
}
#thumbnail-preview-indicators .slides .slide-1,
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3 {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#thumbnail-preview-indicators,
#thumbnail-preview-indicators .slides,
#thumbnail-preview-indicators .slides .slide-1,
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3 {
height: 480px;
}
#thumbnail-preview-indicators .slides .slide-1 {
background-image: url(http://www.spirosart.com/images/D/rainy%20Boulevard.jpg);
}
#thumbnail-preview-indicators .slides .slide-2 {
background-image: url(http://www.spirosart.com/images/D/alley%20of%20lovers.jpg);
}
#thumbnail-preview-indicators .slides .slide-3 {
background-image: url(http://www.spirosart.com/images/D/Canal%20in%20the%20evening.jpg);
}
#thumbnail-preview-indicators .carousel-inner .item .carousel-caption {
top: 20%;
bottom: inherit;
}
#thumbnail-preview-indicators .carousel-indicators li,
#thumbnail-preview-indicators .carousel-indicators li.active {
position: relative;
width: 100px;
height: 8px;
}
#thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
position: absolute;
top: 0;
width: 100px;
display: none;
opacity: 0;
left: 50%;
margin-top: -80px;
margin-left: -50px;
}
#thumbnail-preview-indicators .carousel-indicators li:hover > .thumbnail,
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail {
display: block;
opacity: .8;
}
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail:hover{
opacity: 1;
}
@media screen and (max-width : 480px) {
#thumbnail-preview-indicators .carousel-indicators li,
#thumbnail-preview-indicators .carousel-indicators li.active {
width: 50px;
height: 8px;
position: relative;
}
#thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
width: 50px;
left: 50%;
margin-top: -50px;
margin-left: -25px;
}
}
body{
padding: 50px;
}
.icon-circle .fa{
font-size : 25px;
color : #e84700;
margin : 0 auto;
height : 80px;
width : 80px;
border-radius : 50%;
border :2px solid #e84700;
line-height : 80px;
cursor : pointer;
-webkit-transition : all ease-in-out 0.35s;
-moz-transition : all ease-in-out 0.35s;
-o-transition : all ease-in-out 0.35s;
-ms-transition : all ease-in-out 0.35s;
transition : all ease-in-out 0.20s,background-color ease-in-out 0.05s;
}
.icon-circle .fa:hover{
background-color : #e84700;
color : #fff;
border : 1px solid #e84711;
-moz-box-shadow : inset 0px 0px 0px 5px #ffffff;
-o-box-shadow : inset 0px 0px 0px 5px #ffffff;
-ms-box-shadow : inset 0px 0px 0px 5px #ffffff;
-webkit-box-shadow : inset 0px 0px 0px 5px #ffffff;
box-shadow : inset 0px 0px 0px 5px #ffffff;
-ms-transform : scale(1.2,1.2);
-webkit-transform : scale(1.2,1.2);
-moz-transform : scale(1.2,1.2);
-o-transform : scale(1.2,1.2);
transform : scale(1.2,1.2);
}
.icon-circle i:before{
margin-left : 0px;
font-size : 40px;
}
@media (min-width:320px) and (max-width:768px) {
.icon-circle .fa{
font-size : 15px;
color : #e84700;
margin : 0 auto;
height : 40px;
width : 40px;
border-radius : 50%;
border :2px solid #e84700;
line-height : 40px;
cursor : pointer;
-webkit-transition : all ease-in-out 0.35s;
-moz-transition : all ease-in-out 0.35s;
-o-transition : all ease-in-out 0.35s;
-ms-transition : all ease-in-out 0.35s;
transition : all ease-in-out 0.20s,background-color ease-in-out 0.05s;
}
.icon-circle .fa:hover{
background-color : #e84700;
color : #fff;
border : 1px solid #e84711;
-moz-box-shadow : inset 0px 0px 0px 5px #ffffff;
-o-box-shadow : inset 0px 0px 0px 5px #ffffff;
-ms-box-shadow : inset 0px 0px 0px 5px #ffffff;
-webkit-box-shadow : inset 0px 0px 0px 5px #ffffff;
box-shadow : inset 0px 0px 0px 5px #ffffff;
-ms-transform : scale(1.2,1.2);
-webkit-transform : scale(1.2,1.2);
-moz-transform : scale(1.2,1.2);
-o-transform : scale(1.2,1.2);
transform : scale(1.2,1.2);
}
.icon-circle i:before{
margin-left : 0px;
font-size : 20px;
}
}
.ifacebook .fa{
color :#3B5998;
border :2px solid #3B5998;
}
.ifacebook .fa:hover{
background-color : #3B5998;
color : #fff;
border : 1px solid #3B5998;
}
