API tools faq
paste
Advertisement
werebeast

Star Charms - Snowflakes

werebeast
Dec 4th, 2020 (edited)
346
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.69 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    ★ STAR CHARMS - - - - ★
  3.    ★ a free-to-use code - -★
  4.    ★ by werebear - - - -★
  5.    ❄ snowflake variant - - -❄
  6.  
  7.    RULES
  8.      Please don't remove my credit.
  9.      Feel free to edit as you please.
  10.        - This includes frankensteining, referencing, whatnot.
  11.      If you're feeling kind, I'd appreciate a fave and would love to see if you've used this.
  12.    
  13.    NOTES
  14.      Not WYSIWYG friendly, keep it off.
  15.      Should be relatively mobile-friendly.
  16.      The charms will hide on xs displays, as they would otherwise display in a single, very long line.
  17.      Available in custom colors and bootstrap colors.
  18.    
  19.    CUSTOMIZATION
  20.      Use ctrl+F and replace all to change these colors and icons easily.
  21.      This one has slightly fewer colors than the original Dreamy Tones does.
  22.      Colors -
  23.        Top text: #9FBADF
  24.        Gradient: #7898C1, #A0B9D9
  25.        Info box background: rgba(255,255,255,0.25)
  26.          I defined this in rgba instead of hex for translucency.
  27.        Info box accent: #6584AD
  28.        Other text: #FFFFFF
  29.        Charms & icons in top text: #B6D2F9
  30.      Icons -
  31.        Name Snowman: fal fa-snowman
  32.        Name Snowflake: fal fa-snowflakes
  33.        Quotes -
  34.          Left: fad fa-quote-left
  35.          Right: fad fa-quote-right
  36.        Likes: fas fa-heart
  37.          If you're changing this one, change dislikes first.
  38.          If you're not changing dislikes, too, you'll need to change them by hand or it will break the dislikes.
  39.        Dislikes: fas fa-heart-broken
  40.             Likes/dislikes Divider: fal fa-snowflake
  41.        Charm strands: fad fa-circle
  42.        Charms: fad fa-snowflake
  43.          You can remove the animation by deleting fa-pulse from each.
  44.          If you want a smoother animation, change fa-pulse to fa-spin.
  45.  
  46.  ★ Enjoy! ★
  47.    
  48.   -->
  49.    
  50.    
  51.   <!-- Top text begin -->
  52. <div class="container mx-auto w-70" style="max-width:800px">
  53.     <div class="row mx-auto" style="color:#9FBADF;font-variant:small-caps;text-align:center">
  54.         <div class="col-sm-6"> <span style="font-size:250%">
  55.     <!-- Name, pronouns, traits! -->
  56.             <i class="fal fa-snowman" style="color:#B6D2F9"></i>
  57.               Name
  58.                 <i class="fal fa-snowflakes" style="color:#B6D2F9"></i>
  59.             </span>
  60.             <br>    <span style="font-size:100%">
  61.                 Pro/noun
  62.                 ∙∙
  63.                 Trait
  64.                 ∙∙
  65.                 Trait
  66.                 ∙∙
  67.                 Trait
  68.             </span>
  69.         </div>
  70.     <!-- Quote! --!>
  71.     <!-- If it's too long, it will look weird. -->
  72.     <!-- if you want no quote, delete from here to the next </div>
  73.     and your left side text will appear in the middle, then -->
  74.         <div class="col-sm-6"> <i class="fad fa-quote-left" style="color:#B6D2F9;float:left"></i>
  75.             Quotation, n: The act of repeating erroneously the words of another. <i class="fad fa-quote-right" style="color:#B6D2F9;float:right"></i>
  76.             <br> <span style="font-size:80%">
  77.             - <i>Ambrose Bierce</i>
  78.           </span>
  79.         </div>
  80.     </div>
  81. </div>
  82.   <!-- Main box -->
  83. <div class="container mx-auto w-70 h-50" style="max-width:800px;color:#FFFFFF;background-image:linear-gradient(to bottom right, #7898C1, #A0B9D9);border-radius:40px;padding:2%">
  84.     <!-- Details box  -->
  85.     <div class="row no-gutters" style="background-color:rgba(255,255,255,0.25);border-radius:20px;height:50%;color:#FFFFFF;padding:2%">
  86.     <!-- Info form -->
  87.     <!-- If you add any extra lines, you may need to tweak the other parts of this box to prevent it from looking unbalanced.  -->
  88.         <div class="col-sm-4" style="padding-top:2%">
  89.               <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  90.                         Full Name:
  91.                       </span>
  92.             ?????
  93.             <br> <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  94.                         Nickname:
  95.                       </span>
  96.             ?????
  97.             <br> <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  98.                         Species:
  99.                       </span>
  100.             ?????
  101.             <br> <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  102.                         Age:
  103.                       </span>
  104.             ?????
  105.             <br> <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  106.                         Birthday:
  107.                       </span>
  108.             ?????
  109.             <br> <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  110.                         Gender:
  111.                       </span>
  112.             ?????
  113.             <br> <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  114.                         Orientation:
  115.                       </span>
  116.             ?????
  117.             <br> <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  118.                         Height:
  119.                       </span>
  120.             ?????
  121.             <br> <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  122.                         Alignment:
  123.                       </span>
  124.             ?????
  125.             <br> <span style="color:#6584AD;font-weight:bold;padding-right:4px">
  126.                         Job:
  127.                       </span>
  128.             ?????
  129.         </div>
  130.         <div class="col-sm-4">
  131.             <div class="short-div" style="margin:15px">
  132.     <!-- Likes -->
  133.     <!-- Again, may require some fiddling with other elements in the box if you make these much longer.  -->
  134.                <i class="fas fa-heart" style="color:#6584AD"></i> ?????
  135.                 <br> <i class="fas fa-heart" style="color:#6584AD"></i> ?????
  136.                 <br> <i class="fas fa-heart" style="color:#6584AD"></i> ?????
  137.                 <br> <i class="fas fa-heart" style="color:#6584AD"></i> ?????
  138.                 <br>
  139.             </div>
  140.             <i class="fal fa-snowflake" style="font-size:75%;margin-right:6px"></i><i class="fal fa-snowflake"></i><i class="fal fa-snowflake" style="font-size:75%;margin-left:6px"></i>
  141.             <div class="short-div" style="margin:15px">
  142.     <!-- Dislikes  -->
  143.                      <i class="fas fa-heart-broken" style="color:#6584AD"></i> ?????
  144.                 <br> <i class="fas fa-heart-broken" style="color:#6584AD"></i> ?????
  145.                 <br> <i class="fas fa-heart-broken" style="color:#6584AD"></i> ?????
  146.                 <br> <i class="fas fa-heart-broken" style="color:#6584AD"></i> ?????
  147.                 <br>
  148.             </div>
  149.         </div>
  150.         <div class="col-sm-4">
  151.     <!-- Credit! You may relocate and change how it looks, but please leave it intact. --> <span style="position:float;float:right">
  152.                   <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>
  153.               </span>
  154.   <!-- Image  -->
  155.   <!-- This looks best with an image with a center focus. -->
  156.             <img src="https://i.imgur.com/eVggWn5.png" class="rounded-circle" style="max-height:225px;padding-top:8%">
  157.         </div>
  158.     </div>
  159.     <!-- Text area -->
  160.     <!-- This will expand to fit your text and looks best if you keep it fairly short. -->
  161.     <div class="row">
  162.         <div class="col-xs-12" style="padding:2%">
  163.             <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>
  164.             <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>
  165.             <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>
  166.         </div>
  167.     </div>
  168. </div>
  169.   <!-- ★ Now the charms! ★ -->
  170.   <!-- These are easily changed out for different ones, see header text for details. -->
  171.   <!-- They will auto-hide on extra small displays as they can't display properly there. -->
  172. <div class="container mx-auto hidden-xs-down w-70" style="max-width:800px;color:#B6D2F9;text-align:center">
  173.     <div class="row no-gutters">
  174.         <div class="col-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  179.               </span>
  180.             <span style="font-size:170%">
  181.                 <i class="fad fa-snowflake fa-pulse" style="animation-duration: 7.8s"></i>
  182.               </span>
  183.         </div>
  184.         <div class="col-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  191.               </span>
  192.             <span style="font-size:170%">
  193.                 <i class="fad fa-snowflake fa-pulse" style="font-size:25px;animation-duration: 7.3s;animation-direction:reverse;"></i>
  194.               </span>
  195.         </div>
  196.         <div class="col-sm-1"> <span style="font-size:85%">
  197.                 <i class="fad fa-circle"></i><br>
  198.                 <i class="fad fa-circle"></i><br>
  199.                 <i class="fad fa-circle"></i><br>
  200.               </span>
  201.             <span style="font-size:170%">
  202.                 <i class="fad fa-snowflake fa-pulse" style="font-size:25px;animation-duration: 6.8s"></i>
  203.               </span>
  204.         </div>
  205.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  213.               </span>
  214.             <span style="font-size:170%">
  215.                 <i class="fad fa-snowflake fa-pulse" style="font-size:25px;animation-duration: 7.5s;animation-direction:reverse;"></i>
  216.               </span>
  217.         </div>
  218.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  224.               </span>
  225.             <span style="font-size:170%">
  226.                 <i class="fad fa-snowflake fa-pulse" style="font-size:25px;animation-duration: 5.5s;animation-direction:reverse;"></i>
  227.               </span>
  228.         </div>
  229.         <div class="col-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  236.               </span>
  237.             <span style="font-size:170%">
  238.                 <i class="fad fa-snowflake fa-pulse" style="font-size:25px;animation-duration: 6.5s;"></i>
  239.               </span>
  240.         </div>
  241.         <div class="col-sm-1"> <span style="font-size:85%">
  242.                 <i class="fad fa-circle"></i><br>
  243.                 <i class="fad fa-circle"></i><br>
  244.               </span>
  245.             <span style="font-size:170%">
  246.                 <i class="fad fa-snowflake fa-pulse" style="font-size:25px;animation-duration: 7s;animation-direction:reverse;"></i>
  247.               </span>
  248.         </div>
  249.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  255.               </span>
  256.             <span style="font-size:170%">
  257.                 <i class="fad fa-snowflake fa-pulse" style="font-size:25px;animation-duration: 8s;"></i>
  258.               </span>
  259.         </div>
  260.         <div class="col-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  265.               </span>
  266.             <span style="font-size:170%">
  267.                 <i class="fad fa-snowflake fa-pulse" style="font-size:25px;animation-duration: 6s;"></i>
  268.               </span>
  269.         </div>
  270.     </div>
  271. </div>
  272. </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!