API tools faq
paste
Joeboateo

just let me wave to you not wave goodbye, let me stay byyyyyy yourrrrrr sideeeeee

Joeboateo
Sep 19th, 2024
1,863
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 35.81 KB | None | 1 0
raw download clone embed print report
  1. <!--
  2.  
  3. thank you for using my code !! No colors to replace this time, have fun.!
  4.  
  5. It does use font awesome icons though, so if you want to change any of them you can go to https://fontawesome.com/icons to replace any of them that you want.
  6.  
  7. v code start v
  8.  
  9. -->
  10.  
  11. <div class="container justify-content-center flex-column" style="max-width:350px">
  12.  
  13.    <div class="card p-1" style="font-family:courier; border-radius:0px">
  14.      <div class="container p-1" style="font-size:10px">
  15.        
  16.        <div class="row no-gutters">
  17.          
  18.          <!-- avatar image -->
  19.          <div class="card border-0 col-4 bg-faded p-1" style="border-radius:0px">
  20.            <img src="IMG_URL_HERE">
  21.          </div>
  22.          
  23.          
  24.          <div class="col-8 bg-faded p-1" style="text-align:left;">
  25.            
  26.            <div class="mx-1">
  27.              <!-- name -->
  28.              <span style="font-size:12px; letter-spacing:2px;"><b>Name Surname</b></span> <i class="fas fa-stars" style="float:right; font-size:14px"/>
  29.              
  30.              <!-- intro stats; feel free to change them if you'd like -->
  31.              <hr style="margin-top:-1px; margin-bottom:-1px;">
  32.              
  33.              <div class="mt-1 row no-gutters justify-content-between" style="font-size:10px;">
  34.                gender.
  35.          
  36.                  <div class="text-right">
  37.                    <b>content</b>
  38.                  </div>
  39.              </div>
  40.              
  41.              <div class="row no-gutters justify-content-between" style="font-size:10px;">
  42.                pronouns.
  43.          
  44.                  <div class="text-right">
  45.                    <b>content</b>
  46.                  </div>
  47.              </div>
  48.              
  49.              <div class="row no-gutters justify-content-between" style="font-size:10nx;">
  50.                orient.
  51.          
  52.                  <div class="text-right">
  53.                    <b>content</b>
  54.                  </div>
  55.              </div>
  56.              
  57.              <div class="row no-gutters justify-content-between" style="font-size:10px">
  58.                age.
  59.          
  60.                  <div class="text-right">
  61.                    <b>content</b>
  62.                  </div>
  63.              </div>
  64.  
  65.            </div>
  66.            
  67.          </div>
  68.          
  69.        </div>
  70.        
  71.      </div>
  72.      
  73.      
  74.      <!-- tab buttons, not recommended to change these unless you know what youre doing. you CAN change the icons as you please though !! -->
  75.      
  76.      <div class="container" style="font-size:10px">
  77.        <ul class="nav nav-tabs card-header-tabs row no-gutters justify-content-center align-items-center n4">
  78.          
  79.          <li class="col-2">
  80.            <a class="btn btn-block active" data-toggle="tab" href="#one" style="box-shadow:none; font-size:14px; font-weight:bold">
  81.              <i class="fas fa-page"/>
  82.            </a>
  83.          </li>
  84.          
  85.          <li class="col-2">
  86.            <a class="btn btn-block" data-toggle="tab" href="#two" style="box-shadow:none; font-size:14px; font-weight:bold">
  87.              <i class="fas fa-list"/>
  88.            </a>
  89.          </li>
  90.          
  91.          <li class="col-2">
  92.            <a class="btn btn-block" data-toggle="tab" href="#three" style="box-shadow:none; font-size:14px; font-weight:bold">
  93.              <i class="fas fa-books"/>
  94.            </a>
  95.          </li>
  96.          
  97.          <li class="col-2">
  98.            <a class="btn btn-block" data-toggle="tab" href="#four" style="box-shadow:none; font-size:14px; font-weight:bold">
  99.              <i class="fas fa-paintbrush"/>
  100.            </a>
  101.          </li>
  102.          
  103.          <li class="col-2">
  104.            <a class="btn btn-block" data-toggle="tab" href="#five" style="box-shadow:none; font-size:14px; font-weight:bold">
  105.              <i class="fas fa-people"/>
  106.            </a>
  107.          </li>
  108.          
  109.          <li class="col-2">
  110.            <a class="btn btn-block" data-toggle="tab" href="#six" style="box-shadow:none; font-size:14px; font-weight:bold">
  111.              <i class="far fa-image"/>
  112.            </a>
  113.          </li>
  114.          
  115.        </ul>
  116.      </div>
  117.      
  118.      <div class="tab-content">
  119.        
  120.        
  121.        <!-- personality tab -->
  122.        <div class="tab-pane fade active show" id="one">
  123.          
  124.          <div class="container p-1" style="font-size:10px">
  125.            <div class="mt-2 bg-faded p-1" style="max-height:125px; text-align:center; overflow-y: auto; overflow-x:hidden;">
  126.              
  127.              
  128.              <!-- list their set of traits here -->
  129.              <b>trait . trait . trait . trait . trait</b>
  130.              
  131.              
  132.              <!-- biography. add more <br><br> if you want another paragraph -->
  133.              <div class="p-1">
  134.                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  135.                <br><br>
  136.                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  137.                <br><br>
  138.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  139.              </div>
  140.              
  141.              
  142.              <hr style="margin-top:-1px; margin-bottom:-1px;">
  143.              
  144.              
  145.              <!-- personality sliders. Change the percentage (50%) to whatever number (1-100 recommended) depending on their personality traits. You can also change the titles if you want -->
  146.              <div class="row no-gutters">
  147.                
  148.                <div class="col-6">
  149.                  <b>Friendliness</b>
  150.                  <br>
  151.                  <div class="p-1">
  152.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  153.                  </div>
  154.                  
  155.                  <b>Intelligence</b>
  156.                  <br>
  157.                  <div class="p-1">
  158.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  159.                  </div>
  160.                  
  161.                  <b>Charisma</b>
  162.                  <br>
  163.                  <div class="p-1">
  164.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  165.                  </div>
  166.                  
  167.                  <b>Deception</b>
  168.                  <br>
  169.                  <div class="p-1">
  170.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  171.                  </div>
  172.                </div>
  173.                
  174.                
  175.                <div class="col-6">
  176.                  <b>Integrity</b>
  177.                  <br>
  178.                  <div class="p-1">
  179.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  180.                  </div>
  181.                  
  182.                  <b>Aggression</b>
  183.                  <br>
  184.                  <div class="p-1">
  185.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  186.                  </div>
  187.                  
  188.                  <b>Patience</b>
  189.                  <br>
  190.                  <div class="p-1">
  191.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  192.                  </div>
  193.                  
  194.                  <b>Loyalty</b>
  195.                  <br>
  196.                  <div class="p-1">
  197.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  198.                  </div>
  199.                </div>
  200.                
  201.              </div>
  202.              
  203.              
  204.            </div>
  205.          </div>
  206.          
  207.        </div>
  208.        
  209.        <!-- likes, dislikes, etc tab -->
  210.          <div class="tab-pane fade" id="two">
  211.            <div class="container p-1" style="font-size:10px">
  212.              <div class="mt-2 bg-faded p-1" style="max-height:125px; text-align:center; overflow-y: auto; overflow-x:hidden;">
  213.              
  214.                <div class="row no-gutters">
  215.                  <div class="col-6">
  216.                    <b>Likes</b>
  217.                  </div>
  218.                
  219.                  <div class="col-6">
  220.                    <b>Dislikes</b>
  221.                  </div>
  222.                </div>
  223.                
  224.                
  225.              
  226.                <div class="row no-gutters">
  227.                  
  228.                  <div class="col-6 p-1" style="text-align:left">
  229.                    
  230.                    <!-- list of likes. feel free to add more if you want -->
  231.                    <i class="fas fa-heart text-muted" style="font-size:11px"/> Content
  232.                    <br><i class="fas fa-heart text-muted" style="font-size:11px"/> Content
  233.                    <br><i class="fas fa-heart text-muted" style="font-size:11px"/> Content
  234.                    <br><i class="fas fa-heart text-muted" style="font-size:11px"/> Content but its long lorum ipsum
  235.                    <br><i class="fas fa-heart text-muted" style="font-size:11px"/> Content
  236.                    <br><i class="fas fa-heart text-muted" style="font-size:11px"/> Content
  237.                  
  238.                  </div>
  239.                  
  240.                  <div class="col-6 p-1" style="text-align:left">
  241.                    
  242.                    <!-- list of dislikes. also feel free to add more if you want -->
  243.                    <i class="fas fa-heart-crack text-muted" style="font-size:11px"/> Content
  244.                    <br><i class="fas fa-heart-crack text-muted" style="font-size:11px"/> Content
  245.                    <br><i class="fas fa-heart-crack text-muted" style="font-size:11px"/> Content
  246.                    <br><i class="fas fa-heart-crack text-muted" style="font-size:11px"/> Content
  247.                    <br><i class="fas fa-heart-crack text-muted" style="font-size:11px"/> Content
  248.                    <br><i class="fas fa-heart-crack text-muted" style="font-size:11px"/> Never gonna give you up, never gonna let you down never gonna
  249.                  </div>
  250.                
  251.                </div>
  252.                
  253.                <hr style="margin-top:-1px; margin-bottom:-1px;">
  254.              
  255.              <!-- Physical traits. works the same as the personality sliders. -->
  256.              <div class="row no-gutters">
  257.                
  258.                <div class="col-6">
  259.                  <b>Strength</b>
  260.                  <br>
  261.                  <div class="p-1">
  262.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  263.                  </div>
  264.                  
  265.                  <b>Speed</b>
  266.                  <br>
  267.                  <div class="p-1">
  268.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  269.                  </div>
  270.                  
  271.                  <b>Defense</b>
  272.                  <br>
  273.                  <div class="p-1">
  274.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  275.                  </div>
  276.                  
  277.                </div>
  278.                
  279.                
  280.                <div class="col-6">
  281.                  <b>Agility</b>
  282.                  <br>
  283.                  <div class="p-1">
  284.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  285.                  </div>
  286.                  
  287.                  <b>Stamina</b>
  288.                  <br>
  289.                  <div class="p-1">
  290.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  291.                  </div>
  292.                  
  293.                  <b>Magic</b>
  294.                  <br>
  295.                  <div class="p-1">
  296.                    <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  297.                  </div>
  298.                </div>
  299.                
  300.              </div>
  301.              
  302.                <hr style="margin-bottom:-1px;">
  303.              
  304.              <!-- personality trivia, you can add as many as you want -->
  305.                <b>Trivia + fun-facts</b>
  306.                
  307.                  <div class="p-1">
  308.                    <i class="fas fa-star text-muted" style="font-size:11px"/> Lorem ipsum dolor sit amet.
  309.                    <br><i class="fas fa-star text-muted" style="font-size:11px"/>  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  310.                    <br><i class="fas fa-star text-muted" style="font-size:11px"/> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  311.                    <br><i class="fas fa-star text-muted" style="font-size:11px"/> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  312.                    <br><i class="fas fa-star text-muted" style="font-size:11px"/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  313.                    <br><i class="fas fa-star text-muted" style="font-size:11px"/> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  314.                  </div>
  315.              
  316.              
  317.              </div>
  318.            </div>
  319.          </div>
  320.        
  321.        
  322.        <!-- background/story tab -->
  323.        <div class="tab-pane fade" id="three">
  324.          <div class="container p-1" style="font-size:10px">
  325.            <div class="mt-2 bg-faded p-1" style="max-height:125px; text-align:center; overflow-y: auto; overflow-x:hidden;">
  326.              
  327.              
  328.              <!-- warnings you can put to warn users about the content in their story. Feel free to change this to story summaries if you already have a warning/dont need this -->
  329.              <b>Warnings</b> <i class="fas fa-triangle-exclamation text-warning"/>
  330.              
  331.              <div class="p-1">
  332.                Content content content
  333.              </div>
  334.              
  335.              <hr style="margin-top:-1px; margin-bottom:-1px;">
  336.              
  337.              
  338.              <!-- chapter 1 -->
  339.               <div class="mt-1 row no-gutters justify-content-between" style="font-size:12px; letter-spacing:2px">
  340.                Chapter I.
  341.          
  342.                  <!-- title -->
  343.                  <div class="text-right">
  344.                     <b> <i class="fas fa-bookmark text-muted"/> Content</b>
  345.                  </div>
  346.              </div>
  347.              
  348.              <!-- contents, you can add more paragraphs or less if you want -->
  349.              <div class="p-1">
  350.                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  351.                <br><br>
  352.                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  353.                <br><br>
  354.                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  355.                <br><br>
  356.                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  357.              </div>
  358.              
  359.              <hr style="margin-top:-1px; margin-bottom:-1px;">
  360.              
  361.              
  362.              <!-- chapter 2, you can add more chapters if you want (add a <hr style="margin-top:-1px; margin-bottom:-1px;"> for some neater orginization) -->
  363.              <div class="mt-1 row no-gutters justify-content-between" style="font-size:12px; letter-spacing:2px">
  364.                Chapter II.
  365.          
  366.                  <!-- title -->
  367.                  <div class="text-right">
  368.                     <b><i class="fas fa-bookmark text-muted"/> Waiting</b>
  369.                  </div>
  370.              </div>
  371.              
  372.              <!-- contents -->
  373.              <div class="p-1">
  374.                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  375.                <br><br>
  376.                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  377.                <br><br>
  378.                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  379.                <br><br>
  380.                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  381.              </div>
  382.              
  383.            </div>
  384.          </div>
  385.        </div>
  386.        
  387.        
  388.        <!-- design tab -->
  389.        <div class="tab-pane fade" id="four">
  390.          <div class="container p-1" style="font-size:10px">
  391.            <div class="mt-2 bg-faded p-1" style="max-height:125px; text-align:center; overflow-y: auto; overflow-x:hidden;">
  392.              
  393.              <div class="row no-gutters">
  394.                
  395.                <!-- design trait area. you can change this depending on what you want or add more even. -->
  396.                <div class="col-6 p-1" style="text-align:left;">
  397.                  <div class="row no-gutters justify-content-between" style="font-size:10px;">
  398.                    Height
  399.          
  400.                      <div class="text-right">
  401.                        <b>0'0 | 000 cm</b>
  402.                      </div>
  403.                  </div>
  404.                  
  405.                  <div class="row no-gutters justify-content-between" style="font-size:10px;">
  406.                    Weight
  407.          
  408.                      <div class="text-right">
  409.                        <b>Content</b>
  410.                      </div>
  411.                  </div>
  412.                  
  413.                  <div class="row no-gutters justify-content-between" style="font-size:10px;">
  414.                    Species
  415.          
  416.                      <div class="text-right">
  417.                        <b>Content</b>
  418.                      </div>
  419.                  </div>
  420.                  
  421.                  <div class="row no-gutters justify-content-between" style="font-size:10px; margin-bottom:1px">
  422.                    Build
  423.          
  424.                      <div class="text-right">
  425.                        <b>Content</b>
  426.                      </div>
  427.                  </div>
  428.                  
  429.                  <hr style="margin-top:-1px; margin-bottom:-1px;">
  430.                  
  431.                  <div class="row no-gutters justify-content-between" style="font-size:10px; margin-top:1px">
  432.                    Gift art?
  433.          
  434.                      <div class="text-right">
  435.                        <b>Yes/no</b>
  436.                      </div>
  437.                  </div>
  438.                  
  439.                  <div class="row no-gutters justify-content-between" style="font-size:10px;">
  440.                    Ship art?
  441.          
  442.                      <div class="text-right">
  443.                        <b>Yes/no</b>
  444.                      </div>
  445.                  </div>
  446.                  
  447.                  <div class="row no-gutters justify-content-between" style="font-size:10px;">
  448.                    Gore?
  449.          
  450.                      <div class="text-right">
  451.                        <b>Yes/no</b>
  452.                      </div>
  453.                  </div>
  454.                  
  455.                  <div class="row no-gutters justify-content-between" style="font-size:10px; margin-bottom:1px">
  456.                    Suggestive?
  457.          
  458.                      <div class="text-right">
  459.                        <b>Yes/no</b>
  460.                      </div>
  461.                  </div>
  462.                  
  463.                  <hr style="margin-top:-1px; margin-bottom:-1px;">
  464.                  
  465.                  <div class="row no-gutters justify-content-between" style="font-size:10px; margin-top:1px">
  466.                    Designer
  467.                    
  468.                    <!-- link the user who designed them -->
  469.                      <div class="text-right">
  470.                        <b><a href="https://toyhou.se/joeboateo">Content</a></b>
  471.                      </div>
  472.                  </div>
  473.                  
  474.                </div>
  475.                
  476.                <!-- character reference. will grow to fit image through -->
  477.                <div class="col-6">
  478.                  <div class="border-0">
  479.                    <img src="IMG_URL_HERE">
  480.                  </div>
  481.                </div>
  482.                
  483.               </div>
  484.              
  485.              <hr style="margin-bottom:-1px;">
  486.              
  487.              <!-- design notes, feel free to add more or less depending on what works for you -->
  488.              <b>Design notes</b>
  489.                
  490.                  <div class="p-1">
  491.                    <i class="fas fa-paintbrush text-muted" style="font-size:11px"/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  492.                    <br><i class="fas fa-paintbrush text-muted" style="font-size:11px"/> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  493.                    <br><i class="fas fa-paintbrush text-muted" style="font-size:11px"/> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  494.                    <br><i class="fas fa-paintbrush text-muted" style="font-size:11px"/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  495.                    <br><i class="fas fa-paintbrush text-muted" style="font-size:11px"/> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  496.                  </div>
  497.              
  498.            </div>
  499.          </div>
  500.        </div>
  501.        
  502.        
  503.        <!-- relationships tab -->
  504.        <div class="tab-pane fade" id="five">
  505.          <div class="container p-1" style="font-size:10px">
  506.            <div class="mt-2 bg-faded p-1" style="max-height:125px; text-align:center; overflow-y: auto; overflow-x:hidden;">
  507.              
  508.              
  509.              <!-- character one; feel free to add or remove characters -->
  510.              <div class="row no-gutters">
  511.                
  512.                
  513.                <!-- link to character and relationship title -->
  514.                <div class="col-8 p-1">
  515.                  <span style="font-size:12px; letter-spacing:2px; float:left"><b><a href="URL_HERE">Name</a></b></span> <p style="float:right">Content</p>
  516.                  
  517.                  <hr style="margin-top:-1px; margin-bottom:-1px;">
  518.                  
  519.                  
  520.                  <!-- relationship ranking; to modify this more heres a key:
  521.                
  522.                 fas fa-heart = full heart
  523.                 fas fa-heart-half-stroke = half heart
  524.                 far fa-heart = empty heart
  525.                
  526.                 -->
  527.                    <i class="fas fa-heart"/>
  528.                    <i class="fas fa-heart"/>
  529.                    <i class="fas fa-heart-half-stroke"/>
  530.                    <i class="far fa-heart"/>
  531.                    <i class="far fa-heart"/>
  532.                  
  533.                  
  534.                  <div class="row no-gutters">
  535.                    <div class="col-6">
  536.                      
  537.                      
  538.                      <!-- personality sliders. feel free to change -->
  539.                      <b>Closeness</b>
  540.                      <br>
  541.                      <div class="p-1">
  542.                        <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  543.                      </div>
  544.                      
  545.                      <b>Trust</b>
  546.                      <br>
  547.                      <div class="p-1">
  548.                        <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  549.                      </div>
  550.                  
  551.                    </div>
  552.                    
  553.                    <div class="col-6">
  554.                      
  555.                      <b>Respect</b>
  556.                      <br>
  557.                      <div class="p-1">
  558.                        <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  559.                      </div>
  560.                      
  561.                      <b>Fondness</b>
  562.                      <br>
  563.                      <div class="p-1">
  564.                        <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  565.                      </div>
  566.                  
  567.                    </div>
  568.                  </div>
  569.                  
  570.                  
  571.                </div>
  572.                
  573.                <!-- character's avatar -->
  574.                <div class="col-4">
  575.                  <div class="border-0 h-100">
  576.                    <img src="URL_HERE">
  577.                  </div>
  578.                </div>
  579.                
  580.              </div>
  581.              
  582.              <!-- relationship biography. feel free to make this OOC by removing the quote lines or add paragraphs -->
  583.              <div class="p-1">
  584.                <i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</i>
  585.              </div>
  586.              
  587.              
  588.              <hr style="margin-top:-1px">
  589.              
  590.              
  591.              <!-- character two -->
  592.              <div class="row no-gutters">
  593.                
  594.                
  595.                <!-- link to character and relationship title -->
  596.                <div class="col-8 p-1">
  597.                  <span style="font-size:12px; letter-spacing:2px; float:left"><b><a href="URL HERE">Name</a></b></span> <p style="float:right">Content</p>
  598.                  
  599.                  <hr style="margin-top:-1px; margin-bottom:-1px;">
  600.                  
  601.                  
  602.                  <!-- relationship ranking -->
  603.                    <i class="fas fa-heart"/>
  604.                    <i class="fas fa-heart"/>
  605.                    <i class="fas fa-heart-half-stroke"/>
  606.                    <i class="far fa-heart"/>
  607.                    <i class="far fa-heart"/>
  608.                  
  609.                  
  610.                  <div class="row no-gutters">
  611.                    <div class="col-6">
  612.                      
  613.                      <!-- personality sliders -->
  614.                      <b>Closeness</b>
  615.                      <br>
  616.                      <div class="p-1">
  617.                        <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  618.                      </div>
  619.                      
  620.                      <b>Trust</b>
  621.                      <br>
  622.                      <div class="p-1">
  623.                        <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  624.                      </div>
  625.                  
  626.                    </div>
  627.                    
  628.                    <div class="col-6">
  629.                      
  630.                      <b>Respect</b>
  631.                      <br>
  632.                      <div class="p-1">
  633.                        <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  634.                      </div>
  635.                      
  636.                      <b>Fondness</b>
  637.                      <br>
  638.                      <div class="p-1">
  639.                        <div class="progress" style="height:6px; border-radius:0px"><div class="progress-bar" style="width:50%;"><br></div></div>
  640.                      </div>
  641.                  
  642.                    </div>
  643.                  </div>
  644.                  
  645.                  
  646.                </div>
  647.                
  648.                <!-- character's avatar -->
  649.                <div class="col-4">
  650.                  <div class="border-0 h-100">
  651.                    <img src="URL_HERE">
  652.                  </div>
  653.                </div>
  654.                
  655.              </div>
  656.              
  657.              <!-- relationship biography -->
  658.              <div class="p-1">
  659.                <i>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</i>
  660.              </div>
  661.              
  662.            </div>
  663.          </div>
  664.        </div>
  665.        
  666.        
  667.        <!-- moodboard section -->
  668.        <div class="tab-pane fade" id="six">
  669.          <div class="container p-1" style="font-size:10px">
  670.            <div class="mt-2 bg-faded p-1" style="max-height:125px; text-align:center; overflow-y: auto; overflow-x:hidden;">
  671.              
  672.              
  673.              <!-- images, you can change the size of each image by modifying the col number, but make sure they all add up to intervals of 12 -->
  674.              <div class="row no-gutters">
  675.                
  676.                <div class="col-6">
  677.                  <div class="card m-1 border-0" style="height:100px; border-radius:0px; background-image:url(IMG_URL_HERE); background-position:center; background-size:cover">
  678.                  </div>
  679.                </div>
  680.                
  681.                <div class="col-6">
  682.                  <div class="card m-1 border-0" style="height:100px; border-radius:0px; background-image:url(IMG_URL_HERE); background-position:center; background-size:cover">
  683.                  </div>
  684.                </div>
  685.                
  686.                
  687.                <div class="col-6">
  688.                  <div class="card m-1 border-0" style="height:100px; border-radius:0px; background-image:url(IMG_URL_HERE); background-position:center; background-size:cover">
  689.                  </div>
  690.                </div>
  691.                
  692.                <div class="col-6">
  693.                  <div class="card m-1 border-0" style="height:100px; border-radius:0px; background-image:url(IMG_URL_HERE); background-position:center; background-size:cover">
  694.                  </div>
  695.                </div>
  696.                
  697.                
  698.                <div class="col-4">
  699.                  <div class="card m-1 border-0" style="height:85px; border-radius:0px; background-image:url(IMG_URL_HERE); background-position:center; background-size:cover">
  700.                  </div>
  701.                </div>
  702.                
  703.                <div class="col-4">
  704.                  <div class="card m-1 border-0" style="height:85px; border-radius:0px; background-image:url(IMG_URL_HERE); background-position:center; background-size:cover">
  705.                  </div>
  706.                </div>
  707.                
  708.                
  709.                <div class="col-4">
  710.                  <div class="card m-1 border-0" style="height:85px; border-radius:0px; background-image:url(IMG_URL_HERE); background-position:center; background-size:cover">
  711.                  </div>
  712.                </div>
  713.                
  714.              </div>
  715.              
  716.            </div>
  717.          </div>
  718.        </div>
  719.        
  720.      </div>
  721.      
  722.      
  723.      <!-- music section -->
  724.      <div class="row p-1">
  725.        <div class="col-2">
  726.          
  727.          <div class="card align-items-center justify-content-center" style="border:1; overflow:hidden; border-radius:0px; width:32px; height:32px; font-size:14px">
  728.            <i class="fas fa-play text-primary" style="margin-left:1px"></i></i>
  729.          </div>
  730.          
  731.          
  732.          <!-- replace the embed url here with the last part of a youtube link; example
  733.        
  734.         https://www.youtube.com/watch?v=dQw4w9WgXcQ >>>> dQw4w9WgXcQ
  735.        
  736.         -->
  737.          <iframe style="width:80%; height:100%; position:absolute; top:0%; left:15%; z-index:1; opacity:.001;"
  738.      src="https://www.youtube.com/embed/EMBED_URL_HERE"></iframe>
  739.          
  740.        </div>
  741.        
  742.        <!-- song name -->
  743.        <div class="col-10">
  744.          <div style="font-size:12px; margin-top:7px">
  745.            <i><b>Song Title</b> - Content content</i>
  746.          </div>
  747.        </div>
  748.      </div>
  749.      
  750.      
  751.      
  752.    </div>
  753.  
  754. </div>
  755.  
  756. <!-- code credits, do NOT remove this however move it as much as you please as long as it is easily accessible. Thank you again for using my code.! -->
  757. <div class="container border-0" align="center" style="max-width:350px;">
  758.    <a href="https://toyhou.se/Joeboateo" style="font-size:10px;"><i class="fa-solid fa-code"></i></a>
  759. </div>
Tags: html Code character code toyhouse
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!