Skip to content

Instantly share code, notes, and snippets.

@VashonG

VashonG/index.html

Created April 30, 2024 05:41
Show Gist options
  • Save VashonG/d3a9f449fcf2f4989fff4791f9c63ab7 to your computer and use it in GitHub Desktop.
Save VashonG/d3a9f449fcf2f4989fff4791f9c63ab7 to your computer and use it in GitHub Desktop.
Download ZIP
xxeevym
Raw
index.html
<div class="card">
<div class="card-content">
<header class="card-header">
<div class="card-title">
<h2 class="card-name">HDFC BUSSINESS MONEYBACK</h2>
<div class="card-number">
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/797c696809d4608d2d0c9a5cdc663923c2eaa6ce312e81e14511963c44492937?apiKey=aa19eef6d1f1473ba394866de3aadd86&" alt="Chip icon" class="card-chip" />
<span class="card-number-text">1234 56XX XXXX 2022</span>
</div>
</div>
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/df13ebd007a50a1965c689aeeb8c8db875304b5b9ab98ed4ce12652e5b59926d?apiKey=aa19eef6d1f1473ba394866de3aadd86&" alt="Card logo" class="card-logo" />
</header>
<footer class="card-footer">
<div class="card-strip">
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/39b5825135b1f18b365eedc87bb0add772ce323768f9010c9608bc2741507e0e?apiKey=aa19eef6d1f1473ba394866de3aadd86&" alt="" class="card-strip-start" />
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/bbb47e78e38719f1293a167612fbe1e61a76bdfdbdee4ca2ba33cf37d76ad9d7?apiKey=aa19eef6d1f1473ba394866de3aadd86&" alt="" class="card-strip-end" />
</div>
<div class="card-status-container">
<button class="card-status" onclick="openModal()">
<div class="card-status-action">
<span class="card-status-text">Pay more</span>
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/ecc0b05a8f663d59e79f625e990bef18268be3db9cf01bde057680b4fec7e0ee?apiKey=aa19eef6d1f1473ba394866de3aadd86&" alt="Right arrow icon" class="card-status-icon" />
</div>
</button>
<div class="card-status-label">FULLY PAID</div>
</div>
</footer>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span>
<p>Pay more modal content here...</p>
</div>
</div>
Raw
script.js
function openModal() {
// Open modal
document.getElementById("myModal").style.display = "block";
// Add pressed style to Pay more button
document.querySelector(".card-status-action").classList.add("pressed");
}
function closeModal() {
// Close modal
document.getElementById("myModal").style.display = "none";
// Remove pressed style from Pay more button
document.querySelector(".card-status-action").classList.remove("pressed");
}
Raw
style.css
/* Add modal styles */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal content */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* Close button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.card {
max-width: 351px;
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 0;
color: #d2d2d2;
font-weight: 400;
overflow: auto;
}
.card-content {
display: flex;
flex-direction: column;
gap: 13px;
padding: 20px 20px 36px 17px;
border-radius: 5px;
background-color: #393838;
width: auto;
}
.card-header {
display: flex;
justify-content: space-between;
gap: 20px;
align-self: start;
}
.card-title {
display: flex;
flex-direction: column;
gap: 4px;
}
.card-name {
font: 13px/123% Paygeon, sans-serif;
letter-spacing: 0.2px;
gap: 0;
}
.card-number {
display: flex;
gap: 8px;
margin-top: 4px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 130%;
}
.card-chip {
width: 25px;
aspect-ratio: 3.13;
object-fit: auto;
object-position: center;
margin: auto 0;
gap: 0;
}
.card-number-text {
font-family: Paygeon, sans-serif;
gap: 0;
}
.card-logo {
width: 93px;
aspect-ratio: 5.88;
object-fit: auto;
object-position: center;
align-self: start;
gap: 0;
}
.card-footer {
display: flex;
flex-direction: row;
}
.card-strip {
display: flex;
gap: 16px;
margin: auto 0;
border-radius: 6px;
background: linear-gradient(
117deg,
#caced2 4.29%,
#fff 49.22%,
#c7cbcf 95.11%
);
box-shadow: -0.5px -0.5px 0 0 rgba(41, 38, 39, 0.44) inset,
0.5px 0.5px 0 0 #292627 inset;
}
.card-strip-start {
width: 12px;
aspect-ratio: 0.4;
object-fit: auto;
object-position: center;
gap: 0;
}
.card-strip-end {
width: 12px;
aspect-ratio: 0.6;
object-fit: auto;
object-position: center;
align-self: start;
margin-top: 10px;
gap: 0;
}
.card-status {
display: flex;
flex-direction: column;
gap: 16px;
margin-left: 110px; /* Adjust this line to move the button to the right */
padding-bottom: 13px;
max-width: 177px;
width: 158.2px;
height: 65px;
background-color: #fff;
font-weight: 400;
justify-content: center; /* Center vertically */
align-items: center; /* Center horizontally */
}
.card-status-action {
display: flex;
gap: 12px;
padding: 0px 20px;
font-size: 13px;
color: #0d0d0d;
letter-spacing: 0.2px;
line-height: 123%;
background: none;
border: none;
cursor: pointer;
}
.card-status-text {
font-family: Paygeon, sans-serif;
text-align: center;
margin-top: 20px;
}
.card-status-icon {
width: 19px;
aspect-ratio: 2.38;
margin-top: 20px;
}
.card-status-container {
position: relative;
}
.card-status-label {
position: absolute;
top: 0;
left: 0;
width: 78.2px;
padding: 4px 39px;
background-color: #06c270;
color: #d2d2d2;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font: 10px/130% Paygeon, sans-serif;
z-index: 1; /* Make sure it's above the button */
margin-left: 110px;
}
.card-status.pressed {
background-color: transparent;
border: 1px solid #ccc; /* Change to desired border color */
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2); /* Add depth effect */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment