API tools faq
paste
Advertisement
SparklyLightus

Cactus

SparklyLightus
Jun 5th, 2021
918
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.64 KB | None | 0 0
raw download clone embed print report
  1. <div class="m-3 row no-gutters col-lg-10 mx-auto">
  2.     <!-- LEFT -->
  3.     <div class="p-1 col-lg-4">
  4.         <div class="card bg-success" style="border-radius: 10px;">
  5.             <!-- NAME -->
  6.             <h3 class="m-1 text-center text-white">NAME</h3>
  7.             <!-- CONTENT -->
  8.             <div class="p-1 card border-0 rounded-0 bg-white text-dark">
  9.                 <!-- IMAGE -->
  10.                 <img src="//via.placeholder.com/200" class="m-1 mx-auto" style="height: 200px; width: 200px;">
  11.                 <!-- INFO -->
  12.                 <div class="mt-1 text-right">
  13.                     <div class="m-1 p-1 bg-light justify-content-between">
  14.                         <b class="text-success"><i class="fas fa-cactus"></i> Name</b>    Information</div>
  15.                     <div class="m-1 p-1 bg-light justify-content-between">
  16.                         <b class="text-success"><i class="fas fa-cactus"></i> Age</b>    Information</div>
  17.                     <div class="m-1 p-1 bg-light justify-content-between">
  18.                         <b class="text-success"><i class="fas fa-cactus"></i> Gender</b>    Information</div>
  19.                     <div class="m-1 p-1 bg-light justify-content-between">
  20.                         <b class="text-success"><i class="fas fa-cactus"></i> Orientation</b>    Information</div>
  21.                 </div>
  22.             </div>
  23.             <!-- FOOTER -->
  24.             <div class="m-1 text-center text-white">
  25.                 <i class="fal fa-cactus"></i> <i class="fas fa-cactus fa-lg"></i> <i class="fal fa-cactus"></i>
  26.             </div>
  27.         </div>
  28.     </div>
  29.     <!-- RIGHT -->
  30.     <div class="p-1 col-lg-8">
  31.         <div class="card bg-success" style="border-radius: 10px;">
  32.             <!-- HEADER -->
  33.             <div class="m-1 text-center text-white">
  34.                 <i class="fal fa-cactus"></i> <i class="fas fa-cactus fa-lg"></i> <i class="fal fa-cactus"></i>
  35.             </div>
  36.             <!-- CONTENT -->
  37.             <div id="content" class="p-1 card border-0 rounded-0 bg-white text-dark" style="height: 358px; overflow: auto;">
  38.                 <!-- FIRST PANEL -->
  39.                 <div id="tabA" data-parent="#content" class="p-1 collapse fade show">
  40.                     <!-- LINK -->
  41.                     <div class="justify-content-end">
  42.                         <div class="text-right"><a data-target="#tabB" data-toggle="collapse" class="m-1 font-weight-bold text-success"> <i class="fas fa-chevron-right"></i> Story</a></div>
  43.                     </div>
  44.                     <h1 class="m-1 text-success"><i class="fas fa-cactus"></i> Overview</h1>
  45.                     <!-- BOLD SNIPPET:
  46.                        <b class="text-success"> content here </b> -->
  47.                     <p><b class="text-success">Lorem ipsum dolor sit amet,</b> consectetur adipiscing elit. Quisque ac bibendum sem. Praesent mollis, augue eget varius tempor, eros tellus faucibus felis, sit amet sodales neque lacus quis nisi. Nullam lobortis, mi ac ullamcorper rhoncus, metus leo tempor leo, a fringilla purus justo id massa. Duis lobortis, erat eget posuere rhoncus, ipsum sem tempus felis, eu molestie neque elit nec lorem. Phasellus in bibendum elit. Ut vel justo commodo, faucibus ligula id, consectetur orci. Suspendisse nec est accumsan, suscipit orci id, vestibulum mauris. Vivamus nec pellentesque risus, a gravida turpis. Aliquam faucibus ligula ut dolor viverra vulputate.</p>
  48.                     <p>Aliquam volutpat nunc libero, quis condimentum neque efficitur sit amet. Pellentesque vel ante vel erat malesuada egestas. Aenean ut interdum urna. Nullam vitae aliquet turpis. Vivamus pellentesque diam eu lectus mollis, vitae rhoncus nisi faucibus. Integer justo sem, mollis eu neque eget, rutrum ornare metus. Duis elementum aliquam dui, vel hendrerit purus tincidunt ac. Sed vitae commodo turpis, a consequat enim. Vestibulum a blandit lacus. Ut aliquam metus magna, id rhoncus dolor fringilla at. Mauris semper tortor nec tellus sagittis, id facilisis mi porta. </p>
  49.                    
  50.                     <h1 class="m-1 text-success"><i class="fas fa-cactus"></i> Personality</h1>
  51.                     <p><b class="text-success">Donec vel gravida velit</b>, eget iaculis urna. Morbi laoreet, metus maximus posuere pellentesque, ligula sapien tincidunt felis, non mattis dolor leo in risus. Donec accumsan tortor ut odio blandit, et bibendum neque sollicitudin. Donec turpis elit, hendrerit a odio sed, molestie gravida elit. Nullam facilisis elit in erat pharetra lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam dignissim nunc eget commodo ornare.</p>
  52.                 </div>
  53.                 <!-- SECOND PANEL -->
  54.                 <div id="tabB" data-parent="#content" class="p-1 collapse fade">
  55.                     <!-- LINK -->
  56.                     <div class="justify-content-between">
  57.                         <div class="text-left"><a data-target="#tabA" data-toggle="collapse" class="m-1 font-weight-bold text-success"> <i class="fas fa-chevron-left"></i> Overview</a></div>
  58.                         <div class="text-left"><a data-target="#tabC" data-toggle="collapse" class="m-1 font-weight-bold text-success"> <i class="fas fa-chevron-right"></i> Trivia</a></div>
  59.                     </div>
  60.                     <!-- STORY -->
  61.                     <h1 class="m-1 text-success"><i class="fas fa-cactus"></i> Story</h1>
  62.                     <!-- BOLD SNIPPET:
  63.                        <b class="text-success"> content here </b> -->
  64.                     <p>Curabitur tempus, mauris vel facilisis congue, libero urna molestie tortor, sit amet aliquam tellus felis at orci. Proin rutrum ornare tristique. Ut ut orci lacinia, bibendum tortor eget, bibendum risus. Donec nisl massa, tempor at urna eu, venenatis volutpat metus. Donec et elit fermentum, pulvinar ante non, accumsan justo. Ut in lacus at neque gravida mollis quis eget mi. Aenean semper quam lorem, eget vulputate nibh venenatis et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  65.                    
  66.                     <h3 class="m-1 font-italic text-secondary"><i class="fal fa-cactus"></i> Header</h3>
  67.                     <p><b class="text-success">Integer sed vestibulum est.</b> Etiam at eros est. Fusce tempor libero ultrices massa tempus semper. Quisque sed posuere nisl. Ut id tincidunt dolor, id tristique justo. Nullam pretium enim eget neque egestas pellentesque. Praesent scelerisque sollicitudin fermentum.</p>
  68.                     <p>Suspendisse molestie, metus efficitur aliquet eleifend, lectus purus interdum risus, ut ornare lorem ex sed risus. Curabitur blandit neque eget ante gravida, ut sodales justo lacinia. Aenean erat turpis, tristique sit amet nisl sit amet, feugiat ornare lorem. Integer sagittis neque nisl, nec consequat diam fermentum eu.</p>
  69.                    
  70.                     <h3 class="m-1 font-italic text-secondary"><i class="fal fa-cactus"></i> Header</h3>
  71.                     <p><b class="text-success">Maecenas commodo justo eget libero condimentum cursus.</b> Ut consequat magna at nulla pellentesque, non vehicula massa efficitur. Aliquam id ultricies purus, ut commodo est. Donec vitae tortor eget leo blandit ullamcorper. Curabitur quis nisl ex. Curabitur ultricies, ex sit amet dapibus facilisis, risus nulla volutpat dolor, sed luctus sem enim ac nibh. Morbi sollicitudin mollis dapibus. Aliquam vel rutrum nisi. Vestibulum vestibulum ac odio pulvinar sollicitudin. Pellentesque vitae tortor vel odio aliquam consequat. Duis lorem velit, lacinia ac risus non, eleifend facilisis lorem. </p>
  72.                 </div>
  73.                 <!-- THIRD PANEL -->
  74.                 <div id="tabC" data-parent="#content" class="p-1 collapse fade">
  75.                     <!-- LINK -->
  76.                     <div class="justify-content-between">
  77.                         <div class="text-left"><a data-target="#tabB" data-toggle="collapse" class="m-1 font-weight-bold text-success"> <i class="fas fa-chevron-left"></i> Story</a></div>
  78.                         <div class="text-left"><a data-target="#tabD" data-toggle="collapse" class="m-1 font-weight-bold text-success"> <i class="fas fa-chevron-right"></i> Relationships</a></div>
  79.                     </div>
  80.                    
  81.                     <!-- MUSIC - to change the video, get the id and paste it after embed
  82.                            example: in this link //www.youtube.com/watch?v=dQw4w9WgXcQ , the video id is dQw4w9WgXcQ -->
  83.                     <div class="m-2 justify-content-center float-sm-left">
  84.                         <iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width: 200px; height: 200px;"></iframe>
  85.                     </div>
  86.                    
  87.                     <!-- TRIVIA -->
  88.                     <h1 class="m-1 text-success"><i class="fas fa-cactus"></i> Trivia</h1>
  89.                     <ul class="m-0 list-unstyled">
  90.                         <li><i class="ml-3 fas fa-cactus text-success"></i> Trivia goes here. This list will wrap around the youtube widget!</li>
  91.                         <li><i class="ml-3 fas fa-cactus text-success"></i> Proin aliquam mauris nec ex molestie fringilla. Vivamus in tincidunt nibh.</li>
  92.                         <li><i class="ml-3 fas fa-cactus text-success"></i> Cras ultricies sed eros et suscipit. Mauris feugiat eros quis justo accumsan, at congue odio mattis.</li>
  93.                         <li><i class="ml-3 fas fa-cactus text-success"></i> Donec at molestie metus, vel malesuada felis. Pellentesque quis velit ex.</li>
  94.                         <li><i class="ml-3 fas fa-cactus text-success"></i> Phasellus consequat tincidunt est a accumsan. Etiam eget vulputate enim. Aliquam ultrices velit sapien.</li>
  95.                     </ul>
  96.                    
  97.                     <hr class="m-0">
  98.                     <!-- TASTES -->
  99.                     <div class="row no-gutters">
  100.                         <h1 class="m-1 col-12 text-success"><i class="fas fa-cactus"></i> Likes & Dislikes</h1>
  101.                        <ul class="m-0 col-lg-6 list-unstyled">
  102.                            <li><i class="ml-3 fas fa-check-circle text-success"></i> LIKES HERE</li>
  103.                            <li><i class="ml-3 fas fa-check-circle text-success"></i> INFO</li>
  104.                            <li><i class="ml-3 fas fa-check-circle text-success"></i> INFO</li>
  105.                            <li><i class="ml-3 fas fa-check-circle text-success"></i> INFO</li>
  106.                        </ul>
  107.                        <ul class="m-0 col-lg-6 list-unstyled">
  108.                            <li><i class="ml-3 fas fa-times-circle text-danger"></i> DISLIKES HERE</li>
  109.                            <li><i class="ml-3 fas fa-times-circle text-danger"></i> INFO</li>
  110.                            <li><i class="ml-3 fas fa-times-circle text-danger"></i> INFO</li>
  111.                            <li><i class="ml-3 fas fa-times-circle text-danger"></i> INFO</li>
  112.                        </ul>
  113.                    </div>
  114.                </div>
  115.            </div>
  116.            <!-- FOOTER -->
  117.            <div class="m-1 text-center text-white">
  118.                <i class="fal fa-cactus"></i> <i class="fas fa-cactus fa-lg"></i> <i class="fal fa-cactus"></i>
  119.            </div>
  120.        </div>
  121.    </div>
  122.    <!-- BOTTOM -->
  123.    <div class="p-1 col-lg-12">
  124.        <div id="tabD" class="collapse"><div class="card bg-success" style="border-radius: 10px;">
  125.             <!-- HEADER -->
  126.             <div class="m-1 text-center text-white">
  127.                 <i class="fal fa-cactus"></i> <i class="fas fa-cactus fa-lg"></i> <i class="fal fa-cactus"></i>
  128.             </div>
  129.             <!-- CONTENT -->
  130.             <div id="content" class="p-1 card border-0 rounded-0 bg-white text-dark">
  131.                 <h1 class="m-1 text-success"><i class="fas fa-cactus"></i> Relationships</h1>
  132.                 <!-- LINK -->
  133.                 <div class="text-left">
  134.                     <a data-target="#tabD" data-toggle="collapse" class="m-1 font-weight-bold text-success"> <i class="fas fa-chevron-right"></i> Hide Panel</a>
  135.                 </div>
  136.                 <!-- RELATIONSHIPS -->
  137.                 <div class="row no-gutters">
  138.                     <!-- PERSON -->
  139.                     <div class="p-1 col-lg-6 text-justify">
  140.                         <div class="p-1 float-sm-left mx-auto">
  141.                             <img src="//via.placeholder.com/200" style="height: 150px; width: 150px;"><br>
  142.                             <h2 class="m-0 text-success text-center">Name</h2> </div>
  143.                         <p class="m-0 text-secondary">Relationship</p>
  144.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac bibendum sem. Praesent mollis, augue eget varius tempor, eros tellus faucibus felis, sit amet sodales neque lacus quis nisi. Nullam lobortis, mi ac ullamcorper rhoncus.</p>
  145.                     </div>
  146.                     <!-- PERSON -->
  147.                     <div class="p-1 col-lg-6 text-justify">
  148.                         <div class="p-1 float-sm-left mx-auto">
  149.                             <img src="//via.placeholder.com/200" style="height: 150px; width: 150px;"><br>
  150.                             <h2 class="m-0 text-success text-center">Name</h2> </div>
  151.                         <p class="m-0 text-secondary">Relationship</p>
  152.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac bibendum sem. Praesent mollis, augue eget varius tempor, eros tellus faucibus felis, sit amet sodales neque lacus quis nisi. Nullam lobortis, mi ac ullamcorper rhoncus.</p>
  153.                     </div>
  154.                     <!-- PERSON -->
  155.                     <div class="p-1 col-lg-6 text-justify">
  156.                         <div class="p-1 float-sm-left mx-auto">
  157.                             <img src="//via.placeholder.com/200" style="height: 150px; width: 150px;"><br>
  158.                             <h2 class="m-0 text-success text-center">Name</h2> </div>
  159.                         <p class="m-0 text-secondary">Relationship</p>
  160.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac bibendum sem. Praesent mollis, augue eget varius tempor, eros tellus faucibus felis, sit amet sodales neque lacus quis nisi. Nullam lobortis, mi ac ullamcorper rhoncus.</p>
  161.                     </div>
  162.                     <!-- PERSON -->
  163.                     <div class="p-1 col-lg-6 text-justify">
  164.                         <div class="p-1 float-sm-left mx-auto">
  165.                             <img src="//via.placeholder.com/200" style="height: 150px; width: 150px;"><br>
  166.                             <h2 class="m-0 text-success text-center">Name</h2> </div>
  167.                         <p class="m-0 text-secondary">Relationship</p>
  168.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac bibendum sem. Praesent mollis, augue eget varius tempor, eros tellus faucibus felis, sit amet sodales neque lacus quis nisi. Nullam lobortis, mi ac ullamcorper rhoncus.</p>
  169.                     </div>
  170.                     <!-- add more above here -->
  171.                 </div>
  172.             </div>
  173.             <!-- FOOTER -->
  174.             <div class="m-1 text-center text-white">
  175.                 <i class="fal fa-cactus"></i> <i class="fas fa-cactus fa-lg"></i> <i class="fal fa-cactus"></i>
  176.             </div>
  177.         </div></div>
  178.     </div>
  179.     <!-- ===================== CREDIT -->
  180.     <div class="col-12 mt-n1">
  181.         <div class="text-center">
  182.             <p><a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
  183.         </div>
  184.     </div>
  185. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!