Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Day 17 - Cards #30DaysOfCSSGirls

Day 17 - Cards #30DaysOfCSSGirls

Inspired by Cards Against Humanity. I played with my friend and his group of friends at my friend's birthday like last 2 years ago. It was such a cool and fun experience to play in the group. It sounded irony and rude description to some of the players out here. Just don't feel offended #30DaysOfCSSGirls

A Pen by Jia Qian Koh on CodePen.

License.

<div class = "flip">
<div class = "flip-in">
<div class = "flip-card-f">
<p>I'm sorry, <br>
Professor, but I <br> couldn't complete <br>
my homework <br>
because of ____________. </p>
<div class="footer">
<p>Credits: Cards Against Humanity</p>
</div>
</div>
<div class = "flip-card-b">
<p>Poor life Choices.</p>
<div class="footer">
<p>Credits: Cards Against Humanity</p>
</div>
</div>
</div>
</div>
<div class = "flip">
<div class = "flip-in">
<div class = "flip-card-f">
<p>Dear XXX, <br>
I'm having some <br>
trouble with <br>
__________ and would <br>
like your advice. </p>
<div class="footer">
<p>Credits: Cards Against Humanity</p>
</div>
</div>
<div class = "flip-card-b">
<p>Me time.</p>
<div class="footer">
<p>Credits: Cards Against Humanity</p>
</div>
</div>
</div>
</div>
<!--
https://www.w3schools.com/howto/howto_css_flip_card.asp
https://www.w3schools.com/howto/howto_css_fixed_footer.asp
https://smudgedlipstick.co.uk/event/cards-against-humanity-dating-kentish-town-december/
--!>
.flip {
background-color: white;
width: 300px;
height: 400px;
border: 50px solid white;
perspective: 1000px;
text-align: center;
}
.flip-in {
position: relative;
width: 100%;
height: 100%;
transition: transform 1.0s;
transform-style: preserve-3d;
}
.flip:hover .flip-in {
transform: rotateY(180deg);
}
.flip-card-f, .flip-card-b {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-f {
border-radius: 20px;
background-color: black;
color: white;
white-space: pre-line;
}
.flip-card-b {
border-radius: 20px;
background-color: grey;
color: white;
white-space: pre-line;
transform: rotateY(180deg);
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
white-space: pre-line;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment