API tools faq
paste
Advertisement
circlejourney

Theme for Pinkcanine

circlejourney
Jul 7th, 2020
1,633
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.94 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    THEME FOR PINKCANINE BY CIRCLEJOURNEY
  3.    toyhou.se/circlejourney
  4.    No header version
  5. -->
  6.  
  7. <div class="container-fluid" style="background-color: #ffaec9; width: auto; margin: -15px; padding: 60px; background-image: url(https://i.imgur.com/yVo2xJ3.jpg); background-size: cover; background-attachment: fixed;"><!-- Replace the URL inside url() to change the background image -->
  8.     <div class="p-lg-4 p-0 text-white">
  9.        
  10.         <div class="card mb-3" style="border: 2px solid white; background: rgba(0, 0, 0, 0.65);">
  11.            
  12.             <div class="card-header" style="height: 200px; background-image: url(https://i.imgur.com/kQspg96.png);"><!-- Replace the URL inside url() to change the banner image -->
  13.             </div>
  14.            
  15.             <div class="card-block">
  16.                 <h2 class="mt-3 text-center text-light display-4">About</h2>
  17.                 <div class="p-4" style="font-size: 11.5pt;">
  18.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a iaculis eros, vel auctor orci. Etiam et accumsan diam, et fringilla ante. Nam in dolor mollis, accumsan augue nec, euismod mauris. Curabitur egestas risus sit amet felis pretium, vitae commodo ligula ullamcorper. Vivamus vel tincidunt massa. Praesent vestibulum elit ante, ac mattis orci aliquam at. Mauris non rutrum dui, et vehicula metus. In accumsan lectus vel fermentum maximus. Donec commodo dapibus erat in tincidunt. Maecenas eu viverra nibh. Vestibulum dictum condimentum molestie. Donec viverra imperdiet sem nec ultrices. Aenean quis ligula est. Nunc eget aliquet ante. </p>
  19.                 </div>
  20.             </div>
  21.         </div>
  22.        
  23.         <div class="row mb-3">
  24.             <div class="col-12 col-lg-6 mb-lg-0 mb-3 d-flex">
  25.                 <div class="card w-100 p-2" style="border: 2px solid white; background: rgba(0, 0, 0,0.65);">
  26.                     <div class="card-block">
  27.                         <h2 class="mb-4 text-center text-light display-4">Info</h2>
  28.                        
  29.                         <div class="px-0 px-lg-4 m-2" style="word-break: break-word">
  30.                             <div class="row">
  31.                                 <div class="col-12 col-sm-4 text-light font-weight-bold text-center text-sm-left">
  32.                                     Name
  33.                                 </div>
  34.                                 <div class="col-12 col-sm-8 text-center text-sm-right">
  35.                                     My name
  36.                                 </div>
  37.                             </div>
  38.                            
  39.                             <div class="row">
  40.                                 <div class="col-12 col-sm-4 text-light font-weight-bold text-center text-sm-left">
  41.                                     Age
  42.                                 </div>
  43.                                 <div class="col-12 col-sm-8 text-center text-sm-right">
  44.                                     My age
  45.                                 </div>
  46.                             </div>
  47.                             <div class="row">
  48.                                 <div class="col-12 col-sm-4 text-light font-weight-bold text-center text-sm-left">
  49.                                     Gender
  50.                                 </div>
  51.                                 <div class="col-12 col-sm-8 text-center text-sm-right">
  52.                                     My gender
  53.                                 </div>
  54.                             </div>
  55.                             <div class="row">
  56.                                 <div class="col-12 col-sm-4 text-light font-weight-bold text-center text-sm-left">
  57.                                     Pronouns
  58.                                 </div>
  59.                                 <div class="col-12 col-sm-8 text-center text-sm-right">
  60.                                     My pronouns
  61.                                 </div>
  62.                             </div>
  63.                             <div class="row">
  64.                                 <div class="col-12 col-sm-4 text-light font-weight-bold text-center text-sm-left">
  65.                                     Element(s)
  66.                                 </div>
  67.                                 <div class="col-12 col-sm-8 text-center text-sm-right">
  68.                                     My element(s)
  69.                                 </div>
  70.                             </div>
  71.                             <div class="row">
  72.                                 <div class="col-12 col-sm-4 text-light font-weight-bold text-center text-sm-left">
  73.                                     Orientation
  74.                                 </div>
  75.                                 <div class="col-12 col-sm-8 text-center text-sm-right">
  76.                                     My orientation
  77.                                 </div>
  78.                             </div>
  79.                             <div class="row">
  80.                                 <div class="col-12 col-sm-4 text-light font-weight-bold text-center text-sm-left">
  81.                                     Occupation
  82.                                 </div>
  83.                                 <div class="col-12 col-sm-8 text-center text-sm-right">
  84.                                     My occupation
  85.                                 </div>
  86.                             </div>
  87.                         </div>
  88.                        
  89.                     </div>
  90.                 </div>
  91.             </div>
  92.            
  93.             <div class="col-12 col-lg-6 d-flex">
  94.                 <div class="card w-100 p-2" style="border: 2px solid white; background: rgba(0, 0, 0,0.65);">
  95.                     <div class="card-block">
  96.                         <h2 class="mb-4  text-center text-light display-4">Design notes</h2>
  97.                         <ul>
  98.                         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  99.                         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  100.                         </ul>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.        
  106.        
  107.         <div class="row">
  108.             <div class="col-12 col-lg-6 mb-lg-0 mb-3 d-flex">
  109.                 <div class="card w-100 p-2" style="border: 2px solid white; background: rgba(0, 0, 0,0.65);">
  110.                     <div class="card-block">
  111.                         <h2 class="mb-4  text-center text-light display-4">Stats</h2>
  112.                         <div style="word-break: break-word;">
  113.                             <div class="progress mb-2" style="height: auto;">
  114.                                 <div class="progress-bar bg-secondary text-left p-2 h-100" style="width: 60%; font-size: 12pt;"> <!-- Set the width % to your desired width -->
  115.                                     Attack
  116.                                 </div>
  117.                             </div>
  118.                            
  119.                             <div class="progress mb-2" style="height: auto;">
  120.                                 <div class="progress-bar bg-secondary text-left p-2 h-100" style="width: 20%; font-size: 12pt;">
  121.                                     Defense
  122.                                 </div>
  123.                             </div>
  124.                            
  125.                             <div class="progress mb-2" style="height: auto;">
  126.                                 <div class="progress-bar text-left bg-secondary p-2 h-100" style="width: 30%; font-size: 12pt;">
  127.                                     Agility
  128.                                 </div>
  129.                             </div>
  130.                            
  131.                             <div class="progress mb-2" style="height: auto;">
  132.                                 <div class="progress-bar bg-secondary text-left p-2 h-100" style="width: 40%; font-size: 12pt;">
  133.                                     Magic
  134.                                 </div>
  135.                             </div>
  136.                            
  137.                             <div class="progress mb-2" style="height: auto;">
  138.                                 <div class="progress-bar bg-secondary text-left p-2 h-100" style="width: 50%; font-size: 12pt;">
  139.                                     Healing
  140.                                 </div>
  141.                             </div>
  142.                            
  143.                             <!--<div class="mb-2 text-center" style="font-size: 12pt;">
  144.                                <b>EXP points:</b>
  145.                                9999
  146.                            </div> -->
  147.                            
  148.                             <div class="row no-gutters">
  149.                                 <div class="col-auto mr-2">EXP points</div>
  150.                                 <div class="col">
  151.                                     <div class="progress mb-2" style="height: auto;">
  152.                                         <div class="progress-bar bg-primary text-left p-1 h-100" style="width: 50%; font-size: 11pt;">
  153.                                             9999
  154.                                         </div>
  155.                                     </div>
  156.                                 </div>
  157.                             </div>
  158.                            
  159.                         </div>
  160.                     </div>
  161.                 </div>
  162.             </div>
  163.        
  164.             <div class="col-12 col-lg-6 d-flex">
  165.                 <div class="card w-100 p-2" style="border: 2px solid white; background: rgba(0, 0, 0,0.65);">
  166.                     <div class="card-block">
  167.                        
  168.                         <h2 class="mb-4  text-center text-light display-4">Skills</h2>
  169.                         <div class="row">
  170.                             <div class="col-12 col-sm-3 text-center text-sm-right text-light font-weight-bold">
  171.                                 Skill 1 name
  172.                             </div>
  173.                             <div class="col-12 col-sm-9 text-center text-sm-left">
  174.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a iaculis eros, vel auctor orci.</p>
  175.                             </div>
  176.                         </div>
  177.                        
  178.                         <div class="row">
  179.                             <div class="col-12 col-sm-3 text-center text-sm-right text-light font-weight-bold">
  180.                                 Skill 2
  181.                             </div>
  182.                             <div class="col-12 col-sm-9 text-center text-sm-left">
  183.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a iaculis eros, vel auctor orci.</p>
  184.                             </div>
  185.                         </div>
  186.                     </div>
  187.                 </div>
  188.             </div>
  189.         </div>
  190.     </div>
  191.  
  192.     <a style="position: absolute; bottom: 5px; right: 5px; font-size: 9pt; opacity: 0.8" href="https://toyhou.se/~forums/16.htmlcss-graphics/75580" target="_blank">
  193.         theme by circlejourney <i class="fa fa-code"></i>
  194.     </a>
  195. </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!