Flipping Master Card With HTML & CSS
A card is a segment that can be square or rectangular and contains some indispensable data about a specific. Cards can be in different kinds like profile cards, item cards,s and the least goes on.
Investigate the given picture of our task Flipping Expert Card With HTML and CSS. As you can see there are two lovely inclinations two balls and between them, there is a card with grassmorphism UI. In the card, there is an expert card logo, chip, and some card proprietor subtleties like card number, name, and the legitimate date of the card. The fascinating piece of this task is the point at which you drift over the card it will flid and the rear of the card apparent. On the posterior of that card, I have added another data too.
To see the genuine demo of this card and how it flips and the back piece of this card, you can watch the given video instructional exercise of this undertaking Flipping Expert Card With HTML and CSS, that I have given beneath. In the wake of watching the given video instructional exercise, you additionally get the thought, of how all the HTML and CSS code is working behind it.
Flipping Master Card With HTML & CSS Video Tutorial
We have given all the HTML and CSS code that I have used to make this task Flipping Expert Card With HTML and CSS, prior to bouncing into the source code document. I might want to make sense of the given video momentarily.
As you have found in the video instructional exercise of this task Flipping Expert Card With HTML and CSS. At first on the screen we saw, there were two slope balls. Between those two balls, there was our card with some essential data that charge cards need to have like name, card number, expiry date, and others. At the point when I float over the card, it flipped and the back piece of the card visibled. On the back part, there is some other data that normal has.
As you have seen, how I made those two balls. the card and its UI plan and the code that is utilized to flip it by utilizing just HTML and CSS. I want to believe that you likewise can make this sort of card with flipping activity on hove by utilizing HTML and CSS. Assuming you are feeling trouble to make this venture Flipping Expert Card With HTML and CSS, I have given all the HTML and CSS code and every one of the pictures that I have used to make this Card, which you can find underneath.
Flipping Master Card With HTML & CSS [Source Codes]
To create a Flipping Master Card With HTML & CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Flipping Master Card with HTML and CSS</title>
- <link rel="stylesheet" href="style.css" />
- </head>
- <body>
- <section>
- <div class="container ">
- <div class="card front-face">
- <header>
- <span class="logo">
- <img src="images/logo.png" alt="" />
- <h5>Master Card</h5>
- </span>
- <img src="images/chip.png" alt="" class="chip" />
- </header>
-
- <div class="card-details">
- <div class="name-number">
- <h6>Card Number</h6>
- <h5 class="number">1234 5678 9123 4567</h5>
- <h5 class="name">CARDHOLDER NAME</h5>
- </div>
-
- <div class="valid-date">
- <h6>EXPIRES END</h6>
- <h5>01/25</h5>
- </div>
- </div>
- </div>
-
- <div class="card back-face">
- <h6>
- For customer service call +123 456 789 or +0 000 123 456
- </h6>
- <span class="magnetic-strip"></span>
- <div class="signature"><i>123</i></div>
- <h5>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia
- maiores sed doloremque nesciunt neque beatae voluptatibus doloribus.
- Libero et quis magni magnam nihil temporibus? Facere consectetur
- dolore reiciendis et veniam.
- </h5>
- </div>
- </div>
- </section>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family:'FF Mark', sans-serif;
- }
- @font-face {
- font-family: 'FF Mark';
- src: url('path/to/ff-mark.woff2') format('woff2'),
- url('path/to/ff-mark.woff') format('woff');
- font-weight: normal;
- font-style: normal;
- }
-
- section {
- position: relative;
- min-height: 100vh;
- width: 100%;
- background: linear-gradient(9deg, #1F27C7,#606060,#484848,#303030, #0E0E0E);
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- perspective: 1000px;
- }
- section::before {
- content: "";
- position: absolute;
- height: 240px;
- width: 240px;
- border-radius: 50%;
- transform: translate(150px, -100px);
- background: linear-gradient(45deg, #1F27C7, #0E0E0E);
- }
- section::after {
- content: "";
- position: absolute;
- height: 240px;
- width: 240px;
- border-radius: 50%;
- transform: translate(-150px, 100px);
- background: linear-gradient(45deg, #0E0E0E, #1F27C7);
- }
- .container {
- position: relative;
- height: 225px;
- width: 375px;
- z-index: 100;
- transition: 0.6s;
- transform-style: preserve-3d;
- }
- .container:hover {
- transform: rotateY(-180deg);
- }
- .container .card {
- position: absolute;
- height: 100%;
- width: 100%;
- padding: 25px;
- border-radius: 25px;
- backdrop-filter: blur(20px);
- background: rgba(255, 255, 255, 0.3);
- box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
- 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;
- }
- .front-face .logo img {
- width: 48px;
- margin-right: 10px;
- }
- h5 {
- font-size: 16px;
- font-weight: 400;
- }
- .front-face .chip {
- width: 50px;
- margin-top: 10px;
- }
- .front-face .card-details {
- display: flex;
- margin-top: 40px;
- 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;
- }
- .card.back-face {
- border: none;
- padding: 15px 25px 25px 25px;
- transform: rotateY(180deg);
- }
- .card.back-face h6 {
- font-size: 8px;
- }
- .card.back-face .magnetic-strip {
- position: absolute;
- top: 40px;
- left: 0;
- height: 45px;
- width: 100%;
- background: #000;
- }
- .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 0px,
- #efefef 9px
- );
- }
- .signature i {
- color: #000;
- font-size: 12px;
- padding: 4px 6px;
- border-radius: 4px;
- background-color: #fff;
- margin-right: -30px;
- z-index: -1;
- }
- .card.back-face h5 {
- font-size: 8px;
- margin-top: 15px;
- }
-
If you face any difficulties while creating your Credit Card or your code is not working as expected, you can download the source code files for this Card for free by clicking on the download button.