SHARE
TWEET

how-to-change-4-image-layout

a guest Jun 14th, 2018 139 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.                 <div class="container">
  2.  
  3.                     <h2>Meet the <strong>Team</strong></h2>
  4.  
  5.                     <ul class="nav nav-pills sort-source" data-sort-id="team" data-option-key="filter">
  6.                         <li class="nav-item" data-option-value="*"><a class="nav-link active" href="#">Show All</a></li>
  7.                         <li class="nav-item" data-option-value=".leadership"><a class="nav-link" href="#">Leadership</a></li>
  8.                         <li class="nav-item" data-option-value=".marketing"><a class="nav-link" href="#">Marketing</a></li>
  9.                         <li class="nav-item" data-option-value=".development"><a class="nav-link" href="#">Development</a></li>
  10.                         <li class="nav-item" data-option-value=".design"><a class="nav-link" href="#">Design</a></li>
  11.                     </ul>
  12.  
  13.                     <div class="sort-destination-loader sort-destination-loader-showing mt-4 pt-2">
  14.                         <div class="row team-list sort-destination" data-sort-id="team">
  15.                             <div class="col-12 col-sm-6 col-lg-4 isotope-item leadership">
  16.                                 <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
  17.                                     <span class="thumb-info-wrapper">
  18.                                         <a href="about-me.html">
  19.                                             <img src="img/team/team-1.jpg" class="img-fluid" alt="">
  20.                                             <span class="thumb-info-title">
  21.                                                 <span class="thumb-info-inner">John Doe</span>
  22.                                                 <span class="thumb-info-type">CEO</span>
  23.                                             </span>
  24.                                         </a>
  25.                                     </span>
  26.                                     <span class="thumb-info-caption">
  27.                                         <span class="thumb-info-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</span>
  28.                                         <span class="thumb-info-social-icons">
  29.                                             <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  30.                                             <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  31.                                             <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  32.                                         </span>
  33.                                     </span>
  34.                                 </span>
  35.                             </div>
  36.                             <div class="col-12 col-sm-6 col-lg-4 isotope-item marketing">
  37.                                 <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
  38.                                     <span class="thumb-info-wrapper">
  39.                                         <a href="about-me.html">
  40.                                             <img src="img/team/team-2.jpg" class="img-fluid" alt="">
  41.                                             <span class="thumb-info-title">
  42.                                                 <span class="thumb-info-inner">Jessica Doe</span>
  43.                                                 <span class="thumb-info-type">Marketing</span>
  44.                                             </span>
  45.                                         </a>
  46.                                     </span>
  47.                                     <span class="thumb-info-caption">
  48.                                         <span class="thumb-info-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</span>
  49.                                         <span class="thumb-info-social-icons">
  50.                                             <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  51.                                             <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  52.                                             <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  53.                                         </span>
  54.                                     </span>
  55.                                 </span>
  56.                             </div>
  57.                             <div class="col-12 col-sm-6 col-lg-4 isotope-item development">
  58.                                 <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
  59.                                     <span class="thumb-info-wrapper">
  60.                                         <a href="about-me.html">
  61.                                             <img src="img/team/team-3.jpg" class="img-fluid" alt="">
  62.                                             <span class="thumb-info-title">
  63.                                                 <span class="thumb-info-inner">Rick Edward Doe</span>
  64.                                                 <span class="thumb-info-type">Developer</span>
  65.                                             </span>
  66.                                         </a>
  67.                                     </span>
  68.                                     <span class="thumb-info-caption">
  69.                                         <span class="thumb-info-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</span>
  70.                                         <span class="thumb-info-social-icons">
  71.                                             <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  72.                                             <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  73.                                             <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  74.                                         </span>
  75.                                     </span>
  76.                                 </span>
  77.                             </div>
  78.                             <div class="col-12 col-sm-6 col-lg-4 isotope-item design">
  79.                                 <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
  80.                                     <span class="thumb-info-wrapper">
  81.                                         <a href="about-me.html">
  82.                                             <img src="img/team/team-4.jpg" class="img-fluid" alt="">
  83.                                             <span class="thumb-info-title">
  84.                                                 <span class="thumb-info-inner">Melinda Doe</span>
  85.                                                 <span class="thumb-info-type">Design</span>
  86.                                             </span>
  87.                                         </a>
  88.                                     </span>
  89.                                     <span class="thumb-info-caption">
  90.                                         <span class="thumb-info-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</span>
  91.                                         <span class="thumb-info-social-icons">
  92.                                             <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  93.                                             <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  94.                                             <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  95.                                         </span>
  96.                                     </span>
  97.                                 </span>
  98.                             </div>
  99.                             <div class="col-12 col-sm-6 col-lg-4 isotope-item development">
  100.                                 <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
  101.                                     <span class="thumb-info-wrapper">
  102.                                         <a href="about-me.html">
  103.                                             <img src="img/team/team-5.jpg" class="img-fluid" alt="">
  104.                                             <span class="thumb-info-title">
  105.                                                 <span class="thumb-info-inner">Robert Doe</span>
  106.                                                 <span class="thumb-info-type">Design</span>
  107.                                             </span>
  108.                                         </a>
  109.                                     </span>
  110.                                     <span class="thumb-info-caption">
  111.                                         <span class="thumb-info-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</span>
  112.                                         <span class="thumb-info-social-icons">
  113.                                             <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  114.                                             <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  115.                                             <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  116.                                         </span>
  117.                                     </span>
  118.                                 </span>
  119.                             </div>
  120.                             <div class="col-12 col-sm-6 col-lg-4 isotope-item marketing">
  121.                                 <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
  122.                                     <span class="thumb-info-wrapper">
  123.                                         <a href="about-me.html">
  124.                                             <img src="img/team/team-6.jpg" class="img-fluid" alt="">
  125.                                             <span class="thumb-info-title">
  126.                                                 <span class="thumb-info-inner">Melissa Doe</span>
  127.                                                 <span class="thumb-info-type">Marketing</span>
  128.                                             </span>
  129.                                         </a>
  130.                                     </span>
  131.                                     <span class="thumb-info-caption">
  132.                                         <span class="thumb-info-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</span>
  133.                                         <span class="thumb-info-social-icons">
  134.                                             <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  135.                                             <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  136.                                             <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  137.                                         </span>
  138.                                     </span>
  139.                                 </span>
  140.                             </div>
  141.                             <div class="col-12 col-sm-6 col-lg-4 isotope-item development">
  142.                                 <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
  143.                                     <span class="thumb-info-wrapper">
  144.                                         <a href="about-me.html">
  145.                                             <img src="img/team/team-7.jpg" class="img-fluid" alt="">
  146.                                             <span class="thumb-info-title">
  147.                                                 <span class="thumb-info-inner">Will Doe</span>
  148.                                                 <span class="thumb-info-type">Developer</span>
  149.                                             </span>
  150.                                         </a>
  151.                                     </span>
  152.                                     <span class="thumb-info-caption">
  153.                                         <span class="thumb-info-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</span>
  154.                                         <span class="thumb-info-social-icons">
  155.                                             <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  156.                                             <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  157.                                             <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  158.                                         </span>
  159.                                     </span>
  160.                                 </span>
  161.                             </div>
  162.                             <div class="col-12 col-sm-6 col-lg-4 isotope-item development">
  163.                                 <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
  164.                                     <span class="thumb-info-wrapper">
  165.                                         <a href="about-me.html">
  166.                                             <img src="img/team/team-8.jpg" class="img-fluid" alt="">
  167.                                             <span class="thumb-info-title">
  168.                                                 <span class="thumb-info-inner">Jerry Doe</span>
  169.                                                 <span class="thumb-info-type">Developer</span>
  170.                                             </span>
  171.                                         </a>
  172.                                     </span>
  173.                                     <span class="thumb-info-caption">
  174.                                         <span class="thumb-info-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</span>
  175.                                         <span class="thumb-info-social-icons">
  176.                                             <a target="_blank" href="http://www.facebook.com"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  177.                                             <a href="http://www.twitter.com"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  178.                                             <a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
  179.                                         </span>
  180.                                     </span>
  181.                                 </span>
  182.                             </div>
  183.                         </div>
  184.  
  185.                     </div>
  186.  
  187.                 </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top