Skip to content

Instantly share code, notes, and snippets.

@zempo

zempo/Greeting Cards Demo

Created June 2, 2021 22:53
Show Gist options
  • Save zempo/580aef3d034334369aa7fb89db47ee52 to your computer and use it in GitHub Desktop.
Save zempo/580aef3d034334369aa7fb89db47ee52 to your computer and use it in GitHub Desktop.
Download ZIP
Demo for my project, "Just the Occasion"
Raw
Greeting Cards Demo
Interactive greeting cards for my app, "Just the Occasion"
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Viewing Public Cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<main role="main">
<header role="banner">
<h1>Great Greeting Cards</h1>
<h1>Demo by <a href="https://solomonzelenko.dev"
target="_blank"
rel="noopener noreferrer"><img class="s-logo" src="https://i.imgur.com/d5UK7pM.jpg" alt="Personal logo" /></a></h1>
</header>
<section class="cards">
<div class="card">
<input type="checkbox" id="card-toggle-1" class="card-toggle" value="selected">
<label class="card-container" for="card-toggle-1">
<div class="front face">
<p>For my lovely Abigale...</p>
</div>
<div class="inner-left face">
<img src="https://previews.123rf.com/images/kharlamova/kharlamova1701/kharlamova170100188/69019247-unidentified-abstract-handschrift-gekrabbel-op-blad-ge%C3%AFsoleerd-op-een-witte-achtergrond-vector-illustr.jpg" />
</div>
<div class="inner-right face">
<img src="https://placeimg.com/180/240/animals"/>
</div>
</label>
</div>
<div class="card">
<input type="checkbox" id="card-toggle-2" class="card-toggle" value="selected">
<label class="card-container" for="card-toggle-2">
<div class="front face">
<!-- <p>Get Well, Soon!</p> -->
<p>To my love, Jane Doe</p>
</div>
<div class="inner-left face">
<img src="https://previews.123rf.com/images/kharlamova/kharlamova1701/kharlamova170100188/69019247-unidentified-abstract-handschrift-gekrabbel-op-blad-ge%C3%AFsoleerd-op-een-witte-achtergrond-vector-illustr.jpg" />
</div>
<div class="inner-right face">
<img src="https://placeimg.com/180/240/animals"/>
</div>
</label>
</div>
<div class="card">
<input type="checkbox" id="card-toggle-3" class="card-toggle" value="selected">
<label class="card-container" for="card-toggle-3">
<div class="front face">
<p>To my love, Cassandra</p>
</div>
<div class="inner-left face">
<img src="https://previews.123rf.com/images/kharlamova/kharlamova1701/kharlamova170100188/69019247-unidentified-abstract-handschrift-gekrabbel-op-blad-ge%C3%AFsoleerd-op-een-witte-achtergrond-vector-illustr.jpg" />
</div>
<div class="inner-right face">
<img src="https://placeimg.com/180/240/animals"/>
</div>
</label>
</div>
<div class="card">
<input type="checkbox" id="card-toggle-4" class="card-toggle" value="selected">
<label class="card-container" for="card-toggle-4">
<div class="front face">
<p>For Monica, Erica, Jessica</p>
</div>
<div class="inner-left face">
<img src="https://previews.123rf.com/images/kharlamova/kharlamova1701/kharlamova170100188/69019247-unidentified-abstract-handschrift-gekrabbel-op-blad-ge%C3%AFsoleerd-op-een-witte-achtergrond-vector-illustr.jpg" />
</div>
<div class="inner-right face">
<img src="https://placeimg.com/180/240/animals"/>
</div>
</label>
</div>
<div class="card">
<input type="checkbox" id="card-toggle-5" class="card-toggle" value="selected">
<label class="card-container" for="card-toggle-5">
<div class="front face">
<p>Greetings, Martha</p>
</div>
<div class="inner-left face">
<img src="https://previews.123rf.com/images/kharlamova/kharlamova1701/kharlamova170100188/69019247-unidentified-abstract-handschrift-gekrabbel-op-blad-ge%C3%AFsoleerd-op-een-witte-achtergrond-vector-illustr.jpg" />
</div>
<div class="inner-right face">
<img src="https://placeimg.com/180/240/animals"/>
</div>
</label>
</div>
<div class="card">
<input type="checkbox" id="card-toggle-6" class="card-toggle" value="selected">
<label class="card-container" for="card-toggle-6">
<div class="front face">
<p>Happy Mother's Day</p>
</div>
<div class="inner-left face">
<img src="https://previews.123rf.com/images/kharlamova/kharlamova1701/kharlamova170100188/69019247-unidentified-abstract-handschrift-gekrabbel-op-blad-ge%C3%AFsoleerd-op-een-witte-achtergrond-vector-illustr.jpg" />
</div>
<div class="inner-right face">
<img src="https://placeimg.com/180/240/animals"/>
</div>
</label>
</div>
</section>
</main>
<footer role="content-info">Footer</footer>
</body>
</html>
Raw
style.css
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans",
sans-serif;
font-size: 20px;
color: #444;
text-align: center;
line-height: 1.5;
}
.s-logo {
max-width: 180px;
position: relative;
top: 17px;
}
nav,
footer {
padding: 1% 0;
background-color: #aaa;
}
header {
padding: 45px 15px;
}
section {
min-height: 200px;
padding: 30px 15px;
background-color: #bbb;
}
section:nth-child(even) {
background-color: #ddd;
}
p {
margin: 0 auto;
max-width: 650px;
}
p + p {
margin-top: 15px;
}
.cards {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.card {
padding: 9vw;
/* border: 1px solid black; */
}
.card-toggle {
display: none;
}
.card-container {
display: block;
width: 180px;
height: 240px;
box-shadow: 0 0 20px rgba(0, 0, 0, .15);
position: relative;
perspective: 700;
-webkit-perspective: 700;
margin: 30px auto;
cursor: pointer;
}
.card-container:hover .face{
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.front {
height: 240px;
width: 180px;
background: rgb(248, 245, 245);
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
z-index: 3;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.front p {
margin: 10px auto 0;
}
.inner-left {
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
z-index: 2;
}
.inner-left > img {
height: 240px;
width: 180px;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.inner-right {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
z-index: 1;
}
.card-container:hover .front,
.card-container:hover .inner-left {
-webkit-transform: rotateY(-35deg);
transform: rotateY(-35deg);
}
.card-toggle:checked + .card-container .front,
.card-toggle:checked + .card-container .inner-left {
-webkit-transform: rotateY(-165deg);
transform: rotateY(-165deg);
}
.card-toggle:checked + .card-container .inner-right {
-webkit-transform: rotateY(-15deg);
transform: rotateY(-15deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment