CSS Flashcard
How do I make an css flashcard?
A flashcard made without javascript using input, label, and some CSS.. What is a css flashcard? How do you make a css flashcard? This script and codes were developed by Lauren on 18 September 2022, Sunday.
CSS Flashcard - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Flashcard</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="flashcard"> <input id="flashcard-1" type="checkbox" /> <label for="flashcard-1"> <section class="front"> Front of the flashcard! </section> <section class="back"> Back of the flashcard! </section> </label>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
CSS Flashcard - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Oswald);
* { margin: 0px; padding: 0px; box-sizing: border-box;
}
html,
body { background: #333; border: 0px; width: 100%; height: 100%;
}
html { padding: 50px; display: table;
}
body { display: table-cell; vertical-align: middle;
}
article.flashcard { margin: 0px auto; border: 1px rgba(255, 255, 255, 0.03) solid; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); width: 100%; max-width: 600px; height: 100%; max-height: 400px;
}
article.flashcard input[type=checkbox] { display: none;
}
article.flashcard input[type=checkbox]:checked ~ label section.front { height: 0%;
}
article.flashcard input[type=checkbox]:checked ~ label section.back { height: 100%;
}
article.flashcard label { display: block; width: 100%; height: 100%;
}
article.flashcard section { display: block; font: 30px 'Oswald', sans-serif; text-align: center; line-height: 400px; width: 100%; -webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; overflow: hidden;
}
article.flashcard section.front { color: #BA1F53; background: #DDD; height: 100%;
}
article.flashcard section.back { color: #DDD; background: #C85073; height: 0%;
}
| Developer | Lauren |
| Username | phantomesse |
| Uploaded | September 18, 2022 |
| Rating | 3 |
| Size | 2,600 Kb |
| Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
| Name | Size |
| Mondrian Generator | 4,791 Kb |
| Dissolving Block Art | 7,893 Kb |
| Hover Map | 1,974 Kb |
| Messages Inbox | 2,417 Kb |
| Dropdown Menu | 4,216 Kb |
| Deck of Cards | 2,856 Kb |
| Custom Dropdown Menu | 2,236 Kb |
| Selecting Products on a Grid | 3,068 Kb |
| Thumbnail Example | 2,687 Kb |
| Hover Buttons | 2,311 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| Automatic scroll | Skeurentjes | 4,042 Kb |
| Haml Calendar | Katydecorah | 5,643 Kb |
| Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
| Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
| Yuliya v krylova | Rafszul | 37,351 Kb |
| A Pen by Anoop | Anoopjohn | 330,760 Kb |
| Twitch.tv API | Ryzokuken | 2,618 Kb |
| Import shader in three.js | Khangeldy | 2,636 Kb |
| Out of the blue | Giaco | 2,537 Kb |
| Navcube | Wbarlow | 4,775 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!