Responsive team profile với Bootstrap 3

Hôm nay mình sẽ chia sẻ cho các bạn một mẫu tạo trang proflie ấn tượng với khả năng hiển thị tốt trên nhiều kích thước màn hình khác nhau (responsive). Với mẫu này, các bạn còn có thể tận dụng để hiển thị bài viết , sản phẩm trong các trang bán hàng, rất hữu ích lưu trữ để dùng về sau.

Responsive team profile với Bootstrap 3

Xem Demo | Download

HTML

Chúng ta sẽ sử dụng Bootstrap 3 để tạo trang profile, và dùng FontAwesome để tạo icon,vì thế đừng quên chèn khai báo sau đây vào bên trong cặp thẻ <head></head>

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

Mẫu profile này bao gồm hình ảnh đại diện, thông tin mô tả ngắn và tích hợp thêm các icon mạng xã hội để người dùng có thể theo dõi. Tất cả được gói gọn trong đoạn html bên dưới.

 <section class="team">   <div class="container">     <div class="row">       <div class="col-md-10 col-md-offset-1">         <div class="col-lg-12">           <h6 class="description">OUR TEAM</h6>           <div class="row pt-md">             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/1.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Marrie Doi</h1>               <h2>Co-founder/ Operations</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/2.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Christopher Di</h1>               <h2>Co-founder/ Projects</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/3.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Heather H</h1>               <h2>Co-founder/ Marketing</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/4.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>John Doe</h1>               <h2>Designer</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/5.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Peter John</h1>               <h2>Web Developer</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/6.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Cherry John</h1>               <h2>Fullstack Developer</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/7.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Frank Martin</h1>               <h2>Co-founder/ Operations</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/8.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Christopher Di</h1>               <h2>Co-founder/ Projects</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/9.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Heather H</h1>               <h2>Co-founder/ Marketing</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/10.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Nancy Doe</h1>               <h2>Designer</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/11.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Stella John</h1>               <h2>Web Developer</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>             <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">               <div class="img-box">                 <img src="team/12.jpg" class="img-responsive">                 <ul class="text-center">                   <a href="#"><li><i class="fa fa-facebook"></i></li></a>                   <a href="#"><li><i class="fa fa-twitter"></i></li></a>                   <a href="#"><li><i class="fa fa-linkedin"></i></li></a>                 </ul>               </div>               <h1>Cherry John</h1>               <h2>Fullstack Developer</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>             </div>           </div>         </div>       </div>     </div>   </div> </section> 

CSS

Các bạn chỉ cần chèn thêm đoạn css này để sắp xếp mọi thứ gọn gàng và dễ nhìn hơn.

 @import url(https://fonts.googleapis.com/css?family=Quicksand:400,300); body{     font-family: 'Quicksand', sans-serif; } .team{     padding:75px 0; } h6.description{   font-weight: bold;   letter-spacing: 2px;   color: #999;   border-bottom: 1px solid rgba(0, 0, 0,0.1);   padding-bottom: 5px; } .profile{   margin-top: 25px; } .profile h1{   font-weight: normal;   font-size: 20px;   margin:10px 0 0 0; } .profile h2{   font-size: 14px;   font-weight: lighter;   margin-top: 5px; } .profile .img-box{   opacity: 1;   display: block;   position: relative; } .profile .img-box:after{   content:"";   opacity: 0;   background-color: rgba(0, 0, 0, 0.75);   position: absolute;   right: 0;   left: 0;   top: 0;   bottom: 0; } .img-box ul{   position: absolute;   z-index: 2;   bottom: 50px;   text-align: center;   width: 100%;   padding-left: 0px;   height: 0px;   margin:0px;   opacity: 0; } .profile .img-box:after, .img-box ul, .img-box ul li{   -webkit-transition: all 0.5s ease-in-out 0s;     -moz-transition: all 0.5s ease-in-out 0s;     transition: all 0.5s ease-in-out 0s; } .img-box ul i{   font-size: 20px;   letter-spacing: 10px; } .img-box ul li{   width: 30px;     height: 30px;     text-align: center;     border: 1px solid #88C425;     margin: 2px;     padding: 5px;   display: inline-block; } .img-box a{   color:#fff; } .img-box:hover:after{   opacity: 1; } .img-box:hover ul{   opacity: 1; } .img-box ul a{   -webkit-transition: all 0.3s ease-in-out 0s;   -moz-transition: all 0.3s ease-in-out 0s;   transition: all 0.3s ease-in-out 0s; } .img-box a:hover li{   border-color: #fff;   color: #88C425; } a{     color:#88C425; } a:hover{     text-decoration:none;     color:#519548; } i.red{     color:#BC0213; } 

Mình hy vọng là với bài viết này, các bạn có thể học thêm về cách sử dụng cũng như thêm một mẫu ứng dụng được hỗ trợ từ Bootstrap 3 trong bộ sưu tập của mình.

Chúc các bạn thành công !

Nguồn: https://www.thuthuatweb.net/css/responsive-team-profile-voi-bootstrap-3.html

The post Responsive team profile với Bootstrap 3 appeared first on Tin Công Nghệ – Phim Ảnh.

Bài viết liên quan

  • Weather Widgets : Mẫu dự báo thời tiết đơn giản bằng CSS3

    Weather Widgets : Mẫu dự báo thời tiết đơn giản...

    Khi chúng ta lướt qua những trang dự báo thời tiết trên internet, hẳn là các bạn sẽ bắt gặp những icon cũng...

  • WordPress :Tự động thông báo người dùng khi có bài viết mới

    WordPress :Tự động thông báo người dùng khi có bài...

    Việc tăng lượt truy cập luôn luôn là yếu tố hàng đầu mà chúng ta cần phải thực hiện. Ngoài việc chia sẻ...

  • Loading icon cực sáng tạo với HTML5 & CSS3

    Loading icon cực sáng tạo với HTML5 & CSS3

    Hôm nay mình sẽ mang đến cho các bạn thêm một mẫu loading rất dễ làm với sự kết hợp hoàn hảo giữa...

  • Chưa có bình luận nào