How to create Responsive Profile Card using HTML and CSS ?

29 May, 2021
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 can message the user.
Approach:
Firstly, we create a HTML file in which we do following things:Create a container which contains all the information.Add profile picture of the user.Add links of different social media handles.Add a button for messaging.
Create a container which contains all the information.
Add profile picture of the user.
Add links of different social media handles.
Add a button for messaging.
Then, we create a CSS file in which we apply different types of styling property for our HTML tags.
Finally, we link our CSS file to the HTML file using the link tag in the head section of the HTML.
HTML Code:
First, we create an HTML file(index.html).After creating the HTML file, we are going to give title to our webpage using <title> tag. It should be placed between the <head> tag.Then we link the css file that provide all the animations effect to our html. This is also placed in between <head> tag.Now we add a link from Google Fonts to use different type of font family in our project.Coming to the body section of our HTML code.Create a div in which we can store all of the images, links, buttons, headings and paragraphs.Then we create a div in which we add the image of the user.Another div is created, in this div we have to add the following tags:Heading tag is added to store the name of the user.A paragraph tag is added to store the username of the user.Then we added some social media links so that one can connect with this specified user.At last we have created a link for connecting the other using messaging service.
First, we create an HTML file(index.html).
After creating the HTML file, we are going to give title to our webpage using <title> tag. It should be placed between the <head> tag.
Then we link the css file that provide all the animations effect to our html. This is also placed in between <head> tag.
Now we add a link from Google Fonts to use different type of font family in our project.
Coming to the body section of our HTML code.Create a div in which we can store all of the images, links, buttons, headings and paragraphs.Then we create a div in which we add the image of the user.Another div is created, in this div we have to add the following tags:Heading tag is added to store the name of the user.A paragraph tag is added to store the username of the user.Then we added some social media links so that one can connect with this specified user.At last we have created a link for connecting the other using messaging service.
Create a div in which we can store all of the images, links, buttons, headings and paragraphs.Then we create a div in which we add the image of the user.Another div is created, in this div we have to add the following tags:Heading tag is added to store the name of the user.A paragraph tag is added to store the username of the user.Then we added some social media links so that one can connect with this specified user.At last we have created a link for connecting the other using messaging service.
Create a div in which we can store all of the images, links, buttons, headings and paragraphs.
Then we create a div in which we add the image of the user.
Another div is created, in this div we have to add the following tags:Heading tag is added to store the name of the user.A paragraph tag is added to store the username of the user.Then we added some social media links so that one can connect with this specified user.At last we have created a link for connecting the other using messaging service.
Heading tag is added to store the name of the user.A paragraph tag is added to store the username of the user.Then we added some social media links so that one can connect with this specified user.At last we have created a link for connecting the other using messaging service.
Heading tag is added to store the name of the user.
A paragraph tag is added to store the username of the user.
Then we added some social media links so that one can connect with this specified user.
At last we have created a link for connecting the other using messaging service.
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 Code: CSS is used to give different types of animations and effect 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 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:
 
 
Code_Mech
CSS-Questions
CSS-Selectors
HTML-Questions
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.