API tools faq
paste
Joeboateo

The moon will sing a song fOr me, I loved you like the sunnnn

Joeboateo
Apr 16th, 2024 (edited)
5,125
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.98 KB | Source Code | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Thank you for using my code !! If you wanna swap out the fontawesome icons, go to their website;
  4. https://fontawesome.com/icons
  5.  
  6. Color palette;
  7.  
  8. off-white : #F6F0E4
  9. border dull orange : #B5936E
  10. black brown : #201613
  11. bright orange : #F27A41
  12.  
  13. -->
  14.  
  15.  
  16. <!-- code start, replace the background image link with the link to your image -->
  17. <div class="container" align="center" style="background-image:url(BACKGROUND_LINK_HERE); background-attachment:fixed; background-size:cover; font-family:georgia, serif; box-shadow:4px 4px 4px #201613; max-width:700px">
  18.  
  19.  
  20. <!-- quote bar -->
  21. <div class="p-3 text-center">
  22.    <div class="p-2" style="background-color:rgba(23, 23, 23, 0.7);color:rgba(235, 235, 235, 1); color:#F6F0E4; font-size:20px; font-variant:small-caps; font-style:bold; box-shadow:0px 0px 4px #201613; text-shadow:0px 0px 4px #F27A41">
  23.      <i>🙶 QUOTE HERE 🙷</i>
  24.    </div>
  25.    
  26.    
  27.    <!-- collapse button -->
  28.    <a href="#profilecollapse" data-toggle="collapse">
  29.      <i class="mt-2 fas fa-crown" style="color:#F6F0E4; font-size:32px; text-shadow:0px 0px 4px #F27A41"/>
  30.    </a>
  31.    
  32.    
  33.    <!-- content -->
  34.      <div id="profilecollapse" class="collapse">
  35.        <div class="justify-content-center flex-column" align="center">
  36.          
  37.          
  38.          <!-- corner decoration -->
  39.          <i class="fas fa-cloud-sun-rain" style="position:relative; z-index:1; margin-bottom:-50px; color:#F6F0E4; font-size:70px; text-align:left; text-shadow:0px 0px 4px #F27A41; opacity: 0.7;"/>
  40.          
  41.          
  42.          <!-- background card -->
  43.          <div class="mt-2 p-2" style="background-color:rgba(23, 23, 23, 0.7);color:rgba(235, 235, 235, 1); color:#F6F0E4; font-size:20px; box-shadow:0px 0px 4px #201613;">
  44.            
  45.            <div class="row">
  46.              
  47.              <div class="col-lg-5">
  48.                <div class="p-2" style="background-color:#201613; border:double 5px #B5936E; color:#F6F0E4;">
  49.                  
  50.                  
  51.                  <!-- character image; feel free to copy the link to your character's thumbnail and paste it here -->
  52.                  <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:210px; border: 7px double #201613"></div>
  53.                  
  54.                  
  55.                  <!-- name -->
  56.                  <p style="font-variant:small-caps; font-size:25px">NAME SURNAME</p>
  57.                  
  58.                  
  59.                  <!-- divider -->
  60.                  <hr style="border: 5px double #B5936E; margin-top:1px; margin-bottom:1px">
  61.                  
  62.                  
  63.                  <!-- mini information contents -->
  64.                  <div class="row no-gutters justify-content-between" style="font-size:13px;">
  65.                    <div style="color:#F27A41">
  66.                      Nickname (s)
  67.                    </div>
  68.                  
  69.                    <div class="text-right" style="font-style:bold">
  70.                      Content
  71.                    </div>
  72.                  </div>
  73.                  
  74.                  
  75.                  <div class="row no-gutters justify-content-between" style="font-size:13px;">
  76.                    <div style="color:#F27A41">
  77.                      Gender
  78.                    </div>
  79.                  
  80.                    <div class="text-right" style="font-style:bold">
  81.                      Content
  82.                    </div>
  83.                  </div>
  84.                  
  85.                  
  86.                  <div class="row no-gutters justify-content-between" style="font-size:13px">
  87.                    <div style="color:#F27A41">
  88.                      Pronouns
  89.                    </div>
  90.                  
  91.                    <div class="text-right" style="font-style:bold">
  92.                      Con/tent
  93.                    </div>
  94.                  </div>
  95.                  
  96.                  
  97.                  <div class="row no-gutters justify-content-between" style="font-size:13px">
  98.                    <div style="color:#F27A41">
  99.                      Height
  100.                    </div>
  101.                  
  102.                    <div class="text-right" style="font-style:bold">
  103.                      Content
  104.                    </div>
  105.                  </div>
  106.                  
  107.                  
  108.                  <div class="row no-gutters justify-content-between" style="font-size:13px">
  109.                    <div style="color:#F27A41">
  110.                      Age
  111.                    </div>
  112.                  
  113.                    <div class="text-right" style="font-style:bold">
  114.                      Content
  115.                    </div>
  116.                  </div>
  117.                  
  118.                  
  119.                  <div class="row no-gutters justify-content-between" style="font-size:13px">
  120.                    <div style="color:#F27A41">
  121.                      Birthday
  122.                    </div>
  123.                  
  124.                    <div class="text-right" style="font-style:bold">
  125.                      Content
  126.                    </div>
  127.                  </div>
  128.                  
  129.                  
  130.                  <div class="row no-gutters justify-content-between" style="font-size:13px">
  131.                    <div style="color:#F27A41">
  132.                      Species
  133.                    </div>
  134.                  
  135.                    <div class="text-right" style="font-style:bold">
  136.                      Content
  137.                    </div>
  138.                  </div>
  139.                  
  140.                  
  141.                  <div class="row no-gutters justify-content-between" style="font-size:13px">
  142.                    <div style="color:#F27A41">
  143.                      Orient.
  144.                    </div>
  145.                  
  146.                    <div class="text-right" style="font-style:bold">
  147.                      Content
  148.                    </div>
  149.                  </div>
  150.                  
  151.                  
  152.                  <div class="row no-gutters justify-content-between" style="font-size:13px">
  153.                    <div style="color:#F27A41">
  154.                      Job
  155.                    </div>
  156.                  
  157.                    <div class="text-right" style="font-style:bold">
  158.                      Content
  159.                    </div>
  160.                  </div>
  161.                  
  162.                  
  163.                  <div class="row no-gutters justify-content-between" style="font-size:13px">
  164.                    <div style="color:#F27A41">
  165.                      Designer
  166.                    </div>
  167.                  
  168.                    <div class="text-right" style="font-style:bold">
  169.                      <a href="LINK HERE" style="color:#F27A41">Content</a>
  170.                    </div>
  171.                  </div>
  172.                  
  173.                  
  174.                  <!-- code credit, do not remove this. -->
  175.                  <div class="row no-gutters justify-content-between" style="font-size:13px">
  176.                    <div style="color:#F27A41">
  177.                      Code
  178.                    </div>
  179.                  
  180.                    <div class="text-right" style="font-style:bold">
  181.                      <a href="https://toyhou.se/Joeboateo" style="color:#F27A41">Joeboateo</a>
  182.                    </div>
  183.                  </div>
  184.                  
  185.                  
  186.                  <!-- divider -->
  187.                  <hr style="border: 5px double #B5936E; margin-top:1px">
  188.                  
  189.                  
  190.                  <!-- music player, replace the link area with the ending part of a youtube link
  191.                
  192.                 EXAMPLE : https://www.youtube.com/watch?v=dQw4w9WgXcQ >>>> dQw4w9WgXcQ
  193.                
  194.                 -->
  195.                  <div class="row align-items-center">
  196.                    <div class="col-2">
  197.                      <div class="container align-items-center justify-content-center" style="border:5px double #F27A41; overflow:hidden; border-radius:0px; width:40px; height:40px; font-size:15px">
  198.                        <i class="fas fa-leaf"></i></i>
  199.                        <iframe style="width:180%; height:180%; position:absolute; top:-60%; left:-30%; z-index:1; opacity:.001;"
  200.      src="https://www.youtube.com/embed/YT_LINK_HERE"></iframe>
  201.                      </div>
  202.                    </div>
  203.                    
  204.                    
  205.                    <!-- song title -->
  206.                    <div class="col-10">
  207.                      <div class="text-right" style="font-style:italic; text-shadow:0px 0px 4px #F27A41">
  208.                        Song Title
  209.                      </div>
  210.                    </div>
  211.                  </div>
  212.                  
  213.                </div>
  214.                
  215.              </div>
  216.              
  217.              
  218.              <!-- scrolling part of the content -->
  219.              <div class="col-lg-7" style="max-height:567px; overflow-y: auto; overflow-x:hidden;">
  220.                
  221.                
  222.                <!-- about label -->
  223.                <div class="p-2" style="color:#F6F0E4; font-variant:small-caps; font-style:bold; font-size:25px; text-shadow:0px 0px 4px #F27A41">
  224.                  <i class="fas fa-leaf-oak"/> About <i class="fas fa-leaf-oak"/>
  225.                </div>
  226.                
  227.                
  228.                <!-- short intro blurb; feel free to add more <br><br> if you want breaks in your writing -->
  229.                <div class="p-2" style="background-color:#201613; border:double 5px #B5936E; font-size:13px">
  230.                  WRITE HERE
  231.                  <br><br>
  232.                  WRITE MORE HERE
  233.                  
  234.                  
  235.                  <!-- divider -->
  236.                  <hr style="border: 5px double #B5936E; margin-bottom:1px">
  237.                  
  238.                  
  239.                  <div class="row">
  240.                    
  241.                    
  242.                    <!-- likes section; add more by seperating them with a <br> -->
  243.                    <div class="col-6">
  244.                      <span style="font-size:20px; color:#F27A41; font-variant:small-caps">Likes</span>
  245.                      <div class="text-left">
  246.                        Content
  247.                        <br>
  248.                        Content
  249.                        <br>
  250.                        Content
  251.                        <br>
  252.                        Content
  253.                        <br>
  254.                        Content
  255.                        <br>
  256.                        Content
  257.                        <br>
  258.                        Content
  259.                      </div>
  260.                    </div>
  261.                    
  262.                    
  263.                    <!-- dislikes section -->
  264.                    <div class="col-6">
  265.                      <span style="font-size:20px; color:#F27A41; font-variant:small-caps">Dislikes</span>
  266.                      <div class="text-right">
  267.                        Content
  268.                        <br>
  269.                        Content
  270.                        <br>
  271.                        Content
  272.                        <br>
  273.                        Content
  274.                        <br>
  275.                        Content
  276.                        <br>
  277.                        Content
  278.                        <br>
  279.                        Content
  280.                      </div>
  281.                    </div>
  282.                  </div>
  283.                </div>
  284.                
  285.                
  286.                <!-- personality label -->
  287.                <div class="p-2" style="color:#F6F0E4; font-variant:small-caps; font-style:bold; font-size:25px; text-shadow:0px 0px 4px #F27A41">
  288.                  <i class="fas fa-pumpkin"/> Personality <i class="fas fa-pumpkin"/>
  289.                </div>
  290.                
  291.                
  292.                <!-- personality chart, change the percentage in the progress bars, but make sure they add up to 100% -->
  293.                <div class="p-2" style="background-color:#201613; border:double 5px #B5936E; font-size:13px">
  294.                  
  295.                  
  296.                  <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  297.                      Extrovert
  298.                    <div class="text-right" style="font-style:bold">
  299.                      Introvert
  300.                    </div>
  301.                  </div>
  302.                  <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  303.                    <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  304.                    <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  305.                  </div>
  306.                  
  307.                  
  308.                  <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  309.                      Lazy
  310.                    <div class="text-right" style="font-style:bold">
  311.                      Diligent
  312.                    </div>
  313.                  </div>
  314.                  <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  315.                    <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  316.                    <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  317.                  </div>
  318.                  
  319.                  
  320.                  <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  321.                      Cowardly
  322.                    <div class="text-right" style="font-style:bold">
  323.                      Brave
  324.                    </div>
  325.                  </div>
  326.                  <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  327.                    <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  328.                    <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  329.                  </div>
  330.                  
  331.                  
  332.                  <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  333.                      Emotional
  334.                    <div class="text-right" style="font-style:bold">
  335.                      Reserved
  336.                    </div>
  337.                  </div>
  338.                  <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  339.                    <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  340.                    <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  341.                  </div>
  342.                  
  343.                  
  344.                  <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  345.                      Honest
  346.                    <div class="text-right" style="font-style:bold">
  347.                      Untrustworthy
  348.                    </div>
  349.                  </div>
  350.                  <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  351.                    <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  352.                    <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  353.                  </div>
  354.                  
  355.                  
  356.                  <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  357.                      Humerous
  358.                    <div class="text-right" style="font-style:bold">
  359.                      Serious
  360.                    </div>
  361.                  </div>
  362.                  <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  363.                    <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  364.                    <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  365.                  </div>
  366.                  
  367.                  
  368.                  <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  369.                      Polite
  370.                    <div class="text-right" style="font-style:bold">
  371.                      Rude
  372.                    </div>
  373.                  </div>
  374.                  <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  375.                    <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  376.                    <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  377.                  </div>
  378.                  <br>
  379.                  
  380.                  
  381.                  <!-- writing personality part -->
  382.                  WRITE HERE
  383.                  <br><br>
  384.                  WRITE MORE HERE
  385.                </div>
  386.                
  387.                
  388.                <!-- backstory label -->
  389.                <div class="p-2" style="color:#F6F0E4; font-variant:small-caps; font-style:bold; font-size:25px; text-shadow:0px 0px 4px #F27A41">
  390.                  <i class="fas fa-trees"/> Backstory <i class="fas fa-trees"/>
  391.                </div>
  392.                
  393.                
  394.                <!-- content warnings/summary intro -->
  395.                <div class="p-2" style="background-color:#201613; border:double 5px #B5936E; font-size:13px">
  396.                  <span style="font-size:20px; font-variant:small-caps; color:#F27A41">Content Warnings:</span><br>
  397.                  WRITE HERE
  398.                  <br><br>
  399.                    
  400.                    
  401.                    <!-- chapter section; feel free to delete or add more, but change the href name accordingly -->
  402.                    
  403.                    <!-- chapter 1 -->
  404.                     <a href="#chapter1collapse" data-toggle="collapse" style="color:#F6F0E4">
  405.                      <p style="font-variant:small-caps; font-size:25px; text-shadow:0px 0px 4px #F27A41;">Chapter I. "Title"</p>
  406.                    </a>
  407.                    
  408.                    
  409.                    <!-- divider -->
  410.                    <hr style="border: 5px double #B5936E; margin-bottom:1px">
  411.                    
  412.                    <div id="chapter1collapse" class="collapse">
  413.                      WRITE HERE
  414.                      <br><br>
  415.                      WRITE MORE HERE
  416.                      <br><br>
  417.                      WRITE EVEN MORE HERE
  418.                    </div>
  419.                    
  420.                    
  421.                    <!-- chapter 2 -->
  422.                     <a href="#chapter2collapse" data-toggle="collapse" style="color:#F6F0E4">
  423.                      <p style="font-variant:small-caps; font-size:25px; text-shadow:0px 0px 4px #F27A41;">Chapter II. "Title"</p>
  424.                    </a>
  425.                    
  426.                    
  427.                    <!-- divider -->
  428.                    <hr style="border: 5px double #B5936E; margin-bottom:1px">
  429.                    
  430.                    <div id="chapter2collapse" class="collapse">
  431.                      WRITE HERE
  432.                      <br><br>
  433.                      WRITE MORE HERE
  434.                      <br><br>
  435.                      WRITE EVEN MORE HERE
  436.                    </div>
  437.                    
  438.                    
  439.                    <!-- chapter 3 -->
  440.                    <a href="#chapter3collapse" data-toggle="collapse" style="color:#F6F0E4">
  441.                      <p style="font-variant:small-caps; font-size:25px; text-shadow:0px 0px 4px #F27A41;">Chapter III. "Title"</p>
  442.                    </a>
  443.                    
  444.                    
  445.                    <!-- divider -->
  446.                    <hr style="border: 5px double #B5936E; margin-bottom:1px">
  447.                    
  448.                    <div id="chapter3collapse" class="collapse">
  449.                      WRITE HERE
  450.                      <br><br>
  451.                      WRITE MORE HERE
  452.                      <br><br>
  453.                      WRITE EVEN MORE HERE
  454.                    </div>
  455.                </div>
  456.                  
  457.                  
  458.                  <!-- design label -->
  459.                  <div class="p-2" style="color:#F6F0E4; font-variant:small-caps; font-style:bold; font-size:25px; text-shadow:0px 0px 4px #F27A41">
  460.                  <i class="fas fa-key-skeleton"/> Design <i class="fas fa-key-skeleton"/>
  461.                  </div>
  462.                  
  463.                  
  464.                  <!-- character reference image; feel free to change the max height according to how big you want the image to be -->
  465.                  <img src="LINK_HERE" style="max-height:400px">
  466.                  
  467.                  
  468.                  <!-- design note section; feel free to remove or add more content with <li></li> -->
  469.                  <div class="p-2" style="background-color:#201613; border:double 5px #B5936E; font-size:13px">
  470.                    <span style="font-size:20px; color:#F27A41; font-variant:small-caps">Design Notes</span>
  471.                    <ol style="text-align:left">
  472.                      <li>Content</li>
  473.                      <li>Content</li>
  474.                      <li>Content</li>
  475.                      <li>Content</li>
  476.                      <li>Content</li>
  477.                      <li>Content</li>
  478.                    </ol>
  479.                  </div>
  480.                  
  481.                  
  482.                  <!-- relationships label -->
  483.                  <div class="p-2" style="color:#F6F0E4; font-variant:small-caps; font-style:bold; font-size:25px; text-shadow:0px 0px 4px #F27A41">
  484.                  <i class="fas fa-leaf-maple"/> Relationships <i class="fas fa-leaf-maple"/>
  485.                  </div>
  486.                  
  487.                  
  488.                  <!-- character relations section, feel free to add or remove them -->
  489.                  <div class="p-2" style="background-color:#201613; border:double 5px #B5936E; font-size:13px">
  490.                    
  491.                    
  492.                    <!-- character one -->
  493.                    <div class="row">
  494.                      <div class="col-lg-4">
  495.                        
  496.                        
  497.                        <!-- character image -->
  498.                        <div class="container p-5" style="background-image:url(LINK_HERE); background-size:cover; height:80px; border: 7px double #201613"></div>
  499.                      </div>
  500.                      <div class="col-lg-8">
  501.                        
  502.                        
  503.                        <!-- character link -->
  504.                        <a href="LINK_HERE" style="color:#F6F0E4">
  505.                      <p style="font-variant:small-caps; font-size:25px; text-shadow:0px 0px 4px #F27A41;">NAME</p>
  506.                    </a>
  507.                        
  508.                        
  509.                        <!-- relationship opinion bars -->
  510.                        <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  511.                          Trust
  512.                        </div>
  513.                          <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  514.                            <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  515.                            <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  516.                          </div>
  517.                          
  518.                          
  519.                          <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  520.                          Respect
  521.                        </div>
  522.                          <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  523.                            <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  524.                            <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  525.                          </div>
  526.                          
  527.                      </div>
  528.                      </div>
  529.                      
  530.                      
  531.                      <!-- relationship blurb -->
  532.                        WRITE HERE
  533.                      
  534.                      
  535.                      <!-- divider -->
  536.                      <hr style="border: 5px double #B5936E;">
  537.                      
  538.                      
  539.                      <!-- character two -->
  540.                      <div class="row">
  541.                      <div class="col-lg-4">
  542.                        
  543.                        
  544.                        <!-- character image -->
  545.                        <div class="container p-5" style="background-image:url(LINK_HERE); background-size:cover; height:80px; border: 7px double #201613"></div>
  546.                      </div>
  547.                      <div class="col-lg-8">
  548.                        
  549.                        
  550.                        <!-- character link -->
  551.                        <a href="LINK_HERE" style="color:#F6F0E4">
  552.                      <p style="font-variant:small-caps; font-size:25px; text-shadow:0px 0px 4px #F27A41;">NAME</p>
  553.                    </a>
  554.                        
  555.                        
  556.                        <!-- relationship opinion bars -->
  557.                        <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  558.                          Trust
  559.                        </div>
  560.                          <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  561.                            <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  562.                            <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  563.                          </div>
  564.                          
  565.                          <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  566.                          Respect
  567.                        </div>
  568.                          <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  569.                            <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  570.                            <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  571.                          </div>
  572.                          
  573.                      </div>
  574.                      </div>
  575.                      
  576.                      
  577.                      <!-- relationship blurb -->
  578.                        WRITE HERE
  579.                      
  580.                      
  581.                      <!-- divider -->
  582.                      <hr style="border: 5px double #B5936E;">
  583.                      
  584.                      
  585.                      <!-- character three -->
  586.                      <div class="row">
  587.                      <div class="col-lg-4">
  588.                        
  589.                        
  590.                        <!-- character image -->
  591.                        <div class="container p-5" style="background-image:url(LINK_HERE); background-size:cover; height:80px; border: 7px double #201613"></div>
  592.                      </div>
  593.                      <div class="col-lg-8">
  594.                        
  595.                        
  596.                        <!-- character link -->
  597.                        <a href="LINK_HERE" style="color:#F6F0E4">
  598.                      <p style="font-variant:small-caps; font-size:25px; text-shadow:0px 0px 4px #F27A41;">NAME</p>
  599.                    </a>
  600.                        
  601.                        
  602.                        <!-- relationship opinion bars -->
  603.                        <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  604.                          Trust
  605.                        </div>
  606.                          <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  607.                            <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  608.                            <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  609.                          </div>
  610.                          
  611.                          <div class="row no-gutters justify-content-between" style="font-size:15px; font-variant:small-caps; color:#F27A41">
  612.                          Respect
  613.                        </div>
  614.                          <div class="progress" style="height:8px; border-radius:0px; border: 2px solid #B5936E;">
  615.                            <div class="progress-bar" style="width:50%;background-color:#B5936E;"></div>
  616.                            <div class="progress-bar" style="width:50%;background-color: #201613;"></div>
  617.                          </div>
  618.                          
  619.                      </div>
  620.                      </div>
  621.                      
  622.                      
  623.                      <!-- relationship blurb -->
  624.                        WRITE HERE
  625.                      
  626.                  </div>
  627.                  
  628.                  
  629.                  <!-- extras label -->
  630.                  <div class="p-2" style="color:#F6F0E4; font-variant:small-caps; font-style:bold; font-size:25px; text-shadow:0px 0px 4px #F27A41">
  631.                  <i class="fas fa-book-sparkles"/> Extras <i class="fas fa-book-sparkles"/>
  632.                  </div>
  633.                  
  634.                  
  635.                  <!-- headcannons and trivia; if someone else made some headcannons for you, you can link them as example from the last <li> -->
  636.                  <div class="p-2" style="background-color:#201613; border:double 5px #B5936E; font-size:13px">
  637.                    <span style="font-size:20px; color:#F27A41; font-variant:small-caps">Trivia/Headcannons</span>
  638.                    
  639.                    
  640.                    <!-- list trivia -->
  641.                    <ol style="text-align:left">
  642.                      <li>WRITE HERE</li>
  643.                      <li>WRITE HERE</li>
  644.                      <li>WRITE HERE</li>
  645.                      <li>WRITE HERE</li>
  646.                      <li>WRITE HERE</li>
  647.                      <li>WRITE HERE - by <a href="LINK_HERE" style="color:#F27A41">NAME</a></li>
  648.                      <li>WRITE HERE - by <a href="LINK_HERE" style="color:#F27A41">NAME</a></li>
  649.                      <li>WRITE HERE - by <a href="LINK_HERE" style="color:#F27A41">NAME</a></li>
  650.                    </ol>
  651.                    
  652.                    
  653.                    <!-- divider -->
  654.                    <hr style="border: 5px double #B5936E; margin-bottom:1px">
  655.                    
  656.                    
  657.                    <!-- moodboard -->
  658.                    <span style="font-size:20px; color:#F27A41; font-variant:small-caps">Moodboard</span>
  659.                    <div class="row no-gutters align-items-center justify-content-center">
  660.                      
  661.                      
  662.                      <!-- row one -->
  663.                      <div class="col-4">
  664.                        <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:110px; border: solid 2px #201613"></div>
  665.                      </div>
  666.                      <div class="col-4">
  667.                        <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:110px; border: solid 2px #201613"></div>
  668.                      </div>
  669.                      <div class="col-4">
  670.                        <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:110px; border: solid 2px #201613"></div>
  671.                      </div>
  672.                      
  673.                      
  674.                      <!-- row two -->
  675.                      <div class="col-4">
  676.                        <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:110px; border: solid 2px #201613"></div>
  677.                      </div>
  678.                      <div class="col-4">
  679.                        <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:110px; border: solid 2px #201613"></div>
  680.                      </div>
  681.                      <div class="col-4">
  682.                        <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:110px; border: solid 2px #201613"></div>
  683.                      </div>
  684.                      
  685.                      
  686.                      <!-- row three -->
  687.                      <div class="col-4">
  688.                        <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:110px; border: solid 2px #201613"></div>
  689.                      </div>
  690.                      <div class="col-4">
  691.                        <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:110px; border: solid 2px #201613"></div>
  692.                      </div>
  693.                      <div class="col-4">
  694.                        <div class="container" style="background-image:url(LINK_HERE); background-size:cover; height:110px; border: solid 2px #201613"></div>
  695.                      </div>
  696.                      
  697.                    </div>
  698.                  </div>
  699.                  
  700.                </div>
  701.                  
  702.              </div>
  703.              
  704.            </div>
  705.            
  706.          </div>
  707.        </div>
  708.      </div>
  709.    </div>
  710.  
  711. </div>
  712.  
  713. <!-- code end; bye !! -->
Tags: html f2u character code toyhouse profile code
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!