API tools faq
paste
AvalonCat

Blue & Yellow Lightning Window v3.0.1

AvalonCat
Oct 16th, 2022
1,455
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.36 KB | Source Code | 0 0
raw download clone embed print report
  1. <!--Leave credit at the top please!-->
  2. <p>Coding by <a href="/AvalonCat">AvalonCat</a>.</p>
  3. <!--Background image link here-->
  4. <div style="background: url(https://cdn1.vectorstock.com/i/1000x1000/94/85/abstract-yellow-and-blue-lightning-science-vector-4869485.jpg) no-repeat center fixed; background-size:100%; padding:100px; border-radius:.25rem;color:#A6ACB6">
  5.   <div class="row">
  6.     <div class="col-md-9 col-12 mb-3">
  7.   <div class="card" style="background-color: #373D47;">
  8.     <div class="card-block bg-faded" style="background-color: #373D47;border: 10px solid transparent;border-image: url(https://i.ibb.co/tP46rJ0/27576561-thunder12.png) 260 round;">
  9.       <div class="row">
  10.         <div class="col-md-3 col-12">
  11.           <div class="img-thumbnail thumb-image" style="background-color: #787A7F;border-color: #A6ACB6;">
  12.             <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/18432550?1665922926" alt="character profile image">
  13.           </div>
  14.         </div>
  15.         <div class="col-md-9 col-12">
  16.           <h1 style="font-size:4rem;text-shadow: 0px 0px 10px #00EAFF; color: #EBFDFF">Character Name</h1>
  17.           <hr>
  18.           <table style="border:none;width: 100%;">
  19.             <tbody>
  20.               <tr>
  21.               <th style="background:transparent; text-align: right;">Age:</th>
  22.               <td>Text</td>
  23.               <th style="background:transparent; text-align: right;">Gender:</th>
  24.               <td>Text</td>
  25.               <th style="background:transparent; text-align: right;">Sexuality:</th>
  26.               <td>Text</td>
  27.               <th style="background:transparent; text-align: right;">Species:</th>
  28.               <td>Text</td>
  29.               </tr>
  30.             </tbody>
  31.           </table>
  32.           <p class="text-center" style="margin-top: 3%;">Use this line for extra info or maybe a quote.</p>
  33.         </div>
  34.       </div>
  35.     </div>
  36. </div>
  37. </div>
  38. <div class="col-md-3 col-12 mb-3">
  39. <div class="card" style="height:100%; overflow-y: auto; overflow-x:hidden; background-color: #373D47;">
  40.     <div class="card-block bg-faded" style="background-color: #373D47;border: 10px solid transparent;border-image: url(https://i.ibb.co/tP46rJ0/27576561-thunder12.png) 260 round;">
  41.       <!--You can use this section for whatever you'd like. You can make a small trivia list or add your character's theme songs and such.-->
  42.       <h2 style="text-shadow: 0px 0px 10px #00EAFF; color: #EBFDFF; font-size:2.5rem">Trivia</h2>
  43.       <hr>
  44.      <ol>
  45.        <li><a href="https://soundcloud.com/the-score-official/stronger-1?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing">Stronger - The Score Official</a></li>
  46.        <li>Text here</li>
  47.        <li>Text here</li>
  48.      </ol>
  49.     </div>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="row hidden-sm-down">
  54. <div class="col-12">
  55.   <ul class="nav nav-pills nav-justified">
  56.     <!-- These are the navigation buttons. Feel free to custimize them to fit your needs. You can also add more tabs by copying the code for a button and changing the href ID. Be sure to specify this ID on the tab it is linked to or it won't work. There is a copy paste code at the bottom of the page too.-->
  57.     <li class="nav-item"><a class="btn btn-primary show active" data-toggle="pill" href="#APP" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500; border: 1px solid #A6ACB6">Appearance</a></li>
  58.     <li class="nav-item"><a class="btn btn-primary show" data-toggle="pill" href="#PER" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500; border: 1px solid #A6ACB6">Personality</a></li>
  59.     <li class="nav-item"><a class="btn btn-primary show" data-toggle="pill" href="#ABI" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500; border: 1px solid #A6ACB6">Abilities</a></li>
  60.     <li class="nav-item"><a class="btn btn-primary show" data-toggle="pill" href="#HIS" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500; border: 1px solid #A6ACB6">Backstory</a></li>
  61.     <li class="nav-item"><a class="btn btn-primary show" data-toggle="pill" href="#EXT" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500; border: 1px solid #A6ACB6">Other</a></li>
  62.     <!--Paste extra button code above this line!-->
  63.   </ul>
  64. </div>
  65. </div>
  66.   <div class="row hidden-md-up">
  67.     <div class="col-6">
  68.       <ul class="nav nav-pills nav-justified" style="flex-direction: column">
  69.     <!-- This set of navigation buttons are for easier mobile viewing. If you change the way the Navigation works you will need to update these too. Just make sure the name and href match and it should work.-->
  70.     <li class="nav-item mb-2"><a class="btn btn-primary show active" data-toggle="pill" href="#APP" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500; border: 1px solid #A6ACB6">Appearance</a></li>
  71.     <li class="nav-item mb-2"><a class="btn btn-primary show" data-toggle="pill" href="#PER" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500; border: 1px solid #A6ACB6">Personality</a></li>
  72.     <li class="nav-item mb-2"><a class="btn btn-primary show" data-toggle="pill" href="#ABI" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500; border: 1px solid #A6ACB6">Abilities</a></li>
  73.     <!--Paste extra button code above this line!-->
  74.   </ul>
  75.     </div>
  76.     <div class="col-6">
  77.       <ul class="nav nav-pills nav-justified" style="flex-direction: column">
  78.     <li class="nav-item mb-2"><a class="btn btn-primary show" data-toggle="pill" href="#HIS" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500;">Backstory</a></li>
  79.     <li class="nav-item mb-2"><a class="btn btn-primary show" data-toggle="pill" href="#EXT" style="background-color: #787A7F;color: #FFFCEB; text-shadow: 0px 0px 15px #FFD500;">Other</a></li>
  80.     <!--Paste extra button code above this line!-->
  81.   </ul>
  82.     </div>
  83.   </div>
  84. <div class="row">
  85.   <div class="col-12 col-mb-12">
  86. <div class="card mt-3 shadow-sm" style="height:max-content;overflow:auto;border:0px;">
  87.   <div class="tab-content card" style="background-color: #373D47;">
  88.     <div class="tab-pane card-block bg-faded show active" id="APP" style="background-color: #373D47;border: 10px solid transparent;border-image: url(https://i.ibb.co/tP46rJ0/27576561-thunder12.png) 260 round;">
  89.       <!--Appearance Tab-->
  90.       <h1 style="text-shadow: 0px 0px 10px #00EAFF; color: #EBFDFF; text-align:center; font-size:2.5rem">Appearance</h1>
  91.       <hr>
  92.       <p style="text-align:center">Use this tab to describe your character's appearance.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.<br><br>
  93.       <!--Optional inline reference sheet-->
  94.         <img class="img-thumbnail thumb-image" src="https://nacolorado.org/cospgs/wp-content/uploads/2020/03/placeholder.png" style="max-height:600px; background-color: #787A7F;border-color: #A6ACB6;"><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
  95.     </div>
  96.     <div class="tab-pane card-block bg-faded show" id="PER" style="background-color: #373D47;border: 10px solid transparent;border-image: url(https://i.ibb.co/tP46rJ0/27576561-thunder12.png) 260 round;">
  97.       <!--Personality Tab-->
  98.       <h2 style="text-shadow: 0px 0px 10px #00EAFF; color: #EBFDFF; text-align:center; font-size:2.5rem">Personality</h2>
  99.       <p style="text-align:center">Use this tab to describe your character's personality.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
  100.         <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
  101.     </div>
  102.     <div class="tab-pane card-block bg-faded show" id="ABI" style="background-color: #373D47;border: 10px solid transparent;border-image: url(https://i.ibb.co/tP46rJ0/27576561-thunder12.png) 260 round;">
  103.       <!--Abilities Tab-->
  104.       <h2 style="text-shadow: 0px 0px 10px #00EAFF; color: #EBFDFF; text-align:center; font-size:2.5rem">Abilities</h2>
  105.       <p style="text-align:center">Use this tab to describe your character's abilities.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
  106.         <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
  107.     </div>
  108.     <div class="tab-pane card-block bg-faded show" id="HIS" style="background-color: #373D47;border: 10px solid transparent;border-image: url(https://i.ibb.co/tP46rJ0/27576561-thunder12.png) 260 round;">
  109.       <!--History/Backstory Tab-->
  110.       <h2 style="text-shadow: 0px 0px 10px #00EAFF; color: #EBFDFF; text-align:center; font-size:2.5rem">Backstory</h2>
  111.       <p style="text-align:center">Use this tab to tell your character's backstory.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
  112.         <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
  113.     </div>
  114.     <div class="tab-pane card-block bg-faded show" id="EXT" style="background-color: #373D47;border: 10px solid transparent;border-image: url(https://i.ibb.co/tP46rJ0/27576561-thunder12.png) 260 round;">
  115.       <!--Extra tab. You can use this for any extra info you want to add.-->
  116.       <h2 style="text-shadow: 0px 0px 10px #00EAFF; color: #EBFDFF; text-align:center; font-size:2.5rem">Other</h2>
  117.       <p style="text-align:center">Use this tab to describe the inspiriation for creating you character.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
  118.         <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
  119.     </div>
  120.     <!--Paste extra tab code above this line!-->
  121.   </div>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. <!--Extra Tab Code: make sure the href id (#CustomID) matched the ID of the tab.-->
  127. <!--Navigation Button Code-->
  128. <!-- <li class="nav-item"><a class="btn btn-primary show" data-toggle="pill" href="#CustomID">Custom</a></li> -->
  129. <!--Tab Code-->
  130. <!-- <div class="tab-pane card-block show" id="CustomID">
  131.      <p style="text-align:center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
  132.        <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
  133.    </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!