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">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master-card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <div class="container">
            <div class="card front-face">
                <header>
                    <span class="logo">
                        <img src="master-card.jpeg" alt=" ">
                        <h5>Master Card</h5>
                    </span>
                    <img src="chip-logo.png" class="chip">
                </header>
                <div class="card-detail">
                    <div class="name-number">
                        <h6>
                            Card Number
                        </h6>
                        <h5 class="number">
                            5350 2040 5492 3007
                        </h5>
                        <h5 class="name">
                            Spanking Solutions
                        </h5>
                    </div>
                    <div class="valid-date">
                        <h6>Valid Thur</h6>
                        <h5>05/28</h5>
                    </div>
                </div>
            </div>
            <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">
                <i>005</i>
            </div>
            <h5>
                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?
            </h5>
            </div>
        </div>
    </section>
</body>
</html>

 

Save this code with .HTML extension.

Explanation

  • 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;
}

body
{
overflow: hidden;
}

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

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

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

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

.container:hover
{
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;
}

h5
{
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;
}

h6
{
font-size: 16px;
font-weight: 400;
}

h5.number
{
font-size: 18px;
letter-spacing: 1px;
}

h5.name
{
margin-top: 20px;
}

.card.back-face
{
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,
#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

Explanation

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.

.container:

  • 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 *