<div class="phone">
<div class="card">
<div class="card__contents">
<div class="card__title">Welcome</div>
<div class="card__body">
<p>Are you too tired of high premiums?</p>
<p>We're the insurance company that sends you the money directly!</p>
<p>Interested? Jump in!</p>
</div>
<div class="card__next">next →</div>
</div>
<div class="card__shadow">
<div class="card__shadow-inner"></div>
</div>
<div class="card__index">1</div>
</div>
<div class="card">
<div class="card__contents">
<div class="card__title">Who are you?</div>
<div class="card__body">
<p>What's your email address?</p>
<input class="card__input" type="email">
</div>
<div class="card__next">next →</div>
</div>
<div class="card__shadow">
<div class="card__shadow-inner"></div>
</div>
<div class="card__index">2</div>
</div>
<div class="card">
<div class="card__contents">
<div class="card__title">Solar system</div>
<div class="card__body">
<p>Which planet do you live on?</p>
<input class="card__input" type="text">
</div>
<div class="card__next">next →</div>
</div>
<div class="card__shadow">
<div class="card__shadow-inner"></div>
</div>
<div class="card__index">3</div>
</div>
<div class="card">
<div class="card__contents">
<div class="card__title">Money</div>
<div class="card__body">
<p>How do you want the money?</p>
<input class="card__radio" type="radio" name="cash" id="cash"><label for="cash">Cash</label>
<input class="card__radio" type="radio" name="cash" id="account"><label for="account">Bitcoins</label>
</div>
<div class="card__next">next →</div>
</div>
<div class="card__shadow">
<div class="card__shadow-inner"></div>
</div>
<div class="card__index">4</div>
</div>
<div class="card">
<div class="card__contents">
<div class="card__title">Almost there...</div>
<div class="card__body">
<p>As always, do you want to sign up for yet another newsletter?</p>
<input class="card__check" type="checkbox" id="newsletter"><label for="newsletter">Spam me!</label>
</div>
<!-- <div class="card__next">next →</div> -->
</div>
<div class="card__shadow">
<div class="card__shadow-inner"></div>
</div>
<div class="card__index">5</div>
</div>
</div>
body {
align-items: center;
justify-content: center;
background: #f2f2f2;
display: flex;
font-family: 'Nunito Sans', sans-serif;
font-size: 1.125em;
height: 100vh;
margin: 0;
}
.phone {
background: white;
height: 100%;
max-width: 360px;
overflow: hidden;
position: relative;
width: 100%;
}
.card {
height: 100%;
position: absolute;
text-align: center;
transition: transform 300ms;
width: 100%;
}
.card:nth-child(2) {
transform: translateX(100%);
}
.card:nth-child(3) {
transform: translateX(100%);
}
.card:nth-child(4) {
transform: translateX(100%);
}
.card:nth-child(5) {
transform: translateX(100%);
}
.card__contents {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
.card:nth-child(1) .card__contents {
background: #fff;
}
.card:nth-child(2) .card__contents {
background: #C9F9E1;
clip-path: polygon(10% 0%, 10% 20%, 0% 20%, 0% 100%, 100% 100%, 100% 0%);
clip-path: polygon(10% 0%, 10% 20%, 0% 20%, 0% 100%, 100% 100%, 100% 0%);
}
.card:nth-child(3) .card__contents {
background: #F9C9C7;
clip-path: polygon(10% 0%, 10% 40%, 0% 40%, 0% 100%, 100% 100%, 100% 0%);
clip-path: polygon(10% 0%, 10% 40%, 0% 40%, 0% 100%, 100% 100%, 100% 0%);
}
.card:nth-child(4) .card__contents {
background: #F9F0C7;
clip-path: polygon(10% 0%, 10% 60%, 0% 60%, 0% 100%, 100% 100%, 100% 0%);
clip-path: polygon(10% 0%, 10% 60%, 0% 60%, 0% 100%, 100% 100%, 100% 0%);
}
.card:nth-child(5) .card__contents {
background: #E6C9F9;
clip-path: polygon(10% 0%, 10% 80%, 0% 80%, 0% 100%, 100% 100%, 100% 0%);
clip-path: polygon(10% 0%, 10% 80%, 0% 80%, 0% 100%, 100% 100%, 100% 0%);
}
.card__title {
font-weight: 800;
font-size: 2em;
margin-top: 20px;
}
.card__body {
margin-top: 20px;
max-width: 200px;
}
.card__input {
background: transparent;
border: 0;
border-bottom: 2px solid black;
font-size: 1em;
outline: none !important;
}
.card__input:focus {
border-width: 4px;
}
.card__radio {
margin-right: 10px;
vertical-align: baseline;
}
.card__check {
margin-right: 10px;
}
.card__next {
tap-highlight-color: transparent;
bottom: 20px;
cursor: pointer;
margin-top: 50px;
position: absolute;
right: 20px;
user-select: none;
}
.card__shadow {
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
width: 10%;
}
.card__shadow-inner {
box-shadow: inset 0 0 6px rgba(50,50,50,.12);
height: calc(100% + 15px);
left: -15px;
position: relative;
top: -15px;
width: calc(100% + 15px);
}
.card:nth-child(1) .card__shadow {
height: 0;
}
.card:nth-child(2) .card__shadow {
height: 20%;
}
.card:nth-child(3) .card__shadow {
height: 40%;
}
.card:nth-child(4) .card__shadow {
height: 60%;
}
.card:nth-child(5) .card__shadow {
height: 80%;
}
.card__index {
align-items: center;
cursor: pointer;
display: flex;
height: 20%;
justify-content: center;
position: absolute;
text-align: center;
width: 10%;
z-index: 1;
}
.card:nth-child(1) .card__index {
top: 0;
}
.card:nth-child(2) .card__index {
top: 20%;
}
.card:nth-child(3) .card__index {
top: 40%;
}
.card:nth-child(4) .card__index {
top: 60%;
}
.card:nth-child(5) .card__index {
top: 80%;
}
const cards = document.querySelectorAll('.card'),
nexts = document.querySelectorAll('.card__next'),
ixs = document.querySelectorAll('.card__index');
nexts.forEach((next, i) => {
next.addEventListener('click', function() {
cards[i + 1].style.transform = 'none';
});
});
ixs.forEach((index, i) => {
index.addEventListener('click', () => {
for (let j = ixs.length - 1; j > i; j--) {
cards[j].style.transform = 'translateX(100%)';
}
console.log(i);
})
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.