API tools faq
paste
AvalonCat

Gold Plates Nested v1.0.1

AvalonCat
Oct 15th, 2022 (edited)
731
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.44 KB | Source Code | 1 0
raw download clone embed print report
  1. <p>Coding by <a href="https://toyhou.se/AvalonCat">AvalonCat</a>.</p>
  2. <div class="m-5" style="background: linear-gradient(160deg,#4D4D56,#222222);border: 10px solid transparent; border-image: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520) 2 round;text-align: center">
  3.   <div class="row m-5">
  4.     <div class="col-3"></div>
  5.     <div class="col-6">
  6.       <div class="card" style="background: none; border: none;">
  7.         <div class="card-block" style="background: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520); border: 5px outset #98721B; color:#98721B;">
  8.           <h1 class="display-3">Character Name</h1>
  9.           <h2>~ Text Here ~</h2>
  10.         </div>
  11.       </div>
  12.     </div>
  13.     <div class="col-3"></div>
  14.   </div>
  15.   <div class="row m-5">
  16.     <div class="col-12">
  17.       <img src="https://nacolorado.org/cospgs/wp-content/uploads/2020/03/placeholder.png" style="max-height: 400px;">
  18.     </div>
  19.   </div>
  20.   <div class="row m-5">
  21.     <div class="col-lg-4 col-12">
  22.       <div class="card" style="background: none; border: none;">
  23.         <div class="card-block" style="background-color: rgba(0,0,0,0.25);border: 10px solid transparent; border-image: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520) 2 round">
  24.           <div class="card mb-4" style="background: none; border: none;">
  25.             <div class="card-block" style="background: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520); border: 5px outset #98721B; color:#98721B; width: 90%; margin: auto;">
  26.               <h1 class="display-4">Appearance</h1>
  27.             </div>
  28.           </div>
  29.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Feugiat nisl pretium fusce id velit ut. Amet nisl purus in mollis nunc. Lectus urna duis convallis convallis tellus id interdum velit. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Volutpat ac tincidunt vitae semper quis lectus nulla at. Vel eros donec ac odio tempor orci dapibus ultrices. Non enim praesent elementum facilisis. Blandit libero volutpat sed cras ornare arcu. Morbi tincidunt ornare massa eget. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Eu feugiat pretium nibh ipsum. Mauris sit amet massa vitae tortor condimentum. Ut venenatis tellus in metus vulputate eu scelerisque. Urna molestie at elementum eu facilisis. Ornare lectus sit amet est. Accumsan tortor posuere ac ut consequat semper viverra nam. Urna neque viverra justo nec ultrices.
  30.           <br>
  31.           <br>
  32.           Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lobortis mattis aliquam faucibus purus in massa tempor. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla. At varius vel pharetra vel turpis nunc eget lorem dolor. Elit sed vulputate mi sit amet. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Tristique senectus et netus et malesuada fames ac turpis egestas. Eget felis eget nunc lobortis mattis aliquam faucibus. Morbi leo urna molestie at elementum. Bibendum at varius vel pharetra vel turpis nunc eget. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Amet nulla facilisi morbi tempus. Donec et odio pellentesque diam volutpat. Nibh tellus molestie nunc non blandit massa enim nec. Amet porttitor eget dolor morbi non arcu risus quis varius. Aliquam ut porttitor leo a diam.</p>
  33.         </div>
  34.       </div>
  35.     </div>
  36.     <div class="col-lg-4 col-12">
  37.       <div class="card" style="background: none; border: none;">
  38.         <div class="card-block" style="background-color: rgba(0,0,0,0.25);border: 10px solid transparent; border-image: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520) 2 round">
  39.           <div class="card mb-4" style="background: none; border: none;">
  40.             <div class="card-block" style="background: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520); border: 5px outset #98721B; color:#98721B; width: 90%; margin: auto;">
  41.               <h1 class="display-4">Personality</h1>
  42.             </div>
  43.           </div>
  44.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Feugiat nisl pretium fusce id velit ut. Amet nisl purus in mollis nunc. Lectus urna duis convallis convallis tellus id interdum velit. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Volutpat ac tincidunt vitae semper quis lectus nulla at. Vel eros donec ac odio tempor orci dapibus ultrices. Non enim praesent elementum facilisis. Blandit libero volutpat sed cras ornare arcu. Morbi tincidunt ornare massa eget. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Eu feugiat pretium nibh ipsum. Mauris sit amet massa vitae tortor condimentum. Ut venenatis tellus in metus vulputate eu scelerisque. Urna molestie at elementum eu facilisis. Ornare lectus sit amet est. Accumsan tortor posuere ac ut consequat semper viverra nam. Urna neque viverra justo nec ultrices.
  45.           <br>
  46.           <br>
  47.           Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lobortis mattis aliquam faucibus purus in massa tempor. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla. At varius vel pharetra vel turpis nunc eget lorem dolor. Elit sed vulputate mi sit amet. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Tristique senectus et netus et malesuada fames ac turpis egestas. Eget felis eget nunc lobortis mattis aliquam faucibus. Morbi leo urna molestie at elementum. Bibendum at varius vel pharetra vel turpis nunc eget. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Amet nulla facilisi morbi tempus. Donec et odio pellentesque diam volutpat. Nibh tellus molestie nunc non blandit massa enim nec. Amet porttitor eget dolor morbi non arcu risus quis varius. Aliquam ut porttitor leo a diam.</p>
  48.         </div>
  49.       </div>
  50.     </div>
  51.     <div class="col-lg-4 col-12">
  52.       <div class="card" style="background: none; border: none;">
  53.         <div class="card-block" style="background-color: rgba(0,0,0,0.25);border: 10px solid transparent; border-image: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520) 2 round">
  54.           <div class="card mb-4" style="background: none; border: none;">
  55.             <div class="card-block" style="background: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520); border: 5px outset #98721B; color:#98721B; width: 90%; margin: auto;">
  56.               <h1 class="display-4">Abilities</h1>
  57.             </div>
  58.           </div>
  59.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Feugiat nisl pretium fusce id velit ut. Amet nisl purus in mollis nunc. Lectus urna duis convallis convallis tellus id interdum velit. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Volutpat ac tincidunt vitae semper quis lectus nulla at. Vel eros donec ac odio tempor orci dapibus ultrices. Non enim praesent elementum facilisis. Blandit libero volutpat sed cras ornare arcu. Morbi tincidunt ornare massa eget. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Eu feugiat pretium nibh ipsum. Mauris sit amet massa vitae tortor condimentum. Ut venenatis tellus in metus vulputate eu scelerisque. Urna molestie at elementum eu facilisis. Ornare lectus sit amet est. Accumsan tortor posuere ac ut consequat semper viverra nam. Urna neque viverra justo nec ultrices.
  60.           <br>
  61.           <br>
  62.           Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lobortis mattis aliquam faucibus purus in massa tempor. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla. At varius vel pharetra vel turpis nunc eget lorem dolor. Elit sed vulputate mi sit amet. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Tristique senectus et netus et malesuada fames ac turpis egestas. Eget felis eget nunc lobortis mattis aliquam faucibus. Morbi leo urna molestie at elementum. Bibendum at varius vel pharetra vel turpis nunc eget. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Amet nulla facilisi morbi tempus. Donec et odio pellentesque diam volutpat. Nibh tellus molestie nunc non blandit massa enim nec. Amet porttitor eget dolor morbi non arcu risus quis varius. Aliquam ut porttitor leo a diam.</p>
  63.         </div>
  64.       </div>
  65.     </div>
  66.   </div>
  67.   <div class="row m-5">
  68.     <div class="col-lg-6 col-12">
  69.       <div class="card" style="background: none; border: none;">
  70.         <div class="card-block" style="background-color: rgba(0,0,0,0.25);border: 10px solid transparent; border-image: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520) 2 round">
  71.           <div class="card mb-4" style="background: none; border: none;">
  72.             <div class="card-block" style="background: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520); border: 5px outset #98721B; color:#98721B; width: 90%; margin: auto;">
  73.               <h1 class="display-4">Backstory</h1>
  74.             </div>
  75.           </div>
  76.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Feugiat nisl pretium fusce id velit ut. Amet nisl purus in mollis nunc. Lectus urna duis convallis convallis tellus id interdum velit. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Volutpat ac tincidunt vitae semper quis lectus nulla at. Vel eros donec ac odio tempor orci dapibus ultrices. Non enim praesent elementum facilisis. Blandit libero volutpat sed cras ornare arcu. Morbi tincidunt ornare massa eget. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Eu feugiat pretium nibh ipsum. Mauris sit amet massa vitae tortor condimentum. Ut venenatis tellus in metus vulputate eu scelerisque. Urna molestie at elementum eu facilisis. Ornare lectus sit amet est. Accumsan tortor posuere ac ut consequat semper viverra nam. Urna neque viverra justo nec ultrices.
  77.           <br>
  78.           <br>
  79.           Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lobortis mattis aliquam faucibus purus in massa tempor. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla. At varius vel pharetra vel turpis nunc eget lorem dolor. Elit sed vulputate mi sit amet. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Tristique senectus et netus et malesuada fames ac turpis egestas. Eget felis eget nunc lobortis mattis aliquam faucibus. Morbi leo urna molestie at elementum. Bibendum at varius vel pharetra vel turpis nunc eget. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Amet nulla facilisi morbi tempus. Donec et odio pellentesque diam volutpat. Nibh tellus molestie nunc non blandit massa enim nec. Amet porttitor eget dolor morbi non arcu risus quis varius. Aliquam ut porttitor leo a diam.</p>
  80.         </div>
  81.       </div>
  82.       </div>
  83.       <div class="col-lg-6 col-12">
  84.         <div class="card" style="background: none; border: none;">
  85.           <div class="card-block" style="background-color: rgba(0,0,0,0.25);border: 10px solid transparent; border-image: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520) 2 round">
  86.             <div class="card mb-4" style="background: none; border: none;">
  87.               <div class="card-block" style="background: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520); border: 5px outset #98721B; color:#98721B; width: 90%; margin: auto;">
  88.                 <h1 class="display-4">Relations</h1>
  89.               </div>
  90.             </div>
  91.             <div class="row mb-4">
  92.               <div class="col-md-5 col-12">
  93.                 <div class="card" style="background: none; border: none;">
  94.                   <div class="card-block" style="background: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520); border: 5px outset #98721B; color:#98721B; width: 90%; margin: auto; padding: 2px">
  95.                     <h1>Name</h1>
  96.                     <h3 style="font-weight: 300">~ Relation ~</h3>
  97.                   </div>
  98.                 </div>
  99.               </div>
  100.               <div class="col-md-7 col-12">
  101.                 <p style="text-align: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa. Proin fermentum leo vel orci porta non.</p>
  102.               </div>
  103.             </div>
  104.             <div class="row mb-4">
  105.               <div class="col-md-7 col-12">
  106.                 <p style="text-align: right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa. Proin fermentum leo vel orci porta non.</p>
  107.               </div>
  108.               <div class="col-md-5 col-12">
  109.                 <div class="card" style="background: none; border: none;">
  110.                   <div class="card-block" style="background: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520); border: 5px outset #98721B; color:#98721B; width: 90%; margin: auto; padding: 2px">
  111.                     <h1>Name</h1>
  112.                     <h3 style="font-weight: 300">~ Relation ~</h3>
  113.                   </div>
  114.                 </div>
  115.               </div>
  116.             </div>
  117.             <div class="row mb-4">
  118.               <div class="col-md-5 col-12">
  119.                 <div class="card" style="background: none; border: none;">
  120.                   <div class="card-block" style="background: linear-gradient(160deg,#DAA520,#DAA520,#F9F1DC,#DAA520,#DAA520); border: 5px outset #98721B; color:#98721B; width: 90%; margin: auto; padding: 2px">
  121.                     <h1>Name</h1>
  122.                     <h3 style="font-weight: 300">~ Relation ~</h3>
  123.                   </div>
  124.                 </div>
  125.               </div>
  126.               <div class="col-md-7 col-12">
  127.                 <p style="text-align: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa. Proin fermentum leo vel orci porta non.</p>
  128.               </div>
  129.             </div>
  130.           </div>
  131.         </div>
  132.       </div>
  133.   </div>
  134. </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!