Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Credit Card" project using HTML & CSS.
Preview
In the above video, you’ve seen the preview of the "Credit Card" project and I hope you are now able to create this type of project. If not, I have provided all the HTML & CSS code below.
Credit Card [Source Code]
To get the following HTML & CSS code for the Credit Card project. You need to create two files one is an HTML file, and the second one is a CSS file. After completing these two files, you can copy-paste the codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code and a .css extension for CSS code.
You can also download all source code files from the given download button.
HTML
<!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">
<title>Credit Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="top">
<div class="logo">
<img src="images/logo.png" alt="">
<p>Master card</p>
</div>
<div class="chip">
<img src="images/chip.png" alt="">
</div>
</div>
<div class="bottom">
<div class="number">
<h3>Card Number</h3>
<p>1234 5678 9012 3456</p>
</div>
<div class="nameDate">
<p class="name">Developer pani</p>
<div class="date">
<p class="valid">Valid Thru</p>
<p>18/24</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
font-weight: 400;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
}
.container {
background: url("images/bg.png");
background-size: cover;
width: 430px;
padding: 30px;
border-radius: 40px;
}
.top {
display: flex;
justify-content: space-between;
}
.top .logo {
display: flex;
align-items: center;
gap: 15px;
}
.top .logo img {
width: 55px;
}
.top .logo p {
font-size: 16px;
}
.top .chip img {
width: 70px;
}
.bottom {
display: flex;
flex-direction: column;
}
.bottom .number {
margin: 20px 0;
}
.bottom .number h3 {
font-size: 14px;
}
.bottom .number p {
font-size: 24px;
letter-spacing: 3px;
word-spacing: 3px;
}
.bottom .nameDate {
display: flex;
justify-content: space-between;
align-items: center;
}
.bottom .nameDate .name {
align-self: flex-end;
letter-spacing: 1px;
}
.bottom .nameDate .date .valid {
font-size: 12px;
}
Generating Download Link...