How to Create Mobile-Friendly Team Member Cards HTML CSS

Creating a responsive Team Member Cards design using HTML and CSS involves structuring the content with HTML and styling it to be visually appealing and adaptive to various screen sizes.

Create index.html file and copy code and paste code our layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Team Member Card By Mycodingtutorial</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <section class="team">
    <h1>Meet Our Team</h1>
    <div class="team-container">
      <div class="team-card">
        <img src="image/image-1.jpg" alt="Team Member">
        <div class="card-content">
          <h2>John Doe</h2>
          <p>Web Developer</p>
          <div class="social-icons">
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
      </div>
      <div class="team-card">
        <img src="image/image-2.jpg" alt="Team Member">
        <div class="card-content">
          <h2>John Doe</h2>
          <p>Web Developer</p>
          <div class="social-icons">
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
      </div>
      <div class="team-card">
        <img src="image/image-3.jpg" alt="Team Member">
        <div class="card-content">
          <h2>John Doe</h2>
          <p>Web Developer</p>
          <div class="social-icons">
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
      </div>
      <div class="team-card">
        <img src="image/image-4.jpg" alt="Team Member">
        <div class="card-content">
          <h2>John Doe</h2>
          <p>UI/UX Designer</p>
          <div class="social-icons">
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
      </div>
      <!-- Add more team cards as needed -->
    </div>
  </section>

  <!-- Font Awesome for social icons -->
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>

You will also like this post

Create style.css file and copy code and paste code our layout.

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color:#d3303e;
}

.team {
  text-align: center;
  padding: 25px 20px;
}

.team h1 {
  margin-bottom: 20px;
  font-size: 2.5em;
  color: #fff;
}

.team-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.team-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.team-card img {
  width: 100%;
  height: auto;
  border-bottom: 5px solid #4db2ec;
}

.card-content {
  padding: 20px;
  text-align: center;
}

.card-content h2 {
  font-size: 1.5em;
  color: #4db2ec;
}

.card-content p {
  font-size: 1em;
  color: #555;
  margin-bottom: 15px;
}

.social-icons a {
    color: #fff;
    font-size: 1.2em;
    background: #d3303e;
    margin: 0 10px;
    transition: color 0.3s ease;
    padding: 9px;
    border-radius: 5px;
}

.social-icons a:hover {
    color: #fff;
    font-size: 1.2em;
    background: #4db2ec;
    margin: 0 10px;
    transition: color 0.3s ease;
    padding: 9px;
    border-radius: 5px;
}

Explanation

HTML Structure:
- Each team member card contains an image, name, role, and social media links.
- The team-container holds all the cards.
CSS Styling:
- A grid layout is used to make the design responsive, adapting the number of columns based on the screen size.
- Transitions and hover effects add interactivity to the cards.
- Social media icons are styled and linked using Font Awesome.
Responsiveness:
- The grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); rule makes the cards responsive, ensuring they adjust dynamically based on screen width.
Customization:
- Replace the src attributes in <img> tags with actual image paths for your team members.
- Update social media links in the href attributes.

This design ensures a professional and modern appearance while being fully responsive across devices.

How to Create Mobile-Friendly Team Member Cards HTML CSS

You will also like this post

Explanation

Leave a comment Cancel reply

Quick Ways to Make Your Service.

How to Create a Responsive Header.

Quick Guide to Writing Your First.

How to Set Up a Child.

Quick Ways to Make.

How to Create a.

Quick Guide to Writing.

How to Create Mobile-Friendly Team Member Cards HTML CSS

You will also like this post

Explanation

Tags:

Share:

Leave a comment Cancel reply