add Card-Flip-on-Hold project

pulkit-30 · Oct 5, 2021 · fa7b37d · fa7b37d
1 parent c9b3ad4
commit fa7b37d
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 0 deletions.
diff --git a/Card Flip on Hold/card-back.png b/Card Flip on Hold/card-back.png
diff --git a/Card Flip on Hold/card-front.png b/Card Flip on Hold/card-front.png
diff --git a/Card Flip on Hold/index.html b/Card Flip on Hold/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <link rel="stylesheet" href="./style.css" />
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Card Flip</title>
+</head>
+
+<body>
+    <div class="content-box">
+        <div class="card-section">
+            <div class="card-container">
+                <div class="card-content">
+                    <div class="card-front">
+                        <div class="card-title">
+                            This is a <span>card</span>
+                            <span>Hold to flip</span>
+                        </div>
+                    </div>
+                    <div class="card-back">
+                        <div class="card-info">
+                            <div>
+                                <span>This is the backside of the card</span>
+                            </div>
+                            <div>
+                                <span>Write something here</span>
+                                <div>I just did.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+</body>
+<footer>
+    Credit: @gabrielgomeso
+    Date: 05/10/2021
+</footer>
+</html>
diff --git a/Card Flip on Hold/readme.md b/Card Flip on Hold/readme.md
@@ -0,0 +1,3 @@
+# Card Flip on Hold
+<img src="./card-front.png"/>
+<img src="./card-back.png"/>
diff --git a/Card Flip on Hold/style.css 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
@@ -51,6 +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                          |
+
+
 ---
 
 ![Project Intro Gif](./Gif.gif)