a flipping master card layout by sparkify solutions

How to create a Master Card with HTML and CSS.

How to create a Master card with HTML and CSS.

  • Use HTML file to create a structure of a web page.
  • Use CSS file to design Master card.

Source code of HTML file.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
        <div class="container">
            <div class="card front-face">
                    <span class="logo">
                        <img src="master-card.jpeg" alt=" ">
                        <h5>Master Card</h5>
                    <img src="chip-logo.png" class="chip">
                <div class="card-detail">
                    <div class="name-number">
                            Card Number
                        <h5 class="number">
                            5350 2040 5492 3007
                        <h5 class="name">
                            Spanking Solutions
                    <div class="valid-date">
                        <h6>Valid Thur</h6>
            <div class="card back-face">
              <h6>For customer service call +92 319 2171807
                or email at admin@spankingsolutions.com</h6>
                <span class="magnetic-strip"></span>
            <div class="signature">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 Quia sed sit excepturi cum autem provident iste laborum
                 vitae dolor labore nemo ipsa eius, placeat adipisci
                 explicabo voluptas? Veritatis, deserunt repudiandae?


Save this code with .HTML extension.


  • Body: This section contains the visual content of the page.
  • <section> Create an entry for the credit card system.
  • <div class=”container”> Binds the card structure.
    Two <div> elements inserted into the container represent the front and back of the card:
The front faces include:
  • <header> containing the logo image (master-card.jpeg) and company name (“Master Card”).
  • <img src=”chip-logo.png” class=”chip”> Displays the chip logo.
  • <div class=”card-detail”> Contains card details:
  • <div class=”name-number”> Card number, with cardholder name (“Spanking Solutions”).
  • <div class=”valid-date”> Specifies the expiration date (“05/28”).
Back face includes:
  • Customer service contact information (phone number and email).
  • Magnetic strip imaging (<span class=”magnetic-strip”></span>).
  • Signature field (<div class=”signature”>).
  • Placeholder text that imitates security information (Lorem ipsum…).

Source code of CSS file.

margin: 0;
padding: 0;
box-sizing: border-box;

overflow: hidden;

position: relative;
min-height: 100vh;
width: 100%;
background: #0e030f;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
perspective: 1000px;

content: '';
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
transform: translate(-150px,-100px);
background: linear-gradient(90deg,purple,white);

content: '';
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
transform: translate(150px,100px);
background: linear-gradient(0deg,purple,white);

position: relative;
height: 230px;
width: 370px;
z-index: 100;
transition: 0.6s;
transform-style: preserve-3d;

transform: rotateY(180deg);

.container .card
position: absolute;
height: 100%;
width: 100%;
padding: 10px;
border-radius: 25px;
backdrop-filter: blur(35px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 10px 40px 55px rgb(4, 27, 129);
border: 1px solid rgba(255, 255, 255, 0.1);
backface-visibility: hidden;

.front-face header,
.front-face .logo
display: flex;
align-items: center;

.front-face header
justify-content: space-between;

.container .front-face .logo img
width: 70px;
height: 50px;
margin-right: 10px;

font-size: 15px;
font-weight: 600;

.front-face .chip
width: 50px;

.front-face .card-detail
margin-top: 40px;
display: flex;
align-items: flex-end;
justify-content: space-between;

font-size: 16px;
font-weight: 400;

font-size: 18px;
letter-spacing: 1px;

margin-top: 20px;

border: none;
padding: 12px 22px 22px 22px;
transform: rotateY(180deg);

.card.back-face h6
font-size: 9px;

.card.back-face .magnetic-strip
position: absolute;
top: 40px;
left: 0;
height: 45px;
width: 100%;
background: #000000;

.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 3px,
#d8d9d9 0px,
#d8d9d9 9px

.signature i
color: #000000;
font-size: 15px;
padding: 5px 7px;
border-radius: 4px;
background: #ffffff;
margin-right: -32px;
z-index: -1;

.card.back-face h5{
font-size: 10px;
margin-top: 15px;

Save it as style.css


Global Style:
  • Resetting margins: * The selector ensures that default browser margins or any padding will not interfere with the layout.
  • Overflow body : Body { overflow : hidden ; } Hide the browser scrollbar for a clean full screen experience.
Section Style:
  • The position is relative; Allow children’s items (cards) to be placed completely.
  • Minimum-high: 100vh; width: 100%; It fills the viewport.
  • background: #0e030f; Sets back the dark purple.
  • Performance: Flex; align-items: center; justify – content : center ; Place the center of the card vertically and horizontally.
  • Color: #ffffff; Sets the white text color.
  • perspective: 1000px; Create a 3D view for rotating cards.
  • Category: Pseudoelements:
    Two circular layers (side::before side::after) add depth and subtle movement to the background.


  • The position is relative; The card face has complete installation space.
  • height: 230px; width: 370px; Define the shape of the card.
  • z-index: 100; Make sure the card sits on top of the back cabinet.
  • Resolution: 0.6s; It allows you to flip the card smoothly on hover.
  • change-path: protected-3d; Holds 3D attributes while rotating.
  • .container : hover { transform : rotate Y ( 180deg ); } The card floats on hover.

.container .card

Shared resources:

  • The position is absolute; Add any solution to the container.
  • Height: 100%; width: 100%; Cover the application area.
  • offset: 10px; The inside of the card adds some contrast.
  • border-width: 25px; rounds the corners of the card.
  • background-filter: blurred (35px); It makes the background a bit invisible.
  • background: rgba(255, 255, 255, 0.1); He gently adds a white cover.
  • box-shadow: 10px 40px 55px rgb(4, 27, 129); It creates a realistic shadow effect.
  • border: 1px rgba solid(255, 255, 255, 0.1); It adds a subtle border.
  • Backface-visibility: hidden; Hides the back face when the card is turned over.

Front face:

  • .front Face Header and .logo: Uses display: flex; align-objects: center; for logo format.
  • .front-face Header justify-content : space-between; positions brand and chip.
  • .container .front-face .logo img defines emblem image length and margin.
  • H5 styles are applied to card number, call, and expiration date.
    Chip photo size is about with .Front-face .Chip.
  • .Card-detail makes use of flexbox to horizontally align card details.
  • H6 styles are carried out to labels like “Card Number” and “Valid Thru”.
  • H5.number
    Applies letter spacing for the cardboard wide variety.
  • H5.Name
    Adds margin underneath the cardholder call.

Back Face:

  • border: none; gets rid of the stable border.
  • Padding: 12px 22px 22px 22px; adjusts internal padding.
  • Transform: rotateY(180deg); continues the lower back face initially flipped.
  • H6 styles are adjusted for smaller font size in contact information.
  • .Magnetic-strip Styles the black magnetic strip bar.
  • .Signature Makes use of flexbox for format and defines dimensions.
  • Background: repeating-linear-gradient(…) creates a textured signature location.
  • .Signature i patterns the small signature placeholder.
  • H5 patterns are adjusted for font.

Thanks for reading this article.

How to create a master card with HTML and CSS?

By Sparkify Solutions.

Leave a Comment

Your email address will not be published. Required fields are marked *