Jcrcab : SlideBar code
<html>
<head>
<title>Jcrcab : SlideBar</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Borel&family=Bricolage+Grotesque&family=Pacifico&family=Poppins&family=Preahvihear&family=Raleway:wght@300&family=Roboto:wght@100;300;400&family=Rubik:wght@300;400&family=Ubuntu:wght@500&display=swap');
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: roboto;
}
a {
text-decoration: none;
color: inherit;
}
.main {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin: 50px auto;
flex-wrap: wrap;
}
.slider-main-box {
/* width: 33%; */
width: 28%;
margin: 20px 17px;
}
.main .slider-main-box:first-child{
margin-left: 60px;
}
.main .slider-main-box:nth-child(3){
margin-right: 60px;
}
.main .slider-main-box:nth-child(4){
margin-left: 60px;
}
.main .slider-main-box:last-child{
margin-right: 60px;
}
.slider-box-image-and-hover-slider {
width: 100%;
border-radius: 10px 10px 0px 0px;
overflow: hidden;
position: relative;
}
.slider-box-image-and-hover-slider:hover .hover-slider-box {
top: 0%;
}
.slider-box-img {
width: 100%;
height: 253.44px;
border-radius: 10px 10px 0px 0px;
}
.hover-slider-box {
width: 100%;
/* height: 331.88px; */
height: 100%;
background-color: #fff;
text-align: center;
padding: 64px 10px;
border: 1px solid #d5d5d5;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
position: absolute;
top: 100%;
transition: 0.5s;
}
.hover-slider-box p {
text-align: center;
padding: 0px 20px;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
}
.bottom-title-div {
width: 100%;
padding: 20px 0px;
text-align: center;
border: 1px solid #d5d5d5;
border-radius: 0px 0px 10px 10px;
box-shadow: 0px 5px 10px 0px #7777;
}
.bottom-title-div h4 {
font-weight: 400;
font-size: 18px;
}
</style>
</head>
<body>
<div class="main">
<!-- slide box 1 -->
<div class="slider-main-box">
<div class="slider-box-image-and-hover-slider">
<img src="https://www.jcrcab.com/wp-content/uploads/2017/12/u.jpg" alt="404" class="slider-box-img">
<div class="hover-slider-box">
<p>If you are looking for some great deals to visit the amazing state of Rajasthan, your search ends
here. Our One Day Tour in Rajasthan promises a vacation filled with experiences and memories
that are worth cherishing for life. Find thrill and adventure in or One Day Tour Package of
Rajasthan.</p>
</div>
</div>
<div class="bottom-title-div">
<h4><a href="https://www.jcrcab.com/" class="h4-a">One Day Tour in Rajasthan</a></h4>
</div>
</div>
<!-- slide box 2 -->
<div class="slider-main-box">
<div class="slider-box-image-and-hover-slider">
<img src="https://www.jcrcab.com/wp-content/uploads/2017/12/camel-1.jpg" alt="404"
class="slider-box-img">
<div class="hover-slider-box">
<p>Our objective is to satisfy our customers by making their journey secure and happy. With our One Way Taxi from Rajasthan, the customers only need to pay half of the payment for single -side travel. We strive to provide the best services so that the customer has a comfortable and joyous experience during their journey.</p>
</div>
</div>
<div class="bottom-title-div">
<h4><a href="https://www.jcrcab.com/" class="h4-a">One Way Taxi from Rajasthan</a></h4>
</div>
</div>
<!-- slide box 3 -->
<div class="slider-main-box">
<div class="slider-box-image-and-hover-slider">
<img src="https://www.jcrcab.com/wp-content/uploads/2017/12/p-1.jpg" alt="404"
class="slider-box-img">
<div class="hover-slider-box">
<p>Rajasthan is the land of unparalleled beauty, culture, and heritage. Visit the land of cultures with the most affordable Holiday Packages in Rajasthan and experience the richness of the state. Our packages are comprehensive, customized as per your needs, and most importantly very affordable.</p>
</div>
</div>
<div class="bottom-title-div">
<h4><a href="https://www.jcrcab.com/" class="h4-a">Holiday Packages in Rajasthan</a></h4>
</div>
</div>
<!-- slide box 4 -->
<div class="slider-main-box">
<div class="slider-box-image-and-hover-slider">
<img src="https://www.jcrcab.com/wp-content/uploads/2018/03/jcr.jpg" alt="404" class="slider-box-img">
<div class="hover-slider-box">
<p>We offer the best Luxury Car Hire in Rajasthan for Weddings so that you can make your big day a memorable one.</p>
</div>
</div>
<div class="bottom-title-div">
<h4><a href="https://www.jcrcab.com/" class="h4-a">Luxury Car Hire for Weddings</a></h4>
</div>
</div>
<!-- slide box 5 -->
<div class="slider-main-box">
<div class="slider-box-image-and-hover-slider">
<img src="https://www.jcrcab.com/wp-content/uploads/2017/12/car-rental-small.jpg" alt="404"
class="slider-box-img">
<div class="hover-slider-box">
<p>Our Luxury Cars in Rajasthan for Corporates lets you travel for your meetings or host your business clients/guests with utmost comfort.</p>
</div>
</div>
<div class="bottom-title-div">
<h4><a href="https://www.jcrcab.com/" class="h4-a">Luxury Car Hire for Corporates</a></h4>
</div>
</div>
<!-- slide box 6 -->
<div class="slider-main-box">
<div class="slider-box-image-and-hover-slider">
<img src="https://www.jcrcab.com/wp-content/uploads/2017/12/p3.png" alt="404"
class="slider-box-img">
<div class="hover-slider-box">
<p>Our Cab Rentals in Rajasthan is the best and the most trusted one in the entire state. We strive to provide the best services to our customers with the best prices, proper hygiene, and utmost comfort. We guarantee to offer you reliable services through our online Cab Rental Services.</p>
</div>
</div>
<div class="bottom-title-div">
<h4><a href="https://www.jcrcab.com/" class="h4-a">Taxi in jodhpur</a></h4>
</div>
</div>
</div>
</body>
</html>
कोई टिप्पणी नहीं