Our Team Card Design using HTML & CSS

Our Team Card Design using HTML & CSS

 Hello developers, today in this blog you will learn to create an Our Team Card Design using HTML and CSS.

The team member card is more important to describe shortly about the team members. The team card must contain the photo of the person, the name of the person, the role of the person in the team, and some text or a paragraph over there briefly describes the role of the person in the team. Can use Our Team Card Design in the website to describe briefly the team members.

In this blog (Our Team Card Design), on the webpage, there is a card at the center of the webpage. The card contains an image of the person that is followed by the name, designation, some description about the team member, and the skill bar with the percentage. When you hover over the image of the person, the social media icons will be displayed in the place of the image by making the image to be blurred. And also when hovering on the image the skill bar gets colored up to the mentioned percentage.

The source code of this Our Team Card Design using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Our Team Card Design using HTML & CSS on your projects.

Our Team Card Design [Source Code]

To make this website (Glowing Card Animation), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Our Team Card || Learningrobo</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css'><link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> <div class="team"> <div class="team-img"> <img src="https://cdn.pixabay.com/photo/2015/07/20/13/01/fred-852770__480.jpg" alt="Team Image"> <div class="team-social"> <a class="social-tw" href=""><i class="fab fa-twitter"></i></a> <a class="social-fb" href=""><i class="fab fa-facebook-f"></i></a> <a class="social-li" href=""><i class="fab fa-linkedin-in"></i></a> <a class="social-in" href=""><i class="fab fa-instagram"></i></a> <a class="social-yt" href=""><i class="fab fa-youtube"></i></a> </div> </div> <div class="team-content"> <h2>NAME</h2> <h3>CEO & Founder</h3> <p>Some text goes here that describes about team member</p> <div class="team-skill"> <div class="skill-name"> <p>HTML</p><p>90%</p> </div> <div class="progress"> <div class="progress-bar w-90"></div> </div> <div class="skill-name"> <p>CSS</p><p>80%</p> </div> <div class="progress"> <div class="progress-bar w-80"></div> </div> <div class="skill-name"> <p>jQuery</p><p>70%</p> </div> <div class="progress"> <div class="progress-bar w-70"></div> </div> </div> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to create a file with a .css extension.



*,
*::before,
*::after {
    box-sizing: border-box;
}
body{
  background: #FDC830;  
  background: -webkit-linear-gradient(to right, #F37335, #FDC830);
  background: linear-gradient(to right, #F37335, #FDC830);
  
}
.container {
  position: relative;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

h1.title {
  position: relative;
  color: #353535;
  font-size: 25px;
  line-height: 35px;
  text-align: center;
  margin: 30px auto;
}

h1.title a {
  font-size: 22px;
}
.team {
  position: relative;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  max-width: 300px;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

.team .team-img {
  position: relative;
  font-size: 0;
  color: #353535;
  border-radius: 20px 0;
}

.team .team-img img {
  width: 100%;
  height: auto;
  border-radius: 20px 20px 0 0;
}

.team .team-social {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .5);
  transition: all .3s;
  font-size: 0;
  z-index: 1;
  opacity: 0;
  border-radius: 20px 20px 0 0;
}

.team:hover .team-social {
  opacity: 1;
}

.team .team-social a {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 5px;
  padding: 11px 0 10px 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 16px;
  text-align: center;
  color: #ffffff;
  transition: all .5s;
  margin-top: 100px;
}

.team .team-social a.social-tw {
  background: #00acee;
}

.team .team-social a.social-fb {
  background: #3b5998;
}

.team .team-social a.social-li {
  background: #0e76a8;
}

.team .team-social a.social-in {
  background: #3f729b;
}

.team .team-social a.social-yt {
  background: #c4302b;
}

.team .team-social a:last-child {
  margin-right: 0;
}

.team:hover .team-social a {
  margin-top: 0;
}

.team .team-social a:hover {
  color: #222222;
  background: #ffffff;
}

.team .team-content {
  padding: 20px;
  background-color: #12192c;
  border-radius: 0 0 20px 20px;
}

.team .team-content h2 {
  margin: 0 0 5px 0;
  color: #F37335;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 2px;
}

.team .team-content h3 {
  margin: 0 0 15px 0;
  color: #F37335;
  font-size: 14px;
  font-weight: 300;
}

.team .team-content p {
  margin: 0 0 15px 0;
  color: #F37335;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.team .team-skill {
  width: 100%;
}

.team .skill-name {
  text-align: left;
}

.team .skill-name p {
  display: inline-block;
  color: #F37335;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.team .skill-name p:last-child {
  float: right;
}

.team .progress {
  position: relative;
  width: 100%;
  height: 5px;
  margin-bottom: 10px;
  background: #dddddd;
  border-radius: 20px;
}

.team .progress:last-child {
  margin: 0;
}

.team .progress-bar {
  position: absolute;
  width: 0%;
  height: 5px;
  top: 0;
  left: 0;
  background: #FDC830;
  transition: all .7s;
  z-index: 1;
  border-radius: 20px;
}

.team:hover .progress-bar.w-70 {
  width: 70%;
}

.team:hover .progress-bar.w-80 {
  width: 80%;
}

.team:hover .progress-bar.w-90 {
  width: 90%;
}

.credit a{
  text-decoration: none;
  color: #12192c;
  font-weight: 800;
  }
  
  .credit {
      text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 10px;
    color:#FFF
  }
We hope you would like this Our Team Card Design using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Our Team Card Design using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome