+
+
+
+
\ No newline at end of file
diff --git a/Card Flip on Hold/readme.md b/Card Flip on Hold/readme.md
new file mode 100644
index 0000000..ef00c8d
--- /dev/null
+++ b/Card Flip on Hold/readme.md
@@ -0,0 +1,3 @@
+# Card Flip on Hold
+
+
+
+
+
+
+
+ This is a card
+ Hold to flip
+
+
+
+
+
+
+ This is the backside of the card
+
+
+ Write something here
+
+ I just did.
+
+ 
+
diff --git a/Card Flip on Hold/style.css b/Card Flip on Hold/style.css
new file mode 100644
index 0000000..d08c219
--- /dev/null
+++ b/Card Flip on Hold/style.css
@@ -0,0 +1,107 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Roboto Mono';
+}
+
+body{
+ width: 100vw;
+ height: 100vh;
+ margin: auto;
+ color: #eee;
+ background: #222;
+
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ justify-content: center;
+}
+ /* width */
+ ::-webkit-scrollbar {
+ width: 1px;
+ margin: -10px;
+ }
+
+ /* Track */
+ ::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px grey;
+ border-radius: 1px;
+ }
+
+ /* Handle */
+ ::-webkit-scrollbar-thumb {
+ background: red;
+ border-radius: 1px;
+ }
+
+ /* Handle on hover */
+ ::-webkit-scrollbar-thumb:hover {
+ background: #b30000;
+ }
+
+ .content-box{
+ width: 700px;
+ margin: auto;
+ }
+
+ .card-section{
+ display: flex;
+ }
+
+ .card-container{
+ position: relative;
+ width: 250px;
+ height: 320px;
+ margin-right: 15px;
+ }
+
+ .card-content{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ transform-style: preserve-3d;
+ transition: all 0.5s ease;
+ }
+
+ .card-content:active{
+ transform: rotateY(180deg);
+ }
+
+ .card-front,
+ .card-back{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ border-radius: 20px;
+
+ background-color: #313131;
+ display: flex;
+ flex-direction: column;
+
+ box-shadow: 1px 1px 15px 2px black;
+ }
+
+ .card-front{
+
+ text-align: center;
+ justify-content: space-evenly;
+ }
+
+ .card-title{
+ padding: 20px;
+ font-weight: 600;
+ }
+
+
+ .card-back{
+ transform: rotateY(180deg);
+ }
+
+ .card-info{
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ grid-gap: 20px;
+ }
diff --git a/README.md b/README.md
index 7331758..c07a64a 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,9 @@
| Comets Animation | https://jonathanallisson.github.io/Comets/ |
| Glowing Dot Animation | https://lavishbansal17.github.io/Glowing-Dot-Animation/ |
| Neumorphism Gradient Loader | https://lavishbansal17.github.io/Neumorphism-Gradient-Loader/ |
+| Card Flip on Hold | https://gabrielgomeso.github.io/card_flip.html |
| Credit Cards | https://iqbalutomo.github.io/credit-cards/ |
+
---
