Hello guys today we will learn how to create a meet the team section
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Team Cards</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Serif:wght@300;400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="teamWrapper"> <div class="container"> <h1 align="center">Our Team</h1> <p align="center">Something about our team</p> <div class="teamGrid"> <div class="colmun"> <div class="teamcol"> <div class="teamcolinner"> <div class="avatar"><img src="ketty.jpg" alt="Member"></div> <div class="member-name"> <h2 align="center">Ketty Leroux</h2> </div> <div class="member-info"><p align="center">Lorem Ipsum is a simply dummy text of the printing and typesetting industry.</p></div> <div class="member-mail"> <p align="center"> <a href="mailto:kettyleroux@gmail.com">kettyleroux@gmail.com</a> </p> </div> <div class="member-social"> <ul class="social-listing"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> </ul> </div> </div> </div> </div> <div class="colmun"> <div class="teamcol"> <div class="teamcolinner"> <div class="avatar"><img src="ketty.jpg" alt="Member"></div> <div class="member-name"> <h2 align="center">Ketty Leroux</h2> </div> <div class="member-info"><p align="center">Lorem Ipsum is a simply dummy text of the printing and typesetting industry.</p></div> <div class="member-mail"> <p align="center"> <a href="mailto:kettyleroux@gmail.com">kettyleroux@gmail.com</a> </p> </div> <div class="member-social"> <ul class="social-listing"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> </ul> </div> </div> </div> </div> <div class="colmun"> <div class="teamcol"> <div class="teamcolinner"> <div class="avatar"><img src="ketty.jpg" alt="Member"></div> <div class="member-name"> <h2 align="center">Ketty Leroux</h2> </div> <div class="member-info"><p align="center">Lorem Ipsum is a simply dummy text of the printing and typesetting industry.</p></div> <div class="member-mail"> <p align="center"> <a href="mailto:kettyleroux@gmail.com">kettyleroux@gmail.com</a> </p> </div> <div class="member-social"> <ul class="social-listing"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
body { padding: 0; margin: 0; font-family: 'IBM Plex Serif',Serif; background: #f3f3f3; } h1,h2,h3 { margin: 0; font-family: 'IBM Plex Sans',Serif; } p { margin: 0; font-size: 18px; line-height: 24px; } a { color: #005eeb; } a:hover { color: #ffb200; } .teamWrapper { margin-top: 50px; } .container { --container: 1160px; max-width: var(--container); margin: auto; } .teamGrid { display: grid; grid-template-columns: 32.33% 32.33% 32.33%; column-gap: 1.5%; margin-top: 100px; } .avatar { position: absolute; left: 0; right: 0; top: -80px; text-align: center; } .teamcolinner { position: relative; } .avatar > img { width: 150px; margin: auto; border-radius: 50%; border: 1px solid rgb(170 170 173/ 1); box-shadow: 0px 3px 10px 3px rgb(170 170 173 / 0.5); } .teamcolinner { position: relative; border: 1px dashed #ddd; min-height: 100px; background: #fff; z-index: 9; } .teamcol { padding: 15px; background: #fff; border-radius: 10px; position: relative; transition: transform 1s ease-in-out; } .teamcol:hover { transform: translateY(-30px); box-shadow: 0px 3px 10px 3px rgb(170 170 173 / 0.5); transition: transform 1s ease-in-out; } .teamcol:before { content: ""; width: 50%; height: 50%; position: absolute; right: 0; top: 0; background: -webkit-linear-gradient(#ffbf00, #ffa000); border-top-right-radius: 10px; transition: width 1s ease-in-out; } .teamcol:after { content: ""; width: 50%; height: 50%; position: absolute; left: 0; bottom: 0; background: -webkit-linear-gradient(#0052cc, #005fec); border-bottom-left-radius: 10px; transition: width 1s ease-in-out; } .teamcol:hover::before, .teamcol:hover::after { width: 100%; transition: width 1s ease-in-out; } .member-name { margin-top: 80px; } .member-info { padding: 10px 20px; } .social-listing { align-items: center; justify-content: center; display: flex; list-style: none; padding: 0; } .social-listing >li { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #f4f5f7; border-radius: 50%; margin: 5px; }