API tools faq
paste
SparklyLightus

Class

SparklyLightus
Jul 6th, 2021 (edited)
741
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.50 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. A2CACC >> light accent color
  3. 5D7DAA >> mid accent color
  4. 193188 >> dark accent color
  5. -->
  6. <div class="row no-gutters mx-auto" style="max-width: 1000px;">
  7.     <!-- ....................... LEFT -->
  8.     <div class="col-lg-3">
  9.         <!-- QUOTE -->
  10.         <div class="m-1 p-2 px-3 text-white justify-content-center align-items-center" style="height: 200px; border-radius: 30px 10px 30px 10px; background: #A2CACC;">
  11.             <h1 class="text-center font-weight-light">
  12.                 <i class="fad fa-fw fa-xs fa-quote-left"></i>
  13.                     Quote here.
  14.                 <i class="fad fa-fw fa-xs fa-quote-right"></i>
  15.             </h1>
  16.         </div>
  17.         <!-- IMAGE -->
  18.         <div style="background: url('//via.placeholder.com/1000') center;
  19.        background-size: cover; height: 324px; border-radius: 10px 30px 10px 30px;" class="m-1"></div>
  20.     </div>
  21.    
  22.     <!-- ....................... RIGHT -->
  23.     <div class="col-lg-9 row no-gutters d-flex">
  24.         <!-- BIO -->
  25.         <div class="col-12"> <div class="m-1 p-2 px-3 bg-faded" style="height: 320px; overflow: auto; border-radius: 10px 30px 10px 30px;">
  26.             <div class="row no-gutters">
  27.                 <h1 class="mx-1 col-auto font-weight-light text-primary display-4">Name</h1>
  28.                 <div class="mt-4 col text-primary" style="border-top: 2px dotted;"></div>
  29.                 <h1 class="mx-1 col-auto text-primary display-4"> <i class="fal fa-star"></i> </h1>
  30.             </div>
  31.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  32.             <p>This box will scroll if there's enough content.</p>
  33.         </div> </div>
  34.        
  35.         <!-- PEOPLE -->
  36.         <div class="col-lg-7"> <div class="m-1 p-0 card border-0 bg-faded" style="overflow: hidden; border-radius: 30px 10px 10px 10px;">
  37.             <!-- CAROUSEL -->
  38.             <div id="carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner">
  39.                 <!-- PERSON -->
  40.                 <div data-interval="9999999" style="height: 200px; overflow: auto;" class="p-2 carousel-item active">
  41.                     <div class="m-1 mr-2 float-left justify-content-center rounded-circle" style="background: #A2CACC;">
  42.                         <img src="//via.placeholder.com/200" style="height: 120px; width: 120px;"></div>
  43.                    
  44.                     <h3 class="m-0"><a class="text-secondary" href="LINK">
  45.                         Name1</a></h3>
  46.                     <p>Cras elementum lectus diam. In non lacus metus. Nunc maximus consequat urna, sit amet interdum ipsum varius eget. Vestibulum erat est.</p>
  47.                    
  48.                     <hr class="m-1">
  49.                     <ul class="m-0 pl-4 fa-ul row no-gutters">
  50.                         <li class="col-6"><i class="fal fa-signature fa-li"></i> Full name</li>
  51.                         <li class="col-6"><i class="fal fa-clock fa-li"></i> Age</li>
  52.                         <li class="col-6"><i class="fal fa-ruler fa-li"></i> Height</li>
  53.                         <li class="col-6"><i class="fal fa-birthday-cake fa-li"></i> Birthday</li>
  54.                     </ul>
  55.                 </div>
  56.                 <!-- PERSON -->
  57.                 <div data-interval="9999999" style="height: 200px; overflow: auto;" class="p-2 carousel-item">
  58.                     <div class="m-1 mr-2 float-left justify-content-center rounded-circle" style="background: #A2CACC;">
  59.                         <img src="//via.placeholder.com/200" style="height: 120px; width: 120px;"></div>
  60.                    
  61.                     <h3 class="m-0"><a class="text-secondary" href="LINK">
  62.                         Name2</a></h3>
  63.                     <p>Cras elementum lectus diam. In non lacus metus. Nunc maximus consequat urna, sit amet interdum ipsum varius eget. Vestibulum erat est.</p>
  64.                    
  65.                     <hr class="m-1">
  66.                     <ul class="m-0 pl-4 fa-ul row no-gutters">
  67.                         <li class="col-6"><i class="fal fa-signature fa-li"></i> Full name</li>
  68.                         <li class="col-6"><i class="fal fa-clock fa-li"></i> Age</li>
  69.                         <li class="col-6"><i class="fal fa-ruler fa-li"></i> Height</li>
  70.                         <li class="col-6"><i class="fal fa-birthday-cake fa-li"></i> Birthday</li>
  71.                     </ul>
  72.                 </div>
  73.                 <!-- PERSON -->
  74.                 <div data-interval="9999999" style="height: 200px; overflow: auto;" class="p-2 carousel-item">
  75.                     <div class="m-1 mr-2 float-left justify-content-center rounded-circle" style="background: #A2CACC;">
  76.                         <img src="//via.placeholder.com/200" style="height: 120px; width: 120px;"></div>
  77.                    
  78.                     <h3 class="m-0"><a class="text-secondary" href="LINK">
  79.                         Name3</a></h3>
  80.                     <p>Cras elementum lectus diam. In non lacus metus. Nunc maximus consequat urna, sit amet interdum ipsum varius eget. Vestibulum erat est.</p>
  81.                    
  82.                     <hr class="m-1">
  83.                     <ul class="m-0 pl-4 fa-ul row no-gutters">
  84.                         <li class="col-6"><i class="fal fa-signature fa-li"></i> Full name</li>
  85.                         <li class="col-6"><i class="fal fa-clock fa-li"></i> Age</li>
  86.                         <li class="col-6"><i class="fal fa-ruler fa-li"></i> Height</li>
  87.                         <li class="col-6"><i class="fal fa-birthday-cake fa-li"></i> Birthday</li>
  88.                     </ul>
  89.                 </div>
  90.                 <!-- PERSON -->
  91.                 <div data-interval="9999999" style="height: 200px; overflow: auto;" class="p-2 carousel-item">
  92.                     <div class="m-1 mr-2 float-left justify-content-center rounded-circle" style="background: #A2CACC;">
  93.                         <img src="//via.placeholder.com/200" style="height: 120px; width: 120px;"></div>
  94.                    
  95.                     <h3 class="m-0"><a class="text-secondary" href="LINK">
  96.                         Name4</a></h3>
  97.                     <p>Cras elementum lectus diam. In non lacus metus. Nunc maximus consequat urna, sit amet interdum ipsum varius eget. Vestibulum erat est.</p>
  98.                    
  99.                     <hr class="m-1">
  100.                     <ul class="m-0 pl-4 fa-ul row no-gutters">
  101.                         <li class="col-6"><i class="fal fa-signature fa-li"></i> Full name</li>
  102.                         <li class="col-6"><i class="fal fa-clock fa-li"></i> Age</li>
  103.                         <li class="col-6"><i class="fal fa-ruler fa-li"></i> Height</li>
  104.                         <li class="col-6"><i class="fal fa-birthday-cake fa-li"></i> Birthday</li>
  105.                     </ul>
  106.                 </div>
  107.                 <!-- PERSON -->
  108.                 <div data-interval="9999999" style="height: 200px; overflow: auto;" class="p-2 carousel-item">
  109.                     <div class="m-1 mr-2 float-left justify-content-center rounded-circle" style="background: #A2CACC;">
  110.                         <img src="//via.placeholder.com/200" style="height: 120px; width: 120px;"></div>
  111.                    
  112.                     <h3 class="m-0"><a class="text-secondary" href="LINK">
  113.                         Name5</a></h3>
  114.                     <p>Cras elementum lectus diam. In non lacus metus. Nunc maximus consequat urna, sit amet interdum ipsum varius eget. Vestibulum erat est.</p>
  115.                    
  116.                     <hr class="m-1">
  117.                     <ul class="m-0 pl-4 fa-ul row no-gutters">
  118.                         <li class="col-6"><i class="fal fa-signature fa-li"></i> Full name</li>
  119.                         <li class="col-6"><i class="fal fa-clock fa-li"></i> Age</li>
  120.                         <li class="col-6"><i class="fal fa-ruler fa-li"></i> Height</li>
  121.                         <li class="col-6"><i class="fal fa-birthday-cake fa-li"></i> Birthday</li>
  122.                     </ul>
  123.                 </div>
  124.                 <!-- add more above here -->
  125.             </div> </div> <!-- end carousel -->
  126.         </div> </div> <!-- end people -->
  127.        
  128.         <!-- NAVIGATION -->
  129.         <div class="col-lg-1"> <div class="row no-gutters">
  130.             <!-- 'PREVIOUS' BUTTON -->
  131.             <div class="p-1 col-lg-12 col text-center">
  132.                 <a class="p-1 w-100 btn btn-outline-secondary" style="height: 31px;" href="#carousel" data-slide="prev"> <i class="fas fa-chevron-left fa-lg"></i> </a> </div>
  133.            
  134.             <!-- CUSTOM COLORS -->
  135.             <div class="p-1 col-lg-12 col text-center"> <div class="rounded" style="height: 35px; background:
  136.                #A2CACC;"></div> </div>
  137.             <div class="p-1 col-lg-12 col text-center"> <div class="rounded" style="height: 35px; background:
  138.                #5D7DAA;"></div> </div>
  139.             <div class="p-1 col-lg-12 col text-center"> <div class="rounded" style="height: 35px; background:
  140.                #193188;"></div> </div>
  141.            
  142.             <!-- 'NEXT' BUTTON -->
  143.             <div class="p-1 col-lg-12 col text-center">
  144.                 <a class="p-1 w-100 btn btn-outline-secondary" style="height: 31px;" href="#carousel" data-slide="next"> <i class="fas fa-chevron-right fa-lg"></i> </a> </div>
  145.         </div> </div> <!-- end navigation -->
  146.        
  147.         <!-- IMAGE -->
  148.         <div class="col-lg-4">
  149.             <div style="background: url('//via.placeholder.com/1000') center;
  150.            background-size: cover; height: 200px; border-radius: 10px 10px 30px 10px;" class="m-1 p-0 card border-0 bg-faded"></div>
  151.         </div> <!-- end image -->
  152.     </div>
  153.    
  154.     <!-- CREDITS -->
  155.     <p class="col-12 text-center">
  156.         <a data-toggle="tooltip" title="HTML by SparklyCodes" href="/SparklyCodes"><i class="fal fa-code"></i></a>
  157.         <a data-toggle="tooltip" title="Layout by Togo" href="https://toyhou.se/~world/82691.coders-quarters/page/33776.july-challenge"><i class="fal fa-paint-brush"></i></a>
  158.     </p>
  159. </div>
  160.  
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!