Open In App

How to create Responsive Profile Card using HTML and CSS ?

Last Updated : 30 Jan, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we are going to create a profile card from where a user can check out the basic details of other users and connect with them through different handles as well as message the user.

Approach:

  • Set up HTML with a container div containing an image and content sections.
  • Style the container, user image, and content sections with appropriate colors, fonts, and sizes.
  • Integrate Font Awesome icons for social media links (Facebook, GitHub, LinkedIn, Instagram).
  • Implement hover effects on social media links for visual feedback, changing color and scale.
  • Create a styled messaging link within the content section using a gradient background.
  • Ensure responsiveness with flexible width, font scaling, and image adjustments for a seamless profile card on various devices.

Example: In this example, we will see how to create Responsive Profile Card using HTML and CSS.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href=
"https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" 
          rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="user-image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png"
                alt="this image contains user-image">
        </div>
        <div class="content">
            <h3 class="name">Geeks-For-Geeks</h3>
            <p class="username">@geeks_for_geeks</p>
            <div class="links">
                <a class="facebook" href="https://www.facebook.com/geeksforgeeks.org/" 
                   target="_blank"
                   title="GFG_facebook">
                    <i class="fab fa-facebook"></i>
                </a>
                <a class="git" href=
"https://github.com/topics/geeksforgeeks" title="GFG_github" 
                   target="_blank">
                    <i class="fab fa-github-square"></i>
                </a>
                <a class="linkedin" href=
"https://www.geeksforgeeks.org/tag/linkedin/" 
                   title="GFG_linkedin"
                   target="_blank">
                    <i class="fab fa-linkedin"></i>
                </a>
                <a class="insta" href=
"https://www.instagram.com/geeks_for_geeks/?hl=en" 
                   target="_blank"
                   title="GFG_instagram">
                    <i class="fab fa-instagram-square"></i>
                </a>
            </div>
            <p class="details">
                A Computer Science portal for geeks
            </p>
            <a class="effect effect-4" href="#">
                Message
            </a>
        </div>
    </div>

    <!-- This is link of adding small images
         which are used in the link section  -->
    <script src="https://kit.fontawesome.com/704ff50790.js" 
            crossorigin="anonymous">
    </script>
</body>

</html>
CSS 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Assigning all the same properties to the body */
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: rgb(0, 0, 0);
    align-items: center;
}

.container {
    width: 20em;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    border-radius: 1em;
    text-align: center;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1em;
}

.user-image {
    padding: 3em 0;
    background-image: linear-gradient(70deg, #61A1DD, #0083FD);
}

.user-image img {
    width: 7em;
    height: 7em;
    border-radius: 50%;
    box-shadow: 0 0.6em 1.8em;
    object-fit: cover;
}

.content {
    color: #565656;
    padding: 2.2em;
}

.name {
    font-size: 1.5em;
    text-transform: uppercase;
}

.username {
    font-size: 1em;
    color: #9e9e9e;
}

.links {
    display: flex;
    justify-content: center;
    margin: 1.5em 0;
}

a {
    text-decoration: none;
    color: #565656;
    transition: all 0.3s;
    font-size: 2em;
    margin-right: 1.2em;
}

a:last-child {
    margin: 0;
}

.insta:hover {
    color: rgb(255, 70, 101);
    transform: scale(2, 2);
}

.git:hover {
    color: rgb(0, 0, 0);
    transform: scale(2, 2);
}

.linkedin:hover {
    color: rgba(4, 0, 253, 0.842);
    transform: scale(2, 2);
}

.facebook:hover {
    color: rgb(4, 0, 255);
    transform: scale(2, 2);
}

.details {
    margin-bottom: 1.8em;
}


/* CSS for messagin link */

.effect {
    text-align: center;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: rgb(48, 41, 41);
    text-transform: capitalize;
    width: 100%;
    background-image: linear-gradient(60deg, #0083FD, #61A1DD);
    font-size: 1.2em;
    padding: 1em 3em;
    border-radius: 5em;
    overflow: hidden;
}

.effect.effect-4:before {
    content: "\f2b6";
    font-family: FontAwesome;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.8em;
    transform: scale(0, 1);
}

.effect.effect-4:hover {
    text-indent: -9999px;
}

.effect.effect-4:hover:before {
    transform: scale(1, 1);
    text-indent: 0;
}

CSS Code: CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.

In CSS, we have to remind the following points-

  • Restore all the browser effects.
  • Use classes and ids to give effects to HTML elements.
  • Use of the nth-child selector feature of CSS to call different links.
CSS 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Assigning all the same properties to the body */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  background-color: rgb(0, 0, 0);
  align-items: center;
}

.container {
  width: 20em;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  border-radius: 1em;
  text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1em;
}

.user-image {
  padding: 3em 0;
  background-image: linear-gradient(70deg, #61A1DD, #0083FD);
}

.user-image img {
  width: 7em;
  height: 7em;
  border-radius: 50%;
  box-shadow: 0 0.6em 1.8em;
  object-fit: cover;
}

.content {
  color: #565656;
  padding: 2.2em;
}

.name {
  font-size: 1.5em;
  text-transform: uppercase;
}

.username {
  font-size: 1em;
  color: #9e9e9e;
}

.links {
  display: flex;
  justify-content: center;
  margin: 1.5em 0;
}

a {
  text-decoration: none;
  color: #565656;
  transition: all 0.3s;
  font-size: 2em;
  margin-right: 1.2em;
}

a:last-child {
  margin: 0;
}

.insta:hover {
  color: rgb(255, 70, 101);
  transform: scale(2, 2);
}

.git:hover {
  color: rgb(0, 0, 0);
  transform: scale(2, 2);
}

.linkedin:hover {
  color: rgba(4, 0, 253, 0.842);
  transform: scale(2, 2);
}

.facebook:hover {
  color: rgb(4, 0, 255);
  transform: scale(2, 2);
}

.details {
  margin-bottom: 1.8em;
}


/* CSS for messagin link */

.effect {
  text-align: center;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: rgb(48, 41, 41);
  text-transform: capitalize;
  width: 100%;
  background-image: linear-gradient(60deg, #0083FD, #61A1DD);
  font-size: 1.2em;
  padding: 1em 3em;
  border-radius: 5em;
  overflow: hidden;
}

.effect.effect-4:before {
  content: "\f2b6";
  font-family: FontAwesome;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.8em;
  transform: scale(0, 1);
}

.effect.effect-4:hover {
  text-indent: -9999px;
}

.effect.effect-4:hover:before {
  transform: scale(1, 1);
  text-indent: 0;
}

 Output:


Next Article
How to Create Shock Wave or Explosion Effect using HTML and CSS?

R
rahulmahajann
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox