Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Improved Credit Card #786

Closed
wants to merge 6 commits into from
Closed

Added Improved Credit Card #786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2ddeece
Added Files
hariket-sheth1 May 25, 2022
6b4a869
Added Files
hariket-sheth1 May 25, 2022
0dcfb02
Removed unnecessary files
hariket-sheth1 May 25, 2022
4ac0fe0
Added Files
hariket-sheth1 May 25, 2022
9f7e5e3
Removed Files
hariket-sheth1 May 25, 2022
19e9991
Improved
hariket-sheth1 May 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Improved Credit Card/chip.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions Improved Credit Card/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">


<!-- Mirrored from amazing-css-effects.netlify.app/credit card ui/ by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 25 May 2022 16:42:24 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
hariketsheth marked this conversation as resolved.
Show resolved Hide resolved
<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>Credit card</title>
<link rel="stylesheet" href="style.css">

</head>

<body>
<section>
<div class="card">
<div class="face front">
<h3 class="debit">Debit Card</h3>
<h3 class="bank">Bank Name</h3>
<img src="chip.png" class="chip">
<h3 class="number">0012 3124 5546</h3>
<h5 class="valid"><span>valid<br>thru</span><span>10/23</span></h5>
<h5 class="cardHolder">DevIncept</h5>
</div>
<div class="face back">
<div class="blackbar"></div>
<div class="ccvtext">
<h5>Authorized Signatire-not valid unless signed</h5>
<div class="whitebar"></div>
<div class="cvv">456</div>
</div>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores sunt quae placeat, libero animi doloremque, temporibus commodi consequuntur nemo modi rem dolor eius obcaecati explicabo ea repellat enim, aliquid qui ad expedita velit? Nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt nihil ea iure cupiditate magnam, explicabo ipsa maiores repellendus voluptas vitae tempora blanditiis libero? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cum magni consectetur dolore, odio saepe culpa esse repellat alias, excepturi iure blanditiis nam.
</p>
</div>
</div>
</section>
</body>


<!-- Mirrored from amazing-css-effects.netlify.app/credit card ui/ by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 25 May 2022 16:42:27 GMT -->
</html>
208 changes: 208 additions & 0 deletions Improved Credit Card/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;1,200;1,400&amp;display=swap');

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&amp;display=swap');
*{
margin :0;
padding :0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
overflow: hidden;

}
section{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1c1c25;
}
section::before{
content: '';
position: absolute;
bottom: -40%;
left: 40%;
width: 600px;
height: 600px;
background:linear-gradient(#f00 ,#f0f);
border-radius: 50%;
}
.card{
position: relative;
width: 508px;
height: 314px;
transform-style: preserve-3d;
perspective: 500px;

}
.card .face{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
border-radius: 15px;
background: rgba(255 ,255, 255, 0.05);
backdrop-filter: blur(10px);
transform-style: preserve-3d;
transition: 1s;
backface-visibility: hidden;
}
.card:hover .face.front{
transform: rotateY(180deg);
}
.card .face.back{
transform: rotateY(180deg);
}
.card:hover .face.back{
transform: rotateY(360deg);
}
.card .face.front::before{
content: '';
position: absolute;
bottom:40px;
right:40px;
width:60px;
height: 60px;
background:#fff;
border-radius:50%;
opacity: 0.5;
}
.card .face.front::after{
content: '';
position: absolute;
bottom:40px;
right:80px;
width:60px;
height: 60px;
background:#fff;
border-radius: 50%;
opacity: 0.7;
}
.card .face.front .debit{
position: absolute;
left: 40px;
top: 30px;
color:#fff;
font-weight: 500;
}
.card .face.front .bank{
position: absolute;
right: 40px;
top: 25px;
color: #fff;
font-weight: 500;
font-style: italic;
font-size: 24px;
}

.card .face.front .chip{
position: absolute;
top: 65px;
left: 50px;
max-width: 164px;
}

.card .face.front .number{
position: absolute;
bottom: 135px;
left: 40px;
color: #fff;
font-weight: 500;
letter-spacing: 6px;
font-size: 18px;
text-shadow: 0 2px 1px #0005;
font-family: 'orbitron',sans-serif;
}
.card .face.front .valid{
position: absolute;
bottom: 80px;
left: 40px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-weight:300;
line-height: 1em;
font-size: 18px;
text-align: right;
}
.card .face.front .valid span:last-child{
margin-left: 20px;
font-weight:400;
letter-spacing: 2px;
font-size: 16px;
}

.card .face.front .cardHolder{
position: absolute;
bottom: 40px;
left: 40px;
color: #fff;
font-weight: 300;
font-size: 16px;
letter-spacing: 2px;
}
.card .face.back .blackbar{
position: absolute;
top: 40px;
width: 508px;
height: 60px;
background: #000;

}

.card .face.back .ccvtext{
position: absolute;
top: 120px;
left: 30px;
}
.card .face.back .ccvtext h5{
color: #fff;
font-weight: 400;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
}
.card .face.back .ccvtext .whitebar{
position:relative;
width: 400px;
height: 40px;
background: #fff;
margin-top: 5px;
}

.card .face.back .ccvtext .cvv{
position:relative;
top: -35px;
left: 395px;
background: rgb(158, 147, 147);
color: #111;
width: 50px;
height: 30px;
font-weight: 600;
letter-spacing: 3px;
display: flex;
justify-content: center;
align-items: center;
}
.card .face.back .text{
position: absolute;
bottom: 30px;
left: 30px;
color: #fff;
font-size: 10px;
font-weight: 300;
line-height: 1.4em;
}


@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;

}
}