<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/onlyveen/pen/mBRabx?limit=all&page=23&q=food" />
<style class="cp-pen-styles">#body {
background: #212121;
min-height: 100vh;
font-family: 'roboto', sans-serif;
text-transform: captalize;
letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
#body {
padding: 50px;
}
}
@media only screen and (max-width: 767px) {
#body {
padding: 1px;
}
}
#body, #body *, #body:before, #body *:before, #body:after, #body *:after {
transition: all 1s;
}
#body ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#body .mobi-wrap {
border-radius: 7px;
position: relative;
box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.25);
width: 370px;
margin: auto;
background: #fff;
padding: 30px;
}
#body .mobi-wrap > div {
position: relative;
border: solid 1px #999;
overflow: hidden;
border-radius: 7px;
height: 100%;
}
#body .mobi-wrap > div .float {
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
left: 0;
right: 0;
margin: auto;
top: 50px;
background: #d6e8fa;
}
#body .mobi-wrap > div .float > p.p-icon {
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
height: 40px;
width: 40px;
overflow: hidden;
background: #1976d2;
box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.25);
border-radius: 50%;
position: absolute;
top: 0;
left: 20px;
}
#body .mobi-wrap > div .float > p.p-icon > i {
position: absolute;
color: #fff;
line-height: 40px;
width: 100%;
top: 0;
left: 0;
text-align: center;
left: 50px;
animation: cmon 1s linear !important;
}
#body .mobi-wrap > div .float > p.p-icon > i.active {
opacity: 1;
animation: none !important;
left: 0px;
}
#body .mobi-wrap > div .float > p.p-icon > i:first-child:before {
font-size: 20px;
}
#body .mobi-wrap > div .float > .spans {
height: 100%;
}
#body .mobi-wrap > div .float > .spans > span {
height: 20px;
width: 20px;
background: #1976d2;
border-radius: 50%;
position: absolute;
opacity: .2;
}
#body .mobi-wrap > div .float > .spans > span:nth-child(1) {
left: 40%;
top: 10%;
transform: scale(0.9);
}
#body .mobi-wrap > div .float > .spans > span:nth-child(2) {
left: 10%;
top: -3%;
transform: scale(0.6);
}
#body .mobi-wrap > div .float > .spans > span:nth-child(3) {
left: 20%;
top: 90%;
transform: scale(1.1);
}
#body .mobi-wrap > div .float > .spans > span:nth-child(4) {
left: 101%;
top: 55%;
transform: scale(0.6);
}
#body .mobi-wrap > div .float > .spans > span:nth-child(5) {
left: 90%;
top: 15%;
transform: scale(0.5);
}
#body .mobi-wrap > div .float > .spans > span:nth-child(6) {
left: 90%;
top: 70%;
transform: scale(0.2);
}
#body .mobi-wrap > div .slider {
min-height: 450px;
position: relative;
}
#body .mobi-wrap > div .slider > li {
position: absolute;
color: #fff;
width: 100%;
top: 0;
left: 550px;
animation: cmon2 1s linear !important;
}
#body .mobi-wrap > div .slider > li .imgs {
height: 300px;
display: flex;
}
#body .mobi-wrap > div .slider > li .imgs img {
display: block;
margin: auto;
max-width: 50%;
transform: rotate(45deg);
transition-delay: .25s;
}
#body .mobi-wrap > div .slider > li .desc {
text-align: center;
color: #333;
margin-top: -20px;
padding: 0 15px;
}
#body .mobi-wrap > div .slider > li .desc .first {
font-size: 20px;
color: #1976d2;
transform: translateX(45px);
}
#body .mobi-wrap > div .slider > li .desc .last {
font-size: 12px;
transform: translateX(-45px);
}
#body .mobi-wrap > div .slider > li.active {
opacity: 1;
animation: none !important;
left: 0px;
}
#body .mobi-wrap > div .slider > li.active .imgs img {
transform: rotate(0deg);
}
#body .mobi-wrap > div .slider > li.active .first {
color: #1976d2;
transform: translateX(0);
}
#body .mobi-wrap > div .slider > li.active .last {
transform: translateX(0);
}
#body .mobi-wrap > div .actions {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
#body .mobi-wrap > div .actions button {
border: 0;
padding: 0;
background: transparent;
text-transform: uppercase;
color: #1976d2;
font-weight: bold;
}
#body .mobi-wrap > div .actions button:focus {
outline: none;
}
#body .mobi-wrap > div .actions button.disabled {
color: #ccc;
pointer-events: none;
}
#body .mobi-wrap > div .actions .dots {
display: flex;
}
#body .mobi-wrap > div .actions .dots li {
height: 7px;
width: 7px;
background: #1976d2;
margin: 5px;
opacity: .5;
border-radius: 50%;
cursor: pointer;
transform: scale(0.9);
}
#body .mobi-wrap > div .actions .dots li.active {
transform: scale(1);
opacity: 1;
}
@keyframes cmon {
0% {
left: 0;
opacity: 1;
}
49% {
left: -50px;
opacity: 1;
}
50% {
left: -50px;
opacity: 0;
}
100% {
left: 50px;
opacity: 0;
}
}
@keyframes cmon2 {
0% {
left: 0;
opacity: 1;
}
49% {
left: -550px;
opacity: 1;
}
50% {
left: -550px;
opacity: 0;
}
100% {
left: 550px;
opacity: 0;
}
}
@media only screen and (max-width: 767px) {
#body .mobi-wrap {
margin: 15px;
max-width: 100%;
width: auto;
}
#body .mobi-wrap > div .slider {
min-height: 500px;
}
}
</style></head><body>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://use.fontawesome.com/aa95071b26.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="body">
<div class="mobi-wrap">
<div>
<div class="float">
<div class="spans">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<p class="p-icon">
<i class="fa fa-mobile active" aria-hidden="true"></i>
<i class="fa fa-child" aria-hidden="true"></i>
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<i class="fa fa-credit-card-alt" aria-hidden="true"></i>
</p>
</div>
<ul class="slider">
<li class="active">
<div class="imgs"><img src="https://maxcdn.icons8.com/Share/icon/Mobile//iphone1600.png"></div>
<div class="desc">
<p class="first">Electronic</p>
<p class="last">There is a growing trend by which consumers tend to replace old mobile phones with new ones, every time a good one is launched.</p>
</div>
</li>
<li>
<div class="imgs"><img src="https://maxcdn.icons8.com/Share/icon/Sports//player_shirt_1600.png"></div>
<div class="desc">
<p class="first">Fashion</p>
<p class="last">Fashion has taken today’s youth by surprise, and the availability of numerous options just leaves them spoilt of choice.</p>
</div>
</li>
<li>
<div class="imgs"><img src="https://dye1fo42o13sl.cloudfront.net/store-icon.png"></div>
<div class="desc">
<p class="first">Grocery</p>
<p class="last">Best online grocery and food shopping store in inda. It is very simple and easy. No more standing in lines, carrying heavy bags and looking for parking!</p>
</div>
</li>
<li>
<div class="imgs"><img src="https://cdn2.iconfinder.com/data/icons/business-finance-29/32/46_banking_business_connection_indian_rupee_money_payment-512.png"></div>
<div class="desc">
<p class="first">Pay Conveniently</p>
<p class="last">Pay using debit card, credit card or any wallets. Get delivery by paying cash at ur place</p>
</div>
</li>
</ul>
<div class="actions">
<button class="prev disabled">Back
</button>
<ul class="dots">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<button class="next">Next
</button>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >$('.actions .dots li').click(function () {
$('.slider li:nth(' + $(this).index() + ') , .float p i:nth(' + $(this).index() + ')').addClass('active').siblings().removeClass('active');
$(this).addClass('active').siblings().removeClass('active');
});
$('.actions .prev').click(function () {
$(this).siblings('button').removeClass('disabled');
var indx = $('.actions .dots li.active').index();
if (indx == 0) {
$('.actions .dots li:last-child, .slider li:last-child , .float p i:last-child').addClass('active').siblings().removeClass('active');
}
else{
$('.actions .dots li:nth('+(indx - 1)+'), .slider li:nth('+(indx - 1)+') , .float p i:nth('+(indx - 1)+')').addClass('active').siblings().removeClass('active');
};
if (indx == 1) {
$(this).addClass('disabled');
}
var deg = (360/$('.actions .dots li').length) * (indx-1);
$('.float').css('transform','rotate('+deg+'deg)');
$('.float .spans').css('transform','rotate('+-deg/3+'deg)');
$('.p-icon').css('transform','rotate('+-deg+'deg)');
});
$('.actions .next').click(function () {
$(this).siblings('button').removeClass('disabled');
var indx = $('.actions .dots li.active').index();
if (indx == $('.actions .dots li').length - 1) {
$('.actions .dots li:first-child, .slider li:first-child , .float p i:first-child').addClass('active').siblings().removeClass('active');
}
else{
$('.actions .dots li:nth('+(indx + 1)+'), .slider li:nth('+(indx + 1)+') , .float p i:nth('+(indx + 1)+')').addClass('active').siblings().removeClass('active');
};
if (indx == $('.actions .dots li').length - 2) {
$(this).addClass('disabled');
}
var deg = (360/$('.actions .dots li').length) * (indx+1);
$('.float').css('transform','rotate('+deg+'deg)');
$('.float .spans').css('transform','rotate('+-deg/3+'deg)');
$('.p-icon').css('transform','rotate('+-deg+'deg)');
});
//# sourceURL=pen.js
</script>
</body></html>
