snail-legs

28. peppermint

Dec 21st, 2021 (edited)
527
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- to change the background image, switch out the url in "background-image: url(URL HERE);" -->
  2. <div class="container" style="max-width: 450px; color: #000000; margin: auto; padding: 2px; background-image: url(https://images.unsplash.com/photo-1607523920235-edf7b80e8bad); background-size: cover; background-attachment: fixed; border-radius: 15px;">
  3.   <div class="row no-gutters">
  4.     <div class="col-7" style="padding: 2px;">
  5.       <div class="card" style="background-color: #FFFFFF; border: 1px solid #A9DAC7; border-radius: 15px 0 0 0;">
  6.         <div class="card-header border-0 pb-2" style="background: none;">
  7.            
  8.           <!-- header -->
  9.           <h2 class="mb-0" style="font-size: 1.5rem; color: #2B9E86; border-bottom: 1px dotted #2B9E86;">peppermint</h2>
  10.           <p style="color: #808080; margin-top: -3px;"><i>info - info - info</i></p>
  11.          
  12.         </div>
  13.         <div class="card-block pt-0" style="height: 150px; overflow-y: auto;">
  14.            
  15.           <!-- main text -->
  16.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  17.          
  18.         </div>
  19.       </div>
  20.     </div>
  21.     <div class="col-5" style="padding: 2px;">
  22.        
  23.       <!-- main image - again, change the url in "background-image: url(URL HERE);" -->
  24.       <div class="card" style="background-image: url(https://cdn.discordapp.com/attachments/730913454726316074/922886329229004860/snail.png); background-size: cover; background-position: center; background-color: #FFFFFF; height: 100%; min-height: 150px; border: 1px solid #A9DAC7; border-radius: 0 15px 0 0;"></div>
  25.      
  26.     </div>
  27.     <div class="col-12" style="padding: 2px;">
  28.       <div class="card" style="background-color: #FFFFFF; border: 1px solid #A9DAC7; border-radius: 0 0 15px 15px;">
  29.         <a class="text-center p-1" style="color: #2B9E86;" data-toggle="collapse" href="#more" role="button">
  30.         <i class="fas fa-chevron-down"></i>
  31.         </a>
  32.         <div class="collapse" id="more">
  33.           <div class="card-block pt-0">
  34.              
  35.             <!-- notes section -->
  36.             <h3 class="mb-2" style="color: #2B9E86; border-bottom: 1px dotted #2B9E86;">notes</h3>
  37.             <ul style="list-style-type: square; padding-left: 20px;">
  38.               <li>lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
  39.               <li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio</li>
  40.               <li>Donec accumsan tempor lacus, et venenatis elit feugiat non</li>
  41.             </ul>
  42.            
  43.             <!-- code credit - a good place to add any images credits too -->
  44.             <p style="text-align: center; color: #808080; margin-bottom: -10px;"><i>code by <a href="https://toyhou.se/snail-legs" style="color: #2B9E86; text-decoration: underline;">snail-legs</a></i></p>
  45.            
  46.           </div>
  47.         </div>
  48.       </div>
  49.     </div>
  50.   </div>
  51. </div>
RAW Paste Data Copied