API tools faq
paste
Jade-Everstone

Tiny Mage (CQ 2022 April - BS)

Jade-Everstone
Apr 16th, 2022 (edited)
413
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  4.  
  5. Bootstrap Vers.
  6.  
  7. For the Coders Quarters April challenge:
  8. using the theme - Mage
  9.  
  10. You may
  11. -frankenstein with other codes (as long as the creator of said code allows it)
  12. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  13.  
  14. You may not
  15. -Redistribute, resell, and/or claim its yours
  16. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  17.  
  18. Misc Notes:
  19. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  20. -Some basic html knowledge is recommended for editing
  21.  
  22. Default Colors:
  23. -headers: bg-primary
  24. -text, header text: text-white
  25. -card background: bg-dark
  26.  
  27. Change the colors: Ctrl+f and search for the color you want to change.
  28.  
  29. -->
  30.  
  31. <div class="container" style="max-width:650px">
  32.    
  33.    
  34.     <!--background-->
  35.    
  36.     <div class="card border-0 p-3 bg-faded" style="
  37.        background-image:url(https://images.unsplash.com/photo-1541472555878-357a209eb293?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1970&q=80);
  38.        background-size:cover;
  39.        background-position:top;
  40.        background-attachment:fixed;
  41.        box-shadow: 1px 2px 5px #000000">
  42.    
  43.     <!--end background-->
  44.        
  45.        
  46.         <!--Main info-->
  47.        
  48.         <!--header-->
  49.         <div class="card p-1 bg-primary text-white border-0 mb-3" style="
  50.            transform:rotate(1deg);
  51.            font-size:2em;
  52.            font-weight:bold;
  53.            text-align:center;
  54.            letter-spacing:1px;
  55.            text-shadow: 1px 2px 4px #000000;
  56.            box-shadow: 1px 2px 5px #000000
  57.            ">
  58.            
  59.             <span>
  60.                 <i class="fa-solid fa-hat-wizard"></i> Character name <i class="fa-solid fa-hat-wizard"></i>
  61.             </span>
  62.            
  63.         </div>
  64.        
  65.         <div class="row">
  66.            
  67.            
  68.             <!--image and basic info-->
  69.            
  70.             <div class="col-12 col-lg-6" style="text-align:center;margin-top:auto;margin-bottom:auto">
  71.                
  72.                
  73.                 <!--image-->
  74.                
  75.                 <img class="mb-3" src="https://via.placeholder.com/200x300" style="width:180px;z-index:2">
  76.                 <i class="fa-solid fa-sparkles" style="font-size:250px;color:rgba(255,255,255,0.15);transform:rotate(350deg);position:absolute;right:9%;left:9%"></i>
  77.                
  78.                 <a href="#" class="text-white" style="position:absolute; top:5px; left:20px; font-size:20px; z-index:3" data-toggle="tooltip" title="img credit"><i class="fas fa-sparkles"></i> </a>
  79.                
  80.                
  81.                 <!--basic info-->
  82.                
  83.                 <div class="card bg-dark text-white border-0 mb-3" style="transform:rotate(1deg);text-align:left">
  84.                     <div class="card-body p-2" style="text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  85.                         <span style="font-weight:bold"> <i class="fa-solid fa-transgender"></i> Gender</span>
  86.                         <span class="pull-right">Gender (pro/noun)</span><br>
  87.                        
  88.                         <span style="font-weight:bold"> <i class="fa-solid fa-user"></i> Race</span>
  89.                         <span class="pull-right">Text</span><br>
  90.                        
  91.                         <span style="font-weight:bold"> <i class="fa-solid fa-scroll-old"></i> Class</span>
  92.                         <span class="pull-right">Mage</span><br>
  93.                        
  94.                         <span style="font-weight:bold"> <i class="fa-solid fa-scale-balanced"></i> Alignment</span>
  95.                         <span class="pull-right">Text</span><br>
  96.                        
  97.                         <span style="font-weight:bold"> <i class="fa-solid fa-cake"></i> Birthday</span>
  98.                         <span class="pull-right"> 00/00</span><br>
  99.                    
  100.                     </div>
  101.                 </div>
  102.                
  103.             </div>
  104.            
  105.             <!--end image and basic info-->
  106.            
  107.            
  108.             <!--introduction-->
  109.            
  110.             <div class="col-12 col-lg-6" style="margin-top:auto;margin-bottom:auto">
  111.                 <div class="card bg-dark text-white border-0 mb-3" >
  112.                     <div class="card-body p-2" style="text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  113.                         <p>Have a lot of info? This section will Expand! I suggest keeping both sides similar lengths for the best look though.</p>
  114.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus sit amet velit pretium ornare. Fusce aliquam sagittis neque, id imperdiet dolor bibendum eget.</p>
  115.                         <p>Fusce ultricies sapien libero, at porta turpis accumsan sit amet. Sed sapien purus, iaculis ac posuere eget, pellentesque commodo dolor. Nunc condimentum quis nulla id elementum.</p>
  116.                        
  117.                     </div>
  118.                 </div>
  119.             </div>
  120.            
  121.             <!--end introduction-->
  122.            
  123.         </div>
  124.        
  125.         <!--end main info-->
  126.        
  127.        
  128.        
  129.         <!--skills and spells-->
  130.        
  131.         <!--header-->
  132.         <div class="card p-1 bg-primary text-white border-0 mb-3" style="
  133.            transform:rotate(359deg);
  134.            font-size:2em;
  135.            font-weight:bold;
  136.            text-align:center;
  137.            letter-spacing:1px;
  138.            text-shadow: 1px 2px 4px #000000;
  139.            box-shadow: 1px 2px 5px #000000
  140.            ">
  141.            
  142.             <span>
  143.                 <i class="fa-solid fa-hand-holding-magic"></i> Skills <i class="fa-solid fa-hand-holding-magic"></i>
  144.             </span>
  145.            
  146.         </div>
  147.        
  148.        
  149.         <!--skill stats-->
  150.         <div class="row mb-2">
  151.            
  152.             <div class="col-4 col-sm-2 mb-3">
  153.                 <div class="card bg-dark text-white border-0" style="transform:rotate(1deg);text-align:center;text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  154.                     <span>Strength</span>
  155.                     <span style="font-size:2em;font-weight:bold"> 00 </span>
  156.                 </div>
  157.             </div>
  158.            
  159.             <div class="col-4 col-sm-2 mb-3">
  160.                 <div class="card bg-dark text-white border-0" style="transform:rotate(359deg);text-align:center;text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  161.                     <span>Dexterity</span>
  162.                     <span style="font-size:2em;font-weight:bold"> 00 </span>
  163.                 </div>
  164.             </div>
  165.            
  166.             <div class="col-4 col-sm-2 mb-3">
  167.                 <div class="card bg-dark text-white border-0" style="transform:rotate(1deg);text-align:center;text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  168.                     <span>Constitution</span>
  169.                     <span style="font-size:2em;font-weight:bold"> 00 </span>
  170.                 </div>
  171.             </div>
  172.            
  173.             <div class="col-4 col-sm-2 mb-3">
  174.                 <div class="card bg-dark text-white border-0" style="transform:rotate(359deg);text-align:center;text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  175.                     <span>Intelligence</span>
  176.                     <span style="font-size:2em;font-weight:bold"> 00 </span>
  177.                 </div>
  178.             </div>
  179.            
  180.             <div class="col-4 col-sm-2 mb-3">
  181.                 <div class="card bg-dark text-white border-0" style="transform:rotate(1deg);text-align:center;text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  182.                     <span>Wisdom</span>
  183.                     <span style="font-size:2em;font-weight:bold"> 00 </span>
  184.                 </div>
  185.             </div>
  186.            
  187.             <div class="col-4 col-sm-2 mb-3">
  188.                 <div class="card bg-dark text-white border-0" style="transform:rotate(359deg);text-align:center;text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  189.                     <span>Charisma</span>
  190.                     <span style="font-size:2em;font-weight:bold"> 00 </span>
  191.                 </div>
  192.             </div>
  193.            
  194.         </div>
  195.         <!--end skill stats-->
  196.        
  197.        
  198.         <!--spells-->
  199.         <div class="row">
  200.            
  201.             <!--spell 1-->
  202.             <div class="col-12 col-md-6 mb-3">
  203.                 <div class="card bg-dark text-white border-0 p-2 mb-2 h-100" style="text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  204.                    
  205.                     <div class="card bg-primary border-0 p-1 mb-2" style="transform:rotate(1deg);box-shadow: 1px 1px 5px #000000;font-size:1.5em;text-align:center">
  206.                         <span><i class="fa-solid fa-sparkles"></i> Spell name <i class="fa-solid fa-sparkles"></i></span>
  207.                     </div>
  208.                    
  209.                     <p>A breif Description</p>
  210.                    
  211.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  212.                    
  213.                     <p style="text-align:center;font-size:1.3em">
  214.                         Mastery
  215.                         <i class="fa-solid fa-star"></i>
  216.                         <i class="fa-solid fa-star"></i>
  217.                         <i class="fa-regular fa-star-half-stroke"></i>
  218.                         <i class="fa-regular fa-star"></i>
  219.                         <i class="fa-regular fa-star"></i>
  220.                     </p>
  221.                    
  222.                 </div>
  223.             </div>
  224.            
  225.             <!--spell 2-->
  226.             <div class="col-12 col-md-6 mb-3">
  227.                 <div class="card bg-dark text-white border-0 p-2 mb-2 h-100" style="text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  228.                    
  229.                     <div class="card bg-primary border-0 p-1 mb-2" style="transform:rotate(359deg);box-shadow: 1px 1px 5px #000000;font-size:1.5em;text-align:center">
  230.                         <span><i class="fa-solid fa-sparkles"></i> Spell name <i class="fa-solid fa-sparkles"></i></span>
  231.                     </div>
  232.                    
  233.                     <p>A breif Description</p>
  234.                    
  235.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  236.                    
  237.                     <p style="text-align:center;font-size:1.3em">
  238.                         Mastery
  239.                         <i class="fa-solid fa-star"></i>
  240.                         <i class="fa-solid fa-star"></i>
  241.                         <i class="fa-regular fa-star-half-stroke"></i>
  242.                         <i class="fa-regular fa-star"></i>
  243.                         <i class="fa-regular fa-star"></i>
  244.                     </p>
  245.                    
  246.                 </div>
  247.             </div>
  248.            
  249.         </div>
  250.         <!--end spells-->
  251.        
  252.        
  253.         <!--end skills and spells-->
  254.        
  255.        
  256.        
  257.         <!--Backstory & Trivia-->
  258.        
  259.         <!--header-->
  260.         <div class="card p-1 bg-primary text-white border-0 mb-3" style="
  261.            transform:rotate(1deg);
  262.            font-size:2em;
  263.            font-weight:bold;
  264.            text-align:center;
  265.            letter-spacing:1px;
  266.            text-shadow: 1px 2px 4px #000000;
  267.            box-shadow: 1px 2px 5px #000000
  268.            ">
  269.            
  270.             <span>
  271.                 <i class="fa-solid fa-book-sparkles"></i> Backstory <i class="fa-solid fa-book-sparkles"></i>
  272.             </span>
  273.            
  274.         </div>
  275.        
  276.         <div class="row">
  277.            
  278.             <!--backstory-->
  279.             <div class="col-12 col-lg-8">
  280.                 <div class="card bg-dark text-white border-0 p-2 mb-3" style="text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  281.                    
  282.                     <p>Have a lot of info? This section will expand!</p>
  283.                    
  284.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae fringilla dolor, quis pulvinar lorem. Morbi varius eros dui, quis tristique nisl iaculis nec. Fusce mollis vitae ex eleifend eleifend. Donec ultricies lectus purus, ac lobortis eros rhoncus in. Etiam eu volutpat massa. Donec in sagittis orci, sit amet tristique elit. Praesent lacus risus, venenatis ac dui non, imperdiet malesuada metus. </p>
  285.                     <p>Aenean ac metus sapien. Curabitur vel leo vestibulum, ultricies arcu mattis, dictum lacus. Fusce eu metus a velit lobortis ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet tristique neque, a malesuada enim.</p>
  286.                    
  287.                 </div>
  288.             </div>
  289.             <!--end backstory-->
  290.            
  291.             <!--image 1-->
  292.             <div class="col-12 col-lg-4" style="text-align:center;margin-top:auto;margin-bottom:auto">
  293.                
  294.                 <img class="mb-3" src="https://via.placeholder.com/200x300"  style="width:180px;z-index:2">
  295.                
  296.                 <i class="fa-solid fa-sparkles" style="font-size:180px;color:rgba(255,255,255,0.15);transform:rotate(10deg);position:absolute;right:-20%;left:-30%"></i>
  297.                
  298.                 <!--image credit-->
  299.                 <a href="#" class="text-white" style="position:absolute; top:5px; right:20px; font-size:20px; z-index:3" data-toggle="tooltip" title="img credit"><i class="fas fa-sparkles"></i> </a>
  300.                
  301.             </div>
  302.            
  303.            
  304.             <!--image 2-->
  305.             <div class="col-12 col-lg-4" style="text-align:center;margin-top:auto;margin-bottom:auto">
  306.                
  307.                 <img class="mb-3" src="https://via.placeholder.com/200x300"  style="width:180px;z-index:2">
  308.                
  309.                 <i class="fa-solid fa-sparkles" style="font-size:180px;color:rgba(255,255,255,0.15);transform:rotate(350deg);position:absolute;right:7%;left:7%"></i>
  310.                
  311.                 <!--image credit-->
  312.                 <a href="#" class="text-white" style="position:absolute; top:5px; left:20px; font-size:20px; z-index:3" data-toggle="tooltip" title="img credit"><i class="fas fa-sparkles"></i> </a>
  313.                
  314.             </div>
  315.            
  316.             <!--trivia-->
  317.             <div class="col-12 col-lg-8">
  318.                 <div class="card bg-dark text-white border-0 p-2 mb-3" style="text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  319.                    
  320.                     <div class="card bg-primary border-0 p-1 mb-2" style="transform:rotate(359deg);box-shadow: 1px 1px 5px #000000;font-size:1.5em;text-align:center">
  321.                         <span><i class="fa-solid fa-sparkles"></i> Trivia <i class="fa-solid fa-sparkles"></i></span>
  322.                     </div>
  323.                    
  324.                     <p> <i class="fa-solid fa-sparkles"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  325.                    
  326.                     <p> <i class="fa-solid fa-sparkles"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  327.                     <p> <i class="fa-solid fa-sparkles"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  328.                    
  329.                 </div>
  330.             </div>
  331.             <!--end trivia-->
  332.            
  333.         </div>
  334.        
  335.         <!--end Backstory & Trivia-->
  336.        
  337.        
  338.         <!--Relationships-->
  339.        
  340.         <!--header-->
  341.         <div class="card p-1 bg-primary text-white border-0 mb-3" style="
  342.            transform:rotate(359deg);
  343.            font-size:2em;
  344.            font-weight:bold;
  345.            text-align:center;
  346.            letter-spacing:1px;
  347.            text-shadow: 1px 2px 4px #000000;
  348.            box-shadow: 1px 2px 5px #000000
  349.            ">
  350.            
  351.             <span>
  352.                 <i class="fa-solid fa-users"></i> Relationships <i class="fa-solid fa-users"></i>
  353.             </span>
  354.            
  355.         </div>
  356.        
  357.         <div class="row">
  358.            
  359.             <!--relationship 1-->
  360.             <div class="col-12 col-md-6 mb-3">
  361.                 <div class="card bg-dark text-white border-0 p-2 mb-2 h-100" style="text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  362.                    
  363.                     <!--image-->
  364.                     <img src="https://via.placeholder.com/100" class="mb-2" style="height:100px;margin-left:auto;margin-right:auto;z-index:2">
  365.                        
  366.                     <i class="fa-solid fa-sword" style="font-size:80px;position:absolute;right:35%;left:35%"></i>
  367.                    
  368.                    
  369.                    
  370.                     <a href="#" class="text-white"><div class="card bg-primary border-0 p-1 mb-2" style="transform:rotate(1deg);box-shadow: 1px 1px 5px #000000;font-size:1.5em;text-align:center">
  371.                         <span><i class="fa-solid fa-sparkles"></i> Character <i class="fa-solid fa-sparkles"></i></span>
  372.                     </div></a>
  373.                    
  374.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  375.                    
  376.                    
  377.                    
  378.                 </div>
  379.             </div>
  380.            
  381.             <!--relationship 2-->
  382.             <div class="col-12 col-md-6 mb-3">
  383.                 <div class="card bg-dark text-white border-0 p-2 mb-2 h-100" style="text-shadow: 1px 2px 4px #000000;box-shadow: 1px 1px 5px #000000">
  384.                    
  385.                     <!--image-->
  386.                     <img src="https://via.placeholder.com/100" class="mb-2" style="height:100px;margin-left:auto;margin-right:auto;z-index:2">
  387.                        
  388.                     <i class="fa-solid fa-axe-battle" style="font-size:80px;transform:rotate(45deg);position:absolute;right:35%;left:35%"></i>
  389.                    
  390.                    
  391.                    
  392.                     <a href="#" class="text-white"><div class="card bg-primary border-0 p-1 mb-2" style="transform:rotate(359deg);box-shadow: 1px 1px 5px #000000;font-size:1.5em;text-align:center">
  393.                         <span><i class="fa-solid fa-sparkles"></i> Character <i class="fa-solid fa-sparkles"></i></span>
  394.                     </div></a>
  395.                    
  396.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  397.                    
  398.                 </div>
  399.             </div>
  400.            
  401.         </div>
  402.        
  403.         <!--end Relationships-->
  404.        
  405.        
  406.     </div>
  407.    
  408.    
  409.     <!--Credit. You may move it, but please do not delete/remove-->
  410.    
  411.     <p style="text-align:right;color:#;">HTML by <a href="https://toyhou.se/15620329" style="color:#"><i class='fa-solid fa-heart'></i> Jade-Everstone</a> // BG - <a href="https://unsplash.com/photos/rJyRei5D0dg" style="color:#">Unsplash</a></p>
  412.    
  413.    
  414. </div>
Advertisement
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!