| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Effects</title>
|
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
|
| </head>
|
| <body>
|
|
|
| <section id="homeservices" class="sectionhome fade-up animated fadeInUp">
|
| <div class="container clearfix">
|
| <div class="row">
|
| <div class="grid_4 homeservice">
|
| <div class="imgserviceopen">
|
| <img alt="" src="" class="circle">
|
| </div>
|
| <div class="imgservice">
|
| <div class="percentagehome easyPieChart" data-percent="90" style="width: 140px; height: 140px; line-height: 140px;">
|
| <img alt="" src="">
|
| </div>
|
| </div>
|
| <h2>ADVENTURE</h2>
|
| <p class="px-3 pb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
| </div>
|
|
|
| <div class="grid_4 homeservice">
|
| <div class="imgserviceopen">
|
| <img alt="" src="" class="circle">
|
| </div>
|
| <div class="imgservice">
|
| <div class="percentagehome easyPieChart" data-percent="90" style="width: 140px; height: 140px; line-height: 140px;">
|
| <img alt="" src="">
|
| </div>
|
| </div>
|
| <h2>RELAX</h2>
|
| <p class="px-3 pb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
| </div>
|
|
|
| <div class="grid_4 homeservice">
|
| <div class="imgserviceopen">
|
| <img alt="" src="" class="circle">
|
| </div>
|
| <div class="imgservice">
|
| <div class="percentagehome easyPieChart" data-percent="90" style="width: 140px; height: 140px; line-height: 140px;">
|
| <img alt="" src="">
|
| </div>
|
| </div>
|
| <h2>HONEYMOON</h2>
|
| <p class="px-3 pb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| </body>
|
| </html>
|
|
|
| <style type="text/css">
|
| .grid_4 {width:380px;}
|
| /*start services*/
|
| #homeservices{ background-color:#fff; padding: 400px 0;}
|
| .homeservice h2, .homeservice p{ color:#b3bbc6; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
|
| .homeservice a{ color:#b3bbc6; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
|
| .homeservice a:hover{ color:#5e6d81;}
|
| .homeservice{ margin-top:0px !important; margin-bottom:0px !important; border-top:4px solid #f47504; text-align:center; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }
|
| .homeservice:hover{ background-color:#f9fafc; -moz-box-shadow: 0 0px 10px #B3BBC6; -webkit-box-shadow: 0 0px 10px #B3BBC6; box-shadow: 0 0px 10px #B3BBC6;}
|
| .homeservice:hover h2{ color:#5e6d81 !important;}
|
| .homeservice p{ font-size:15px; margin:10px 0px 20px 0px; font-size: 16px;}
|
| .homeservice h2{ margin-top:20px; display:inline-block; }
|
| .imgservice{ width:100%; float:left; z-index:999; margin-top:-70px;}
|
| .imgserviceopen{ width:100%; float:left; position:relative; background-color:#F36; margin-top:-4px; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
|
| .imgserviceopen img{ position:absolute; bottom:0; left:0; width:100%; height:0; }
|
| .homeservice:hover .imgserviceopen{ opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; position:relative; z-index:97;}
|
| .homeservice:hover .imgserviceopen img{ height:auto;}
|
| .percentagehome{ position:relative; z-index:98; margin:auto;}
|
| .chart{ position:relative; z-index:98; }
|
| /*end services*/
|
| #homepromotions .container div{ text-align:center;}
|
| #homepromotions h1{ margin-bottom:10px; }
|
| #homedestinations{ float:left; width:100%;}
|
| .destinationcarousel{ background-color:#fff; -webkit-box-shadow: inset 0px 0px 0px 1px rgba(244, 244, 246, 1.0); box-shadow: inset 0px 0px 0px 1px rgba(244, 244, 246, 1.0); float:left; }
|
| .imgdestination{ width:100%; height:auto; float:left;}
|
| .titledestination{ background-color:#434a54; width:100%;}
|
| .avatarandtitle{ background-color:#C9F; width:100%; float:left;}
|
| .avatardestination{ float:left; width:74px; height:74px; margin:-50px 20px 5px 20px; border:3px solid #fff; border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px;}
|
| .avatardestination img{ width:74px; height:74px; overflow:hidden; border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px;}
|
| .descriptiondestination{ text-align:center; font-size:15px; margin:20px; float:left;}
|
| .titledestination a{ font-size:15px; color:#B1BAC3; padding:10px 20px; display:block; }
|
| .infodestination{background-color:#f9fafc; float:left; width:100%; -webkit-box-shadow: inset 0px 0px 0px 1px rgba(235, 236, 240, 1.0); box-shadow: inset 0px 0px 0px 1px rgba(235, 236, 240, 1.0); }
|
| .viewdestination{width:33.33%; float:left; border-top:3px solid #13b8d4; text-align:center;}
|
| .likedestination{width:33.33%; float:left; border-top:3px solid #ffd300; text-align:center; -webkit-box-shadow: inset 0px 0px 0px 1px rgba(235, 236, 240, 1.0); box-shadow: inset 0px 0px 0px 1px rgba(235, 236, 240, 1.0); ; }
|
| .commentsdestination{ width:33.33%; float:left; border-top:3px solid #18bc9a; text-align:center; }
|
| .viewdestination span, .likedestination span, .commentsdestination span{ margin:15px 0px; display:inline-block; font-size:15px; }
|
| /*.arrowcarouselprev{ width:40px; height:40px; cursor:pointer; margin-bottom:20px; float:right; background-image:url(images/service1.png); background-repeat:no-repeat; }*/
|
| /*.arrowcarouselnext{ width:40px; height:40px; cursor:pointer; margin-bottom:20px; float:left; background-image:url(../img/destinations/bgarrowcarouselnext.png); background-repeat:no-repeat; }*/
|
| .notclickable{cursor:text;}
|
| .percentagehome img {border-radius: 50%; border: 5px solid #fff;}
|
|
|
|
|
| </style> |
Comments
Post a Comment