ID Card Design Using HTML and CSS (Source Code)

Table of Contents

ID Card Design Using HTML and CSS

Welcome to the Code With Random blog. We learn how to create an ID card design using HTML and CSS. In this ID card, we have an image and caption text, a social media icon, and a hover effect. In this article, I will teach you how to make an HTML ID card template in an easy way. So ready to code!!!

Before we start with our project, we need to understand some of the general concepts. about ID card design, what is the need for it, and what are the advantages of these designs?

What is the need to create ID card designs?

An ID card design is an online profile card that includes all the major details of the user, including their name and designation, and some media hyperlink icons through which multiple users can connect with the person. These types of cards can also be easily shared with multiple users.

What are the benefits of Using ID Cards?

1. Provide Unique Identification.

2. Easily shareable.

3. Save physical Cards.

4. Provide Greater Reach.

Let’s Code and Craft:-

Join me in this coding adventure as we bring your ID Card design to life. Together, we’ll explore the intricacies of HTML and CSS, turning a simple concept into a visually appealing and interactive ID Card template.

Stay tuned for the magic – because in the world of coding, every line is a stroke of creativity!

html id card template

A profile card is a useful tool for web development, especially for newcomers. Here, you may find the user image, their name, a brief bio, their followers and followings, and lastly the follow button. HTML and CSS will be used to complete them.

Codepen Preview:

See the Pen <a href="https://codepen.io/arun020/pen/dyaLQKr" target="_blank" rel="noopener"> ID Card Design</a> by Arun (<a href="https://codepen.io/arun020" target="_blank" rel="noopener">@arun020</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Hope you enjoy our blog so let’s start with a basic HTML structure for the Profile ID Card Design.

Code by	Sanket Bodake
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	Yes
Responsive	YES

Profile ID Card Design Table

Html Code For ID Card:-

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>card</title>
  <link rel="stylesheet" href="./Profile-card.css" />
  <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
</head>
<body>
  <div class="card">
    <div class="img-bx">
      <img src="https://i.postimg.cc/dQ7zWbS5/img-4.jpg" alt="img" />
    </div>
    <div class="content">
      <div class="detail">
        <h2>Emilia Roy<br /><span>Senior Designer</span></h2>
        <ul class="sci">
          <li>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-twitter"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-instagram"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

Here We first create a div with the class “card,” which acts as a container for our profile card. Then, inside our container, we will create another div in which we will add an image to our profile card, and we will also create another div for the content of our profile card. Using the <h2> tag selector, we will add the name of the user for whom we are creating the profile card.

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

We don’t need anything else to develop the structure for our profile card. We’ll style our profile card now that we’ve learned how to use CSS. But first, let’s have a peek at our framework.

The output of HTML code only

id card html template — id card design html css

CSS Code For ID Card:-

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    font-family: 'Times New Roman', Times, serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(#03a9f4, #03a9f4 45%, #fff 45%, #fff 100%);
}

.card {
  position: relative;
  width: 300px;
  height: 400px;
  background: #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(15px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

.img-bx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  transform: translateY(30px) scale(0.5);
  transform-origin: top;
}

.img-bx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 30px;
}

.content .detail {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.content .detail h2 {
  color: #444;
  font-size: 1.6em;
  font-weight: bolder;
}

.content .detail h2 span {
  font-size: 0.7em;
  color: #03a9f4;
  font-weight: bold;
}

.sci {
  position: relative;
  display: flex;
  margin-top: 5px;
}

.sci li {
  list-style: none;
  margin: 4px;
}

.sci li a {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: transparent;
  font-size: 1.5em;
  color: #444;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: 0.5s;
}

.sci li a:hover {
  background: #03a9f4;
  color: #fff;
}

We’ll now set the box-sizing to “border-box,” the margin and padding to “zero,” and the font family to “Times New Roman” as our new body fonts using the universal selector property.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

By setting the background property to a mixture of white and blue, we will add a linear gradient backdrop to our body.

We will only adjust the image’s location and the icons’ height. Once you have a handle on the styling, I would advise you to read the code.

We have completed our CSS section, Here is our final updated output CSS.

Final Output:-

We have completed our CSS section, Here is our updated output with CSS. Hope you like the Profile Id Card Design, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

50+ HTML, CSS & JavaScript Projects With Source Code

Thank you

This post teaches us to create a Profile Id Card Design using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by – Sanket Bodake

FAQ:- HTML ID card template , ID card html template, id card HTML CSS template

Which code editor do you use for this Profile ID Card Design project coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

Are there additional features I can add to the ID Card design?

Yes dude!!! Once you are mastered the basics, you can explore adding more features, such as animation effects, responsive design for various devices, or even integrating dynamic content

Can I customize the ID Card template to match my style?

Yes dude !!! The beauty of coding is in customization. Feel free to twek colors, fonts, and layout to give the ID Card your personal touch.

What is the need to create ID card designs?

What are the benefits of Using ID Cards?

1. Provide Unique Identification.
2. Easily shareable.
3. Save physical Cards.
4. Provide Greater Reach.

CodeWithRandom

ID Card Design Using HTML and CSS (Source Code)