Merge branch 'master' into card-flip

pulkit-30 · Oct 7, 2021 · c8cc59a · c8cc59a
2 parents fa7b37d + b146d93
commit c8cc59a
Show file tree

Hide file tree

Showing 17 changed files with 654 additions and 19 deletions.
diff --git a/Credit Cards/README.md b/Credit Cards/README.md
@@ -0,0 +1,6 @@
+# Credit Cards
+<img src="./images/screenshot.png">
+
+Click below to see the magic
+
+[Expelliarmus✨][https://iqbalutomo/github.io/credit-cards]
diff --git a/Credit Cards/images/chip.png b/Credit Cards/images/chip.png
diff --git a/Credit Cards/images/screenshot.png b/Credit Cards/images/screenshot.png
diff --git a/Credit Cards/images/symbols.png b/Credit Cards/images/symbols.png
diff --git a/Credit Cards/images/visa.png b/Credit Cards/images/visa.png
diff --git a/Credit Cards/images/world-map-1.svg b/Credit Cards/images/world-map-1.svg
diff --git a/Credit Cards/images/world-map-2.svg b/Credit Cards/images/world-map-2.svg
diff --git a/Credit Cards/images/world-map-3.svg b/Credit Cards/images/world-map-3.svg
diff --git a/Credit Cards/images/world-map-4.svg b/Credit Cards/images/world-map-4.svg
diff --git a/Credit Cards/images/world-map-5.svg b/Credit Cards/images/world-map-5.svg
diff --git a/Credit Cards/index.html b/Credit Cards/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Credit Cards</title>
+</head>
+<body>
+    <div class="container">
+        <div class="card card-1">
+            <p class="bank">bank</p>
+            <p class="type-card">debit card</p>
+            <img src="./images/chip.png" class="chip">
+            <img src="./images/symbols.png" class="visa">
+            <p class="number">1234 5678 9109 8765</p>
+        </div>
+        <div class="card card-2">
+            <p class="bank">bank</p>
+            <p class="type-card">debit card</p>
+            <img src="./images/chip.png" class="chip">
+            <img src="./images/symbols.png" class="visa">
+            <p class="number">0101 0011 1010 1100</p>
+        </div>
+        <div class="card card-3">
+            <p class="bank">bank</p>
+            <p class="type-card">debit card</p>
+            <img src="./images/chip.png" class="chip">
+            <img src="./images/symbols.png" class="visa">
+            <p class="number">0000 1111 0101 1010</p>
+        </div>
+        <div class="card card-4">
+            <p class="bank">bank</p>
+            <p class="type-card">debit card</p>
+            <img src="./images/chip.png" class="chip">
+            <img src="./images/symbols.png" class="visa">
+            <p class="number">0987 6543 2101 2345</p>
+        </div>
+        <div class="card card-5">
+            <p class="bank">bank</p>
+            <p class="type-card">debit card</p>
+            <img src="./images/chip.png" class="chip">
+            <img src="./images/symbols.png" class="visa">
+            <p class="number">0000 1111 0000 1111</p>
+        </div>
+    </div>
+    <footer>
+        <p class="owner">Credit:  <a href="https://github.com/iqbalutomo">iqbalutomo</a> <br> Date: 6 October 2021</p>
+    </footer>
+</body>
+</html>
diff --git a/Credit Cards/style.css b/Credit Cards/style.css
@@ -0,0 +1,136 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'DM Sans', sans-serif;
+}
+
+.container {
+    margin: 100px auto;
+    position: relative;
+}
+
+.card {
+    display: grid;
+    grid-template-areas: 
+        "bank type-card"
+        "chip icon-card"
+        "number number";
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    width: 220px;
+    height: 150px;
+    margin: 10px;
+    border-radius: 10px;
+    transform: rotate(35deg);
+    margin: 10px auto;
+    position: absolute;
+    right: 0;
+    left: 0;
+    transition: .5s;
+}
+
+.card:hover {
+    transform: rotate(25deg) translate(-30px, 60px);
+    cursor: pointer;
+}
+
+.bank {
+    grid-area: bank;
+    color: white;
+    text-transform: uppercase;
+    font-weight: bold;
+    margin: 10px 0 0 15px
+}
+
+.type-card {
+    grid-area: type-card;
+    color: white;
+    text-align: right;
+    margin: 10px 15px 0 0;
+}
+
+img.chip {
+    grid-area: chip;
+    align-self: end;
+    width: 30px;
+    margin: 10px 0 10px 15px;
+}
+
+img.visa {
+    grid-area: icon-card;
+    align-self: end;
+    width: 50px;
+    margin: 0 0 0 75px;
+}
+
+.number {
+    grid-area: number;
+    color: white;
+    letter-spacing: 2px;
+    margin-bottom: 15px;
+    margin-left: 15px;
+}
+
+.card-1 {
+    background-image: url(./images/world-map-1.svg);
+    z-index: 5;
+    background-color: #F39C12;
+    box-shadow: 0 0 20px 5px rgba(214, 137, 16, .5), 0 1px 0 1px #D68910;
+}
+
+.card-2 {
+    background-image: url(./images/world-map-2.svg);
+    top: 80px;
+    z-index: 4;
+    background-color: #2ECC71;
+    box-shadow: 0 0 20px 5px rgba(139, 218, 171, 0.5), 0 1px 0 1px #28B463;
+}
+
+.card-3 {
+    background-image: url(./images/world-map-3.svg);
+    top: 160px;
+    z-index: 3;
+    background-color: #16A085;
+    box-shadow: 0 0 20px 5px rgba(19, 141, 117, .5), 0 1px 0 1px #138D75;
+}
+
+.card-4 {
+    background-image: url(./images/world-map-4.svg);
+    top: 240px;
+    z-index: 2;
+    background-color: #3498DB;
+    box-shadow: 0 0 20px 5px rgba(46, 134, 193, .5), 0 1px 0 1px #2E86C1;
+}
+
+.card-5 {
+    background-image: url(./images/world-map-5.svg);
+    top: 320px;
+    z-index: 1;
+    background-color: #8E44AD;
+    box-shadow: 0 0 20px 5px rgba(125, 60, 152, .5), 0 1px 0 1px #7D3C98;
+}
+
+footer {
+    position: relative;
+    height: 110vh;
+    color: white;
+}
+
+.owner {
+    position: absolute;
+    background-color: #3498DB;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+}
+
+.owner a {
+    text-decoration: none;
+    color: wheat;
+}
diff --git a/HamburgerMenu/Style.css b/HamburgerMenu/Style.css
@@ -1,17 +1,17 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Trispace:wght@300&display=swap');
 
 * {
   margin: 0;
   padding: 0;
 }
 body {
-  font-family: "Roboto", sans-serif;
+  font-family: "Trispace", sans-serif;
   font-size: 5vw;
-  color: white;
+  color: #DBDBEB;
   height: 100vh;
   width: 100%;
   overflow: hidden;
-  background-color: #293b5f;
+  background-color: #080957;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
@@ -24,15 +24,21 @@ body {
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  background-color: rgba(0, 0, 0, 0.377);
+  background-color: #7577CD ;
   width: 100px;
   height: 100px;
   position: relative;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
 }
 .line {
+
   width: 60px;
-  height: 2px;
-  background-color: rgb(255, 255, 255);
+  height: 5px;
+  background-color: #FF6D01;
   margin: 8px;
   transition: 0.5s;
   -webkit-transition: 0.5s;

diff --git a/Mode Toggler/Script.js b/Mode Toggler/Script.js
@@ -4,3 +4,4 @@ toggler.addEventListener("click", () => {
   document.querySelector("body").classList.toggle("dark-mode");
   document.querySelector(".btn").classList.toggle("btn-dark-mode");
 });
+
diff --git a/Mode Toggler/Style.css b/Mode Toggler/Style.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Graduate&display=swap');
 * {
   margin: 0;
   padding: 0;
@@ -18,6 +19,15 @@ body {
   -ms-transition: 0.5s;
   -o-transition: 0.5s;
 }
+
+h1{
+  font-size: 50px;
+  font-family: 'Graduate', cursive;
+}
+
+h2{
+  font-size: 35px;
+}
 .toggler {
   position: relative;
   display: flex;

diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@
 | 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/                              |
 
 ---
 

diff --git a/Testimonial/Style.css b/Testimonial/Style.css
@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Carattere&display=swap');
+
 * {
   margin: 0;
   padding: 0;
@@ -6,34 +9,36 @@ body {
   width: 100%;
   height: 100vh;
   overflow: hidden;
-  background-color: #2c2e43;
+  background-color: #343F56;
   display: flex;
   /* justify-content: center; */
-  color: white;
+  color: #FB9300;
   align-items: center;
   flex-direction: column;
   justify-content: space-evenly;
   font-size: 15px;
   font-family: sans-serif;
 }
 h1 {
+  font-family: 'Cookie', cursive;
+  font-size: 100px;
   font-weight: lighter;
   position: absolute;
   top: 30px;
 }
 .box {
   position: relative;
-  box-shadow: 0px 0px 5px rgb(135, 197, 255);
+  box-shadow: 0px 0px 5px #610094;
   padding: 20px;
   color: black;
   width: 50vw;
   height: 200px;
-  background-color: #96baff;
-  border-radius: 20px;
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  -ms-border-radius: 20px;
-  -o-border-radius: 20px;
+  background-color: #F54748;
+  border-radius: 30px;
+  -webkit-border-radius: 30px;
+  -moz-border-radius: 30px;
+  -ms-border-radius: 30px;
+  -o-border-radius: 30px;
   transition: 0.3s;
   -webkit-transition: 0.3s;
   -moz-transition: 0.3s;
@@ -80,6 +85,9 @@ h1 {
   -o-border-radius: 50px;
 }
 .box .quote {
+  color: #F5E6CA;
+  font-family: 'Carattere', cursive;
+  font-size: 23px;
   width: 80%;
   margin: 30px auto;
 }
@@ -90,11 +98,12 @@ h1 {
 }
 .name {
   font-size: 25px;
-  color: rgba(0, 0, 0, 0.493);
+  color: #ffe7b9;
 }
 span {
+  color: #F5E6CA;
   font-size: 50px;
-  color: rgba(46, 46, 46, 0.692);
+
 }
 .box__bottom {
   position: absolute;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,4 @@ toggler.addEventListener("click", () => {
		document.querySelector("body").classList.toggle("dark-mode");
		document.querySelector(".btn").classList.toggle("btn-dark-mode");
		});