API tools faq
paste
sundustboy

Toyhouse Character Profile - Fruit Juice

sundustboy
Mar 20th, 2019 (edited)
480
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.13 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------------------------------------------------------
  2. ------------------------------------------------------------------------------------------------------------------
  3.   .---.
  4.  /     \                               ___                                                                /.--,
  5.  | .`'. ;  ___        ___  ___   .-.  (   )           .-.   ___  ___   .-.    .--.      .--.             //_.'
  6.  | | (___)(   ).-.   (   )(   ) ( __)  | |_          ( __) (   )(   ) ( __)  /    \    /    \       .-""-/""-.
  7.  | |__     | ' .-. ;  | |  | |  (''") (   __)        (''")  | |  | |  (''") |  .-. ;  |  .-. ;     /       __ \
  8. (   ___)   |  / (___) | |  | |   | |   | | ___        | |   | |  | |   | |  |  |(___) |  |/  |    /        \\\ \
  9. | |       | |        | |  | |   | |   | |(   )   ___ | |   | |  | |   | |  |  | ___  |  ' _.'    |         || |
  10. | |       | |        | |  ; '   | |   | ' | |   (   )' |   | |  ; '   | |  |  '(   ) |  .'.-.    \  \         /
  11. | |       | |        ' `-'  /   | |   ' `-' ;    ; `-' '   ' `-'  /   | |  '  `-' |  '  `-' /     \  '-      /
  12. (___)     (___)        '.__.'   (___)   `.__.       .__.'    '.__.'   (___)  `.__,'    `.__.'       '-.__.__.'
  13.  
  14.  a free character profile code by DUSTCHOMPS
  15.  
  16.  Custom color palette:
  17.  https://pastebin.com/0exTh6DV
  18.  
  19.  Default color palette:
  20.  https://pastebin.com/QVcgPWmY
  21.  
  22. ------------------------------------------------------------------------------------------------------------------
  23. ------------------------------------------------------------------------------------------------------------------
  24.  
  25. To change a color: select it, control+F, and replace all.
  26. To make a background transparent, change the color to "none" (without quotation marks).
  27.  
  28. Main box background: #FBEA2B
  29. Main box border: #ED3E4F
  30. Circle borders: #C70335
  31.  
  32. Links: #FF810C
  33. Link text: #fff
  34.  
  35. Body background light: #ffb638
  36. Body background dark: #ff9328
  37. Body text: #d83223
  38.  
  39. ------------------------------------------------------------------------->
  40.  
  41. <!----HEADER ICON---->
  42. <div class="row justify-content-center mx-auto" style="max-width:700px;">
  43.  
  44.  <div class="col-sm-4 col-xs-2" style="max-width:45%;">
  45.    <img src="https://i.imgur.com/naORq01.png" style="border-radius:50% 50% 50% 50%; width:90%; margin-top:auto; margin-bottom:-50%; background-color:#ED3E4F; border:15px solid #C70335; z-index:2;">
  46.  </div>
  47.  
  48. </div>
  49.  
  50. <!----HEADER ICON END---->
  51.  
  52. <!----CONTAINER---->
  53. <div class="container rounded" style="max-width:700px; background-color:#FBEA2B; padding:50px 10px 40px 10px; font-family:'Trebuchet MS', sans-serif; border:20px solid #ED3E4F;">
  54.  
  55.  <!----MAIN BODY---->
  56.  <div class="row justify-content-center">
  57.    
  58.    <!----LEFT COLUMN---->
  59.    <div class="col-xs-12 col-sm-5 col-md-5 mx-3 rounded" style="text-align:center; font-size:16px; padding:0px;">
  60.      
  61.      <!----BASICS BUTTON---->
  62.      <a class="btn" data-toggle="collapse" href="#basics" role="button" aria-expanded="false" aria-controls="collapseExample" style="display:inline-block; width:100%; margin-bottom:10px; background-color:#FF810C; font-size:30px; font-family:'Trebuchet MS', sans-serif; font-weight:bold; color:#fff; letter-spacing:2px; text-transform:lowercase; border:none;">
  63.        basics <i class="far fa-angle-down"></i>
  64.      </a>
  65.      <!----BASICS BUTTON END---->
  66.      
  67.      <!----BASICS BODY---->
  68.      <div class="collapse" id="basics" style="color:#d83223;">
  69.        <div class="rounded" style="margin-bottom:10px; background-color:#ff9328; overflow:hidden;">
  70.          <!----Feel free to copy/paste more rows below, just make sure to keep up the alternating light/dark!---->
  71.          
  72.          <!--light--><div style="width:100%; padding:10px; background-color:#ffb638;">
  73.            name</div>
  74.          
  75.          <!--dark--><div style="width:100%; padding:10px; background-color:#ff9328;">
  76.            gender</div>
  77.          
  78.          <!--light--><div style="width:100%; padding:10px; background-color:#ffb638;">
  79.            species</div>
  80.          
  81.          <!--dark--><div style="width:100%; padding:10px; background-color:#ff9328;">
  82.            age</div>
  83.          
  84.          <!--light--><div style="width:100%; padding:10px; background-color:#ffb638;">
  85.            sexuality</div>
  86.        </div>
  87.      </div>
  88.      <!----BASICS BODY END---->
  89.      
  90.      <!----REFERENCE BUTTON---->
  91.      <a class="btn" data-toggle="collapse" href="#reference" role="button" aria-expanded="false" aria-controls="collapseExample" style="display:inline-block; width:100%; margin-bottom:10px; background-color:#FF810C; font-size:30px; font-family:'Trebuchet MS', sans-serif; font-weight:bold; color:#fff; letter-spacing:2px; text-transform:lowercase; border:none;">
  92.        reference <i class="far fa-angle-down"></i>
  93.      </a>
  94.      <!----REFERENCE BUTTON END---->
  95.      
  96.      <!----REFERENCE BODY---->
  97.      <div class="collapse" id="reference" style="color:#d83223;">
  98.        <!---Any size image will work!--->
  99.        <a href="" class="rounded" style="display:block; margin-bottom:10px; height:auto; max-height:350px; width:100%; overflow:hidden; background-color:#ffb638; color:#d83223; text-align:center; line-height:2;">
  100.          click to view full image
  101.          <img src="https://i.imgur.com/i6XHW3J.png" style="width:auto; max-width:100%;">
  102.        </a>
  103.      </div>
  104.      <!----REFERENCE BODY END---->
  105.      
  106.    </div>
  107.    <!----LEFT COLUMN END---->
  108.    
  109.    <!----RIGHT COLUMN---->
  110.    <div class="col-xs-12 col-sm-5 col-md-5 mx-3 rounded" style="text-align:center; font-size:16px; padding:0px;">
  111.      
  112.      <!----ABOUT BUTTON---->
  113.      <a class="btn" data-toggle="collapse" href="#about" role="button" aria-expanded="false" aria-controls="collapseExample" style="display:inline-block; width:100%; margin-bottom:10px; background-color:#FF810C; font-size:30px; font-family:'Trebuchet MS', sans-serif; font-weight:bold; color:#fff; letter-spacing:2px; text-transform:lowercase; border:none;">
  114.        about <i class="far fa-angle-down"></i>
  115.      </a>
  116.      <!----ABOUT BUTTON END---->
  117.      
  118.      <!----ABOUT BODY---->
  119.      <div class="collapse" id="about" style="color:#d83223;">
  120.        <div class="rounded" style="margin-bottom:10px; background-color:#ffb638; padding:10px;">
  121.          
  122.          <!----ABOUT TEXT---->
  123.          <p>Many hundreds of fruits, including fleshy fruits, are commercially valuable as human food, eaten both fresh and as jams, marmalade and other preserves. Fruits are also used in manufactured foods or beverages, such as fruit juices or alcoholic beverages.</p>
  124.          <!----ABOUT TEXT END---->
  125.          
  126.          <!----LIKES AND DISLIKES---->
  127.          <div class="row" style="display:inline-block; width:100%; margin:none; border:none; line-height:1;">
  128.            
  129.            <!----LIKES---->
  130.            <div class="col rounded" style="display:inline-block; padding:10px; margin:0px; margin-top:10px; background-color:#ff9328;">
  131.                <div style="width:100%; font-size:20px; font-weight:bold; margin-bottom:15px; text-align:center;">
  132.                likes</div>
  133.                <!----Copy or delete as many of these as you need below this line---->
  134.                <p><i class="far fa-flower"></i> likes</p>
  135.                <p><i class="far fa-flower"></i> likes</p>
  136.            </div>
  137.            <!----LIKES END---->
  138.            
  139.            <!----DISLIKES---->
  140.            <div class="col rounded" style="display:inline-block; padding:10px; margin:0px; margin-top:10px; background-color:#ff9328;">
  141.                <div style="width:100%; font-size:20px; font-weight:bold; margin-bottom:15px; text-align:center;">
  142.                dislikes</div>
  143.                <!----Copy or delete as many of these as you need below this line---->
  144.                <p><i class="far fa-flower"></i> dislikes</p>
  145.                <p><i class="far fa-flower"></i> dislikes</p>
  146.            </div>
  147.            <!----DISLIKES END---->
  148.            
  149.          </div>
  150.          <!----LIKES AND DISLIKES END---->
  151.          
  152.        </div>
  153.      </div>
  154.      <!----ABOUT BODY END---->
  155.      
  156.      <!----FRIENDS BUTTON---->
  157.      <a class="btn" data-toggle="collapse" href="#friends" role="button" aria-expanded="false" aria-controls="collapseExample" style="display:inline-block; width:100%; margin-bottom:10px; background-color:#FF810C; font-size:30px; font-family:'Trebuchet MS', sans-serif; font-weight:bold; color:#fff; letter-spacing:2px; text-transform:lowercase; border:none;">
  158.        friends <i class="far fa-angle-down"></i>
  159.      </a>
  160.      <!----FRIENDS BUTTON END---->
  161.      
  162.      <!----FRIENDS BODY---->
  163.      <div class="collapse" id="friends" style="color:#d83223;">
  164.        <div class="rounded" style="margin-bottom:10px; background-color:#FF9C01; overflow:hidden;">
  165.          <!----Feel free to copy/paste more rows below, just make sure to keep up the alternating light/dark!---->
  166.          
  167.          <!--Friend (light)-->
  168.          <a href="" style="display:block; width:100%; height:70px; background-color:#ffb638; color:#d83223;">
  169.            <span style="float:left; display:block; width:70px; height:70px; overflow:hidden;">
  170.              <!----Looks best with a square image! Any size is fine, but it will display as a max of 70x70 pixels---->
  171.              <img src="https://i.imgur.com/mgYNQ73.png" style="display:block; width:auto; max-width:100%;"></span>
  172.            <span style="font-size:20px; font-weight:bold; line-height:1.8;">
  173.              name</span>
  174.            <span style="font-size:16px; line-height:0;"><br>
  175.              relationship</span>
  176.          </a>
  177.          
  178.          <!--Friend (dark)-->
  179.          <a href="" style="display:block; width:100%; height:70px; background-color:#ff9328; color:#d83223;">
  180.            <span style="float:left; display:block; width:70px; height:70px; overflow:hidden;">
  181.              <!----Looks best with a square image! Any size is fine, but it will display as a max of 70x70 pixels---->
  182.              <img src="https://i.imgur.com/EnB0c89.png" style="display:block; width:auto; max-width:100%;"></span>
  183.            <span style="font-size:20px; font-weight:bold; line-height:1.8;">
  184.              name</span>
  185.            <span style="font-size:16px; line-height:0;"><br>
  186.              relationship</span>
  187.          </a>
  188.          
  189.        </div>
  190.      </div>
  191.      <!----FRIENDS BODY END---->
  192.      
  193.    </div>
  194.    <!----RIGHT COLUMN END---->
  195.    
  196.  </div>
  197.  <!----MAIN BODY END---->
  198.  
  199.  <!----LINKS---->
  200.  <div class="row justify-content-center" style="padding:10px 15px 0px 15px;">
  201.    
  202.    <!----Copy or delete as many links as you want below this line!---->
  203.    
  204.    <!----LINK---->
  205.    <a href="" class="col-xs-12 col-sm-3 col-md-3 mx-3 rounded" style="background-color:#FF810C; color:#fff; margin-bottom:20px; padding:10px; font-size:16px; font-family:'Trebuchet MS', sans-serif; font-weight:bold; letter-spacing:2px; text-transform:lowercase; text-align:center;">
  206.      <i class="far fa-flower"></i>
  207.      link
  208.    </a>
  209.    <!----LINK END---->
  210.    
  211.    <!----LINK---->
  212.    <a href="" class="col-xs-12 col-sm-3 col-md-3 mx-3 rounded" style="background-color:#FF810C; color:#fff; margin-bottom:20px; padding:10px; font-size:16px; font-family:'Trebuchet MS', sans-serif; font-weight:bold; letter-spacing:2px; text-transform:lowercase; text-align:center;">
  213.      <i class="far fa-flower"></i>
  214.      link
  215.    </a>
  216.    <!----LINK END---->
  217.    
  218.    <!----LINK---->
  219.    <a href="" class="col-xs-12 col-sm-3 col-md-3 mx-3 rounded" style="background-color:#FF810C; color:#fff; margin-bottom:20px; padding:10px; font-size:16px; font-family:'Trebuchet MS', sans-serif; font-weight:bold; letter-spacing:2px; text-transform:lowercase; text-align:center;">
  220.      <i class="far fa-flower"></i>
  221.      link
  222.    </a>
  223.    <!----LINK END---->
  224.    
  225.  </div>
  226.  <!----LINKS END---->
  227.  
  228. </div>
  229. <!----CONTAINER END---->
  230.  
  231.  
  232. <!----BOTTOM IMAGES---->
  233. <div class="row justify-content-center mx-auto" style="max-width:700px;">
  234.  
  235.  <!----IMAGE 1---->
  236.  <div class="col-sm-3 col-xs-4" style="max-width:30%;">
  237.    <!----Use a square image!---->
  238.    <img src="https://i.imgur.com/RhoEb2G.png" style="border-radius:50% 50% 50% 50%; margin-top:-50%; background-color:#ED3E4F; border:15px solid #C70335; margin-bottom:20px;">
  239.  </div>
  240.  <!----IMAGE 1 END---->
  241.  
  242.  <!----IMAGE 2---->
  243.  <div class="col-sm-3 col-xs-4" style="max-width:30%;">
  244.    <!----Use a square image!---->
  245.    <img src="https://i.imgur.com/rpp7ACR.jpg" style="border-radius:50% 50% 50% 50%; margin-top:-50%; background-color:#ED3E4F; border:15px solid #C70335; margin-bottom:20px;">
  246.  </div>
  247.  <!----IMAGE 2 END---->
  248.  
  249.  <!----IMAGE 3---->
  250.  <div class="col-sm-3 col-xs-4" style="max-width:30%;">
  251.    <!----Use a square image!---->
  252.    <img src="https://i.imgur.com/tshAkRD.jpg" style="border-radius:50% 50% 50% 50%; margin-top:-50%; background-color:#ED3E4F; border:15px solid #C70335; margin-bottom:20px;">
  253.  </div>
  254.  <!----IMAGE 3 END---->
  255.  
  256. </div>
  257. <!----BOTTOM IMAGES END---->
  258.  
  259.  
  260. <!-- CREDIT (DO NOT REMOVE) --><div style="bottom:0px; left:0px; font-size:11px; margin-bottom:-10px;">code by @dustchomps</div>
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!