you can simply display your team member in this design. in this design you can display user image,name,description and his position.

you can get code of our team page design snippet. we give you example of our team page design bootstrap , you can simple copy bellow code and use in your project. If it free snippets of meet our team page design So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code company employee list snippets, click on JS Code tab get code of jquery codd for user list design snippets, same as for CSS Code tab. It's pretty easy and simple example of responsive our team page snippet.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container text-center"> <div class="row"> <div class="col-md-12 headding-title"> <h1>Our Team</h1> </div> </div> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12 team-box"> <div class="team-boxs"> <img src="/demo/man01.png"> <h4>Jhon Cook</h4> <h5>Web Dewloper</h5> <p>Lorem ipsum dolor sit amet, consectetur sed do eiusmod tempor incididunt.</p> <button class="btn">Read More</button> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12 team-box"> <div class="team-boxs"> <img src="/demo/man02.png"> <h4>Selena Jhonson</h4> <h5>Web Designer</h5> <p>Lorem ipsum dolor sit amet, consectetur sed do eiusmod tempor incididunt.</p> <button class="btn">Read More</button> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12 team-box"> <div class="team-boxs"> <img src="/demo/man03.png"> <h4>Jenifar Lisa</h4> <h5>Web Dewloper</h5> <p>Lorem ipsum dolor sit amet, consectetur sed do eiusmod tempor incididunt.</p> <button class="btn">Read More</button> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12 team-box"> <div class="team-boxs"> <img src="/demo/man04.png"> <h4>Win Desal</h4> <h5>Web Designer</h5> <p>Lorem ipsum dolor sit amet, consectetur sed do eiusmod tempor incididunt.</p> <button class="btn">Read More</button> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12 team-box"> <div class="team-boxs"> <img src="/demo/man01.png"> <h4>Jonty Krooj</h4> <h5>Web Dewloper</h5> <p>Lorem ipsum dolor sit amet, consectetur sed do eiusmod tempor incididunt.</p> <button class="btn">Read More</button> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12 team-box"> <div class="team-boxs"> <img src="/demo/man02.png"> <h4>Brendal Win</h4> <h5>Web Designer</h5> <p>Lorem ipsum dolor sit amet, consectetur sed do eiusmod tempor incididunt.</p> <button class="btn">Read More</button> </div> </div> </div> </div> </body> </html>
body{ padding-bottom: 50px; } .headding-title{ background: #FA566E; color: #fff; } .team-box{ z-index:1000; height:290px; padding: 0px; } .team-box:hover{ z-index:1001; } .team-boxs{ position: relative; height:290px; width: 100%; padding:30px; background-color:#fff; border:1px solid #F0F0F0; } .team-boxs:hover{ top:-15px; left:-15px; height:320px; width: calc(100% + 30px); transition: all 0.7s; box-shadow: 0px 0px 15px 0px #555; } .team-boxs img{ width:80px; height:80px; border-radius:50%; } .team-boxs:hover.team-boxs img{ border:2px solid #FA566E; padding:2px; } .team-boxs h4{ font-weight: bold; color:#898695; } .team-boxs h5{ font-size:16px; color:#898686; } .team-boxs p{ color:#A9A9A9; } .team-boxs .btn{ background: #FA566E; color: #fff; }




Random Post




Related Post

Our team section layout design in bootstrap

Our team section layout design in bootstrap

Ready Code of Our team section layout design in bootstrap css framework

Read More
Bootstrap responsive pricing table with hover effect example

Bootstrap responsive pricing table with hover effect example

Bootstrap responsive pricing table using html and css. pricing table with multiple plan design (basic plan, pro plan, premium plan). pricing table with hover ef...

Read More
Latest arrow blog page design using bootstrap

Latest arrow blog page design using bootstrap

Bootstrap responsive blog page eaxple. blog page design with user list. blog page create using html and css. you can get code of new user list page design sn...

Read More