Team Member card is more important to describe shortly about the team members. The 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 this Responsive Our Team Section Card Design in the website to describe briefly the team members.
In this blog (Responsive Our Team Section Card Design), there is three member’s card of a team with their photo, name, the role of the particular person in the team, a description about the role of the person in the team. You can add the team member’s photo at the place of the icon.
As per many Members of a team, you can create many cards. This page (Responsive Our Team Section Card Design), is made responsive. When this page (Responsive Our Team Section Card Design) is viewed in mobile mode, the cards are arranged one by one.
The source code of this Responsive Our Team Section Card Design is given below, if you want the source code of this program, you can copy it. You can use this Responsive Our Team Section Card Design with your creativity and can take this project to the next level.
Responsive Our Team Section using HTML & CSS with modern UI Card Design [Source Code]
To make this website (Responsive Our Team Section Card Design), you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to make a file with a .html extension.
CSS provides style to an HTML page. To form the page attractive create a CSS file with the name style.css and remember that you have got to make a file with a .css extension.
@import url('https://fonts.googleapis.com/css?family=Allura|Josefin+Sans');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
font-family: 'Josefin Sans', sans-serif;
}
.wrapper{
margin-top: 50px;
background-color: transparent;
}
.wrapper h1{
font-family: 'Courier New', Courier, monospace;
font-size: 52px;
margin-bottom: 60px;
text-align: center;
}
.team{
display: flex;
justify-content: center;
width: auto;
text-align: center;
flex-wrap: wrap;
background-color: transparent;
}
.team .team_member{
background: #fff;
margin: 10px;
margin-bottom: 50px;
width: 300px;
padding: 20px;
line-height: 20px;
color: #8e8b8b;
position: relative;
border-radius:12px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.team .team_member h3{
color: #000;
font-size: 26px;
margin-top: 50px;
}
.team .team_member p.role{
color: orange;
margin: 12px 0;
font-size: 13px;
font-weight:bold;
text-transform: uppercase;
}
.team .team_member .team_img{
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
border:5px solid orange;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.team .team_member .team_img img{
width: 90px;
height: 90px;
padding: 5px;
border-radius: 50%;
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}We
hope you would like this
Thank you for reading our blog. If you face any problem in creating this Responsive Our Team Section using HTML & CSS with modern UI Card Design, 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