Advertisement
snail-legs

22. midnight oil [recode]

Sep 18th, 2021
2,797
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.36 KB | None | 0 0
  1. <!-- nested cards to make the funky border effect -->
  2. <div class="card m-auto" style="max-width: 800px; border: 1px solid #297073; padding: 3px;">
  3.   <div class="card m-auto" style="max-width: 800px; border: 2px solid #297073; padding: 2px;">
  4.     <div class="card m-auto" style="max-width: 800px; border: 3px solid #297073; padding: 1px;">
  5.      
  6.       <!-- main container -->
  7.       <div class="card m-auto border-0" style="background-color: #082C36; color: #FFFFFF; max-width: 800px; border-radius: 0;">
  8.        
  9.         <!-- header - character name and quick info -->
  10.         <div class="card-header text-center border-0 pb-0" style="background-color: #297073; border-radius: 0;">
  11.           <h1 class="display-3 mb-0">CHARACTER NAME</h1>
  12.           <p class="text-center pb-3">pronouns . age . title . other info</p>
  13.         </div>
  14.        
  15.         <!-- biography section -->
  16.         <div class="card-block pb-1 pt-2">
  17.            
  18.           <!-- section heading -->
  19.           <h4 class="text-center pb-1" style="border-bottom: 2px solid #297073;">BIOGRAPHY</h4>
  20.          
  21.           <div class="container">
  22.             <div class="row">
  23.               <div class="col-4">
  24.                 <!-- bio image - replace the # with your image URL -->
  25.                 <div class="card border-0" style="background-image: url(#); background-color: #20414A; background-size: cover; background-position: center; height: 250px; border-radius: 0;"></div>
  26.               </div>
  27.              
  28.               <!-- section content - biography -->
  29.               <div class="col-8 pt-1 pb-2" style="height: 250px; overflow-y: auto; background-color: #20414A;">
  30.                 <p>
  31.                   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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  32.                 </p>
  33.                 <p>
  34.                   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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  35.                 </p>
  36.                 <p>
  37.                   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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  38.                 </p>
  39.               </div>
  40.              
  41.             </div>
  42.           </div>
  43.           <hr class="border-0">
  44.          
  45.           <!-- trivia and design notes section -->
  46.           <div class="container">
  47.             <div class="row no-gutters">
  48.               <div class="col-md-6 p-1">
  49.                  
  50.                 <!-- section heading - trivia -->
  51.                 <h4 class="text-center pb-1" style="border-bottom: 2px solid #297073;">TRIVIA</h4>
  52.                
  53.                 <!-- section content -->
  54.                 <div style="height: 200px; overflow-y: auto; background-color: #20414A;" class="pr-1 pt-1">
  55.                   <ul class="fa-ul">
  56.                      
  57.                     <li><span class="fa-li"><i class="fas fa-heart" style="color: #19AE83;"></i></span>
  58.                     first bit of trivia</li>
  59.                      
  60.                     <li><span class="fa-li"><i class="fas fa-heart" style="color: #19AE83;"></i></span>
  61.                     second bit of trivia</li>
  62.                    
  63.                     <li><span class="fa-li"><i class="fas fa-heart" style="color: #19AE83;"></i></span>
  64.                     third bit of trivia</li>
  65.                    
  66.                   </ul>
  67.                 </div>
  68.                 <hr class="border-0">
  69.               </div>
  70.               <div class="col-md-6 p-1">
  71.                
  72.                 <!-- section heading - design notes -->
  73.                 <h4 class="text-center pb-1" style="border-bottom: 2px solid #297073;">DESIGN NOTES</h4>
  74.                
  75.                 <!-- section content -->
  76.                 <div style="height: 200px; overflow-y: auto; background-color: #20414A;" class="pr-1 pt-1">
  77.                   <ul class="fa-ul">
  78.                      
  79.                     <li><span class="fa-li"><i class="fas fa-pen" style="color: #19AE83;"></i></span>
  80.                     first design note</li>
  81.                    
  82.                     <li><span class="fa-li"><i class="fas fa-pen" style="color: #19AE83;"></i></span>
  83.                     second design note</li>
  84.                      
  85.                     <li><span class="fa-li"><i class="fas fa-pen" style="color: #19AE83;"></i></span>
  86.                     third design note</li>
  87.                   </ul>
  88.                  
  89.                 </div>
  90.                 <hr class="border-0">
  91.               </div>
  92.             </div>
  93.           </div>
  94.          
  95.           <!-- section heading - relationships -->
  96.           <h4 class="text-center pb-1 mb-1" style="border-bottom: 2px solid #297073;">RELATIONSHIPS</h4>
  97.          
  98.           <!-- section content -->
  99.           <div class="container pb-1">
  100.             <div class="row no-gutters">
  101.            
  102.               <!-- relationship 1 -->
  103.               <div class="col-3 p-1">
  104.                  
  105.                 <!-- character image - replace the # with your image URL -->
  106.                 <div class="card border-0" style="background-image: url(#); background-color: #20414A; background-size: cover; background-position: center; border-radius: 0;">
  107.                   <div style="padding-top: 100%;"></div>
  108.                  
  109.                   <!-- character name and description -->
  110.                   <div class="p-1" style="background-color: #20414A;">
  111.                     <h6 class="text-center m-0">CHARACTER NAME</h6>
  112.                     <p class="text-center" style="line-height: 1.2;">short description of relationship</p>
  113.                     <a href="#" class="stretched-link"></a>
  114.                   </div>
  115.                 </div>
  116.               </div>
  117.              
  118.               <!-- relationship 2 -->
  119.               <div class="col-3 p-1">
  120.                  
  121.                 <!-- character image - replace the # with your image URL -->
  122.                 <div class="card border-0" style="background-image: url(#); background-color: #20414A; background-size: cover; background-position: center; border-radius: 0;">
  123.                   <div style="padding-top: 100%;"></div>
  124.                  
  125.                   <!-- character name and description -->
  126.                   <div class="p-1" style="background-color: #20414A;">
  127.                     <h6 class="text-center m-0">CHARACTER NAME</h6>
  128.                     <p class="text-center" style="line-height: 1.2;">short description of relationship</p>
  129.                     <a href="#" class="stretched-link"></a>
  130.                   </div>
  131.                 </div>
  132.               </div>
  133.              
  134.               <!-- relationship 3 -->
  135.               <div class="col-3 p-1">
  136.                  
  137.                 <!-- character image - replace the # with your image URL -->
  138.                 <div class="card border-0" style="background-image: url(#); background-color: #20414A; background-size: cover; background-position: center; border-radius: 0;">
  139.                   <div style="padding-top: 100%;"></div>
  140.                  
  141.                   <!-- character name and description -->
  142.                   <div class="p-1" style="background-color: #20414A;">
  143.                     <h6 class="text-center m-0">CHARACTER NAME</h6>
  144.                     <p class="text-center" style="line-height: 1.2;">short description of relationship</p>
  145.                     <a href="#" class="stretched-link"></a>
  146.                   </div>
  147.                 </div>
  148.               </div>
  149.              
  150.               <!-- relationship 4 -->
  151.               <div class="col-3 p-1">
  152.                  
  153.                 <!-- character image - replace the # with your image URL -->
  154.                 <div class="card border-0" style="background-image: url(#); background-color: #20414A; background-size: cover; background-position: center; border-radius: 0;">
  155.                   <div style="padding-top: 100%;"></div>
  156.                  
  157.                   <!-- character name and description -->
  158.                   <div class="p-1" style="background-color: #20414A;">
  159.                     <h6 class="text-center m-0">CHARACTER NAME</h6>
  160.                     <p class="text-center" style="line-height: 1.2;">short description of relationship</p>
  161.                     <a href="#" class="stretched-link"></a>
  162.                   </div>
  163.                 </div>
  164.               </div>
  165.             </div>
  166.           </div>
  167.         </div>
  168.        
  169.         <!-- code credit - also a good place to put image credits! -->
  170.         <div class="card-footer text-center text-light border-0 p-2" style="background-color: #297073;  border-radius: 0;">
  171.           <p class="pb-1">code by <a href="https://toyhou.se/snail-legs" style="color: #FFFFFF; text-decoration: underline;">snail-legs</a></p>
  172.         </div>
  173.       </div>
  174.      
  175.     </div>
  176.   </div>
  177. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement