API tools faq
paste
Advertisement
CuddlySpider

Toyhouse % Slider Layout

CuddlySpider
Sep 18th, 2017
947
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.34 KB | None | 0 0
raw download clone embed print report
  1. <!--Character Sheet Container-->
  2. <div class="container mx-auto p-0 m-0" style="width:100%;">
  3.     <!--Quote Container-->
  4.     <div class="container mx-auto mt-2" style="width: 85%;">
  5.  
  6.         <blockquote class="text-primary" style="text-align: justify; font-size: 18px;">
  7.  
  8.             <p><sup>❝</sup><strong>&nbsp;Quote here.</strong></p>
  9.         </blockquote>
  10.     </div>
  11.     <!--Quote Container With Play Button-->
  12.     <!--To use delete the note indicators surrounding the code and deleted or surround the first quote container code in note indicators-->
  13.     <!--
  14.     <div class="container mx-auto mt-2" style="width: 85%;">
  15.         <blockquote class="text-primary" style="text-align: justify; font-size: 18px;">
  16.             <div class="d-flex flex-wrap justify-content-end">
  17.                 <div class="col-lg-10 mr-auto p-0">
  18.                         <p><sup>❝</sup><strong>&nbsp;Quote here.</strong></p>
  19.                 </div>
  20.             <div class="col- align-end"><a class="btn btn-outline-primary p-1 pr-2 pl-2" href=""></i></a>
  21.         </div></div></blockquote></div>
  22. -->
  23.     <!--Basics Container-->
  24.     <div class="container mx-auto mb-5" style="width:100%;">
  25.  
  26.         <h1 class="bg-primary text-white p-2 text-center rounded mb-4">Basics</h1>
  27.         <!--Basic Information-->
  28.         <div class="col-8 mx-auto p-0 m-0">
  29.             <div class="row justify-content-center">
  30.                 <div class="col-lg-6 p-0">
  31.                     <div class="row pb-1 m-0">
  32.                         <div class="col text-primary p-0 pr-2" style="text-align: right;font-size: 16px;">
  33.  
  34.                             <p>Name</p>
  35.                         </div>
  36.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  37.  
  38.                             <p>name</p>
  39.                         </div>
  40.                     </div>
  41.                 </div>
  42.                 <div class="col-lg-6 p-0">
  43.                     <div class="row pb-1 m-0">
  44.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  45.  
  46.                             <p>Nickname/s</p>
  47.                         </div>
  48.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  49.  
  50.                             <p>nickname</p>
  51.                         </div>
  52.                     </div>
  53.                 </div>
  54.             </div>
  55.             <div class="row justify-content-center">
  56.                 <div class="col-lg-6 p-0">
  57.                     <div class="row pb-1 m-0">
  58.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  59.  
  60.                             <p>Age</p>
  61.                         </div>
  62.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  63.  
  64.                             <p>age</p>
  65.                         </div>
  66.                     </div>
  67.                 </div>
  68.                 <div class="col-lg-6 p-0">
  69.                     <div class="row pb-1 m-0">
  70.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  71.  
  72.                             <p>Measurements</p>
  73.                         </div>
  74.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  75.  
  76.                             <p>height,weight</p>
  77.                         </div>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.             <div class="row justify-content-center">
  82.                 <div class="col-lg-6 p-0">
  83.                     <div class="row pb-1 m-0">
  84.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  85.  
  86.                             <p>Pronouns</p>
  87.                         </div>
  88.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  89.  
  90.                             <p>pronouns</p>
  91.                         </div>
  92.                     </div>
  93.                     <div class="row pb-1 m-0">
  94.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  95.  
  96.                             <p>Gender</p>
  97.                         </div>
  98.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  99.  
  100.                             <p>gender</p>
  101.                         </div>
  102.                     </div>
  103.                     <div class="row pb-1 m-0">
  104.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  105.  
  106.                             <p>Orientation</p>
  107.                         </div>
  108.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  109.  
  110.                             <p>sexual,romantic</p>
  111.                         </div>
  112.                     </div>
  113.                 </div>
  114.                 <div class="col-lg-6 p-0">
  115.                     <div class="row pb-1 m-0">
  116.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  117.  
  118.                             <p>Species</p>
  119.                         </div>
  120.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  121.  
  122.                             <p>species</p>
  123.                         </div>
  124.                     </div>
  125.                     <div class="row pb-1 m-0">
  126.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  127.  
  128.                             <p>Ethnicity</p>
  129.                         </div>
  130.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  131.  
  132.                             <p>ethnicity</p>
  133.                         </div>
  134.                     </div>
  135.                     <div class="row pb-1 m-0">
  136.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  137.  
  138.                             <p>Place of Origin</p>
  139.                         </div>
  140.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  141.  
  142.                             <p>origin</p>
  143.                         </div>
  144.                     </div>
  145.                 </div>
  146.             </div>
  147.             <div class="row justify-content-center">
  148.                 <div class="col-lg-6 p-0">
  149.                     <div class="row pb-1 m-0">
  150.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  151.  
  152.                             <p>Occupation</p>
  153.                         </div>
  154.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  155.  
  156.                             <p>occupation</p>
  157.                         </div>
  158.                     </div>
  159.                 </div>
  160.                 <div class="col-lg-6 p-0">
  161.                     <div class="row pb-1 m-0">
  162.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  163.  
  164.                             <p>Residence</p>
  165.                         </div>
  166.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  167.  
  168.                             <p>residence</p>
  169.                         </div>
  170.                     </div>
  171.                 </div>
  172.             </div>
  173.             <div class="row justify-content-center">
  174.                 <div class="col-lg-6 p-0">
  175.                     <div class="row pb-1 m-0">
  176.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  177.  
  178.                             <p>Alignment</p>
  179.                         </div>
  180.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  181.  
  182.                             <p>alignment</p>
  183.                         </div>
  184.                     </div>
  185.                 </div>
  186.                 <div class="col-lg-6 p-0">
  187.                     <div class="row pb-1 m-0">
  188.                         <div class="col text-primary p-0 pr-2" style="text-align: right; font-size: 16px;">
  189.  
  190.                             <p>Status</p>
  191.                         </div>
  192.                         <div class="col p-0 pl-2" style="text-align: left; font-size: 16px;">
  193.  
  194.                             <p>status</p>
  195.                         </div>
  196.                     </div>
  197.                 </div>
  198.             </div>
  199.         </div>
  200.     </div>
  201.     <!--Traits Container-->
  202.     <div class="container mx-auto mb-5" style="width:100%;">
  203.  
  204.         <h1 class="bg-primary text-white p-2 text-center rounded mb-4">Traits</h1>
  205.         <div class="row justify-content-around ml-1 mr-1">
  206.             <!--Active Traits Column-->
  207.             <div class="col-lg-6 mb-4 p-0">
  208.                 <div class="col mb-4 p-0">
  209.  
  210.                     <h4 class="text-primary text-center">Active</h4>
  211.                     <div class="col-md p-0 m-0 mx-auto">
  212.                         <div class="row pb-1 m-0">
  213.                             <div class="col-5 text-right text-primary p-0 pr-2">
  214.  
  215.                                 <p>Strength</p>
  216.                             </div>
  217.                             <div class="col text-left p-0 pl-2">
  218.                                 <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  219.                                     <div class="progress-bar bg-primary" style="width:50%;">
  220.                                         <br>
  221.                                     </div>
  222.                                 </div>
  223.                             </div>
  224.                         </div>
  225.                         <div class="row pb-1 m-0">
  226.                             <div class="col-5 text-right text-primary p-0 pr-2">
  227.  
  228.                                 <p>Agility</p>
  229.                             </div>
  230.                             <div class="col text-left p-0 pl-2">
  231.                                 <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  232.                                     <div class="progress-bar bg-primary" style="width:50%;">
  233.                                         <br>
  234.                                     </div>
  235.                                 </div>
  236.                             </div>
  237.                         </div>
  238.                         <div class="row pb-1 m-0">
  239.                             <div class="col-5 text-right text-primary p-0 pr-2">
  240.  
  241.                                 <p>Speed</p>
  242.                             </div>
  243.                             <div class="col text-left p-0 pl-2">
  244.                                 <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  245.                                     <div class="progress-bar bg-primary" style="width:50%;">
  246.                                         <br>
  247.                                     </div>
  248.                                 </div>
  249.                             </div>
  250.                         </div>
  251.                         <div class="row pb-1 m-0">
  252.                             <div class="col-5 text-right text-primary p-0 pr-2">
  253.  
  254.                                 <p>Stamina</p>
  255.                             </div>
  256.                             <div class="col text-left p-0 pl-2">
  257.                                 <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  258.                                     <div class="progress-bar bg-primary" style="width:50%;">
  259.                                         <br>
  260.                                     </div>
  261.                                 </div>
  262.                             </div>
  263.                         </div>
  264.                         <div class="row pb-1 m-0">
  265.                             <div class="col-5 text-right text-primary p-0 pr-2">
  266.  
  267.                                 <p>Durability</p>
  268.                             </div>
  269.                             <div class="col text-left p-0 pl-2">
  270.                                 <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  271.                                     <div class="progress-bar bg-primary" style="width:50%;">
  272.                                         <br>
  273.                                     </div>
  274.                                 </div>
  275.                             </div>
  276.                         </div>
  277.                         <div class="row pb-1 m-0">
  278.                             <div class="col-5 text-right text-primary p-0 pr-2">
  279.  
  280.                                 <p>Magic</p>
  281.                             </div>
  282.                             <div class="col text-left p-0 pl-2">
  283.                                 <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  284.                                     <div class="progress-bar bg-primary" style="width:50%;">
  285.                                         <br>
  286.                                     </div>
  287.                                 </div>
  288.                             </div>
  289.                         </div>
  290.                         <div class="row pb-1 m-0">
  291.                             <div class="col-5 text-right text-primary p-0 pr-2">
  292.  
  293.                                 <p>Willpower</p>
  294.                             </div>
  295.                             <div class="col text-left p-0 pl-2">
  296.                                 <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  297.                                     <div class="progress-bar bg-primary" style="width:50%;">
  298.                                         <br>
  299.                                     </div>
  300.                                 </div>
  301.                             </div>
  302.                         </div>
  303.                         <div class="row pb-1 m-0">
  304.                             <div class="col-5 text-right text-primary p-0 pr-2">
  305.  
  306.                                 <p>Charisma</p>
  307.                             </div>
  308.                             <div class="col text-left p-0 pl-2">
  309.                                 <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  310.                                     <div class="progress-bar bg-primary" style="width:50%;">
  311.                                         <br>
  312.                                     </div>
  313.                                 </div>
  314.                             </div>
  315.                         </div>
  316.                         <div class="row pb-1 m-0">
  317.                             <div class="col-5 text-right text-primary p-0 pr-2">
  318.  
  319.                                 <p>Perception</p>
  320.                             </div>
  321.                             <div class="col text-left p-0 pl-2">
  322.                                 <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  323.                                     <div class="progress-bar bg-primary" style="width:50%;">
  324.                                         <br>
  325.                                     </div>
  326.                                 </div>
  327.                             </div>
  328.                         </div>
  329.                     </div>
  330.                 </div>
  331.                 <div class="col mb-4 p-0">
  332.  
  333.                     <h4 class="text-primary text-center mb-3">Abilities</h4>
  334.                     <div class="row justify-content-center" style="margin-left:7%; margin-right:7%;">
  335.                         <div class="col-sm-6 mb-4 pr-2 pl-0">
  336.  
  337.                             <p class="text-primary text-center" style="font-size:16px;">Strengths</p>
  338.  
  339.                             <ul style="list-style-type: none; padding:0; text-align:center;">
  340.                                 <li>+ ...</li>
  341.                                 <li>+ ...</li>
  342.                                 <li>+ ...</li>
  343.                             </ul>
  344.                         </div>
  345.                         <div class="col-sm-6 mb-4 pr-0 pl-2">
  346.  
  347.                             <p class="text-primary text-center" style="font-size:16px;">Weaknesses</p>
  348.  
  349.                             <ul style="list-style-type: none; padding:0; text-align:center;">
  350.                                 <li>- ...</li>
  351.                                 <li>- ...</li>
  352.                                 <li>- ...</li>
  353.                             </ul>
  354.                         </div>
  355.                     </div>
  356.                 </div>
  357.                 <div class="col mb-4 p-0">
  358.  
  359.                     <h4 class="text-primary text-center mb-3">Interests</h4>
  360.                     <div class="row justify-content-center p-0 m-0 mb-4">
  361.                         <div class="col-sm-4 m-0 p-0 mb-2">
  362.                             <div class="row text-primary">
  363.                                 <div class="col text-center">
  364.  
  365.                                     <p>Likes</p>
  366.                                 </div>
  367.                             </div>
  368.                             <div class="row">
  369.                                 <div class="col text-center">
  370.  
  371.                                     <ul class="m-0 p-0" style="list-style-type: none;">
  372.                                         <li>❤ -</li>
  373.                                         <li>❤ -</li>
  374.                                         <li>❤ -</li>
  375.                                     </ul>
  376.                                 </div>
  377.                             </div>
  378.                         </div>
  379.                         <div class="col-sm-4 m-0 p-0 mb-2">
  380.                             <div class="row text-primary">
  381.                                 <div class="col text-center">
  382.  
  383.                                     <p>Dislikes</p>
  384.                                 </div>
  385.                             </div>
  386.                             <div class="row">
  387.                                 <div class="col text-center">
  388.  
  389.                                     <ul class="m-0 p-0" style="list-style-type: none;">
  390.                                         <li>𝗫 -</li>
  391.                                         <li>𝗫 -</li>
  392.                                         <li>𝗫 -</li>
  393.                                     </ul>
  394.                                 </div>
  395.                             </div>
  396.                         </div>
  397.                         <div class="col-sm-4 m-0 p-0 mb-2">
  398.                             <div class="row text-primary">
  399.                                 <div class="col text-center">
  400.  
  401.                                     <p>Fears</p>
  402.                                 </div>
  403.                             </div>
  404.                             <div class="row">
  405.                                 <div class="col text-center">
  406.  
  407.                                     <ul class="m-0 p-0" style="list-style-type: none;">
  408.                                         <li>☠ -</li>
  409.                                         <li>☠ -</li>
  410.                                         <li>☠ -</li>
  411.                                     </ul>
  412.                                 </div>
  413.                             </div>
  414.                         </div>
  415.                     </div>
  416.                 </div>
  417.             </div>
  418.             <!--Personality Traits Column-->
  419.             <div class="col-lg-6 mb-4 p-0">
  420.  
  421.                 <h4 class="text-primary text-center">Personality</h4>
  422.                 <div class="container p-0">
  423.                     <div class="row justify-content-center pb-1 m-0">
  424.                         <div class="col-3 text-right text-primary p-0">
  425.                             <a title="Gets energy from solitude.">
  426.  
  427.                                 <p>Introvert(I)</p>
  428.                             </a>
  429.                         </div>
  430.                         <div class="col-sm- text-center pr-2 pl-2">
  431.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  432.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  433.                                     <br>
  434.                                 </div>
  435.                             </div>
  436.                         </div>
  437.                         <div class="col-3 text-left text-primary p-0">
  438.                             <a title="Gets energy from social interactions.">
  439.  
  440.                                 <p>Extrovert(E)</p>
  441.                             </a>
  442.                         </div>
  443.                     </div>
  444.                     <div class="row justify-content-center pb-1 m-0">
  445.                         <div class="col-3 text-right text-primary p-0">
  446.                             <a title="Not very willing to share private information.">
  447.  
  448.                                 <p>Reserved</p>
  449.                             </a>
  450.                         </div>
  451.                         <div class="col- text-center pr-2 pl-2">
  452.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  453.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  454.                                     <br>
  455.                                 </div>
  456.                             </div>
  457.                         </div>
  458.                         <div class="col-3 text-left text-primary p-0">
  459.                             <a title="Like an open book.">
  460.  
  461.                                 <p>Outgoing</p>
  462.                             </a>
  463.                         </div>
  464.                     </div>
  465.  
  466.                     <p>
  467.                         <br>
  468.                     </p>
  469.                     <div class="row justify-content-center pb-1 m-0">
  470.                         <div class="col-3 text-right text-primary p-0">
  471.                             <a title="Highly practical, pragmatic and down-to-earth. They tend to have strong habits and focus on what is happening or has already happened.">
  472.  
  473.                                 <p>Observing(S)</p>
  474.                             </a>
  475.                         </div>
  476.                         <div class="col- text-center pr-2 pl-2">
  477.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  478.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  479.                                     <br>
  480.                                 </div>
  481.                             </div>
  482.                         </div>
  483.                         <div class="col-3 text-left text-primary p-0">
  484.                             <a title="Very imaginative, open-minded and curious. They prefer novelty over stability and focus on hidden meanings and future possibilities.">
  485.  
  486.                                 <p>Intuiting(N)</p>
  487.                             </a>
  488.                         </div>
  489.                     </div>
  490.                     <div class="row justify-content-center pb-1 m-0">
  491.                         <div class="col-3 text-right text-primary p-0">
  492.                             <a title="Careful around unfamiliar things or in general.">
  493.  
  494.                                 <p>Cautious</p>
  495.                             </a>
  496.                         </div>
  497.                         <div class="col- text-center pr-2 pl-2">
  498.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  499.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  500.                                     <br>
  501.                                 </div>
  502.                             </div>
  503.                         </div>
  504.                         <div class="col-3 text-left text-primary p-0">
  505.                             <a title="Explores unfamiliar things with curiosity.">
  506.  
  507.                                 <p>Curious</p>
  508.                             </a>
  509.                         </div>
  510.                     </div>
  511.  
  512.                     <p>
  513.                         <br>
  514.                     </p>
  515.                     <div class="row justify-content-center pb-1 m-0">
  516.                         <div class="col-3 text-right text-primary p-0">
  517.                             <a title="Sensitive and emotionally expressive. They are more empathetic and less competitive, and focus on social harmony and cooperation.">
  518.  
  519.                                 <p>Feeling(F)</p>
  520.                             </a>
  521.                         </div>
  522.                         <div class="col- text-center pr-2 pl-2">
  523.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  524.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  525.                                     <br>
  526.                                 </div>
  527.                             </div>
  528.                         </div>
  529.                         <div class="col-3 text-left text-primary p-0">
  530.                             <a title="Focus on objectivity and rationality, prioritizing logic over emotions. They tend to hide their feelings and see efficiency as more important than cooperation.">
  531.  
  532.                                 <p>Thinking(T)</p>
  533.                             </a>
  534.                         </div>
  535.                     </div>
  536.                     <div class="row justify-content-center pb-1 m-0">
  537.                         <div class="col-3 text-right text-primary p-0">
  538.  
  539.                             <p>Detached</p>
  540.                         </div>
  541.                         <div class="col- text-center pr-2 pl-2">
  542.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  543.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  544.                                     <br>
  545.                                 </div>
  546.                             </div>
  547.                         </div>
  548.                         <div class="col-3 text-left text-primary p-0">
  549.  
  550.                             <p>Friendly</p>
  551.                         </div>
  552.                     </div>
  553.                     <div class="row justify-content-center pb-1 m-0" style="font-weight: bold;">
  554.                         <div class="col-3 text-right text-primary p-0">
  555.                             <a title="Can feel another's feelings. Able to walk in another person's shoes.">
  556.  
  557.                                 <p>Empathy</p>
  558.                             </a>
  559.                         </div>
  560.                         <div class="col- text-center pr-2 pl-2">
  561.                             <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  562.                                 <div class="progress-bar bg-primary" style="width:50%;">
  563.                                     <br>
  564.                                 </div>
  565.                             </div>
  566.                         </div>
  567.                         <div class="col-3 text-left text-primary p-0">
  568.  
  569.                             <p>
  570.                                 <br>
  571.                             </p>
  572.                         </div>
  573.                     </div>
  574.                     <div class="row justify-content-center pb-1 m-0" style="font-weight: bold;">
  575.                         <div class="col-3 text-right text-primary p-0">
  576.                             <a title="Feeling sorry for another's suffering.">
  577.  
  578.                                 <p>Sympathy</p>
  579.                             </a>
  580.                         </div>
  581.                         <div class="col- text-center pr-2 pl-2">
  582.                             <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  583.                                 <div class="progress-bar bg-primary" style="width:50%;">
  584.                                     <br>
  585.                                 </div>
  586.                             </div>
  587.                         </div>
  588.                         <div class="col-3 text-left text-primary p-0">
  589.  
  590.                             <p>
  591.                                 <br>
  592.                             </p>
  593.                         </div>
  594.                     </div>
  595.                     <div class="row justify-content-center pb-1 m-0" style="font-weight: bold;">
  596.                         <div class="col-3 text-right text-primary p-0">
  597.                             <a title="Taking action when another is hurting. Drive to do what they can to help.">
  598.  
  599.                                 <p>Compassion</p>
  600.                             </a>
  601.                         </div>
  602.                         <div class="col- text-center pr-2 pl-2">
  603.                             <div class="progress" style="height:5px;margin-top:9px;width:110px;background-color:transparent;border-right:#ccc solid 1px;">
  604.                                 <div class="progress-bar bg-primary" style="width:50%;">
  605.                                     <br>
  606.                                 </div>
  607.                             </div>
  608.                         </div>
  609.                         <div class="col-3 text-left text-primary p-0">
  610.  
  611.                             <p>
  612.                                 <br>
  613.                             </p>
  614.                         </div>
  615.                     </div>
  616.  
  617.                     <p>
  618.                         <br>
  619.                     </p>
  620.                     <div class="row justify-content-center pb-1 m-0">
  621.                         <div class="col-3 text-right text-primary p-0">
  622.                             <a title="Very good at improvising and spotting opportunities. They tend to be flexible, relaxed nonconformists who prefer keeping their options open.">
  623.  
  624.                                 <p>Prospect(P)</p>
  625.                             </a>
  626.                         </div>
  627.                         <div class="col- text-center pr-2 pl-2">
  628.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  629.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  630.                                     <br>
  631.                                 </div>
  632.                             </div>
  633.                         </div>
  634.                         <div class="col-3 text-left text-primary p-0">
  635.                             <a title="Decisive, thorough and highly organized. They value clarity, predictability and closure, preferring structure and planning to spontaneity.">
  636.  
  637.                                 <p>Judging(J)</p>
  638.                             </a>
  639.                         </div>
  640.                     </div>
  641.                     <div class="row justify-content-center pb-1 m-0">
  642.                         <div class="col-3 text-right text-primary p-0">
  643.  
  644.                             <p>Sloppy</p>
  645.                         </div>
  646.                         <div class="col- text-center pr-2 pl-2">
  647.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  648.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  649.                                     <br>
  650.                                 </div>
  651.                             </div>
  652.                         </div>
  653.                         <div class="col-3 text-left text-primary p-0">
  654.  
  655.                             <p>Organized</p>
  656.                         </div>
  657.                     </div>
  658.                     <div class="row justify-content-center pb-1 m-0">
  659.                         <div class="col-3 text-right text-primary p-0">
  660.  
  661.                             <p>Careless</p>
  662.                         </div>
  663.                         <div class="col- text-center pr-2 pl-2">
  664.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  665.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  666.                                     <br>
  667.                                 </div>
  668.                             </div>
  669.                         </div>
  670.                         <div class="col-3 text-left text-primary p-0">
  671.  
  672.                             <p>Careful</p>
  673.                         </div>
  674.                     </div>
  675.  
  676.                     <p>
  677.                         <br>
  678.                     </p>
  679.                     <div class="row justify-content-center pb-1 m-0">
  680.                         <div class="col-3 text-right text-primary p-0">
  681.                             <a title="Self-conscious and sensitive to stress. They are likely to experience a wide range of emotions and to be success-driven, perfectionist and eager to improve.">
  682.  
  683.                                 <p>Turbulent(-T)</p>
  684.                             </a>
  685.                         </div>
  686.                         <div class="col- text-center pr-2 pl-2">
  687.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  688.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  689.                                     <br>
  690.                                 </div>
  691.                             </div>
  692.                         </div>
  693.                         <div class="col-3 text-left text-primary p-0">
  694.                             <a title="Self-assured, even-tempered and resistant to stress. They refuse to worry too much and do not push themselves too hard when it comes to achieving goals.">
  695.  
  696.                                 <p>Assertive(-A)</p>
  697.                             </a>
  698.                         </div>
  699.                     </div>
  700.                     <div class="row justify-content-center pb-1 m-0">
  701.                         <div class="col-3 text-right text-primary p-0">
  702.  
  703.                             <p>Doubtful</p>
  704.                         </div>
  705.                         <div class="col- text-center pr-2 pl-2">
  706.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  707.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  708.                                     <br>
  709.                                 </div>
  710.                             </div>
  711.                         </div>
  712.                         <div class="col-3 text-left text-primary p-0">
  713.  
  714.                             <p>Confident</p>
  715.                         </div>
  716.                     </div>
  717.  
  718.                     <p>
  719.                         <br>
  720.                     </p>
  721.                     <div class="row text-primary">
  722.                         <div class="col text-center">
  723.  
  724.                             <p>Self Image</p>
  725.                         </div>
  726.                     </div>
  727.                     <div class="row justify-content-center pb-1 m-0" style="font-weight: bold;">
  728.                         <div class="col-3 text-right text-primary p-0">
  729.  
  730.                             <p>Negative</p>
  731.                         </div>
  732.                         <div class="col- text-center pr-2 pl-2">
  733.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  734.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  735.                                     <br>
  736.                                 </div>
  737.                             </div>
  738.                         </div>
  739.                         <div class="col-3 text-left text-primary p-0">
  740.  
  741.                             <p>Positive</p>
  742.                         </div>
  743.                     </div>
  744.  
  745.                     <p>
  746.                         <br>
  747.                     </p>
  748.                     <div class="row text-primary">
  749.                         <div class="col text-center">
  750.  
  751.                             <p>Outlook on Life</p>
  752.                         </div>
  753.                     </div>
  754.                     <div class="row justify-content-center pb-1 m-0" style="font-weight: bold;">
  755.                         <div class="col-3 text-right text-primary p-0">
  756.  
  757.                             <p>Negative</p>
  758.                         </div>
  759.                         <div class="col- text-center pr-2 pl-2">
  760.                             <div class="progress" style="height:5px;margin-top:8px;width:110px;background-color:transparent;border-right:#ccc solid 1px;border-left:#ccc solid 1px;">
  761.                                 <div class="progress-bar" style="width:50%;border-right:#ccc solid 3px;background-color:transparent;">
  762.                                     <br>
  763.                                 </div>
  764.                             </div>
  765.                         </div>
  766.                         <div class="col-3 text-left text-primary p-0">
  767.  
  768.                             <p>Positive</p>
  769.                         </div>
  770.                     </div>
  771.                 </div>
  772.             </div>
  773.         </div>
  774.     </div>
  775.     <!--Relationships Container-->
  776.     <div class="container mx-auto mb-4" style="width:100%;">
  777.  
  778.         <h1 class="bg-primary text-white p-2 text-center rounded mb-4">Relationships</h1>
  779.         <div class="col-9 mx-auto p-0 m-0">
  780.             <!--START Row of Characters-->
  781.             <div class="row justify-content-center">
  782.                 <!--Start Column of Character-->
  783.                 <div class="col-md-3 p-0 text-center mb-3">
  784.  
  785.                     <ul class="m-0 pr-2 pl-2" style="list-style-type: none;">
  786.                         <li>
  787.                             <div class="thumb-image">
  788.                                 <a class="img-thumbnail" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" width="104" height="120"></a>
  789.                             </div>
  790.                         </li>
  791.                         <li><a class="btn btn-sm btn-outline-primary character-name-badge mt-1" href=""><span>Name</span></a></li>
  792.                         <li>Relationship</li>
  793.                     </ul>
  794.                 </div>
  795.                 <!--END Column of Character-->
  796.                 <!--Start Column of Character-->
  797.                 <div class="col-md-3 p-0 text-center mb-3">
  798.  
  799.                     <ul class="m-0 pr-2 pl-2" style="list-style-type: none;">
  800.                         <li>
  801.                             <div class="thumb-image">
  802.                                 <a class="img-thumbnail" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" width="104" height="120"></a>
  803.                             </div>
  804.                         </li>
  805.                         <li><a class="btn btn-sm btn-outline-primary character-name-badge mt-1" href=""><span>Name</span></a></li>
  806.                         <li>Relationship</li>
  807.                     </ul>
  808.                 </div>
  809.                 <!--END Column of Character-->
  810.                 <!--Start Column of Character-->
  811.                 <div class="col-md-3 p-0 text-center mb-3">
  812.  
  813.                     <ul class="m-0 pr-2 pl-2" style="list-style-type: none;">
  814.                         <li>
  815.                             <div class="thumb-image">
  816.                                 <a class="img-thumbnail" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" width="104" height="120"></a>
  817.                             </div>
  818.                         </li>
  819.                         <li><a class="btn btn-sm btn-outline-primary character-name-badge mt-1" href=""><span>Name</span></a></li>
  820.                         <li>Relationship</li>
  821.                     </ul>
  822.                 </div>
  823.                 <!--END Column of Character-->
  824.             </div>
  825.             <!--END Row of Characters-->
  826.         </div>
  827.     </div>
  828.     <!--History Container-->
  829.     <div class="container mx-auto mb-5" style="width:100%;">
  830.  
  831.         <h1 class="bg-primary text-white p-2 text-center rounded mb-4">History</h1>
  832.         <div class="col-10 mx-auto">
  833.  
  834.             <p>...</p>
  835.         </div>
  836.     </div>
  837.     <!--Appearance Notes Container-->
  838.     <div class="container mx-auto mb-5" style="width:100%;">
  839.  
  840.         <h1 class="bg-primary text-white p-2 text-center rounded mb-4">Appearance Notes</h1>
  841.         <div class="col-11 mx-auto text-center">
  842.  
  843.             <ul style="list-style-type: circle;padding-left: 0px;">
  844.                 <li>...</li>
  845.                 <li>...</li>
  846.                 <li>...</li>
  847.             </ul>
  848.         </div>
  849.     </div>
  850. </div>
  851.  
  852. <p>CODE and information: <a href="http://toyhou.se/~forums/16.htmlcss-graphics/44373.simple-character-page-layout-html-">http://toyhou.se/~forums/16.htmlcss-graphics/44373.simple-character-page-layout-html-</a></p>
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!