Team Member page design | Web Design

The following article shows the design of the team member page. Showing a team member page is a good way to develop trust in your customer.

Team member page design

We will use HTML and CSS for the design of the page. For the ease of design, we will use bootstrap. Our final page will look like as shown above. You can modify the code to suit your design.

HTML code

<!DOCTYPE html>
<html>
<head>
    <title>Team Members</title>
    <link href="main.css" rel="stylesheet" type="text/css" >
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
    <h1 class="text-center mt-5 mb-3">Team Members</h1>
    <div class="card">
    <div class="card-body">
        
        <div class="teammembers">
        <div class="idle">
        </div>
        <div class="teamcontent">
        <img src="myimg.jpg" class="teamimg">
        <div class="teamname">
            Gurleen Rajpal
        </div>
        <div class="teampart">
            Founder
        </div>
        <div class="teamdesc">
            <p>He is the founder of the website. Put Description here.</p>
        </div>
        </div>
        </div>
        
        <div class="teammembers">
        <div class="idle">
        </div>
        <div class="teamcontent">
        <img src="myimg.jpg" class="teamimg">
        <div class="teamname">
            Shreya Prajapati
        </div>
        <div class="teampart">
            Business Development
        </div>
        <div class="teamdesc">
            She is the business developer. Put Description here.
            Change image by url
        </div>
        </div>
        </div>
        
        <div class="teammembers">
        <div class="idle">
        </div>
        <div class="teamcontent">
        <img src="myimg.jpg" class="teamimg">
        <div class="teamname">
            Mark J Jones
        </div>
        <div class="teampart">
            Wealth Manager
        </div>
        <div class="teamdesc">
            He is the wealth manager. Put Description here.
        </div>
        </div>
        </div>
        
    </div>
    </div>
</div>    
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

CSS Code


.teammembers {
    height: 420px;
    margin: 20px;
    width: 300px;
    float: left;
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: 3px 5px 1px lightgrey;
    align-items: center;
}
.idle{
    height: 80px;
    background-color: white;
    width: 100%;
    float: left;
}
h1{
    color: #003f71 !important;
}
.teamcontent{
    height: 340px;
    border-top:5px solid #003f71;
    width: 100%;
    float: left;
}
.teamname{
    margin-top: 5px;
    text-align: center;
    width: 100%;
    color: black;
    font-size: 120%;
}
.teampart{
    text-align: center;
    color: #b8bbb8;
    width: 100%;
    float: left;
    font-size: 110%;
}
.teamdesc{
    text-align: center;
    margin: 5px;
    width: 100%;
    float: left;
    font-size: 100%;
    
}
.teamimg{
    height: 100px;
    width: 100px;
    border: 2px solid black;
    border-radius: 25px;
    margin-left: 100px;
    margin-top: -60px;
}

Happy Coding.

Leave a Reply