An Interest In:
Web News this Week
- May 1, 2024
- April 30, 2024
- April 29, 2024
- April 28, 2024
- April 27, 2024
- April 26, 2024
- April 25, 2024
Some of Our Sources
- Simplebits
- Web Designer Wall
- Smashing Apps
- You The Designer
- Inspiredology
- Fudge Graphics
- Line 25
- Wal You
- Spyre Studios
- Codrops
Help Webnuz
Referal links:
May 13, 2021 09:16 am GMT
Original Link: https://dev.to/sonali_roy/how-to-create-responsive-team-section-using-html-css-29b2
How To Create Responsive Team Section Using HTML & CSS
The team section is a type of web element that you can use to introduce your team members to different types of service websites and portfolio websites. Today I am going to show you how to create a Responsive Team section using only simple HTML, CSS, and bootstrap programming code.
In this section, I have divided it into four columns. You can add more team member information here if you want. The hover effect has been used here, meaning that the color change can be seen by moving the mouse over the image of each team member.
You can use the download link to download the source codes.
Add this link to the head section which will help you to make this team section responsive. Also here I have used font awesome's icon CDN link. Icons have been created with it.
HTML Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"></head><body style="background: black;"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="our-team"> <div class="pic"> <img src="image1.jpg"> </div> <h3 class="title">Williamson</h3> <span class="post">Web Developer</span> <ul class="social"> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-google-plus"></a></li> <li><a href="#" class="fa fa-linkedin"></a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="our-team"> <div class="pic"> <img src="image2.jpg"> </div> <h3 class="title">Kristiana</h3> <span class="post">Web Designer</span> <ul class="social"> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-google-plus"></a></li> <li><a href="#" class="fa fa-linkedin"></a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="our-team"> <div class="pic"> <img src="image3.jpg"> </div> <h3 class="title">Kristiana</h3> <span class="post">Web Designer</span> <ul class="social"> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-google-plus"></a></li> <li><a href="#" class="fa fa-linkedin"></a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="our-team"> <div class="pic"> <img src="image4.jpg"> </div> <h3 class="title">Kristiana</h3> <span class="post">Web Designer</span> <ul class="social"> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-google-plus"></a></li> <li><a href="#" class="fab fa-linkedin"></a></li> </ul> </div> </div> </div> </div></body></html>CSS Code:
html{ background: #000000; margin-top: 100px;}.container{ background: #000000;}.our-team{ padding: 20px 15px 30px; background: #fff; border-radius: 15px; text-align: center;}.our-team .pic{ display: inline-block; width: 100%; height: 100%; background: #fff; padding: 10px; margin-bottom: 25px; transition: all 0.5s ease 0s;}.our-team:hover .pic{ background: #17bebb; border-radius: 50%;}.pic img{ width: 100%; height: auto; border-radius: 50%;}.our-team .title{ display: block; font-size: 20px; font-weight: 600; color: #2e282a; text-transform: uppercase; margin: 0 0 7px 0;}.our-team .post{ display: block; font-size: 15px; color: #17bebb; text-transform: capitalize; margin-bottom: 15px;}.our-team .social{ padding: 0; margin: 0; list-style: none;}.our-team .social li{ display: inline-block; margin-right: 5px;}.our-team .social li a{ display: block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 15px; color: #17bebb; border: 1px solid #17bebb; transition: all 0.5s ease 0s;}.our-team:hover .social li a{ background: #17bebb; color: #fff;}@media only screen and (max-width: 990px){ .our-team{ margin-bottom: 30px; }}Original Link: https://dev.to/sonali_roy/how-to-create-responsive-team-section-using-html-css-29b2
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To