API tools faq
paste
Advertisement
werebeast

Star Charms - Dreamy Tones

werebeast
Dec 2nd, 2020 (edited)
880
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.50 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    ★ STAR CHARMS - - - - ★
  3.    ★ a free-to-use code - -★
  4.    ★ by werebear - - - -★
  5.  
  6.    RULES
  7.      Please don't remove my credit.
  8.      Feel free to edit as you please.
  9.        - This includes frankensteining, referencing, whatnot.
  10.      If you're feeling kind, I'd appreciate a fave and would love to see if you've used this.
  11.    
  12.    NOTES
  13.      Not WYSIWYG friendly, keep it off.
  14.      Should be relatively mobile-friendly.
  15.      The charms will hide on xs displays, as they would otherwise display in a single, very long line.
  16.      Available in custom colors and bootstrap colors.
  17.    
  18.    CUSTOMIZATION
  19.      Use ctrl+F and replace all to change these colors and icons easily.
  20.      Colors -
  21.        Top text: #C492F9
  22.        Gradient: #837CE3, #63C5B9
  23.        Info box background: rgba(255,255,255,0.25)
  24.          I defined this in rgba instead of hex for translucency.
  25.        Info box accent: #A0FFF6
  26.        Info box text: #D1FFFB
  27.        Other text: #FFFFFF
  28.        Charms: #DFB5FF
  29.      Icons -
  30.        Name Moon: fad fa-moon-stars
  31.        Name Star: fad fa-stars
  32.        Quotes -
  33.          Left: fad fa-quote-left
  34.          Right: fad fa-quote-right
  35.        Likes: fas fa-heart
  36.          If you're changing this one, change dislikes first.
  37.          If you're not changing dislikes, too, you'll need to change them by hand or it will break the dislikes.
  38.        Dislikes: fas fa-heart-broken
  39.        Charm strands: fad fa-circle
  40.        Charms: fad fa-star
  41.          If you are changing this icon, either change the name one first or fix it after replacing.
  42.          You can remove the animation by deleting fa-pulse from each.
  43.          If you want a smoother animation, change fa-pulse to fa-spin.
  44.  
  45.  ★ Enjoy! ★
  46.    
  47.   -->
  48.    
  49.    
  50.   <!-- Top text begin -->
  51. <div class="container mx-auto w-70" style="max-width:800px">
  52.     <div class="row mx-auto" style="color:#C492F9;font-variant:small-caps;text-align:center">
  53.         <div class="col-sm-6"> <span style="font-size:250%">
  54.     <!-- Name, pronouns, traits! -->
  55.             <i class="fad fa-moon-stars"></i>
  56.               Name
  57.                 <i class="fad fa-stars"></i>
  58.             </span>
  59.             <br>    <span style="font-size:100%">
  60.                 Pro/noun
  61.                 ∙∙
  62.                 Trait
  63.                 ∙∙
  64.                 Trait
  65.                 ∙∙
  66.                 Trait
  67.             </span>
  68.         </div>
  69.     <!-- Quote! --!>
  70.     <!-- If it's too long, it will look weird. -->
  71.     <!-- if you want no quote, delete from here to the next </div>
  72.     and your left side text will appear in the middle, then -->
  73.         <div class="col-sm-6"> <i class="fad fa-quote-left" style="float:left"></i>
  74.             Quotation, n: The act of repeating erroneously the words of another. <i class="fad fa-quote-right" style="float:right"></i>
  75.             <br> <span style="font-size:80%">
  76.             - <i>Ambrose Bierce</i>
  77.           </span>
  78.         </div>
  79.     </div>
  80. </div>
  81.   <!-- Main box -->
  82. <div class="container mx-auto w-70 h-50" style="max-width:800px;color:#FFFFFF;background-image:linear-gradient(to bottom right, #837CE3, #63C5B9);border-radius:40px;padding:2%">
  83.     <!-- Details box  -->
  84.     <div class="row no-gutters" style="background-color:rgba(255,255,255,0.25);border-radius:20px;height:50%;color:#D1FFFB;padding:2%">
  85.     <!-- Info form -->
  86.     <!-- If you add any extra lines, you may need to tweak the other parts of this box to prevent it from looking unbalanced.  -->
  87.         <div class="col-sm-4" style="padding-top:2%">
  88.               <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  89.                         Full Name:
  90.                       </span>
  91.             ?????
  92.             <br> <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  93.                         Nickname:
  94.                       </span>
  95.             ?????
  96.             <br> <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  97.                         Species:
  98.                       </span>
  99.             ?????
  100.             <br> <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  101.                         Age:
  102.                       </span>
  103.             ?????
  104.             <br> <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  105.                         Birthday:
  106.                       </span>
  107.             ?????
  108.             <br> <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  109.                         Gender:
  110.                       </span>
  111.             ?????
  112.             <br> <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  113.                         Orientation:
  114.                       </span>
  115.             ?????
  116.             <br> <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  117.                         Height:
  118.                       </span>
  119.             ?????
  120.             <br> <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  121.                         Alignment:
  122.                       </span>
  123.             ?????
  124.             <br> <span style="color:#A0FFF6;font-weight:bold;padding-right:4px">
  125.                         Job:
  126.                       </span>
  127.             ?????
  128.         </div>
  129.         <div class="col-sm-4">
  130.             <div class="short-div" style="margin:15px">
  131.     <!-- Likes -->
  132.     <!-- Again, may require some fiddling with other elements in the box if you make these much longer.  -->
  133.                <i class="fas fa-heart" style="color:#A0FFF6"></i> ?????
  134.                 <br> <i class="fas fa-heart" style="color:#A0FFF6"></i> ?????
  135.                 <br> <i class="fas fa-heart" style="color:#A0FFF6"></i> ?????
  136.                 <br> <i class="fas fa-heart" style="color:#A0FFF6"></i> ?????
  137.                 <br>
  138.             </div>
  139.             <i class="fas fa-star" style="font-size:75%;margin-right:6px"></i><i class="fas fa-star"></i><i class="fas fa-star" style="font-size:75%;margin-left:6px"></i>
  140.             <div class="short-div" style="margin:15px">
  141.     <!-- Dislikes  -->
  142.                      <i class="fas fa-heart-broken" style="color:#A0FFF6"></i> ?????
  143.                 <br> <i class="fas fa-heart-broken" style="color:#A0FFF6"></i> ?????
  144.                 <br> <i class="fas fa-heart-broken" style="color:#A0FFF6"></i> ?????
  145.                 <br> <i class="fas fa-heart-broken" style="color:#A0FFF6"></i> ?????
  146.                 <br>
  147.             </div>
  148.         </div>
  149.         <div class="col-sm-4">
  150.     <!-- Credit! You may relocate and change how it looks, but please leave it intact. --> <span style="position:float;float:right">
  151.                   <a href="https://toyhou.se/8997195.star-charms" style="text-decoration:none;color:rgba(255,255,255,0.5)"><i class="fas fa-code fa-sm"></i></a>
  152.               </span>
  153.   <!-- Image  -->
  154.   <!-- This looks best with an image with a center focus. -->
  155.             <img src="https://i.imgur.com/eVggWn5.png" class="rounded-circle" style="max-height:225px;padding-top:8%">
  156.         </div>
  157.     </div>
  158.     <!-- Text area -->
  159.     <!-- This will expand to fit your text and looks best if you keep it fairly short. -->
  160.     <div class="row">
  161.         <div class="col-xs-12" style="padding:2%">
  162.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
  163.             <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  164.             <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
  165.         </div>
  166.     </div>
  167. </div>
  168.   <!-- ★ Now the charms! ★ -->
  169.   <!-- These are easily changed out for different ones, see header text for details. -->
  170.   <!-- They will auto-hide on extra small displays as they can't display properly there. -->
  171. <div class="container mx-auto hidden-xs-down w-70" style="max-width:800px;color:#DFB5FF;text-align:center">
  172.     <div class="row no-gutters">
  173.         <div class="col-sm-1"> <span style="font-size:85%">
  174.                 <i class="fad fa-circle"></i><br>
  175.                 <i class="fad fa-circle"></i><br>
  176.                 <i class="fad fa-circle"></i><br>
  177.                 <i class="fad fa-circle"></i><br>
  178.               </span>
  179.             <span style="font-size:170%">
  180.                 <i class="fad fa-star fa-pulse" style="animation-duration: 7.8s"></i>
  181.               </span>
  182.         </div>
  183.         <div class="col-sm-1"> <span style="font-size:85%">
  184.                 <i class="fad fa-circle"></i><br>
  185.                 <i class="fad fa-circle"></i><br>
  186.                 <i class="fad fa-circle"></i><br>
  187.                 <i class="fad fa-circle"></i><br>
  188.                 <i class="fad fa-circle"></i><br>
  189.                 <i class="fad fa-circle"></i><br>
  190.               </span>
  191.             <span style="font-size:170%">
  192.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 7.3s;animation-direction:reverse;"></i>
  193.               </span>
  194.         </div>
  195.         <div class="col-sm-1"> <span style="font-size:85%">
  196.                 <i class="fad fa-circle"></i><br>
  197.                 <i class="fad fa-circle"></i><br>
  198.                 <i class="fad fa-circle"></i><br>
  199.               </span>
  200.             <span style="font-size:170%">
  201.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 6.8s"></i>
  202.               </span>
  203.         </div>
  204.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  205.                 <i class="fad fa-circle"></i><br>
  206.                 <i class="fad fa-circle"></i><br>
  207.                 <i class="fad fa-circle"></i><br>
  208.                 <i class="fad fa-circle"></i><br>
  209.                 <i class="fad fa-circle"></i><br>
  210.                 <i class="fad fa-circle"></i><br>
  211.                 <i class="fad fa-circle"></i><br>
  212.               </span>
  213.             <span style="font-size:170%">
  214.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 7.5s;animation-direction:reverse;"></i>
  215.               </span>
  216.         </div>
  217.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  218.                 <i class="fad fa-circle"></i><br>
  219.                 <i class="fad fa-circle"></i><br>
  220.                 <i class="fad fa-circle"></i><br>
  221.                 <i class="fad fa-circle"></i><br>
  222.                 <i class="fad fa-circle"></i><br>
  223.               </span>
  224.             <span style="font-size:170%">
  225.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 5.5s;animation-direction:reverse;"></i>
  226.               </span>
  227.         </div>
  228.         <div class="col-sm-1"> <span style="font-size:85%">
  229.                 <i class="fad fa-circle"></i><br>
  230.                 <i class="fad fa-circle"></i><br>
  231.                 <i class="fad fa-circle"></i><br>
  232.                 <i class="fad fa-circle"></i><br>
  233.                 <i class="fad fa-circle"></i><br>
  234.                 <i class="fad fa-circle"></i><br>
  235.               </span>
  236.             <span style="font-size:170%">
  237.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 6.5s;"></i>
  238.               </span>
  239.         </div>
  240.         <div class="col-sm-1"> <span style="font-size:85%">
  241.                 <i class="fad fa-circle"></i><br>
  242.                 <i class="fad fa-circle"></i><br>
  243.               </span>
  244.             <span style="font-size:170%">
  245.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 7s;animation-direction:reverse;"></i>
  246.               </span>
  247.         </div>
  248.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  249.                 <i class="fad fa-circle"></i><br>
  250.                 <i class="fad fa-circle"></i><br>
  251.                 <i class="fad fa-circle"></i><br>
  252.                 <i class="fad fa-circle"></i><br>
  253.                 <i class="fad fa-circle"></i><br>
  254.               </span>
  255.             <span style="font-size:170%">
  256.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 8s;"></i>
  257.               </span>
  258.         </div>
  259.         <div class="col-sm-1"> <span style="font-size:85%">
  260.                 <i class="fad fa-circle"></i><br>
  261.                 <i class="fad fa-circle"></i><br>
  262.                 <i class="fad fa-circle"></i><br>
  263.                 <i class="fad fa-circle"></i><br>
  264.               </span>
  265.             <span style="font-size:170%">
  266.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 6s;"></i>
  267.               </span>
  268.         </div>
  269.     </div>
  270. </div>
  271. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!