API tools faq
paste
Advertisement
SparklyLightus

Hunting Grounds

SparklyLightus
Oct 20th, 2021
2,590
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.99 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    AE7565 >> ACCENT
  3.    book antiqua, palatino >> FONT
  4.    >> ICONS
  5.        bow-arrow
  6.        claw-marks
  7.        campfire
  8.        swords
  9.        shield-alt
  10. -->
  11. <div class="mx-auto flex-row" style="max-width: 950px">
  12. <!-- ...................................... -->
  13.  
  14. <!-- ........................... VERTICAL DIVIDERS -->
  15. <div style="background: #AE7565" class="my-1 pl-1 order-1"></div>
  16. <div style="background: #AE7565" class="my-1 pl-1 order-3"></div>
  17. <!-- ........................... CONTENT -->
  18. <div class="order-2 w-100">
  19.     <!-- ........................... HEADER -->
  20.     <div class="m-1 mr-n1 p-1 flex-row hidden-md-down" style="position: sticky; top: 0px; z-index: 100; background: #AE7565">
  21.         <img class="mx-2 mt-1 p-1 rounded-circle" style="height: 120px; width: 120px; margin-bottom: -65px; background: #AE7565"
  22.            
  23.            src="//via.placeholder.com/200"> <!-- .................... IMAGE -->
  24.            
  25.         <h1 class="my-auto display-4 text-white" style="letter-spacing: 2px; font-family: book antiqua, palatino">
  26.             TITLE HERE <!-- .................... TITLE -->
  27.         </h1>
  28.         <div class="mr-3 my-auto display-4 text-white flex-fill text-right">
  29.             <i class=" fas fa-bow-arrow"></i> <!-- .................... ICON -->
  30.         </div>
  31.     </div>
  32.     <div class="my-1 ml-1 mr-0 p-2 flex-row hidden-lg-up" style="background: #AE7565">
  33.         <h1 class="my-auto display-4 text-white" style="letter-spacing: 2px; font-family: book antiqua, palatino">
  34.             TITLE HERE <!-- .................... TITLE, AGAIN -->
  35.         </h1>
  36.         <div class="my-auto display-4 text-white flex-fill text-right">
  37.             <i class=" fas fa-bow-arrow"></i> <!-- .................... ICON, AGAIN -->
  38.         </div>
  39.     </div>
  40.    
  41.     <!-- ........................... QUOTE -->
  42.     <div class="w-100">
  43.         <h3 class="my-1 mx-1 ml-auto px-2 card text-right" style="border-width: 0px 3px 0px 0px; border-radius: 0px; width: calc(100% - 140px)">
  44.             "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  45.         </h3>
  46.     </div>
  47.        
  48.     <!-- ........................... CONTENT -->
  49.     <div class="m-1 row no-gutters">
  50.     <!-- ...................................... -->
  51.     <!-- IMAGE -->
  52.     <div class="col-md-4 order-md-2">
  53.         <div style="background: url('https://images.unsplash.com/photo-1617959332471-0c144261d870?&fit=crop&w=1587&q=80') center;
  54.        background-size: cover; width: 100%; height: 450px"></div>
  55.     </div>
  56.     <!-- BIO -->
  57.     <div class="p-2 col-md-8 bg-faded order-md-1 overflow-auto" style="height: 450px">
  58.         <!-- NAV BUTTONS -->
  59.         <ul class="my-n1 mr-2 nav nav-pills justify-content-end font-italic" style="font-family: book antiqua, palatino; font-size: 35px; color: #AE7565">
  60.             <li class="nav-item"><a data-toggle="tab" style="color: inherit" class="active" href="#A"> i</a></li>
  61.             <li class="nav-item pl-3"><a data-toggle="tab" style="color: inherit" href="#B"> ii</a></li>
  62.             <li class="nav-item pl-3"><a data-toggle="tab" style="color: inherit" href="#C"> iii</a></li>
  63.             <li class="nav-item pl-3"><a data-toggle="tab" style="color: inherit" href="#D"> iv</a></li>
  64.             <li class="nav-item pl-3"><a data-toggle="tab" style="color: inherit" href="#E"> v</a></li>
  65.         </ul>
  66.         <!-- NAV CONTENT -->
  67.         <div class="tab-content">
  68.             <!-- ONE -->
  69.             <div class="tab-pane fade show active" id="A">
  70.                 <!-- ABOUT -->
  71.                 <div>
  72.                     <h1 class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 175%; color: #AE7565">
  73.                         <span class="px-1 col-auto">i. ABOUT</span>
  74.                         <span class="col my-auto" style="border-top: 6px double; opacity: .5"></span>
  75.                         <i class="mx-2 fal fa-bow-arrow faded"></i>
  76.                     </h1>
  77.                     <div class="mt-2 card rounded-0 text-right" style="border-width: 1px 4px; border-style: double; font-family: book antiqua, palatino"> <div class="p-1 row no-gutters">
  78.                         <p class="m-0 p-1 col-6"> <span class="pull-left" style="color: #AE7565">Name</span>
  79.                             Information</p>
  80.                         <p class="m-0 p-1 col-6"> <span class="pull-left" style="color: #AE7565">Alias</span>
  81.                             Information</p>
  82.                         <p class="m-0 p-1 col-6"> <span class="pull-left" style="color: #AE7565">Gender</span>
  83.                             Information</p>
  84.                         <p class="m-0 p-1 col-6"> <span class="pull-left" style="color: #AE7565">Age</span>
  85.                             Information</p>
  86.                         <p class="m-0 p-1 col-6"> <span class="pull-left" style="color: #AE7565">Orientation</span>
  87.                             Information</p>
  88.                         <p class="m-0 p-1 col-6"> <span class="pull-left" style="color: #AE7565">Occupation</span>
  89.                             Information</p>
  90.                         <p class="m-0 p-1 col-6"> <span class="pull-left" style="color: #AE7565">Worth</span>
  91.                             Information</p>
  92.                         <p class="m-0 p-1 col-6"> <span class="pull-left" style="color: #AE7565">Theme</span>
  93.                             <a href="SONG_LINK">Song - Artist</a> </p>
  94.                     </div> </div>
  95.                 </div>
  96.                 <!-- PERSONALITY -->
  97.                 <div>
  98.                     <p class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 130%; color: #AE7565">
  99.                         <span class="px-1 col-auto">i.i PERSONALITY</span>
  100.                         <span class="col my-auto" style="border-top: 3px double; opacity: .5"></span>
  101.                     </p>
  102.                     <p>This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate lectus nec dapibus consectetur. Nunc molestie non velit eget molestie. Duis ullamcorper vulputate sem, a feugiat risus molestie nec. Morbi vel fermentum lacus. Suspendisse aliquam metus nulla, posuere iaculis ex tincidunt sed. Nunc ornare congue risus, vel convallis nisl euismod eu.</p>
  103.                     <p>Vestibulum pulvinar facilisis consectetur. In sit amet lacinia lectus. Cras accumsan euismod viverra. Ut sit amet leo neque. Nunc ultricies ante et sagittis fringilla. Nulla elementum quam nec metus consequat lacinia.</p>
  104.                 </div>
  105.             </div>
  106.             <!-- TWO -->
  107.             <div class="tab-pane fade" id="B">
  108.                 <h1 class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 175%; color: #AE7565">
  109.                     <span class="px-1 col-auto">ii. HISTORY</span>
  110.                     <span class="col my-auto" style="border-top: 6px double; opacity: .5"></span>
  111.                     <i class="mx-2 fal fa-claw-marks faded"></i>
  112.                 </h1>
  113.                 <!-- HEADER -->
  114.                 <div>
  115.                     <p class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 130%; color: #AE7565">
  116.                         <span class="px-1 col-auto">i.i HEADER</span>
  117.                         <span class="col my-auto" style="border-top: 3px double; opacity: .5"></span>
  118.                     </p>
  119.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget euismod enim, at consequat nisi. Aenean in lectus sed magna consectetur feugiat vitae lacinia arcu. Aliquam luctus bibendum tempus. Suspendisse semper, quam at venenatis pellentesque, odio massa rhoncus nulla, ut lacinia nunc augue et lectus. Sed eget mauris sed felis posuere molestie. Fusce non quam interdum, euismod tortor id, ornare justo.</p>
  120.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus malesuada egestas sodales. Phasellus sit amet quam eros. Aliquam gravida, risus et congue gravida, duinulla pulvinar arcu, et volutpat elit nunc non lacus.</p>
  121.                 </div>
  122.                 <!-- HEADER -->
  123.                 <div>
  124.                     <p class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 130%; color: #AE7565">
  125.                         <span class="px-1 col-auto">i.ii HEADER</span>
  126.                         <span class="col my-auto" style="border-top: 3px double; opacity: .5"></span>
  127.                     </p>
  128.                     <p>Sed scelerisque ipsum sed laoreet placerat. Fusce id commodo sapien. Nulla vitae suscipit erat, facilisis commodo lectus. Sed eros elit, convallis vitae iaculis vel, ornare nec risus. Donec suscipit erat nec tellus luctus, sed accumsan tortor pulvinar. Praesent porta euismod ipsum, vitae lacinia libero lacinia ut. </p>
  129.                 </div>
  130.                 <!-- HEADER -->
  131.                 <div>
  132.                     <p class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 130%; color: #AE7565">
  133.                         <span class="px-1 col-auto">i.iii HEADER</span>
  134.                         <span class="col my-auto" style="border-top: 3px double; opacity: .5"></span>
  135.                     </p>
  136.                     <p>Nulla facilisi. Nunc posuere odio id mauris molestie, at aliquet eros condimentum. Aliquam erat volutpat. Phasellus eu lectus quis ligula posuere elementum. Aenean vehicula laoreet est et pellentesque. Praesent libero diam, viverra ac augue ac, fringilla vulputate tellus. Vestibulum a eros eleifend, viverra nulla eu, eleifend mi. </p>
  137.                 </div>
  138.             </div>
  139.             <!-- THREE -->
  140.             <div class="tab-pane fade" id="C">
  141.                 <h1 class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 175%; color: #AE7565">
  142.                     <span class="px-1 col-auto">iii. TRIVIA</span>
  143.                     <span class="col my-auto" style="border-top: 6px double; opacity: .5"></span>
  144.                     <i class="mx-2 fal fa-campfire faded"></i>
  145.                 </h1>
  146.                 <!-- IMAGE - ANY SIZE! -->
  147.                 <div class="p-2 float-sm-left justify-content-center">
  148.                     <img src="//via.placeholder.com/500x800" style="max-height: 300px; max-width: 250px;">
  149.                 </div>
  150.  
  151.                 <ul class="m-0 list-unstyled">
  152.                     <li><i class="fas fa-campfire" style="color: #AE7565"></i> Trivia fact here. Text will wrap around the image. On mobile, the image will display first and not float!</li>
  153.                     <li><i class="fas fa-campfire" style="color: #AE7565"></i> Donec sodales sapien nec felis tempor, at pellentesque metus consequat.</li>
  154.                     <li><i class="fas fa-campfire" style="color: #AE7565"></i> Nullam a porta lorem, elementum feugiat est.</li>
  155.                     <li><i class="fas fa-campfire" style="color: #AE7565"></i> Morbi dictum nisi massa. In elit lacus, dignissim nec fermentum et, pretium id lectus.</li>
  156.                     <li><i class="fas fa-campfire" style="color: #AE7565"></i> In lacinia porta sapien. Morbi in est ultrices diam pharetra vulputate.</li>
  157.                     <li><i class="fas fa-campfire" style="color: #AE7565"></i> Aliquam interdum sed diam vel molestie. In rhoncus pulvinar lorem.</li>
  158.                 </ul>
  159.             </div>
  160.             <!-- FOUR -->
  161.             <div class="tab-pane fade" id="D">
  162.                 <h1 class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 175%; color: #AE7565">
  163.                     <span class="px-1 col-auto">iv. INVENTORY</span>
  164.                     <span class="col my-auto" style="border-top: 6px double; opacity: .5"></span>
  165.                     <i class="mx-2 fal fa-swords faded"></i>
  166.                 </h1>
  167.                
  168.                 <!-- ITEMS START HERE ........................ -->
  169.                 <p class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 130%; color: #AE7565">
  170.                     <span class="px-1 col-auto">iv.i HEADER</span>
  171.                     <span class="col my-auto" style="border-top: 3px double; opacity: .5"></span>
  172.                 </p>
  173.                 <!-- ITEM -->
  174.                 <div class="m-1 p-2 card rounded-0 border-0"> <div>
  175.                     <img src="//via.placeholder.com/200"
  176.                    style="height: 140px; width: 140px; border-width: 3px; object-fit: cover; object-position: center" class="mr-2 img-thumbnail rounded-0 float-left">
  177.                    
  178.                     <h3 style="font-family: book antiqua, palatino; color: #AE7565">
  179.                         <i class="fas fa-swords"></i> Item
  180.                     </h3>
  181.                     <p>Description here. Aenean faucibus sollicitudin ex, eu imperdiet massa ultricies ut. Aenean vel arcu in urna tristique placerat. Curabitur sit amet libero sed nisl facilisis congue.</p>
  182.                    
  183.                 </div> </div>
  184.                 <!-- ITEM -->
  185.                 <div class="m-1 p-2 card rounded-0 border-0"> <div>
  186.                     <img src="//via.placeholder.com/200"
  187.                    style="height: 140px; width: 140px; border-width: 3px; object-fit: cover; object-position: center" class="mr-2 img-thumbnail rounded-0 float-right">
  188.                    
  189.                     <h3 style="font-family: book antiqua, palatino; color: #AE7565">
  190.                         <i class="fas fa-swords"></i> Item
  191.                     </h3>
  192.                     <p>Description here. Aenean faucibus sollicitudin ex, eu imperdiet massa ultricies ut. Aenean vel arcu in urna tristique placerat. Curabitur sit amet libero sed nisl facilisis congue.</p>
  193.                    
  194.                 </div> </div>
  195.                
  196.                 <p class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 130%; color: #AE7565">
  197.                     <span class="px-1 col-auto">iv.ii HEADER</span>
  198.                     <span class="col my-auto" style="border-top: 3px double; opacity: .5"></span>
  199.                 </p>
  200.                 <!-- ITEM -->
  201.                 <div class="m-1 p-2 card rounded-0 border-0"> <div>
  202.                     <img src="//via.placeholder.com/200"
  203.                    style="height: 140px; width: 140px; border-width: 3px; object-fit: cover; object-position: center" class="mr-2 img-thumbnail rounded-0 float-left">
  204.                    
  205.                     <h3 style="font-family: book antiqua, palatino; color: #AE7565">
  206.                         <i class="fas fa-swords"></i> Item
  207.                     </h3>
  208.                     <p>Description here. Aenean faucibus sollicitudin ex, eu imperdiet massa ultricies ut. Aenean vel arcu in urna tristique placerat. Curabitur sit amet libero sed nisl facilisis congue.</p>
  209.                    
  210.                 </div> </div>
  211.                 <!-- ITEM -->
  212.                 <div class="m-1 p-2 card rounded-0 border-0"> <div>
  213.                     <img src="//via.placeholder.com/200"
  214.                    style="height: 140px; width: 140px; border-width: 3px; object-fit: cover; object-position: center" class="mr-2 img-thumbnail rounded-0 float-right">
  215.                    
  216.                     <h3 style="font-family: book antiqua, palatino; color: #AE7565">
  217.                         <i class="fas fa-swords"></i> Item
  218.                     </h3>
  219.                     <p>Description here. Aenean faucibus sollicitudin ex, eu imperdiet massa ultricies ut. Aenean vel arcu in urna tristique placerat. Curabitur sit amet libero sed nisl facilisis congue.</p>
  220.                    
  221.                 </div> </div>
  222.                
  223.                 <!-- ADD MORE ABOVE HERE .....................
  224.                    copy in pairs to achieve the alternating pattern! -->
  225.             </div>
  226.             <!-- FIVE -->
  227.             <div class="tab-pane fade" id="E">
  228.                 <h1 class="m-0 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 175%; color: #AE7565">
  229.                     <span class="px-1 col-auto">v. LINKS</span>
  230.                     <span class="col my-auto" style="border-top: 6px double; opacity: .5"></span>
  231.                     <i class="mx-2 fal fa-shield-alt faded"></i>
  232.                 </h1>
  233.                
  234.                 <div class="row no-gutters">
  235.                     <p class="m-0 col-12 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 130%; color: #AE7565">
  236.                         <span class="px-1 col-auto">v.i FAMILY</span>
  237.                         <span class="col my-auto" style="border-top: 3px double; opacity: .5"></span>
  238.                     </p>
  239.                     <!-- PERSON -->
  240.                     <div class="p-1 col-md-6"> <div class="p-2 text-center h-100" style="border: 3px double #AE7565; color: #AE7565">
  241.                         <img src="//via.placeholder.com/200"
  242.                        style="height: 120px; width: 120px; border-width: 3px; object-fit: cover; object-position: center" class="img-thumbnail rounded-0">
  243.                        
  244.                         <h3 class="m-0" style="font-family: book antiqua, palatino">Person</h3>
  245.                         <small><a href="CHAR_LINK">RELATIONSHIP</a></small>
  246.                        
  247.                         <p class="text-body">Short description Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed viverra suscipit urna in suscipit.</p>
  248.                     </div> </div>
  249.                     <!-- PERSON -->
  250.                     <div class="p-1 col-md-6"> <div class="p-2 text-center h-100" style="border: 3px double #AE7565; color: #AE7565">
  251.                         <img src="//via.placeholder.com/200"
  252.                        style="height: 120px; width: 120px; border-width: 3px; object-fit: cover; object-position: center" class="img-thumbnail rounded-0">
  253.                        
  254.                         <h3 class="m-0" style="font-family: book antiqua, palatino">Person</h3>
  255.                         <small><a href="CHAR_LINK">RELATIONSHIP</a></small>
  256.                        
  257.                         <p class="text-body">Short description Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed viverra suscipit urna in suscipit.</p>
  258.                     </div> </div>
  259.                     <!-- ADD MORE ABOVE HERE -->
  260.                    
  261.                     <p class="m-0 col-12 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 130%; color: #AE7565">
  262.                         <span class="px-1 col-auto">v.ii FRIENDS</span>
  263.                         <span class="col my-auto" style="border-top: 3px double; opacity: .5"></span>
  264.                     </p>
  265.                     <!-- PERSON -->
  266.                     <div class="p-1 col-md-6"> <div class="p-2 text-center h-100" style="border: 3px double #AE7565; color: #AE7565">
  267.                         <img src="//via.placeholder.com/200"
  268.                        style="height: 120px; width: 120px; border-width: 3px; object-fit: cover; object-position: center" class="img-thumbnail rounded-0">
  269.                        
  270.                         <h3 class="m-0" style="font-family: book antiqua, palatino">Person</h3>
  271.                         <small><a href="CHAR_LINK">RELATIONSHIP</a></small>
  272.                        
  273.                         <p class="text-body">Short description Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed viverra suscipit urna in suscipit.</p>
  274.                     </div> </div>
  275.                     <!-- PERSON -->
  276.                     <div class="p-1 col-md-6"> <div class="p-2 text-center h-100" style="border: 3px double #AE7565; color: #AE7565">
  277.                         <img src="//via.placeholder.com/200"
  278.                        style="height: 120px; width: 120px; border-width: 3px; object-fit: cover; object-position: center" class="img-thumbnail rounded-0">
  279.                        
  280.                         <h3 class="m-0" style="font-family: book antiqua, palatino">Person</h3>
  281.                         <small><a href="CHAR_LINK">RELATIONSHIP</a></small>
  282.                        
  283.                         <p class="text-body">Short description Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed viverra suscipit urna in suscipit.</p>
  284.                     </div> </div>
  285.                     <!-- ADD MORE ABOVE HERE -->
  286.                    
  287.                     <p class="m-0 col-12 row no-gutters font-italic" style="font-family: book antiqua, palatino; font-size: 130%; color: #AE7565">
  288.                         <span class="px-1 col-auto">v.iii MISCELLANEOUS</span>
  289.                         <span class="col my-auto" style="border-top: 3px double; opacity: .5"></span>
  290.                     </p>
  291.                     <!-- PERSON -->
  292.                     <div class="p-1 col-md-6"> <div class="p-2 text-center h-100" style="border: 3px double #AE7565; color: #AE7565">
  293.                         <img src="//via.placeholder.com/200"
  294.                        style="height: 120px; width: 120px; border-width: 3px; object-fit: cover; object-position: center" class="img-thumbnail rounded-0">
  295.                        
  296.                         <h3 class="m-0" style="font-family: book antiqua, palatino">Person</h3>
  297.                         <small><a href="CHAR_LINK">RELATIONSHIP</a></small>
  298.                        
  299.                         <p class="text-body">Short description Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed viverra suscipit urna in suscipit.</p>
  300.                     </div> </div>
  301.                     <!-- PERSON -->
  302.                     <div class="p-1 col-md-6"> <div class="p-2 text-center h-100" style="border: 3px double #AE7565; color: #AE7565">
  303.                         <img src="//via.placeholder.com/200"
  304.                        style="height: 120px; width: 120px; border-width: 3px; object-fit: cover; object-position: center" class="img-thumbnail rounded-0">
  305.                        
  306.                         <h3 class="m-0" style="font-family: book antiqua, palatino">Person</h3>
  307.                         <small><a href="CHAR_LINK">RELATIONSHIP</a></small>
  308.                        
  309.                         <p class="text-body">Short description Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed viverra suscipit urna in suscipit.</p>
  310.                     </div> </div>
  311.                     <!-- ADD MORE ABOVE HERE -->
  312.                 </div>
  313.             </div>
  314.         </div>
  315.         <!-- end nav content -->
  316.     </div>
  317.     <!-- ...................................... -->
  318.     </div>
  319.    
  320.     <!-- ........................... CREDITS -->
  321.     <div class="m-1 ml-n1 p-2 text-center text-white" style="background: #AE7565">
  322.         <a href="/SparklyCodes" data-toggle="tooltip" title="HTML by SparklyCodes" style="color: inherit"><i class="fas fa-code"></i></a>
  323.     </div>
  324. </div>
  325. <!-- ...................................... -->
  326. </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!