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 snippet. we give you example of bootstrap user list with social icons , you can simple copy bellow code and use in your project. If it free snippets of bootstrap author box with image 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 bootstrap compay employee list snippets, click on JS Code tab get code of jquery codd for best staff pages snippets, same as for CSS Code tab. It's pretty easy and simple example of office staff introduction web design 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 blog-section"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12 fist-section"> <div class="row"> <div class="col-md-6 col-sm-6 image-left text-center"> <img src="/demo/businessman.png"> </div> <div class="col-md-6 col-sm-6 detail-right arrow-right"> <h1>ANDY WIN</h1> <p>Lorem ipsum dolor sit amet,jijo adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p> <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 fist-section"> <div class="row"> <div class="col-md-6 col-sm-6 image-left text-center"> <img src="/demo/businessman.png"> </div> <div class="col-md-6 col-sm-6 detail-right arrow-right"> <h1>WIN DESAL</h1> <p>Lorem ipsum dolor sit amet,jijo adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p> <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12 text-center next-section"> <div class="row"> <div class="col-md-6 col-sm-6 detail-right arrow-left"> <h1>MICAL WON</h1> <p>Lorem ipsum dolor sit amet,jijo adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p> <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a> </div> <div class="col-md-6 col-sm-6 image-left image-center"> <img src="/demo/businessman.png"> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 text-center"> <div class="row"> <div class="col-md-6 col-sm-6 detail-right arrow-left"> <h1>JOHN LISN</h1> <p>Lorem ipsum dolor sit amet,jijo adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p> <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a> </div> <div class="col-md-6 col-sm-6 image-left image-center"> <img src="/demo/businessman.png"> </div> </div> </div> </div> </div> </body> </html>
body{ background-color: #F0F0F0; } .blog-section{ background-color: #f1f1f1; padding: 30px 50px; } .image-left{ height:292px; padding:0px; background-color: #fff; } .image-left img{ position: relative; top: 50%; transform: translateY(-50%); } .detail-right{ color:#fff; } .detail-right{ background-color:#24DEE1; text-align: center; height:292px; } .detail-right h1{ margin:0px; font-size: 20px; padding:68px 0px 0px 0px; } .detail-right p{ padding:8px 0px 0px 0px; font-size:13px; } .detail-right a i{ background-color: #fff; padding: 8px; width: 30px; border-radius:50%; color:#24DEE1; } .arrow-right:before{ content: " "; position:absolute; left: -40px; top:50%; transform: translateY(-50%); border:20px solid transparent; border-right-color:#24DEE1; } .arrow-left:after{ content: " "; position:absolute; top: 50%; transform: translateY(-50%); right: -40px; border:20px solid transparent; border-left-color:#24DEE1; z-index: 1; } @media(min-width : 320px) and (max-width : 360px){ .arrow-right:before { left: 50%; transform: translateX(-50%); top: -40px; border:20px solid transparent; border-bottom-color:#24DEE1; } .arrow-left:after{ top: unset; bottom: -60px; right: unset; left: 50%; transform: translateY(-50%); border:20px solid transparent; border-top-color:#24DEE1; } }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post