You are currently viewing Profile ID Card Design Using HTML & CSS

Profile ID Card Design Using HTML & CSS

Profile ID Card Design Using HTML & CSS

Welcome to Code With Random blog. We learn how to create a Profile Id Card Design. We use HTML & CSS for Profile ID Card Design.

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

Code bySanket Bodake
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYes
ResponsiveYES
Profile ID Card Design Table

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

Html Code

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

There is all HTML code for the Profile Id Card Design. Now, you can see output without CSS, then we write CSS for the Profile Id Card Design.

Output

id card design html css
id card design html css

100+ Front-end Projects for Web developers (Source Code)

id card design html css
id card design html css

CSS Code

* {
  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 have completed our CSS section,  Here is our final updated output CSS.

Final Output

id card design html css
id card design html css

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+ Front-end Projects With Source Code | Front-end 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

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.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

Yes!

Leave a Reply