Profile cards with social media icons side by side using HTML and CSS only.

Hello readers hope all are doing well and safe . I hope my information is reaching you and it's being helpful. Explore all the contents in our blog and we need your support.

when you are creating an "About us" page in your blog or create a business website you should certainly have a profile card in it.

The Profile card makes easy way to know about you and contact you through many means.

A Profile card must contain firstly the name the image of the person followed by his name in large text. The next thing is the card must contain the designation of the person. It must also contain a quite small introduction about you.

HTML file:

<!DOCTYPE html>
<!----created by RiseProgramming-------->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>


<br>

<div class="row">
  <div class="column">
    <div class="card">
      <img src="#" alt="jon snow" style="width:100%">
      <div class="container">
        <h2>Jon snow</h2>
        <p class="title"><b>Founder</b></p>
        <p>Harvard university</p>
        <p>jonsnow@gmail.com</p>
        <div style="margin: 24px 0;">
    <a href="#"><i class="fa fa-instagram"></i></a> 
    <a href="#"><i class="fa fa-twitter"></i></a>  
    <a href="#"><i class="fa fa-linkedin"></i></a>  
    <a href="#"><i class="fa fa-facebook"></i></a> 
  </div>
        <p><button class="button" onclick="windows.location.herf='mailto:yourmaailid'">Contact</button></p>
      </div>
    </div>
  </div>

  
  
  <div class="column">
    <div class="card">
      <img src="
#" alt="John" style="width:100%">
      <div class="container">
        <h2>Arya stark</h2>
        <p class="title"><b>Designer</b></p>
        <p>Cambridge university</p>
        <p>aryastark@gmail.com</p>
        <div style="margin: 24px 0;">
    <a href="#"><i class="fa fa-instagram"></i></a> 
    <a href="#"><i class="fa fa-twitter"></i></a>  
    <a href="#"><i class="fa fa-linkedin"></i></a>  
    <a href="#"><i class="fa fa-facebook"></i></a> 
  </div>
        <p><button class="button" onclick="window.location.href='mailto:yourmailid'">Contact</button></p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

CSS File:

.fa {
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  color: white;
  background: black;
}
.fa-facebook:hover {
  background: #3B5998;
  color: white;
}
.fa-instagram:hover {
  background: #125688;
  color: white;
}

.fa-twitter:hover {
  background: #55ACEE;
  color: white;
}
.fa-linkedin:hover {
  background: #007bb5;
  color: white;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 50%;
  margin-bottom: 16px;
  padding: 0 8px;
  
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background : #b3b3b3;
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: black;
  opacity: 0.7;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}

In the above code just add the image URL in the <img> tag and your profile URL's in the social media buttons. Replace 'yourmailid' with the mail id you want That's it you are done.

I hope this was helpful.

RiseProgramming

HTML file:

CSS File:

Thanks for Reading.

Post a Comment

Post a Comment

About Us

Contact Form

Profile cards with social media icons side by side using HTML and CSS only.

HTML file:

CSS File:

Thanks for Reading.

You might like

Post a Comment

Post a Comment

Contact Form