API tools faq
paste
Advertisement
werebeast

Star Charms - Bootstrap Colors

werebeast
Dec 3rd, 2020 (edited)
402
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.41 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.      Colors -
  20.      text-primary:
  21.        Name, name decor, quote source, info accent, charms
  22.      text-secondary:
  23.        Details below name, quote, info box text
  24.      text-light:
  25.        Main text body.
  26.      bg-dark:
  27.        Main container background
  28.      bg-light:
  29.        Info box background.
  30.      Use ctrl+F and replace all to change these icons easily.
  31.      Icons -
  32.        Name Moon: fad fa-moon-stars
  33.        Name Star: fad fa-stars
  34.        Quotes -
  35.          Left: fad fa-quote-left
  36.          Right: fad fa-quote-right
  37.        Likes: fas fa-heart
  38.          If you're changing this one, change dislikes first.
  39.          If you're not changing dislikes, too, you'll need to change them by hand or it will break the dislikes.
  40.        Dislikes: fas fa-heart-broken
  41.        Charm strands: fad fa-circle
  42.        Charms: fad fa-star
  43.          If you are changing this icon, either change the name one first or fix it after replacing them.
  44.          You can remove the animation by deleting fa-pulse from each.
  45.          If you want a smoother animation, change fa-pulse to fa-spin.
  46.  
  47.  ★ Enjoy! ★
  48.    
  49.   -->
  50.    
  51.    
  52.   <!-- Top text begin -->
  53. <div class="container mx-auto w-70" style="max-width:800px">
  54.     <div class="row mx-auto text-primary" style="font-variant:small-caps;text-align:center">
  55.         <div class="col-sm-6"> <span style="font-size:250%">
  56.     <!-- Name, pronouns, traits! -->
  57.             <i class="fad fa-moon-stars"></i>
  58.               Name
  59.                 <i class="fad fa-stars"></i>
  60.             </span>
  61.             <br>    <span class="text-secondary" style="font-size:100%">
  62.                 Pro/noun
  63.                 ∙∙
  64.                 Trait
  65.                 ∙∙
  66.                 Trait
  67.                 ∙∙
  68.                 Trait
  69.             </span>
  70.         </div>
  71.     <!-- Quote! --!>
  72.     <!-- If it's too long, it will look weird. -->
  73.     <!-- if you want no quote, delete from here to the next </div>
  74.     and your left side text will appear in the middle, then -->
  75.         <div class="col-sm-6 text-secondary"> <i class="fad fa-quote-left" style="float:left"></i>
  76.             Quotation, n: The act of repeating erroneously the words of another. <i class="fad fa-quote-right" style="float:right"></i>
  77.             <br> <span class="text-primary" style="font-size:80%">
  78.             - <i>Ambrose Bierce</i>
  79.           </span>
  80.         </div>
  81.     </div>
  82. </div>
  83.   <!-- Main box -->
  84. <div class="container mx-auto w-70 h-50 bg-dark text-light" style="border-radius:40px;max-width:800px;padding:2%">
  85.     <!-- Details box  -->
  86.     <div class="row no-gutters bg-light text-secondary" style="border-radius:20px;height:50%;padding:2%">
  87.     <!-- Info form -->
  88.     <!-- If you add any extra lines, you may need to tweak the other parts of this box to prevent it from looking unbalanced.  -->
  89.         <div class="col-sm-4" style="padding-top:2%">
  90.               <span class="text-primary" style="font-weight:bold;padding-right:4px">
  91.                         Full Name:
  92.                       </span>
  93.             ?????
  94.             <br> <span class="text-primary"style="font-weight:bold;padding-right:4px">
  95.                         Nickname:
  96.                       </span>
  97.             ?????
  98.             <br> <span class="text-primary" style="font-weight:bold;padding-right:4px">
  99.                         Species:
  100.                       </span>
  101.             ?????
  102.             <br> <span class="text-primary" style="font-weight:bold;padding-right:4px">
  103.                         Age:
  104.                       </span>
  105.             ?????
  106.             <br> <span class="text-primary" style="font-weight:bold;padding-right:4px">
  107.                         Birthday:
  108.                       </span>
  109.             ?????
  110.             <br> <span class="text-primary" style="font-weight:bold;padding-right:4px">
  111.                         Gender:
  112.                       </span>
  113.             ?????
  114.             <br> <span class="text-primary" style="font-weight:bold;padding-right:4px">
  115.                         Orientation:
  116.                       </span>
  117.             ?????
  118.             <br> <span class="text-primary" style="font-weight:bold;padding-right:4px">
  119.                         Height:
  120.                       </span>
  121.             ?????
  122.             <br> <span class="text-primary" style="font-weight:bold;padding-right:4px">
  123.                         Alignment:
  124.                       </span>
  125.             ?????
  126.             <br> <span class="text-primary" style="font-weight:bold;padding-right:4px">
  127.                         Job:
  128.                       </span>
  129.             ?????
  130.         </div>
  131.         <div class="col-sm-4">
  132.             <div class="short-div" style="margin:15px">
  133.     <!-- Likes -->
  134.     <!-- Again, may require some fiddling with other elements in the box if you make these much longer.  -->
  135.                <i class="fas fa-heart text-primary"></i> ?????
  136.                 <br> <i class="fas fa-heart text-primary"></i> ?????
  137.                 <br> <i class="fas fa-heart text-primary"></i> ?????
  138.                 <br> <i class="fas fa-heart text-primary"></i> ?????
  139.                 <br>
  140.             </div>
  141.             <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>
  142.             <div class="short-div" style="margin:15px">
  143.     <!-- Dislikes  -->
  144.                      <i class="fas fa-heart-broken text-primary"></i> ?????
  145.                 <br> <i class="fas fa-heart-broken text-primary"></i> ?????
  146.                 <br> <i class="fas fa-heart-broken text-primary"></i> ?????
  147.                 <br> <i class="fas fa-heart-broken text-primary"></i> ?????
  148.                 <br>
  149.             </div>
  150.         </div>
  151.         <div class="col-sm-4">
  152.     <!-- Credit! You may relocate and change how it looks, but please leave it intact. --> <span style="position:float;float:right">
  153.                   <a href="" class="text-muted" style="text-decoration:none"><i class="fas fa-code fa-sm"></i></a>
  154.               </span>
  155.   <!-- Image  -->
  156.   <!-- This looks best with an image with a center focus. -->
  157.             <img src="https://i.imgur.com/eVggWn5.png" class="rounded-circle" style="max-height:225px;padding-top:8%">
  158.         </div>
  159.     </div>
  160.     <!-- Text area -->
  161.     <!-- This will expand to fit your text and looks best if you keep it fairly short. -->
  162.     <div class="row">
  163.         <div class="col-xs-12" style="padding:2%">
  164.             <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>
  165.             <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>
  166.             <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>
  167.         </div>
  168.     </div>
  169. </div>
  170.   <!-- ★ Now the charms! ★ -->
  171.   <!-- These are easily changed out for different ones, see header text for details. -->
  172.   <!-- They will auto-hide on extra small displays as they can't display properly there. -->
  173. <div class="container mx-auto hidden-xs-down w-70" style="max-width:800px;text-align:center">
  174.     <div class="row no-gutters text-primary">
  175.         <div class="col-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  180.               </span>
  181.             <span style="font-size:170%">
  182.                 <i class="fad fa-star fa-pulse" style="animation-duration: 7.8s"></i>
  183.               </span>
  184.         </div>
  185.         <div class="col-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  192.               </span>
  193.             <span style="font-size:170%">
  194.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 7.3s;animation-direction:reverse;"></i>
  195.               </span>
  196.         </div>
  197.         <div class="col-sm-1"> <span style="font-size:85%">
  198.                 <i class="fad fa-circle"></i><br>
  199.                 <i class="fad fa-circle"></i><br>
  200.                 <i class="fad fa-circle"></i><br>
  201.               </span>
  202.             <span style="font-size:170%">
  203.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 6.8s"></i>
  204.               </span>
  205.         </div>
  206.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  214.               </span>
  215.             <span style="font-size:170%">
  216.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 7.5s;animation-direction:reverse;"></i>
  217.               </span>
  218.         </div>
  219.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  225.               </span>
  226.             <span style="font-size:170%">
  227.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 5.5s;animation-direction:reverse;"></i>
  228.               </span>
  229.         </div>
  230.         <div class="col-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  237.               </span>
  238.             <span style="font-size:170%">
  239.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 6.5s;"></i>
  240.               </span>
  241.         </div>
  242.         <div class="col-sm-1"> <span style="font-size:85%">
  243.                 <i class="fad fa-circle"></i><br>
  244.                 <i class="fad fa-circle"></i><br>
  245.               </span>
  246.             <span style="font-size:170%">
  247.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 7s;animation-direction:reverse;"></i>
  248.               </span>
  249.         </div>
  250.         <div class="col-sm-1 offset-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  256.               </span>
  257.             <span style="font-size:170%">
  258.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 8s;"></i>
  259.               </span>
  260.         </div>
  261.         <div class="col-sm-1"> <span style="font-size:85%">
  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.                 <i class="fad fa-circle"></i><br>
  266.               </span>
  267.             <span style="font-size:170%">
  268.                 <i class="fad fa-star fa-pulse" style="font-size:25px;animation-duration: 6s;"></i>
  269.               </span>
  270.         </div>
  271.     </div>
  272. </div>
  273. </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!