Profile Id Card Design Html Css | Profile Id Style Html Css

Table of Contents

Profile Id Card Design Html Css | Profile Id Style 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.

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

profile card in html

profile card in html

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

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

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3.Notes App Using Html Css Javascript

 

Share on:

Leave a Comment