API tools faq
paste
Advertisement
loon4tic

artfight wysiwyg

loon4tic
Jul 20th, 2022
1,173
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.23 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2. ----- default focal color is #9c4343
  3. ----- use find & replace to quickly change color
  4. ----->
  5.  
  6. <!-- WRAPPER CONTAINER -- hides the default profile title -- remove this wrapper if using this HTML with CSS -->
  7. <div class="container-fluid card border-0 px-0 py-5" style="margin-top: -58px">
  8.  
  9. <!-- MAIN CONTAINER ------------------------------------------->
  10. <div class="container-fluid card bg-faded px-4" style="max-width: 1250px; border-radius: 16px;">pas
  11. <div class="row no-gutters">
  12. <div class="col-lg-4 pl-lg-4 order-lg-2">
  13. <!-- RIGHT STICKY COLUMN -------------------------------------->
  14. <div class="h-100"><div class="pt-4 rounded-0 card hidden-md-down" style="border-top: 0; border-bottom: 0;"></div>
  15.   <div class="card d-block p-3 mb-4 sticky-top" style="border-top: 0; border-radius: 0 0 16px 16px; position: sticky;">
  16.   <div class="text-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  17.     <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Loonatic</h1>
  18.   </div><div class="px-2 pt-3">
  19.    
  20.     <!-- AVATAR -- SHOULD BE AT LEAST 250 X 250 -- USE A SQUARE IMAGE --------->
  21.     <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/16307674?1653639389"
  22.    class="d-block mx-auto rounded-circle p-1 img-thumbnail mb-3" style="max-height: 258px;">
  23.  
  24.     <div class="justify-content-between">
  25.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  26.         Aliases</span>
  27.       <span>Loony, Loon</span>
  28.     </div>
  29.     <hr class="my-2 faded">
  30.    
  31.     <div class="justify-content-between">
  32.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  33.         Gender</span>
  34.       <span>Female</span>
  35.     </div>
  36.     <hr class="my-2 faded">
  37.    
  38.     <div class="justify-content-between">
  39.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  40.         Pronouns</span>
  41.       <span>she/they</span>
  42.     </div>
  43.     <hr class="my-2 faded">
  44.    
  45.     <div class="justify-content-between">
  46.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  47.         DoB</span>
  48.       <span>1/16/1996</span>
  49.     </div>
  50.     <hr class="my-2 faded">
  51.    
  52.     <div class="justify-content-between">
  53.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  54.         Species</span>
  55.       <span>Cartoon Dog</span>
  56.     </div>
  57.     <hr class="my-2 faded">
  58.  
  59.     <div class="justify-content-between">
  60.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Theme
  61.       </span>
  62.       <!-- THEME SONG -- link to a youtube vid --->
  63.       <span>黒皇帝 - Galaxy Collapse <a href="https://www.youtube.com/watch?v=VJFNcHgQ4HM" target="_BLANK" style="color: #9c4343;"><i class="fas fa-play-circle fa-fw" /></a></span>
  64.     </div>
  65.     <hr class="my-2 faded">
  66.    
  67.     <div class="justify-content-between">
  68.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">HTML</span>
  69.       <!-- CODING CREDIT -- LEAVE THIS -------------->
  70.       <span><a href="/pinky" style="color: #9c4343;"><i class="fas fa-heart fa-fw" />Pinky</a></span>
  71.     </div>
  72.  
  73.   </div></div>
  74. </div></div>
  75. <div class="col-lg-8 pt-4 order-lg-1">
  76. <!-- INTRO ABOUT SECTION --------------------------------->
  77. <div class="card d-block p-3 mb-4" style="border-radius: 16px;">
  78.   <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  79.     <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">About</h1>
  80.     <i class="far fa-info-circle fa-2x fa-fw"></i>
  81.   </div><div class="px-2 pt-3">
  82.   <p>Funny little cartoon dog.</p>
  83. </div></div>
  84.  
  85. <!-- DESIGN SECTION --------------------------------->
  86. <div class="card d-block p-3 mb-4" style="border-radius: 16px; display: none;">
  87.   <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  88.     <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Design</h1>
  89.     <i class="fas fa-palette fa-2x fa-fw"></i>
  90.   </div><div class="px-2 pt-3">
  91.   <div class="row">
  92.     <div class="col-lg-5 mb-lg-0 mb-4"><div class="d-flex w-100 h-100"><div class="w-100 my-auto">
  93.       <!-- DESIGN FOCAL IMAGE -- will center itself in the space -->
  94.       <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/49786883_28xxDzqhUdmUOMv.jpg"
  95.      class="d-block mx-auto"
  96.      style="max-height: 600px;" >
  97.     </div></div></div>
  98.     <div class="col-lg-7">
  99.     <!-- DESIGN STATS -- feel free to modify the titles to make them other things -->
  100.     <div class="justify-content-between">
  101.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Height</span>
  102.       <span>Content</span>
  103.     </div>
  104.     <hr class="my-2 faded">
  105.    
  106.     <div class="justify-content-between">
  107.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Build</span>
  108.       <span>Content</span>
  109.     </div>
  110.     <hr class="my-2 faded">
  111.    
  112.     <div class="justify-content-between">
  113.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Eyes</span>
  114.       <span>Content</span>
  115.     </div>
  116.     <hr class="my-2 faded">
  117.    
  118.     <div class="justify-content-between">
  119.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Skin Tone</span>
  120.       <span>Content</span>
  121.     </div>
  122.     <hr class="my-2 faded">
  123.  
  124.     <div class="justify-content-between">
  125.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Hair Color</span>
  126.       <span>Content</span>
  127.     </div>
  128.     <hr class="my-2 faded">
  129.    
  130.     <div class="justify-content-between">
  131.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Hair Style</span>
  132.       <span>Content</span>
  133.     </div>
  134.     <hr class="my-2 faded">
  135.    
  136.     <div class="justify-content-between">
  137.       <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Demeanor</span>
  138.       <span>Content</span>
  139.     </div>
  140.     <hr class="my-2 faded">
  141.  
  142.     <p class="text-uppercase mt-3 mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Notes</p>
  143.     <ul class="mb-0 pl-4">
  144.       <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  145.       <li class="mb-2">Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. </li>
  146.       <li class="mb-2">Integer interdum urna ac dui sollicitudin sollicitudin.</li>
  147.       <li class="mb-2">In feugiat posuere nulla, eget lobortis ante. </li>
  148.     </ul>
  149.     </div>
  150.   </div>
  151. </div></div>
  152.  
  153. <!-- PERSONALITY SECTION --------------------------------->
  154. <div class="card d-block p-3 mb-4" style="border-radius: 16px;">
  155.   <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  156.     <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Personality</h1>
  157.     <i class="fas fa-sliders fa-2x fa-fw"></i>
  158.   </div><div class="px-2 pt-3">
  159.   <!-- sider stats -- change width % to move the bar -- the HIGHER the % the more RIGHT the bar will go -->
  160.   <div class="row">
  161.     <div class="col-lg-6 mb-3">
  162.       <div class="justify-content-between">
  163.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Friendly</span>
  164.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Reserved</span>
  165.       </div>
  166.       <div class="progress rounded-0">
  167.         <div class="progress-bar" style="height: 8px; background: transparent; width: 25%;"></div>
  168.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  169.       </div>
  170.         <div class="progress rounded-1">
  171.         <div class="progress-bar" style="height: 8px; background: transparent; width: 75%;"></div>
  172.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  173.       </div>
  174.     </div>
  175.    
  176.     <div class="col-lg-6 mb-3">
  177.       <div class="justify-content-between">
  178.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Polite</span>
  179.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Blunt</span>
  180.       </div>
  181.       <div class="progress rounded-0">
  182.         <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  183.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  184.       </div>
  185.     </div>
  186.    
  187.     <div class="col-lg-6 mb-3">
  188.       <div class="justify-content-between">
  189.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Clever</span>
  190.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Foolish</span>
  191.       </div>
  192.       <div class="progress rounded-0">
  193.         <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  194.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  195.       </div>
  196.     </div>
  197.    
  198.     <div class="col-lg-6 mb-3">
  199.       <div class="justify-content-between">
  200.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Sensitive</span>
  201.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Tough</span>
  202.       </div>
  203.       <div class="progress rounded-0">
  204.         <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  205.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  206.       </div>
  207.     </div>
  208.    
  209.     <div class="col-lg-6 mb-3">
  210.       <div class="justify-content-between">
  211.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Brave</span>
  212.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Timid</span>
  213.       </div>
  214.       <div class="progress rounded-0">
  215.         <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  216.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  217.       </div>
  218.     </div>
  219.    
  220.     <div class="col-lg-6 mb-3">
  221.       <div class="justify-content-between">
  222.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Careful</span>
  223.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Reckless</span>
  224.       </div>
  225.       <div class="progress rounded-0">
  226.         <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  227.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  228.       </div>
  229.     </div>
  230.    
  231.     <div class="col-lg-6 mb-3">
  232.       <div class="justify-content-between">
  233.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Sincere</span>
  234.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Deceptive</span>
  235.       </div>
  236.       <div class="progress rounded-0">
  237.         <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  238.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  239.       </div>
  240.     </div>
  241.    
  242.     <div class="col-lg-6 mb-3">
  243.       <div class="justify-content-between">
  244.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Diligent</span>
  245.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Lazy</span>
  246.       </div>
  247.       <div class="progress rounded-0">
  248.         <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  249.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  250.       </div>
  251.     </div>
  252.    
  253.     <div class="col-lg-6 mb-3">
  254.       <div class="justify-content-between">
  255.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Calm</span>
  256.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Irritable</span>
  257.       </div>
  258.       <div class="progress rounded-0">
  259.         <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  260.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  261.       </div>
  262.     </div>
  263.    
  264.     <div class="col-lg-6 mb-3">
  265.       <div class="justify-content-between">
  266.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Humorous</span>
  267.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Serious</span>
  268.       </div>
  269.       <div class="progress rounded-0">
  270.         <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  271.         <div class="p-1 ml-n1" style="background: #9c4343;"></div>
  272.       </div>
  273.     </div>
  274.    
  275.   </div>
  276.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
  277. </div></div>
  278.  
  279. <!-- LIKES AND DISLIKES ROW --------------------->
  280. <div class="row"><div class="col-md-6">
  281.   <div class="card d-block p-3 mb-4" style="border-radius: 16px;">
  282.     <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  283.       <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Likes</h1>
  284.       <i class="fas fa-heartbeat fa-2x fa-fw"></i>
  285.     </div><div class="px-2 pt-3">
  286.     <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  287.       Like 1 <i class="fas fa-angle-right fa-fw faded" /></p>
  288.     <p>List something they like then give a small description about it/why they like it.</p>
  289.    
  290.     <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  291.       Like 2 <i class="fas fa-angle-right fa-fw faded" /></p>
  292.     <p>List something they like then give a small description about it/why they like it.</p>
  293.    
  294.     <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  295.       Like 3 <i class="fas fa-angle-right fa-fw faded" /></p>
  296.     <p>List something they like then give a small description about it/why they like it.</p>
  297.    
  298.     <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  299.       Like 4 <i class="fas fa-angle-right fa-fw faded" /></p>
  300.     <p>List something they like then give a small description about it/why they like it.</p>
  301.  
  302.   </div></div></div>
  303.   <div class="col-md-6">
  304.    <div class="card d-block p-3 mb-4" style="border-radius: 16px;">
  305.     <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  306.       <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Dislikes</h1>
  307.       <i class="fas fa-ban fa-2x fa-fw"></i>
  308.     </div><div class="px-2 pt-3">
  309.     <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  310.       Dislike 1 <i class="fas fa-angle-right fa-fw faded" /></p>
  311.     <p>List something they dislike then give a small description about it/why they like it.</p>
  312.    
  313.     <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  314.       Dislike 2 <i class="fas fa-angle-right fa-fw faded" /></p>
  315.     <p>List something they dislike then give a small description about it/why they like it.</p>
  316.    
  317.     <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  318.       Dislike 3 <i class="fas fa-angle-right fa-fw faded" /></p>
  319.     <p>List something they dislike then give a small description about it/why they like it.</p>
  320.    
  321.     <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  322.       Dislike 4 <i class="fas fa-angle-right fa-fw faded" /></p>
  323.     <p>List something they dislike then give a small description about it/why they like it.</p>
  324.  
  325.   </div></div></div>
  326. </div><!-- END ROW --------------------------->
  327.  
  328. <!-- MOODBOARD SECTION --------------------------------->
  329. <div class="card d-block p-3 mb-4" style="border-radius: 16px;">
  330.   <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  331.     <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Moodboard</h1>
  332.     <i class="fas fa-images fa-2x fa-fw"></i>
  333.   </div><div class="px-2 pt-3">
  334.   <!------------ images will resize/scale with screen -- focus will be in the CENTER of the image ---->
  335.   <div class="row no-gutters" style="border-radius: 16px 16px 0px 0px; overflow:hidden;">
  336.     <div class="col-md-3 col-6">
  337.       <div style="background-image:url('https://file.toyhou.se/images/12854966_Cda0rRE6dcvIMOr.png');
  338.      background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px;"></div>
  339.     </div><div class="col-md-3 col-6">
  340.       <div style="background-image:url('https://file.toyhou.se/images/12854966_Cda0rRE6dcvIMOr.png');
  341.      background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px;"></div>
  342.     </div>
  343.     <div class="col-md-3 col-6">
  344.       <div style="background-image:url('https://file.toyhou.se/images/12854966_Cda0rRE6dcvIMOr.png');
  345.      background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px;"></div>
  346.     </div>
  347.     <div class="col-md-3 col-6">
  348.       <div style="background-image:url('https://file.toyhou.se/images/12854966_Cda0rRE6dcvIMOr.png');
  349.      background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px;"></div>
  350.     </div>
  351.   </div>
  352.   <div class="row no-gutters" style="height:40px; border-radius: 0px 0px 16px 16px; overflow:hidden;">
  353.     <!-- PALETTE BLOCKS -- change hex codes in the background-color -->
  354.     <div style="background-color: #000;" class="col h-100">
  355.     </div>
  356.     <div style="background-color: #2a2a2a;" class="col h-100">
  357.     </div>
  358.     <div style="background-color: #444;" class="col h-100">
  359.     </div>
  360.     <div style="background-color: #666;" class="col h-100">
  361.     </div>
  362.     <div style="background-color: #888;" class="col h-100">
  363.     </div>
  364.     <div style="background-color: #999;" class="col h-100">
  365.     </div>
  366.   </div>
  367. </div></div>
  368.  
  369. <!-- EXTRA SECTION -- this is here for you to modify if you want an extra section, just erase if you have no use ------------>
  370. <div class="card d-block p-3 mb-4" style="border-radius: 16px;">
  371.   <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  372.     <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Extra</h1>
  373.     <i class="fas fa-thumbtack fa-2x fa-fw"></i>
  374.   </div><div class="px-2 pt-3">
  375.  
  376.   <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  377.     Something 1 <i class="fas fa-angle-right fa-fw faded" /></p>
  378.   <p>This is an extra list section for whatever - skills, habits, hobbies, personality traits, goals, favorite things to talk about, etc. Simply modify the title to be whatever you want it to be. If you dont want it at all, just erase this part.</p>
  379.  
  380.   <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  381.     Something 2 <i class="fas fa-angle-right fa-fw faded" /></p>
  382.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  383.  
  384.   <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  385.     Something 3 <i class="fas fa-angle-right fa-fw faded" /></p>
  386.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  387.  
  388.   <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  389.     Something 4 <i class="fas fa-angle-right fa-fw faded" /></p>
  390.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  391. </div></div><!-- END EXTRA SECTION ------------------------------->
  392.  
  393.  
  394. <!-- SUMMARY SECTION --------------------------------->
  395. <div class="card d-block p-3 mb-4" style="border-radius: 16px;">
  396.   <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  397.     <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Summary</h1>
  398.     <i class="fas fa-books fa-2x fa-fw"></i>
  399.   </div><div class="px-2 pt-3">
  400.   <!-- OPTIONAL FOCAL IMAGE -- erase if you dont wanna use ------------>
  401.   <img src="IMG_URL"
  402.  class="float-right pl-2 hidden-sm-down"
  403.  style="border-radius: 16px; max-height: 400px;">
  404.  
  405.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit vel nibh feugiat pellentesque. Vivamus posuere blandit lobortis. In vitae lectus quam. Sed aliquam dolor a imperdiet finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas in porta velit. Nunc faucibus mi ac nisi iaculis ultricies. Morbi sit amet ultricies tellus. Nunc accumsan neque metus, vitae porttitor risus iaculis ut. Vivamus commodo consequat magna vel volutpat. Fusce aliquam quam neque, eu maximus quam convallis et.</p>
  406.   <p>Quisque quis posuere arcu. Aliquam erat volutpat. Nullam in sem non sem efficitur aliquet. Donec ac convallis lorem, eu mattis metus. Etiam bibendum justo vel turpis malesuada, et malesuada purus condimentum. Proin suscipit ac arcu a vestibulum. Vivamus lacinia urna eget eleifend suscipit. In vestibulum feugiat auctor. Phasellus ac ornare nibh. Integer condimentum placerat velit, id mollis massa gravida nec. Ut at turpis ut nisl sollicitudin aliquet. Phasellus pretium feugiat eros, vitae aliquam nibh ullamcorper nec.</p>
  407.  
  408.   <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  409.     Subheader <i class="fas fa-angle-right fa-fw faded" /></p>
  410.   <p>Donec condimentum velit turpis, sed tincidunt nisl egestas eu. Vestibulum lorem neque, placerat id arcu a, commodo ultrices arcu. Etiam rhoncus a tellus eu faucibus. Duis egestas velit ac est fermentum efficitur. Quisque nec tincidunt ante, quis maximus augue. Integer sit amet suscipit ligula. Duis vehicula sapien in lorem venenatis, sit amet sagittis lectus consectetur. Suspendisse potenti. In suscipit ut leo sagittis rutrum. Nam sed turpis quis ligula molestie lobortis nec quis nulla. Nulla dignissim vehicula elementum. Duis neque erat, lacinia interdum massa eu, interdum aliquet lorem. Aenean volutpat mattis viverra. Mauris consequat consectetur lobortis. Ut pulvinar dictum enim, non auctor leo luctus at. Mauris euismod ut nunc id tristique.</p>
  411.  
  412.   <p class="text-uppercase mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  413.      Subheader <i class="fas fa-angle-right fa-fw faded" /></p>
  414.   <p>Donec ut nulla fringilla mi sodales mattis. Morbi sit amet congue justo, quis pretium ante. Aliquam nec pretium massa. Suspendisse erat eros, congue non malesuada in, sagittis volutpat erat. Quisque cursus pretium ligula, efficitur sodales velit malesuada at. Vestibulum et turpis ut odio sagittis efficitur. Morbi congue urna odio. Proin maximus, elit eget tincidunt iaculis, neque urna interdum diam, eget pharetra tellus dui vitae nisl.</p>
  415.   <p>Nulla a mollis orci. Nulla sed odio suscipit, pulvinar dui ac, porttitor nibh. Aliquam tincidunt, justo quis feugiat vulputate, nunc justo lobortis eros, vitae mattis turpis lacus quis arcu. Morbi fermentum, eros a viverra imperdiet, mi leo rutrum nisi, in eleifend sem metus eu odio. Duis congue, tortor eget sodales mattis, dui velit dignissim lorem, quis commodo est purus sit amet urna. Fusce ac interdum libero. Vivamus imperdiet ullamcorper nisi eu porttitor. Praesent consequat, turpis sit amet lobortis rhoncus, mi magna feugiat velit, a tincidunt nisl diam sit amet sapien. Donec nisi lacus, sodales vitae diam quis, vehicula pellentesque ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer feugiat mauris risus, in luctus metus bibendum sed.</p>
  416. </div></div>
  417.  
  418. <!-- TRIVIA SECTION --------------------------------->
  419. <div class="card d-block p-3 mb-4" style="border-radius: 16px;">
  420.   <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  421.     <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Trivia</h1>
  422.     <i class="fas fa-list fa-2x fa-fw"></i>
  423.   </div><div class="d-flex px-2 pt-3"><div class="w-100">
  424.   <!-- OPTIONAL FOCAL IMAGE -- erase if you dont wanna use ------------>
  425.   <img src="IMG_URL"
  426.  class="float-md-left d-block mx-auto radius mb-md-0 mb-4"
  427.  style="max-height: 400px;">
  428.  
  429.   <ul class="mb-0 modal-open">
  430.     <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  431.     <li class="mb-2">Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. </li>
  432.     <li class="mb-2">Integer interdum urna ac dui sollicitudin sollicitudin.</li>
  433.     <li class="mb-2">In feugiat posuere nulla, eget lobortis ante. </li>
  434.   </ul>
  435. </div></div></div>
  436.  
  437. <!-- RELATIONSHIPS SECTION --------------------------------->
  438. <div class="card d-block p-3 mb-4" style="border-radius: 16px;">
  439.   <div class="justify-content-between align-items-center text-white p-2" style="background: #9c4343; border-radius: 12px;">
  440.     <h1 class="text-uppercase mb-0" style="letter-spacing: 1px;">Related</h1>
  441.     <i class="fas fa-users fa-2x fa-fw"></i>
  442.   </div><div class="px-2 pt-3">
  443.   <div class="row mb-n3">
  444.     <div class="col-12 mb-3">
  445.       <!-- avatar image --------------->
  446.       <img src="IMG_URL"
  447.      style="max-height:150px;" class="rounded-circle float-sm-left mr-sm-2 mb-sm-0 mb-3 d-block mx-auto" />
  448.  
  449.       <h4 class="text-sm-left text-center">
  450.       <!-- character link --------------->
  451.       <a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: 1px; color: #9c4343;">
  452.         Character
  453.       </a></h4>
  454.       <div class="justify-content-between align-items-center mb-2" style="line-height: 1;">
  455.         <!-- relationship -- hearts represent affection -- use fas for fill in, fal for open --------------->
  456.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  457.           relationship</span><span>
  458.         <i class="fas fa-heart fa-fw" />
  459.         <i class="fas fa-heart fa-fw" />
  460.         <i class="fas fa-heart fa-fw" />
  461.         <i class="fas fa-heart fa-fw faded" />
  462.         <i class="fas fa-heart fa-fw faded" /></span>
  463.       </div>
  464.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
  465.     </div>
  466.     <div class="col-12 mb-3">
  467.       <!-- avatar image --------------->
  468.       <img src="IMG_URL"
  469.      style="max-height:150px;" class="rounded-circle float-sm-left mr-sm-2 mb-sm-0 mb-3 d-block mx-auto" />
  470.  
  471.       <h4 class="text-sm-left text-center">
  472.       <!-- character link --------------->
  473.       <a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: 1px; color: #9c4343;">
  474.         Character
  475.       </a></h4>
  476.       <div class="justify-content-between align-items-center mb-2" style="line-height: 1;">
  477.         <!-- relationship -- hearts represent affection -- use fas for fill in, fal for open --------------->
  478.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  479.           relationship</span><span>
  480.         <i class="fas fa-heart fa-fw" />
  481.         <i class="fas fa-heart fa-fw" />
  482.         <i class="fas fa-heart fa-fw" />
  483.         <i class="fas fa-heart fa-fw faded" />
  484.         <i class="fas fa-heart fa-fw faded" /></span>
  485.       </div>
  486.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
  487.     </div>
  488.     <div class="col-12 mb-3">
  489.       <!-- avatar image --------------->
  490.       <img src="IMG_URL"
  491.      style="max-height:150px;" class="rounded-circle float-sm-left mr-sm-2 mb-sm-0 mb-3 d-block mx-auto" />
  492.  
  493.       <h4 class="text-sm-left text-center">
  494.       <!-- character link --------------->
  495.       <a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: 1px; color: #9c4343;">
  496.         Character
  497.       </a></h4>
  498.       <div class="justify-content-between align-items-center mb-2" style="line-height: 1;">
  499.         <!-- relationship -- hearts represent affection -- use fas for fill in, fal for open --------------->
  500.         <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  501.           relationship</span><span>
  502.         <i class="fas fa-heart fa-fw" />
  503.         <i class="fas fa-heart fa-fw" />
  504.         <i class="fas fa-heart fa-fw" />
  505.         <i class="fas fa-heart fa-fw faded" />
  506.         <i class="fas fa-heart fa-fw faded" /></span>
  507.       </div>
  508.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
  509.     </div>
  510.   </div>
  511. </div></div>
  512. </div></div></div>
  513.  
  514. </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!