Creating a Responsive Our Team Template using HTML and CSS Tutorial

Submitted by oretnom23 on Tuesday, April 25, 2023 - 14:33.

In this tutorial, you can learn to create Responsive Our Team or Team Profile Cards for websites using HTML and CSS. The tutorial aims to provide students and beginners with a reference for learning to create and design an interactive template for websites. Here, I will be also providing simple web page scripts that demonstrate the creation of a simple Responsive Our Team Section Template.

What is Our Team Profile Cards?

The Our Team or Team Profile Cards is one of the common sections or often implemented website sections or components. This section is containing a list of the company, organization, or any other team members which usually comes with the individual image, name, position, details, and social links.

How to Create a Responsive Our Team or Team Profile Cards?

Creating a Responsive Our Team or Team Profile Cards user interface or template can be achieved using only HTML and CSS. We can simply list all the list of the team profile details using some HTML elements such as DIV elements and some other elements for designing it. The CSS is a stylesheet script that will handle the design of the elements and make it responsive to any device screen such as Desktops, Laptops, smartphones, or tablets. Using the CSS @media rule, we can set the new design script that the device will use for a certain maximum or minimum of the screen. Check out the simple web page scripts that I created below to have a better idea of how to achieve it in an actual web page.

Sample Web Page Scripts

The following scripts result in a simple website page that contains the list of Company Team Profiles. The page displays the team or member items in grid view which has 4 columns for bigger device screens and reduces depending on the device screen. Each team member's details are shown in a simple Card UI with a simple interactive design.

HTML

Here is the HTML file script known as index.html. The file contains the HTML elements of the page layout including the card wrapper and items of each team member.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Our Team Profile Cards</title>
  7.     <link rel="stylesheet" href="style.css">
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  11.     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  12. </head>
  13. <body>
  14.     <div class="container">
  15.     <h1 id="page-title">Our Team</h1>
  16.     <hr id="title_hr">
  17.     <div id="wrapper">
  18.         <!-- Card Profile Item -->
  19.         <div class="card-profile-item">
  20.         <div class="card-profile">
  21.             <div class="card-profile-header">
  22.             </div>
  23.             <div class="card-profile-subheader">
  24.             <div class="card-profile-details">
  25.                 <div class="profile-img">
  26.                 <img src="./image-1.jpg" alt="Image by wayhomestudio on Freepik">
  27.                 </div>
  28.                 <div class="profile-name">Katharina Zsanett</div>
  29.                 <div class="profile-sub">Project Manager</div>
  30.             </div>
  31.             </div>
  32.             <div class="card-profile-body">
  33.             <div class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus turpis sem, laoreet vitae mi at, rutrum ullamcorper felis. Nullam vel aliquam massa. Quisque nec nisi eget ante sagittis finibus. Maecenas vulputate blandit mi, eget tincidunt augue.</div>
  34.             <div class="profile-social-links">
  35.                 <a href="" class="profile-social-link"><i class="fab fa-facebook-f"></i></a>
  36.                 <a href="" class="profile-social-link"><i class="fab fa-twitter"></i></a>
  37.                 <a href="" class="profile-social-link"><i class="fab fa-pinterest"></i></a>
  38.                 <a href="" class="profile-social-link"><i class="fab fa-linkedin"></i></a>
  39.             </div>
  40.             </div>
  41.         </div>
  42.         </div>
  43.         <!-- Card Profile Item -->
  44.         <!-- Card Profile Item -->
  45.         <div class="card-profile-item">
  46.         <div class="card-profile">
  47.             <div class="card-profile-header">
  48.             </div>
  49.             <div class="card-profile-subheader">
  50.             <div class="card-profile-details">
  51.                 <div class="profile-img">
  52.                 <img src="./image-2.jpg" alt="Image by wayhomestudio on Freepik">
  53.                 </div>
  54.                 <div class="profile-name">Jude Bridger</div>
  55.                 <div class="profile-sub">Sr. Web Developer</div>
  56.             </div>
  57.             </div>
  58.             <div class="card-profile-body">
  59.             <div class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus turpis sem, laoreet vitae mi at, rutrum ullamcorper felis. Nullam vel aliquam massa. Quisque nec nisi eget ante sagittis finibus. Maecenas vulputate blandit mi, eget tincidunt augue.</div>
  60.             <div class="profile-social-links">
  61.                 <a href="" class="profile-social-link"><i class="fab fa-facebook-f"></i></a>
  62.                 <a href="" class="profile-social-link"><i class="fab fa-twitter"></i></a>
  63.                 <a href="" class="profile-social-link"><i class="fab fa-pinterest"></i></a>
  64.                 <a href="" class="profile-social-link"><i class="fab fa-linkedin"></i></a>
  65.             </div>
  66.             </div>
  67.         </div>
  68.         </div>
  69.         <!-- Card Profile Item -->
  70.         <!-- Card Profile Item -->
  71.         <div class="card-profile-item">
  72.         <div class="card-profile">
  73.             <div class="card-profile-header">
  74.             </div>
  75.             <div class="card-profile-subheader">
  76.             <div class="card-profile-details">
  77.                 <div class="profile-img">
  78.                 <img src="./image-3.jpg" alt="Image by wayhomestudio on Freepik">
  79.                 </div>
  80.                 <div class="profile-name">Tanner Dillan</div>
  81.                 <div class="profile-sub">FullStack Developer</div>
  82.             </div>
  83.             </div>
  84.             <div class="card-profile-body">
  85.             <div class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus turpis sem, laoreet vitae mi at, rutrum ullamcorper felis. Nullam vel aliquam massa. Quisque nec nisi eget ante sagittis finibus. Maecenas vulputate blandit mi, eget tincidunt augue.</div>
  86.             <div class="profile-social-links">
  87.                 <a href="" class="profile-social-link"><i class="fab fa-facebook-f"></i></a>
  88.                 <a href="" class="profile-social-link"><i class="fab fa-twitter"></i></a>
  89.                 <a href="" class="profile-social-link"><i class="fab fa-pinterest"></i></a>
  90.                 <a href="" class="profile-social-link"><i class="fab fa-linkedin"></i></a>
  91.             </div>
  92.             </div>
  93.         </div>
  94.         </div>
  95.         <!-- Card Profile Item -->
  96.         <!-- Card Profile Item -->
  97.         <div class="card-profile-item">
  98.         <div class="card-profile">
  99.             <div class="card-profile-header">
  100.             </div>
  101.             <div class="card-profile-subheader">
  102.             <div class="card-profile-details">
  103.                 <div class="profile-img">
  104.                 <img src="./image-4.jpg" alt="Image by wayhomestudio on Freepik">
  105.                 </div>
  106.                 <div class="profile-name">Ella Alvena</div>
  107.                 <div class="profile-sub">Jr. Web Developer</div>
  108.             </div>
  109.             </div>
  110.             <div class="card-profile-body">
  111.             <div class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus turpis sem, laoreet vitae mi at, rutrum ullamcorper felis. Nullam vel aliquam massa. Quisque nec nisi eget ante sagittis finibus. Maecenas vulputate blandit mi, eget tincidunt augue.</div>
  112.             <div class="profile-social-links">
  113.                 <a href="" class="profile-social-link"><i class="fab fa-facebook-f"></i></a>
  114.                 <a href="" class="profile-social-link"><i class="fab fa-twitter"></i></a>
  115.                 <a href="" class="profile-social-link"><i class="fab fa-pinterest"></i></a>
  116.                 <a href="" class="profile-social-link"><i class="fab fa-linkedin"></i></a>
  117.             </div>
  118.             </div>
  119.         </div>
  120.         </div>
  121.         <!-- Card Profile Item -->
  122.     </div>
  123. </body>
  124. </html>

CSS

The following CSS scripts are written in a file script known as style.css. This file is imported or loaded at the index.html file.

Creating the Page Layout Design

The following stylesheet codes are used for designing the page layout, page title, backgrounds, and more.

  1. @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet');
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6.     font-family: 'Dongle', sans-serif;
  7.     font-family: 'Roboto Mono', monospace;
  8. }
  9. ::selection{
  10.     color: #fff;
  11.     background: #4db2ec;
  12. }
  13. body{
  14.     display: flex;
  15.     align-items: center;
  16.     justify-content: center;
  17.     min-height: 100vh;
  18.     background: #0B2447;
  19.     background-image: linear-gradient(to right, #2E4F4F 0%, #0B2447 100%);
  20.     padding: 2em 0;
  21. }
  22. #page-title{
  23.     color: #fff;
  24.     text-align: center;
  25.     font-weight: 500;
  26. }
  27. #title_hr{
  28.     width:60px;
  29.     border: 2px solid #ffffff;
  30.     margin: .35em auto;
  31. }

Creating the Card Wrapper Design

The codes below are used for designing the card items' wrapper or container. It also contains the scripts that make the card items responsive on any device screen.

  1. /* Card Wrapper */
  2. #wrapper{
  3.     width: 1300px;
  4.     margin: 1em auto;
  5.     padding: 1em 2em;
  6.     display: grid;
  7.     grid-template-columns: repeat(4, 1fr);
  8.     grid-gap: 1em;
  9.     margin: 0.35em auto;
  10. }
  11. @media (max-width:1350px){
  12.     #wrapper{
  13.     width: 100%;
  14.     grid-template-columns: repeat(3, 1fr);
  15.     }
  16. }
  17. @media (max-width:950px){
  18.     #wrapper{
  19.     width: 100%;
  20.     grid-template-columns: repeat(2, 1fr);
  21.     }
  22. }
  23. @media (max-width:750px){
  24.     #wrapper{
  25.     width: 100%;
  26.     grid-template-columns: repeat(1, 1fr);
  27.     }
  28. }

Designing the Card Item Containers

The scripts below are the stylesheet codes for the design of the card items container.

  1. /* Card Profile Item */
  2. .card-profile-item {
  3.     margin: auto;
  4. }
  5. /* Card Profile */
  6. .card-profile {
  7.     position: relative;
  8.     width: 300px;
  9.     background: #fff;
  10.     border: 1px solid #c1c1c1;
  11.     border-radius: 2px;
  12.     box-shadow: 0px 0px 5px #0c0c0cab;
  13. }
  14.  
  15. .card-profile:before {
  16.     content: "";
  17.     position: absolute;
  18.     top: 0;
  19.     left: 0;
  20.     z-index: 1;
  21.     width: 100%;
  22.     height: 30vh;
  23.     background: #dfdddd38;
  24.     clip-path: polygon(0% 0%, 1% 0%, 100% 44%, 100% 0%);
  25. }
  26. .card-profile:after {
  27.     content: "";
  28.     position: absolute;
  29.     bottom: 0;
  30.     left: 0;
  31.     z-index: 3;
  32.     width: 100%;
  33.     height: 30vh;
  34.     background: #4c3d3d38;
  35.     clip-path: polygon(66% 0%, 36% 68%, 191% 90%, -22% 100%);
  36. }

Designing the Card Item Header

The script below is the stylesheet codes for designing the card item header image and some triangle designs.

  1. /* Card header */
  2. .card-profile-header {
  3.     position: relative;
  4.     width: 100%;
  5.     height: 30vh;
  6.     margin-bottom: 60px;
  7.     background-image: url(./default-bg.jpg);
  8.     background-size: cover;
  9.     background-repeat: no-repeat;
  10.     background-position: center center;
  11.     overflow-x: hidden;
  12. }
  13.  
  14. .card-profile-header:before {
  15.     content: "";
  16.     position: absolute;
  17.     width: 100%;
  18.     height: 40%;
  19.     bottom: 0;
  20.     border-bottom: 58px solid #c9bebe94;
  21.     border-right: 330px solid transparent;
  22.     left: -330px;
  23. }
  24. .card-profile-header:after {
  25.     content: "";
  26.     position: absolute;
  27.     z-index:1 ;
  28.     width: 100%;
  29.     height: 40%;
  30.     bottom: 0;
  31.     border-bottom: 58px solid #bfbfbf8a;
  32.     border-left: 330px solid transparent;
  33.     right: -330px;
  34. }

Designing the Card Item Sub-Header

The script below is for the design of the member image, name, and position.

  1. /* Position Subheader */
  2. .card-profile-subheader {
  3.     position: relative;
  4.     z-index: 2;
  5.     width: 100%;
  6.     top: -147px;
  7.     left: 0;
  8.     padding-bottom: 1em;
  9. }
  10. /* Position Details */
  11. .card-profile-details {
  12.     position: absolute;
  13.     width: 100%;
  14.     left: 0;
  15. }
  16.  
  17. /* profile image */
  18. .profile-img {
  19.     width: 100px;
  20.     height: 100px;
  21.     margin: 0.35em auto;
  22.     border: 4px solid #fff;
  23.     box-shadow: 3px 3px 10px #00000042;
  24.     border-radius: 50% 50%;
  25.     overflow: hidden;
  26. }
  27. .profile-img > img{
  28.     height: 100%;
  29.     width: 100%;
  30.     object-fit: cover;
  31.     object-position: top center;
  32. }
  33.  
  34. /* Profile Name */
  35. .profile-name {
  36.     padding: 0.05em 2.5em;
  37.     text-align: center;
  38.     font-size: 1.1rem;
  39.     color: #323232;
  40. }
  41. .profile-sub {
  42.     padding: 0 3em;
  43.     text-align: center;
  44.     font-size: .8rem;
  45.     color: #5c5c5c;
  46. }

Designing the Card Item Body

Lastly, here are the scripts used for designing the card body contents or the other details of the members such as the social links.

  1. /* Card Body */
  2. .card-profile-body {
  3.     position: relative;
  4.     padding: 0.5em 1em;
  5. }
  6.  
  7. /* Card Description */
  8. .profile-description {
  9.     color: #020202;
  10.     line-height: 1.2em;
  11.     font-size: .8rem;
  12.     font-weight: 300;
  13.     text-align: unset;
  14.     word-break: break-all;
  15.     padding-bottom: 1em;
  16. }
  17.  
  18. /* Social Links */
  19. .profile-social-links {
  20.     position: relative;
  21.     z-index: 4;
  22.     display: flex;
  23.     flex-wrap: wrap;
  24.     justify-content: space-evenly;
  25. }
  26.  
  27. a.profile-social-link {
  28.     display: flex;
  29.     width: 1.8rem;
  30.     height: 1.8rem;
  31.     background: #fff;
  32.     text-decoration: none;
  33.     border-radius: 50% 50%;
  34.     color: #0e0e0e;
  35.     font-size: 0.8rem;
  36.     align-items: center;
  37.     justify-content: center;
  38.     border: 1px solid #e5e5e5;
  39.     box-shadow: 0px 0px 13px #00000029;
  40.     transition: all .2s ease;
  41. }
  42. a.profile-social-link:hover {
  43.     transform: scale(1.04) translateY(-1px);
  44. }

Snapshots

Here are some snapshots of the overall result of the script I have provided above.

Desktop View

Responsive Our Team Profile Section Template using HTML and CSS

Tablet View

Responsive Our Team Profile Section Template using HTML and CSS

Mobile/Smartphone View

Responsive Our Team Profile Section Template using HTML and CSS

DEMO Video

There you go! I have provided also the complete source code zip file including the images I have used for the sample web page on this website and it is free to download. Feel free to download and modify the source code to do some experiments to enhance your HTML and CSS knowledge and capabilities.

That's it! I hope this Creating a Responsive Our Team Template using HTML and CSS Tutorial will help you with what you are looking for and will be useful for your current and future web application or website projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags

Add new comment

About text formats
  • 998 views