Credit Cards

Hi my name is iqbal, this is a credit card slide made using only html and css, hopefully it will be useful for others
pulkit-30 · Oct 5, 2021 · f9d582e · f9d582e
1 parent c9b3ad4
commit f9d582e
Show file tree

Hide file tree

Showing 12 changed files with 609 additions and 0 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;
+}