Skip to main content

Credit Card Design | HTML And CSS

by Rustcode
credit-card-design-html-and-css

Credit Card Design Using HTML And CSS

Recently we have published an article on credit cards covering more than eleven different credit card designs. And in this article, we will design a credit card using html and css.

The card will have a "card-container" containing the card and we are using the "poppins" font-family to make attractive text. Two images will be required to create this card, the download link for those images will be found in the middle of this article. No animation has been added to this card.

You can check the playlist of our website to read more articles related to the website development.

We have button animations which are generally used in website development. You can read more articles on button animation.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Credit Card Design</title>  
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


02. HTML

You can download image form here.

01. Chip Image: Download 
02. Mastercard Image: Download

<body>
<div class="card-container">
  <div class="card-name">Credit Card</div>
  <div class="chip">
    <img src="chip.png">
  </div>
  <div class="card-data">
    <div class="card-no">4895 2456 1580 8975</div>
    <div class="expire-data">
      <div class="expire-date">
        <div class="date-label">MONTH/YEAR</div>
        <div class="date" title="01/17">01/35</div>
      </div>
      <div class="card-type">
        <img src="mastercard.png">
      </div>
    </div>
    <div>Elon Musk</div>
  </div>
</div>
</body>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "poppins",sans-serif;
}

.card-container{
  width: 350px;
  height: 220px;
  background-image: linear-gradient(#453F78, #3F2E56,#401F3E);
  color: white;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}

.card-name{
  font-weight: 700;
  text-align: right;
}
.chip{
  margin-top: 10px;
  width: 40px;
  height: 40px;
}
.chip img{
  width: 40px;
  height: 40px;
}
.card-no{
  letter-spacing: .456rem;
  margin-top: 10px;
}

.expire-data{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.expire-date{
  margin-top: 6px;
}

.date-label{
  font-size: 8px;
}

.card-type{
  margin-top: 4px;
  width: 70px;
  height: 40px;
}
.card-type img{
  width: 70px;
  height: 40px;
}




04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.





RELATED POST:

Comments

Post a Comment