How To Create a Profile Card Using HTML, CSS And JS?

Alright guys, you're at the right place if you're searching for How to Create a Profile Card Using HTML, CSS, and JS. Here in this article we have discussed some of the best examples of creating profile card designs along with their source codes. Go through this article, which provides detailed instructions and examples on How to Create a Profile Card Using HTML, CSS, and JS.

Designing a profile card using HTML, CSS, and JS is easy, but if you have proper knowledge of HTML, CSS, and JS, But no problem. Here below we have discussed the query along with code; you can simply use it and implement it where you want.
Just follow the steps.

First Design

<!DOCTYPE html>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
section {
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width: 100%;
  padding: 0 1em 1em 1em;
  text-align: center;
}
.card {
  width: 100%;
  height: 100%;
  padding: 2em 1.5em;
  background: linear-gradient(#ffffff 50%, #2c7bfe 50%);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: 0.5s;
}
h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f194c;
  margin: 1em 0;
}
p {
  color: #575a7b;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.icon-wrapper {
  background-color: #2c7bfe;
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.5em;
  width: 2.5em;
  color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.5s;
}
.card:hover {
  background-position: 0 100%;
}
.card:hover .icon-wrapper {
  background-color: #ffffff;
  color: #2c7bfe;
}
.card:hover h3 {
  color: #ffffff;
}
.card:hover p {
  color: #f0f0f0;
}
@media screen and (min-width: 768px) {
  section {
    padding: 0 2em;
  }
  .column {
    flex: 0 50%;
    max-width: 50%;
  }
}
@media screen and (min-width: 992px) {
  section {
    padding: 1em 3em;
  }
  .column {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}
    </style>
    <section>
      <div class="row">
        <h2 class="section-heading">Card Design</h2>
      </div>
      <div class="row">
        <div class="column">
          <div class="card">
            <div class="icon-wrapper">
              <i class="fas fa-hammer"></i>
            </div>
            <h3>theAShub</h3>
            <p>~A complete place for learners</p>
          </div>
        </div>
        <div class="column">
          <div class="card">
            <div class="icon-wrapper">
            
              <i class="fas fa-plug"></i>
            </div>
            <h3>theAShub</h3>
           <p>~A complete place for learners</p>
          </div>
        </div>
      </div>
    </section>

How does it look like?

According to your need, you can also implement this piece of code.

Second Design

<!DOCTYPE html>
<script crossorigin="anonymous" src="https://kit.fontawesome.com/c8e4d183c2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.c-box-container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin:10px 0px;
}
/* code for box*/
.client-box {
	width:200px;
	height: auto;
	background-color: #FFFFFF;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 5px;
	margin: 20px;
	box-shadow: 5px 10px 30px rgba(0,0,0,0.08);
}
.client-box img{
	width:100px;
	height:100px;
	border-radius: 50%;
    border: 1px dashed #fac926;
	object-fit: cover;
}
.client-box:hover{
	transform: translateY(-10px);
	box-shadow: 5px 10px 30px rgba(0,0,0,0.1);
	transition: all ease 0.2s;
    background-color:#FAC926;
}
/*CSS for Buttons*/
.theashubbutton {
  border: none;
  padding: 6px 11px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}
.buttonfornav {
  background-color: transparent; 
  color: #212428; 
  border: 1px solid #212428;
  border-radius: 10px; 
}
</style>
<div class="c-box-container">
<!--Card----->	
<div class="client-box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMS6ldvpeVtlmgCggE117-DVAhDC1YX6HltoNS0EfgLwWon4tCOw1sgYTs_HUvDgDBdlaUU6h90kxqDSI-Lkp0CrefCyhyCOZ2woa1SWYlkDyhEq3o2v7yAaxkEaGbghYzwhPdQl6_gjHmjpi0Pq_8U_xLLjkvr_rFIamhsyuies18aeNmuQ_p8jvFhGc/w100-h100/Main%20Icon.png"/>
<!--details/comment------>
<p style="font-size:20px"><b>theAShub</b></p>
<p>~A complete place for learners</p>
<div style="margin:10px">
<a href="https://www.youtube.com/c/theashub?sub_confirmation=1"><button class="theashubbutton buttonfornav" style="text-color:#212428;text-shadow:1px 1px #fac926;">Get Assist</button></a>
</div>
</div>
</div>

How does it look like?

Although this is enough for this post, you can do a lot more by doing experiments. Below are some additional tips to enhance your profile card design.

Third Design

<!--theAShub Profile-->
<style>
.theashubprofile{margin-top: 50px;background-color: transparent;}
.toolssection{display: flex;justify-content: center;width: auto;text-align: center;flex-wrap: wrap;background-color: transparent;}
.toolssection .tool_desc{background: #fff;margin: 30px;margin-bottom: 50px;width: 250px;padding: 10px;line-height: 20px;color: #8e8b8b;position: relative;border-radius:12px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.toolssection .tool_desc h3{color: #212428;font-size: 20px;margin-top: 50px;}
.toolssection .tool_desc .tool_img{position: absolute;top: -50px;left: 50%;transform: translateX(-50%);width: 100px;height: 100px;border-radius: 50%;background: #fff;border:1px solid #212428;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.toolssection .tool_desc .tool_img img{width: 90px;height: 90px;padding: 5px;border-radius: 50%;}
</style>
      <div class="theashubprofile">
        <div class="toolssection">
          <div class="tool_desc">
            <div class="tool_img">
              <img alt="Team_image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-2s-o3mOgzTbVeomN1EXy2BYLw0bq0e-8HQ&s" />
            </div>
            <h3>Jessi</h3>
            <p class="role">Web Developer</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quaerat tempora, voluptatum quas facere dolorum aut cumque nihil nulla harum nemo distinctio quam blanditiis dignissimos.</p>
          </div>
          <div class="tool_desc">
            <div class="tool_img">
              <img alt="Team_image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-2s-o3mOgzTbVeomN1EXy2BYLw0bq0e-8HQ&s" />
            </div>
            <h3>Sam</h3>
            <p class="role">App Developer</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quaerat tempora, voluptatum quas facere dolorum aut cumque nihil nulla harum nemo distinctio quam blanditiis dignissimos.</p></div>
          <div class="tool_desc">
            <div class="tool_img">
              <img alt="Team_image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-2s-o3mOgzTbVeomN1EXy2BYLw0bq0e-8HQ&s" />
            </div>
            <h3>John  </h3>
            <p>Team Lead</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quaerat tempora, voluptatum quas facere dolorum aut cumque nihil nulla harum nemo distinctio quam blanditiis dignissimos.</p>
          </div>
        </div>
      </div>

Additional Tips: How To Create a Profile Card

Use a CSS framework: Frameworks like Bootstrap or Materialize can provide pre-built components and styles to streamline the development process.
Consider responsiveness: Ensure your profile card looks good on different screen sizes by using media queries.
Add interactivity: Enhance the user experience by adding features like hover effects, tooltips, or modal windows.
Experiment with different layouts: Explore various designs, such as vertical, horizontal, or grid-based layouts.

By following these resources and experimenting with different techniques, you can create a visually appealing and informative profile card that meets your specific requirements.

Let me know in the comment box if there is any query.