Profile Card in HTML

Profile Card In HTML

In this tutorial, you are going to learn how to make professional looking profile card in html using css.

Lets Get Ready

We need font-awesome for social media links and our external css code for this project is stored in the same folder as the html file with the name style.css so our <head> section will look somewhat like this:
<head>
  <title>Profile Card</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>
</head>

Step 1: The HTML code

For arranging everything we are going to place everything inside a div element with the class container. Then all the elements are placed inside it and some elements are also nested again.
So our html code inside the <body> is :
<div class="container">
  <div class="card">
    <div class="pic-container">
      <img class="pic" src="https://i.ibb.co/sJKD14w/pro-pic.jpg" alt="Profile Picture">
    </div>
    <div class="name">
      <span>Anonymous</span>
    </div>
    <div class="title">
      <span>PROGRAMMER</span>
    </div>
    <div class="description">
      <p>Your future is created by what you do today not tomorrow.</p>
    </div>
    <div class="message">
      <a href="https://m.me/codingandstuff/">Message</a>
    </div>
    <div class="links">
      <a href="https://www.facebook.com/codingandstuff/" target="_blank" class="fb">
        <i class="fab fa-facebook-f"></i>
      </a>
      <a href="https://www.youtube.com/channel/UCZvsBQB7yXx-jDPNCPrVCoQ" target="_blank" class="yt">
        <i class="fab fa-youtube"></i>
      </a>
      <a href="https://codepen.io/codingandstuff" target="_blank" class="cp">
        <i class="fab fa-codepen"></i>
      </a>
      <a href="https://coding-and-stuff.blogspot.com/" target="_blank" class="bg">
        <i class="fab fa-blogger-b"></i>
      </a>
    </div>
  </div>
</div>

Step 2: The CSS code

We are using a font named Roboto Mono in this project because it looks nice and it is free, so we are going to import the font using @import in css. After that we are styling each element to get the final result.
The CSS code is:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #da22ff;
  background: -webkit-linear-gradient(to bottom, #9733ee, #da22ff);
  background: linear-gradient(to bottom, #9733ee, #da22ff);
  font-family: "Roboto", sans-serif;
  font-size: 22px;
}
.container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  width: 300px;
  max-width: 300px;
  min-height: 490px;
  position: relative;
  text-align: center;
  margin: 32px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.pic-container {
  width: 110px;
  height: 110px;
  border-radius: 100%;
  margin: 40px auto 20px;
}
.pic {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin: auto;
  position: relative;
  top: 5px;
  box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
}
.name {
  color: #394f63;
}
.title {
  color: #3d77c2;
  font-size: 14px;
  padding: 8px;
}
.description {
  font-size: 18px;
  font-weight: 300;
  padding: 10px 22px;
}
.message {
  font-size: 22px;
  background: #0088ff;
  background: -webkit-linear-gradient(to right, #1da1f2, #0088ff);
  background: linear-gradient(to right, #1da1f2, #0088ff);
  box-shadow: 0 0 20px 4px #ffffff, 0 0 20px 0px #0088ff;
  border-radius: 32px;
  padding: 10px;
  margin: 16px 28px;
}
.message:hover {
  box-shadow: 0 0 20px 0px #ffffff, 0 4px 20px 0px #0088ff;
  transition: 0.3s;
}
.links {
  margin: 42px 0;
}
a {
  text-decoration: none;
  color: #fff;
}
.fb,
.yt,
.cp,
.bg {
  background: red;
  display: inline-block;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0px 4px;
}
.fb {
  background: linear-gradient(45deg, #3b5998, #0078d7);
  box-shadow: 0px 4px 30px rgba(43, 98, 169, 0.5);
}
.cp {
  background: linear-gradient(45deg, #324e63, #414447);
  box-shadow: 0px 4px 30px rgba(55, 75, 90, 0.6);
}
.yt {
  background: linear-gradient(45deg, #d5135a, #ff0000);
  box-shadow: 0px 4px 30px rgba(223, 45, 70, 0.6);
}
.bg {
  background: linear-gradient(45deg, #d5135a, #f05924);
  box-shadow: 0px 4px 30px rgba(223, 45, 70, 0.6);
}
.fb:hover {
  transition: 0.3s;
  box-shadow: 0px 8px 30px rgb(43, 98, 169);
}
.cp:hover {
  transition: 0.3s;
  box-shadow: 0px 8px 30px rgb(55, 75, 90);
}
.yt:hover {
  transition: 0.3s;
  box-shadow: 0px 8px 30px rgb(223, 45, 70);
}
.bg:hover {
  transition: 0.3s;
  box-shadow: 0px 8px 30px rgb(223, 45, 70);
}

Demo

Done

Thank you for reading this post till the end. Ask your questions in the comments section. Share this if you found this post helpful.

Comments

Post a Comment