<body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<input id="card-one" class="hidden" type="radio" name="ok-button" checked>
<input id="card-two" class="hidden" type="radio" name="ok-button">
<input id="card-three" class="hidden" type="radio" name="ok-button">
<div class="container">
<div class="inner inner-one">
<div class="box">
<div class="triangle">
</div>
<p class="number">1</p>
<div class="text">
<i class="start-quote fas fa-quote-left"></i>
<p class="quote">Develop a passion for learning. If you do, you will never cease to grow.</p>
<p class="credit">Anthony J. D'Angelo</p>
</div>
<label class="button" for="card-two">
<p>next</p>
</label>
</div>
</div>
<div class="inner inner-two">
<div class="box">
<div class="triangle">
</div>
<p class="number">2</p>
<i class="start-quote fas fa-quote-left"></i>
<p class="quote">An investment in knowledge pays the best interest.</p>
<p class="credit"> Benjamin Franklin</p>
<label class="button" for="card-three">
<p>next</p>
</label>
</div>
</div>
<div class="inner inner-three">
<div class="box">
<div class="triangle">
</div>
<p class="number">3</p>
<i class="start-quote fas fa-quote-left"></i>
<p class="quote">I have no special talent. I am only passionately curious.</p>
<p class="credit">Albert Einstein</p>
<label class="button" for="card-one">
<p>next</p>
</label>
</div>
</div>
</div>
<script src="https://100dayscss.com/codepen/js/jquery.min.js"></script>
<script src="https://codepen.io/fracturedNight/pen/exgzZg.js"></script>
</body>@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Josefin+Sans:600');
:root {
--main-color: #643A7A;
--secondary-color: #741CAF;
--sans: "josefin sans", sans serif;
}
body {
background: #201C29;
}
.container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 400px;
background: var(--main-color);
border-radius: 5px;
font-family: "dancing script", cursive;
overflow: hidden;
color: rgb( 121, 125, 127 );
letter-spacing: .5px;
}
.hidden {
display: none;
}
.inner {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
transition: 1s;
visibility: hidden;
}
.box {
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 60%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 1.5rem rgba(0, 0, 0, .5);
font-size: 1.3rem;
}
.number::before {
content: "";
position: absolute;
top: -130px;
right: -30px;
width: 90px;
height: 180px;
background: var(--secondary-color);
transform: rotate(-45deg);
z-index: -1;
box-shadow: 0 0 .7rem rgba(0, 0, 0, .5);
}
.number {
font-family: var(--sans);
position: absolute;
margin: 0;
top: 15px;
right: 15px;
color: fade-out(#fff, .3);
}
.quote {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
}
.credit {
position: absolute;
top: 60%;
right: 5%;
font-family: var(--sans);
font-size: .8rem;
font-weight: 500;
&::before {
content: "⸛ ";
vertical-align: middle;
font-size: 1.4rem;
}
}
.fas {
font-size: 3.5rem;
position: absolute;
top: 12%;
left: 7%;
color: rgba(100, 58, 122, .2);
}
input {
width: 100%;
transition: .3s;
}
.button p {
background: #802BBC;
text-align: center;
color: #fff;
padding: 1rem 0;
width: 100%;
font-family: var(--sans);
position: absolute;
bottom: 0;
left: 0;
margin: 0;
transition: .2s ease-out;
}
.button p:hover {
background: var(--secondary-color);
cursor: pointer;
}
#card-one:checked ~ .container .inner-one,
#card-two:checked ~ .container .inner-two,
#card-three:checked ~ .container .inner-three {
opacity: 1;
visibility: visible;
}
#card-one:checked ~ .container .inner-two,
#card-two:checked ~ .container .inner-three,
#card-three:checked ~ .container .inner-one {
transform: scale(.85);
transform: scale(1) translate(-20rem);
}// jQuery v3.3.1 is supported
External CSS
This Pen doesn't use any external CSS resources.