API tools faq
paste
Teison

[TH-HTML] Froggy: Basic

Teison
Jan 13th, 2021 (edited)
307
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 43.31 KB
raw download clone embed print report
  1. <!-----------------------------------------------------------------------------------------------------------------------------
  2.  
  3.    CODING BY MOUEI @ TOYHOU.SE
  4.        
  5.         !* YOU WILL NEED TO ADD YOUR OWN IMAGE URLs. CTRL + F TO FIND "URL"
  6.  
  7.         !* To change repetative details easily in the Toyhou.s editor (on Google Chrome),
  8.            - highlight the desired piece of code ie. a color HEX code.
  9.            - ctrl + f
  10.            - click the '+' sign under the 'find' box
  11.            - in the 'replace with' box that appears, enter your desired outcome.
  12.  
  13.         !* MAIN COLOUR CODES USED
  14.                         OBJECT                  |   COLOUR
  15.                     ------------------------------------------
  16.                         Main Text Colour        |   #426A5B
  17.                         Content Box Background  |   white
  18.                         Accent Colour           |   #8FDBBE
  19.                         Title Text              |   #FFFFFF
  20.  
  21.            - click 'replace all'
  22.  
  23. ----------------------------------------------------------------------------------------------------------------------------->
  24.  
  25. <div style ="background: #eaf2ba url(BACKGROUND IMAGE URL GOES HERE) fixed; position: absolute; top: 0px; bottom: 0px; left: 0; z-index: 1; width: 100%; height: 100%; text-align: center;">
  26. </div>
  27.  
  28. <div class="container-fluid card" style="max-width: 1200px; z-index: 2; color: #426A5B; background: transparent; top: -200px; bottom: 0; left: 0; right: 0; border-radius: 0; border: none;">
  29.  
  30. <!----------------------------------------------------------------------------------------------------------------------------
  31.         CHARACTER NAME TITLE
  32. ------------------------------------------------------------------------------------------------------------------------------>
  33.    
  34.     <div class="row mx-2 align-items-end" style="margin-bottom: -30px;">
  35.         <div class="col mx-2 p-0" style="font-size: 60pt; font-weight: bolder; letter-spacing: 5pt; color: #FFFFFF;">
  36.             <div style="color: #8FDBBE; display: inline; text-align: center;">F</div><div style="display: inline;">ULL NAME</div>
  37.         </div>
  38. <!---------------------------------------------------------------------------------------------------------------------------->
  39.        
  40. <!----------------------------------------------------------------------------------------------------------------------------
  41.         CREDIT - DO NOT REMOVE!
  42. ------------------------------------------------------------------------------------------------------------------------------>
  43.        
  44.         <div class="col-2 mr-2" style="margin-bottom: 15px; right: 0; margin-right: 0; text-align: right; font-size: 7pt; letter-spacing: 2pt; text-transform: uppercase;">
  45.           Coding by @mouei
  46.         </div>
  47.     </div>
  48. <!---------------------------------------------------------------------------------------------------------------------------->
  49.        
  50. <!----------------------------------------------------------------------------------------------------------------------------
  51.         FIRST SECTION
  52. ------------------------------------------------------------------------------------------------------------------------------>
  53.    
  54.     <div class="row m-2">        
  55.         <div class="col-md-3 m-2" style="overflow: hidden; border-radius: 10px;">
  56.        
  57. <!----------------------------------------------------------------------------------------------------------------------------
  58.         FIRST SECTION : CHARACTER ICON
  59. ------------------------------------------------------------------------------------------------------------------------------>          
  60.             <div class="row">
  61.                 <div class="col" style="background: url(CHARACTER ICON URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; height: auto; min-height: 284px;">              
  62.                 </div>
  63.             </div>
  64. <!---------------------------------------------------------------------------------------------------------------------------->
  65.        
  66. <!----------------------------------------------------------------------------------------------------------------------------
  67.         FIRST SECTION : CHARACTER DATA
  68. ------------------------------------------------------------------------------------------------------------------------------>
  69.          
  70.             <div class="row mt-2">
  71.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8FDBBE; border-radius: 10px 0 0 10px;">
  72.                     <i class="far fa-signature"></i>
  73.                 </div>
  74.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  75.                     Name
  76.                 </div>
  77.             </div>
  78.  
  79.             <div class="row mt-2">
  80.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8FDBBE; border-radius: 10px 0 0 10px;">
  81.                     <i class="far fa-calendar-star"></i>
  82.                 </div>
  83.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  84.                     Age
  85.                 </div>
  86.             </div>
  87.  
  88.             <div class="row mt-2">
  89.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8FDBBE; border-radius: 10px 0 0 10px;">
  90.                     <i class="far fa-id-card"></i>
  91.                 </div>
  92.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  93.                     Identity
  94.                 </div>
  95.             </div>
  96.  
  97.             <div class="row mt-2">
  98.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8FDBBE; border-radius: 10px 0 0 10px;">
  99.                     <i class="far fa-paw"></i>
  100.                 </div>
  101.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  102.                     Species
  103.                 </div>
  104.             </div>
  105.  
  106.             <div class="row mt-2">
  107.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8FDBBE; border-radius: 10px 0 0 10px;">
  108.                     <i class="far fa-ruler-vertical"></i>
  109.                 </div>
  110.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  111.                     Height
  112.                 </div>
  113.             </div>
  114.  
  115.             <div class="row mt-2">
  116.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8FDBBE; border-radius: 10px 0 0 10px;">
  117.                     <i class="far fa-balance-scale"></i>
  118.                 </div>
  119.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  120.                     Weight
  121.                 </div>
  122.             </div>
  123. <!---------------------------------------------------------------------------------------------------------------------------->
  124.        
  125. <!----------------------------------------------------------------------------------------------------------------------------
  126.         FIRST SECTION : CHARACTER DATA : COLOUR SPACER
  127. ------------------------------------------------------------------------------------------------------------------------------>
  128.             <div class="row mt-2" style="min-height: 20px; height: 100%;">
  129.                 <div class="col" style="background: #8fdbbe; height: 100%; border-radius: 10px; color: #8fdbbe;">
  130.  
  131.                 </div>
  132.             </div>
  133.  
  134.         </div>
  135. <!---------------------------------------------------------------------------------------------------------------------------->
  136.        
  137. <!----------------------------------------------------------------------------------------------------------------------------
  138.         FIRST SECTION : CHARACTER COLOUR PALETTE
  139.             (NOTE)  You can adjust the height of each colour by changing the percentage (%) in the "row style", however do not
  140.                     exceed a combined 100% between them all. You can also add more colours, just adhere to the same rule!
  141. ------------------------------------------------------------------------------------------------------------------------------>
  142.        
  143.         <div class="col m-2 p-0" style="max-height: 100%; max-width: 20px; overflow: hidden; border-radius: 10px;">
  144.             <div class="row" style="min-height: 10%;">
  145.                 <div class="col p-0" style="background: #FFD9BD;">
  146.  
  147.                 </div>
  148.             </div>
  149.             <div class="row" style="min-height: 20%;">
  150.                 <div class="col p-0" style="background: #FFAAA5;">
  151.  
  152.                 </div>
  153.             </div>
  154.             <div class="row" style="min-height: 15%;">
  155.                 <div class="col p-0" style="background: #FF9943;">
  156.  
  157.                 </div>
  158.             </div>
  159.             <div class="row" style="min-height: 10%;">
  160.                 <div class="col p-0" style="background: #D9E3A1;">
  161.  
  162.                 </div>
  163.             </div>
  164.             <div class="row" style="min-height: 5%;">
  165.                 <div class="col  p-0" style="background: #8FDBBE;">
  166.  
  167.                 </div>
  168.             </div>
  169.             <div class="row" style="min-height: 15%;">
  170.                 <div class="col p-0" style="background: #8FDBBE;">
  171.  
  172.                 </div>
  173.             </div>
  174.             <div class="row" style="min-height: 15%;">
  175.                 <div class="col p-0" style="background: #BBD6EA;">
  176.  
  177.                 </div>
  178.             </div>
  179.             <div class="row" style="min-height: 10%;">
  180.                 <div class="col p-0" style="background: #5D6F67;">
  181.  
  182.                 </div>
  183.             </div>          
  184.         </div>
  185. <!---------------------------------------------------------------------------------------------------------------------------->
  186.        
  187. <!----------------------------------------------------------------------------------------------------------------------------
  188.         FIRST SECTION : ABOUT
  189. ------------------------------------------------------------------------------------------------------------------------------>        
  190.         <div class="col m-2 p-5" style="background: white; border-radius: 10px;">
  191.        
  192. <!----------------------------------------------------------------------------------------------------------------------------
  193.         FIRST SECTION : ABOUT : ABOUT TITLE
  194. ------------------------------------------------------------------------------------------------------------------------------>        
  195.             <div class="col mb-2" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  196.                 About
  197.             </div>
  198.        
  199. <!---------------------------------------------------------------------------------------------------------------------------->
  200.        
  201. <!----------------------------------------------------------------------------------------------------------------------------
  202.         FIRST SECTION : ABOUT : ABOUT INFO
  203. ------------------------------------------------------------------------------------------------------------------------------>
  204.             <div class="col m-0 p-0 pr-2 text-justify">
  205.  
  206.                 <p>
  207.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl suscipit adipiscing bibendum. Massa eget egestas purus viverra accumsan in. Porta non pulvinar neque laoreet. Aenean euismod elementum nisi quis eleifend. Diam quis enim lobortis scelerisque fermentum. Ullamcorper eget nulla facilisi etiam dignissim. At auctor urna nunc id cursus. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum. Viverra nam libero justo laoreet sit amet cursus sit amet.
  208.                 </p>
  209.                 <p>
  210.                     Id velit ut tortor pretium viverra suspendisse potenti. A condimentum vitae sapien pellentesque. Elit sed vulputate mi sit amet mauris. A arcu cursus vitae congue. Ut etiam sit amet nisl purus in mollis nunc. Varius vel pharetra vel turpis nunc eget lorem. Orci ac auctor augue mauris. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Arcu dictum varius duis at consectetur lorem donec massa. Nulla facilisi nullam vehicula ipsum. Aliquam ultrices sagittis orci a scelerisque. In ornare quam viverra orci. Pellentesque nec nam aliquam sem et tortor consequat. Non consectetur a erat nam at lectus urna.
  211.                 </p>
  212.             </div>
  213.         </div>
  214.     </div>
  215. <!---------------------------------------------------------------------------------------------------------------------------->
  216.        
  217. <!----------------------------------------------------------------------------------------------------------------------------
  218.         SECOND SECTION
  219. ------------------------------------------------------------------------------------------------------------------------------>      
  220.     <div class="row mx-2">
  221. <!---------------------------------------------------------------------------------------------------------------------------->
  222.        
  223. <!----------------------------------------------------------------------------------------------------------------------------
  224.         SECOND SECTION : PERSONALITY
  225. ------------------------------------------------------------------------------------------------------------------------------>
  226.         <div class="col m-0 p-0">
  227.             <div class="row m-0 p-0">
  228.                 <div class="col m-2 p-5" style="background: white; border-radius: 10px;">
  229. <!---------------------------------------------------------------------------------------------------------------------------->
  230.        
  231. <!----------------------------------------------------------------------------------------------------------------------------
  232.         SECOND SECTION : PERSONALITY : PERSONALITY TITLE
  233. ------------------------------------------------------------------------------------------------------------------------------>                    
  234.                     <div class="col mb-2" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  235.                         Personality
  236.                     </div>
  237. <!---------------------------------------------------------------------------------------------------------------------------->
  238.        
  239. <!----------------------------------------------------------------------------------------------------------------------------
  240.         SECOND SECTION : PERSONALITY : PERSONALITY INFO
  241. ------------------------------------------------------------------------------------------------------------------------------>        
  242.                     <div class="col m-0 p-0 pr-2 text-justify">              
  243.                         <p>
  244.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl suscipit adipiscing bibendum. Massa eget egestas purus viverra accumsan in. Porta non pulvinar neque laoreet. Aenean euismod elementum nisi quis eleifend. Diam quis enim lobortis scelerisque fermentum. Ullamcorper eget nulla facilisi etiam dignissim. At auctor urna nunc id cursus. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum. Viverra nam libero justo laoreet sit amet cursus sit amet.
  245.                         </p>
  246.                         <p>
  247.                             Id velit ut tortor pretium viverra suspendisse potenti. A condimentum vitae sapien pellentesque. Elit sed vulputate mi sit amet mauris. A arcu cursus vitae congue. Ut etiam sit amet nisl purus in mollis nunc. Varius vel pharetra vel turpis nunc eget lorem. Orci ac auctor augue mauris. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Arcu dictum varius duis at consectetur lorem donec massa. Nulla facilisi nullam vehicula ipsum. Aliquam ultrices sagittis orci a scelerisque. In ornare quam viverra orci. Pellentesque nec nam aliquam sem et tortor consequat. Non consectetur a erat nam at lectus urna.
  248.                         </p>
  249.                     </div>
  250.                 </div>
  251.             </div>
  252. <!---------------------------------------------------------------------------------------------------------------------------->
  253.        
  254. <!----------------------------------------------------------------------------------------------------------------------------
  255.         SECOND SECTION : LIKES
  256. ------------------------------------------------------------------------------------------------------------------------------>        
  257.             <div class="row m-0 p-0">
  258. <!---------------------------------------------------------------------------------------------------------------------------->
  259.        
  260. <!----------------------------------------------------------------------------------------------------------------------------
  261.         SECOND SECTION : LIKES : LIKES TITLE
  262. ------------------------------------------------------------------------------------------------------------------------------>        
  263.                 <div class="col m-2 p-5" style="background: white; border-radius: 10px;">
  264.                     <div class="col mb-2" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  265.                         Likes
  266.                     </div>
  267. <!---------------------------------------------------------------------------------------------------------------------------->
  268.        
  269. <!----------------------------------------------------------------------------------------------------------------------------
  270.         SECOND SECTION : LIKES : LIKES INFO
  271. ------------------------------------------------------------------------------------------------------------------------------>        
  272.                     <div class="col m-0 p-0 pl-3">
  273.                         <dl>
  274.                             <dd>
  275.                                 <i class="far fa-heart" style="color: #8fdbbe"></i> test
  276.                             </dd>
  277.                             <dd>
  278.                                 <i class="far fa-heart" style="color: #8fdbbe"></i> test
  279.                             </dd>
  280.                             <dd>
  281.                                 <i class="far fa-heart" style="color: #8fdbbe"></i> test
  282.                             </dd>
  283.                             <dd>
  284.                                 <i class="far fa-heart" style="color: #8fdbbe"></i> test
  285.                             </dd>
  286.                             <dd>
  287.                                 <i class="far fa-heart" style="color: #8fdbbe"></i> test
  288.                             </dd>
  289.                         </dl>
  290.                     </div>
  291.                 </div>
  292. <!---------------------------------------------------------------------------------------------------------------------------->
  293.        
  294. <!----------------------------------------------------------------------------------------------------------------------------
  295.         SECOND SECTION : DISLIKES
  296. ------------------------------------------------------------------------------------------------------------------------------>
  297.                 <div class="col m-2 p-5" style="background: white; border-radius: 10px;">
  298. <!---------------------------------------------------------------------------------------------------------------------------->
  299.        
  300. <!----------------------------------------------------------------------------------------------------------------------------
  301.         SECOND SECTION : DISLIKES : DISLIKES TITLE
  302. ------------------------------------------------------------------------------------------------------------------------------>        
  303.                     <div class="col mb-2" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  304.                         Dislikes
  305.                     </div>
  306. <!---------------------------------------------------------------------------------------------------------------------------->
  307.        
  308. <!----------------------------------------------------------------------------------------------------------------------------
  309.         SECOND SECTION : DISLIKES : DISLIKES INFO
  310. ------------------------------------------------------------------------------------------------------------------------------>
  311.                     <div class="col m-0 p-0 pl-3">
  312.                         <dl>
  313.                             <dd>
  314.                                 <i class="far fa-skull" style="color: #8fdbbe"></i> test
  315.                             </dd>
  316.                             <dd>
  317.                                 <i class="far fa-skull" style="color: #8fdbbe"></i> test
  318.                             </dd>
  319.                             <dd>
  320.                                 <i class="far fa-skull" style="color: #8fdbbe"></i> test
  321.                             </dd>
  322.                             <dd>
  323.                                 <i class="far fa-skull" style="color: #8fdbbe"></i> test
  324.                             </dd>
  325.                             <dd>
  326.                                 <i class="far fa-skull" style="color: #8fdbbe"></i> test
  327.                             </dd>
  328.                         </dl>
  329.                     </div>
  330. <!---------------------------------------------------------------------------------------------------------------------------->        
  331.                 </div>
  332.             </div>
  333.         </div>
  334. <!---------------------------------------------------------------------------------------------------------------------------->
  335.        
  336. <!----------------------------------------------------------------------------------------------------------------------------
  337.         SECOND SECTION : IMAGE
  338. ------------------------------------------------------------------------------------------------------------------------------>
  339.         <div class="col-md-3 p-0 m-2" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;">
  340.         </div>
  341.     </div>
  342. <!---------------------------------------------------------------------------------------------------------------------------->
  343.    
  344. <!---------------------------------------------------------------------------------------------------------------------------->
  345.    
  346. <!----------------------------------------------------------------------------------------------------------------------------
  347.         THIRD SECTION
  348. ------------------------------------------------------------------------------------------------------------------------------>
  349.     <div class="row mx-2">
  350. <!----------------------------------------------------------------------------------------------------------------------------
  351.         THIRD SECTION : LEFT BOX
  352. ------------------------------------------------------------------------------------------------------------------------------>        
  353.         <div class="col m-2 p-5" style="background: white; border-radius: 10px;">
  354. <!----------------------------------------------------------------------------------------------------------------------------
  355.         THIRD SECTION : LEFT BOX : RELATIONSHIP
  356. ------------------------------------------------------------------------------------------------------------------------------>       <!----------------------------------------------------------------------------------------------------------------------------
  357.         THIRD SECTION : LEFT BOX : RELATIONSHIP : NAME
  358. ------------------------------------------------------------------------------------------------------------------------------>  
  359.             <div class="row m-0">                
  360.                 <div class="col" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  361.                     Name
  362.                 </div>
  363.             </div>
  364. <!---------------------------------------------------------------------------------------------------------------------------->
  365.  
  366. <!----------------------------------------------------------------------------------------------------------------------------
  367.         THIRD SECTION : LEFT BOX : RELATIONSHIP : IMAGE
  368. ------------------------------------------------------------------------------------------------------------------------------>  
  369.             <div class="row m-0">
  370.                 <div class="col-md-2 m-1" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;">
  371.                 </div>
  372. <!---------------------------------------------------------------------------------------------------------------------------->
  373.  
  374. <!----------------------------------------------------------------------------------------------------------------------------
  375.         THIRD SECTION : LEFT BOX : RELATIONSHIP : INFO
  376. ------------------------------------------------------------------------------------------------------------------------------>                
  377.                 <div class="col m-1 px-0 py-3 text-justify">
  378.                     <p>
  379.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut.
  380.                     </p>
  381.                  
  382.                 </div>
  383.             </div>
  384. <!---------------------------------------------------------------------------------------------------------------------------->         <!----------------------------------------------------------------------------------------------------------------------------
  385.         THIRD SECTION : LEFT BOX : RELATIONSHIP
  386. ------------------------------------------------------------------------------------------------------------------------------>       <!----------------------------------------------------------------------------------------------------------------------------
  387.         THIRD SECTION : LEFT BOX : RELATIONSHIP : NAME
  388. ------------------------------------------------------------------------------------------------------------------------------>  
  389.             <div class="row m-0">                
  390.                 <div class="col" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  391.                     Name
  392.                 </div>
  393.             </div>
  394. <!---------------------------------------------------------------------------------------------------------------------------->
  395.  
  396. <!----------------------------------------------------------------------------------------------------------------------------
  397.         THIRD SECTION : LEFT BOX : RELATIONSHIP : IMAGE
  398. ------------------------------------------------------------------------------------------------------------------------------>  
  399.             <div class="row m-0">
  400.                 <div class="col-md-2 m-1" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;">
  401.                 </div>
  402. <!---------------------------------------------------------------------------------------------------------------------------->
  403.  
  404. <!----------------------------------------------------------------------------------------------------------------------------
  405.         THIRD SECTION : LEFT BOX : RELATIONSHIP : INFO
  406. ------------------------------------------------------------------------------------------------------------------------------>                
  407.                 <div class="col m-1 px-0 py-3 text-justify">
  408.                     <p>
  409.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut.
  410.                     </p>
  411.                  
  412.                 </div>
  413.             </div>
  414. <!---------------------------------------------------------------------------------------------------------------------------->
  415.  <!----------------------------------------------------------------------------------------------------------------------------
  416.         THIRD SECTION : LEFT BOX : RELATIONSHIP
  417. ------------------------------------------------------------------------------------------------------------------------------>       <!----------------------------------------------------------------------------------------------------------------------------
  418.         THIRD SECTION : LEFT BOX : RELATIONSHIP : NAME
  419. ------------------------------------------------------------------------------------------------------------------------------>  
  420.             <div class="row m-0">                
  421.                 <div class="col" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  422.                     Name
  423.                 </div>
  424.             </div>
  425. <!---------------------------------------------------------------------------------------------------------------------------->
  426.  
  427. <!----------------------------------------------------------------------------------------------------------------------------
  428.         THIRD SECTION : LEFT BOX : RELATIONSHIP : IMAGE
  429. ------------------------------------------------------------------------------------------------------------------------------>  
  430.             <div class="row m-0">
  431.                 <div class="col-md-2 m-1" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;">
  432.                 </div>
  433. <!---------------------------------------------------------------------------------------------------------------------------->
  434.  
  435. <!----------------------------------------------------------------------------------------------------------------------------
  436.         THIRD SECTION : LEFT BOX : RELATIONSHIP : INFO
  437. ------------------------------------------------------------------------------------------------------------------------------>                
  438.                 <div class="col m-1 px-0 py-3 text-justify">
  439.                     <p>
  440.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut.
  441.                     </p>
  442.                  
  443.                 </div>
  444.             </div>
  445. <!---------------------------------------------------------------------------------------------------------------------------->        
  446.           </div>
  447. <!---------------------------------------------------------------------------------------------------------------------------->      
  448. <!----------------------------------------------------------------------------------------------------------------------------
  449.         THIRD SECTION : RIGHT BOX
  450. ------------------------------------------------------------------------------------------------------------------------------>        
  451.         <div class="col m-2 p-5" style="background: white; border-radius: 10px;">
  452. <!----------------------------------------------------------------------------------------------------------------------------
  453.         THIRD SECTION : RIGHT BOX : RELATIONSHIP
  454. ------------------------------------------------------------------------------------------------------------------------------>       <!----------------------------------------------------------------------------------------------------------------------------
  455.         THIRD SECTION : RIGHT BOX : RELATIONSHIP : NAME
  456. ------------------------------------------------------------------------------------------------------------------------------>  
  457.             <div class="row m-0">                
  458.                 <div class="col" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  459.                     Name
  460.                 </div>
  461.             </div>
  462. <!---------------------------------------------------------------------------------------------------------------------------->
  463.  
  464. <!----------------------------------------------------------------------------------------------------------------------------
  465.         THIRD SECTION : RIGHT BOX : RELATIONSHIP : IMAGE
  466. ------------------------------------------------------------------------------------------------------------------------------>  
  467.             <div class="row m-0">
  468.                 <div class="col-md-2 m-1" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;">
  469.                 </div>
  470. <!---------------------------------------------------------------------------------------------------------------------------->
  471.  
  472. <!----------------------------------------------------------------------------------------------------------------------------
  473.         THIRD SECTION : RIGHT BOX : RELATIONSHIP : INFO
  474. ------------------------------------------------------------------------------------------------------------------------------>                
  475.                 <div class="col m-1 px-0 py-3 text-justify">
  476.                     <p>
  477.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut.
  478.                     </p>
  479.                  
  480.                 </div>
  481.             </div>
  482. <!---------------------------------------------------------------------------------------------------------------------------->         <!----------------------------------------------------------------------------------------------------------------------------
  483.         THIRD SECTION : RIGHT BOX : RELATIONSHIP
  484. ------------------------------------------------------------------------------------------------------------------------------>       <!----------------------------------------------------------------------------------------------------------------------------
  485.         THIRD SECTION : RIGHT BOX : RELATIONSHIP : NAME
  486. ------------------------------------------------------------------------------------------------------------------------------>  
  487.             <div class="row m-0">                
  488.                 <div class="col" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  489.                     Name
  490.                 </div>
  491.             </div>
  492. <!---------------------------------------------------------------------------------------------------------------------------->
  493.  
  494. <!----------------------------------------------------------------------------------------------------------------------------
  495.         THIRD SECTION : RIGHT BOX : RELATIONSHIP : IMAGE
  496. ------------------------------------------------------------------------------------------------------------------------------>  
  497.             <div class="row m-0">
  498.                 <div class="col-md-2 m-1" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;">
  499.                 </div>
  500. <!---------------------------------------------------------------------------------------------------------------------------->
  501.  
  502. <!----------------------------------------------------------------------------------------------------------------------------
  503.         THIRD SECTION : RIGHT BOX : RELATIONSHIP : INFO
  504. ------------------------------------------------------------------------------------------------------------------------------>                
  505.                 <div class="col m-1 px-0 py-3 text-justify">
  506.                     <p>
  507.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut.
  508.                     </p>
  509.                  
  510.                 </div>
  511.             </div>
  512. <!---------------------------------------------------------------------------------------------------------------------------->
  513.  <!----------------------------------------------------------------------------------------------------------------------------
  514.         THIRD SECTION : RIGHT BOX : RELATIONSHIP
  515. ------------------------------------------------------------------------------------------------------------------------------>       <!----------------------------------------------------------------------------------------------------------------------------
  516.         THIRD SECTION : RIGHT BOX : RELATIONSHIP : NAME
  517. ------------------------------------------------------------------------------------------------------------------------------>  
  518.             <div class="row m-0">                
  519.                 <div class="col" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  520.                     Name
  521.                 </div>
  522.             </div>
  523. <!---------------------------------------------------------------------------------------------------------------------------->
  524.  
  525. <!----------------------------------------------------------------------------------------------------------------------------
  526.         THIRD SECTION : RIGHT BOX : RELATIONSHIP : IMAGE
  527. ------------------------------------------------------------------------------------------------------------------------------>  
  528.             <div class="row m-0">
  529.                 <div class="col-md-2 m-1" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;">
  530.                 </div>
  531. <!---------------------------------------------------------------------------------------------------------------------------->
  532.  
  533. <!----------------------------------------------------------------------------------------------------------------------------
  534.         THIRD SECTION : RIGHT BOX : RELATIONSHIP : INFO
  535. ------------------------------------------------------------------------------------------------------------------------------>                
  536.                 <div class="col m-1 px-0 py-3 text-justify">
  537.                     <p>
  538.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut.
  539.                     </p>
  540.                  
  541.                 </div>
  542.             </div>
  543. <!---------------------------------------------------------------------------------------------------------------------------->        
  544.           </div>
  545. <!---------------------------------------------------------------------------------------------------------------------------->
  546.       </div>
  547. <!---------------------------------------------------------------------------------------------------------------------------->
  548.    
  549. <!----------------------------------------------------------------------------------------------------------------------------
  550.         FOURTH SECTION
  551. ------------------------------------------------------------------------------------------------------------------------------>      
  552.     <div class="row mx-2" style="margin-bottom: -250px;">
  553. <!----------------------------------------------------------------------------------------------------------------------------
  554.         FOURTH SECTION : IMAGE
  555. ------------------------------------------------------------------------------------------------------------------------------>        
  556.         <div class="col m-2" style="background: white url(CHARACTER ART URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;">          
  557.         </div>
  558. <!---------------------------------------------------------------------------------------------------------------------------->
  559.    
  560. <!----------------------------------------------------------------------------------------------------------------------------
  561.         FOURTH SECTION : IMAGE
  562. ------------------------------------------------------------------------------------------------------------------------------>        
  563.         <div class="col m-2" style="background: white url(CHARACTER ART URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;">          
  564.         </div>
  565. <!---------------------------------------------------------------------------------------------------------------------------->
  566.        
  567. <!----------------------------------------------------------------------------------------------------------------------------
  568.         FOURTH SECTION : IMAGE
  569. ------------------------------------------------------------------------------------------------------------------------------>        
  570.         <div class="col m-2" style="background: white url(CHARACTER ART URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;">          
  571.         </div>
  572. <!---------------------------------------------------------------------------------------------------------------------------->
  573.        
  574. <!----------------------------------------------------------------------------------------------------------------------------
  575.         FOURTH SECTION : IMAGE
  576. ------------------------------------------------------------------------------------------------------------------------------>        
  577.         <div class="col m-2" style="background: white url(CHARACTER ART URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;">          
  578.         </div>
  579. <!---------------------------------------------------------------------------------------------------------------------------->
  580.        
  581. <!----------------------------------------------------------------------------------------------------------------------------
  582.         FOURTH SECTION : IMAGE
  583. ------------------------------------------------------------------------------------------------------------------------------>        
  584.         <div class="col m-2" style="background: white url(CHARACTER ART URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;">          
  585.         </div>
  586. <!---------------------------------------------------------------------------------------------------------------------------->
  587.        
  588. <!----------------------------------------------------------------------------------------------------------------------------
  589.         FOURTH SECTION : IMAGE
  590. ------------------------------------------------------------------------------------------------------------------------------>        
  591.         <div class="col m-2" style="background: white url(CHARACTER ART URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;">          
  592.         </div>
  593. <!---------------------------------------------------------------------------------------------------------------------------->
  594. <!----------------------------------------------------------------------------------------------------------------------------
  595.         FOURTH SECTION : GALLERY LINK
  596. ------------------------------------------------------------------------------------------------------------------------------>        
  597.         <a href="URL TO YOUR CHARACTER'S GALLERY GOES HERE" class="col m-2" style="background: #8FDBBE; color: white; height: 150px; line-height: 150px; vertical-align: center center; border-radius: 10px; font-weight: bolder; font-size: 20pt; text-align: center;">    
  598.             GALLERY    
  599.         </a>
  600.     </div>
  601. <!---------------------------------------------------------------------------------------------------------------------------->
  602.    
  603. <!---------------------------------------------------------------------------------------------------------------------------->    
  604. </div>
  605.  
  606. <!----------------------------------------------------------------------------------------------------------------------------
  607.                                 THANK YOU FOR USING MY CODE & ABIDING BY MY TERMS & CONDITIONS!
  608.                                                     - Mouei
  609. ------------------------------------------------------------------------------------------------------------------------------>
RAW Paste Data
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!