<div class="container">
<!-- card one hermit -->
<div class="tarot-card">
<img src="https://cdn.pixabay.com/photo/2021/02/15/07/52/hermit-6016941_960_720.jpg">
</div>
<!-- card two temperance -->
<div class="tarot-card shuffle">
<img src="https://cdn.pixabay.com/photo/2021/02/15/07/42/temperance-6016917_960_720.jpg">
</div>
<!-- card three hanged-man -->
<div class="tarot-card">
<img src="https://cdn.pixabay.com/photo/2021/02/15/07/52/hanged-man-6016939_960_720.jpg">
</div>
<!-- card four hierophant -->
<div class="tarot-card">
<img src="https://cdn.pixabay.com/photo/2021/02/15/07/53/hierophant-6016942_960_720.jpg">
</div>
<!-- <h1>Click to Shuffle</h1> -->
</div>
<!-- sm btns -->
<a href="https://twitter.com/cmlohr"><button class="twitter-btn"><i class="fab fa-twitter"></i></button></a>
<!-- made with love footer -->
<div class="made-with-love">
Made with
<i id="heart">💖</i> & <i id="coffee">☕</i> by
<a href="https://github.com/cmlohr">Colleen Lohr</a>
</div>
<a href="https://www.linkedin.com/in/cmlohr/"><button class="in-btn"><i class="fab fa-linkedin-in"></i></button></a>
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
background-color: #000;
}
.container {
width: 100%;
height: 100%;
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
overflow-x: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transform: scale(.9);
}
img {
width: 100%;
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
.tarot-card {
width: 300px;
height: 500px;
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
box-shadow: 0px 2px 30px #000;
cursor: pointer;
border-radius: 10px;
border: .3em solid #fff;
z-index: 100;
background-color: #fff;
}
.tarot-card:nth-child(1) {
transform: rotate(-3deg);
}
.tarot-card:nth-child(2) {
transform: rotate(4deg);
}
.tarot-card:nth-child(3) {
transform: rotate(10deg);
}
.tarot-card:nth-child(4) {
transform: rotate(4deg);
}
.top {
z-index: 150;
}
.bottom{
z-index: 50;
}
/* sm btn styles */
.twitter-btn {
position: fixed; margin: auto;
bottom: 0;
background-color: #1da1f2;
border: 0.15em solid #1da1f2;
border-left: none;
border-bottom: none;
border-radius: 0% 100% 0% 0% / 0% 100% 0% 93% ;
height: 50px;
width: 50px;
cursor: pointer;
}
.in-btn {
position: fixed; margin: auto;
bottom: 0; right: 0;
border: 0.15em solid #0072b1;
border-right: none;
border-bottom: none;
border-radius: 100% 0% 0% 0% / 100% 0% 0% 0% ;
background-color: #0072b1;
height: 50px;
width: 50px;
cursor: pointer;
}
.fa-twitter {
position: absolute;
left: 0em; right: .4em; top: .7em; bottom: 0;
color: #fff;
font-size: 1.8em;
}
.fa-linkedin-in {
position: absolute;
left: .4em; right: 0em; top: .7em; bottom: 0;
color: #fff;
font-size: 1.8em;
}
.in-btn:hover {
background-color: #000;
}
.twitter-btn:hover {
background-color: #000;
}
/* made with love */
.made-with-love {
padding: 10px;
position: absolute;
left: 0; right: 0; bottom: 0;
text-align: center;
font-size: 20px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
color: #fff;
z-index: -1;
}
.made-with-love i {
font-style: normal;
color: #F50057;
}
#heart {
font-size: 20px;
}
#coffee {
font-size: 23px;
position: relative;
top: -3px;
}
/* underline animation */
.made-with-love a {
color: #fff;
/* text-transform: uppercase; */
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 4px;
position: relative;
}
.made-with-love a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 1.5px;
left: 50%;
position: absolute;
background: #B5F44A;
transition: width 0.2s ease 0s, left 0.2s ease 0s;
width: 0;
}
.made-with-love a:hover:after {
width: 100%;
left: 0;
}
$(document).ready(function () {
var count = 0;
$(".tarot-card").click(function() {
var card = $(this);
if(count < 4) {
$(this).removeClass("top").addClass("bottom");
count++;
}
if(count == 4) {
$("div").removeClass("bottom");
count = 0;
}
shuffle(card);
});
});
function shuffle(card) {
TweenLite.fromTo(
card,
0.6,
{
x:410,
y:-15,
ease: Expo.easeOut},
{
x:0,
y:0,
ease: Expo.easeIn});
};