Imagine at your disposal, you only have a picture of the Master Card Logo and another picture of the ATM card chip, you are tasked to create a visually appealing ATM card from the two separate pictures. You are about to find out how powerful CSS and HTML are. The Tech space is ever-changing but understanding these two languages is crucial for any aspiring Front-End developer.
This article will guide you on how to make the front and back sides of an ATM card from scratch. The card will flip to the back or front sides when hovered over. We will build the structure of the card using HTML, and then make our ATM card more real and appealing using CSS. This article is meant for beginners and experts in web development.
Tools we Need
Vs Code Editor
A Picture of Master Card Logo:
A picture of an ATM card chip:
Preview of the Final output of the ATM Card
We will create the below-flipping ATM card, you will notice that once you move your cursor over the front or back sides of the ATM, the image responds by flipping on either side. Feel free to change the content of the card as the information displayed on the card is my own
Creating The ATM Card from Scratch
We will go ahead and create an HTML file and a CSS file then link them via the external style.
Follow the below steps;
Visit Google and search for “Master card logo image”. Select and save the image on your computer by either downloading it or snipping it.
While on Google, search for “ATM card chip image”. Select the chip image of your choice, snip and save it on your computer.
Create a folder anywhere on your computer, name it whatever you want and copy the two images here. .
Open Vs Code Editor, go to file select open folder then select the folder you just created.
While on the Vs Code Editor, create a new file and name it index.html. The file name must have the extension .html
Create a new file and name it style.css. The file name must have the extension .css.
You should have something like the snip below, I named my folder “Atm”.
HTML Syntax
Open index.html and enter the below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIRTUAL CARD</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="Card">
<div class="front-face">
<header>
<span class="logo">
<img src="Chip Image.PNG">
<h5>Master Card</h5>
</span>
<img src="Mastercard Logo.png" class="mscard">
</header>
<div class="Card-details">
<div class="name-number">
<h6>Card Number</h6>
<h5 class="Number">2547 0080 9861 0000</h5>
<h5 class="name">George Kingi</h5>
</div>
<div class="valid-date">
<h6>Valid Thru</h6>
<h5>25/03</h5>
</div>
</div>
</div>
<div class="back-face">
<h6>For customer service call +2547 0080 9861 or email at kingsgee@gmail.com </h6>
<span class="magnetic-strip"></span>
<div class="signature"><i>208</i> </div>
<h5><p>By using this card the holder agrees to the terms and conditions under
which it was issued</p><br><p>This card is issued by and remains the property of Master card Bank Plc, if found please return it to any bank</p></h5>
</div>
</div>
</section>
</body>
</html>
Output:
With the above HTML syntax, the structure of our ATM Card is set. The next step is to introduce the powerful CSS to place each of the above information into its rightful place.
Application and Implementation of different designs and styles of the ATM Card.
To understand the CSS code better, you will be required to check the comments on the code which offer ease of understanding.
The CSS Syntax
<!--Resizing the page and font type-->
*{margin: 0%; padding: 0 ;
box-sizing: border-box;
font-family: sans-serif;
}
<!--Adding different properties on section area-->
section{
min-height: 100vh;
width: 100%; position: relative;
background-color: rgb(231, 129, 5) ;
display: flex;
align-items: center;
justify-content: center;
color: bisque;
}
.Card{
height: 225px;
width: 350px;
position: relative;
z-index: 100; transition: 0.6s;
transform-style: preserve-3d;
}
<!--Adding hover effect on the card-->
.Card:hover {
transform: rotateY(180deg);
}
.Card .front-face,.back-face{
position: absolute;
background-color: rgba(23, 0, 0, 0.1);
height: 100%; width: 100%;
border-radius: 25px;
backdrop-filter: blur(25px);
border: 1px solid #4e1528;
padding: 25px;
backface-visibility: hidden;
}
<!--Adding Flip on the back-face of card-->
.back-face{
border: none;
padding: 15px 25px 25px;
transform: rotateY(180deg);
}
.front-face .logo img{
width: 50px;
margin-right: 100px;
}
h5{
font-size: 16px;
font-weight: 400;
}
.front-face .mscard{
width: 50px;
}
.front-face header, .front-face .logo {
display: flex;
align-items: center;
}
.front-face header {
justify-content: space-between;
}
.front-face .Card-details{
margin-top: 40px;
display: flex; align-items: flex-end;
justify-content: space-between;
}
h6{
font-size:10px;
font-weight: 400;
}
h5.Number{
font-size: 18px;
letter-spacing: 1px;
}
h5.name{
margin-top: 20px;
}
.back-face h6{
font-size: 10px;
}
<!--Adding different properties for the back of card-->
.Card .back-face .magnetic-strip{
position: absolute;
height: 40px;
background-color: black;
width: 100%;
top: 50px; left: 0;
}
.Card .back-face .signature{
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 80px;
height: 40px;
width: 85%;
border-radius: 6px;
background: repeating-linear-gradient(#fff, #fff 3px, #efefef 0, #efefef 9px);
}
.signature i{
color: black;
font-size: 12px;
margin-right: -30px;
background-color: white;
padding: 4px 6px;
border-radius: 4px;
z-index: -1;
}
.Card .back-face h5{
font-size: 9px;
margin-top: 10px;
}
Output:
Conclusion
In summary, CSS is so powerful that it can do almost anything, we just created an ATM card, surely CSS can do anything, and developers are encouraged to be more creative to cultivate this knowledge.
The same knowledge can be applied in the creation of wonderfully designed websites including; Portfolio websites, E-commerce websites, Personal Websites, Business websites, etc.