API tools faq
paste
Jade-Everstone

Picture This (CQ 2021 December)

Jade-Everstone
Dec 24th, 2021 (edited)
1,019
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.69 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--
  4.  
  5. For the Coder Quarters December Challenge!: https://toyhou.se/~world/82691.coders-quarters/page/45336.december-challenge
  6.  
  7. Rules:
  8.  
  9. You may
  10. -frankenstein with other codes (as long as the creator of said code allows it)
  11. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  12.  
  13. You may not
  14. -Redistribute, resell, and/or claim its yours
  15. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  16.  
  17. Misc Notes:
  18. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  19. -Some basic html knowledge is recommended for editing
  20.  
  21. -->
  22.  
  23. <div class="container my-4" style="max-width:750px">
  24.    
  25.    
  26.     <div class="row">
  27.        
  28.         <!--Character info-->
  29.        
  30.         <div class="col-12 col-lg-7 mb-3 order-2 order-lg-1">
  31.             <div class="card border-0 rounded-0 bg-faded p-2 h-100" style="box-shadow:1px 2px 5px rgba(0,0,0,0.4);text-align:center">
  32.                
  33.                 <div class="card-body" style="margin-top:auto;margin-bottom:auto">
  34.                    
  35.                     <span style="font-size:2.5em">CHARACTER NAME</span>
  36.                     <br>
  37.                     <span>gender - pro/noun - misc.</span>
  38.                    
  39.                     <hr>
  40.                    
  41.                     <p>Have a lot of info? this section will expand! <br> (note: card image in this row won't expand)</p>
  42.                    
  43.                     <p>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.</p>
  44.                 </div>
  45.                
  46.             </div>
  47.         </div>
  48.        
  49.         <!--end Character info-->
  50.        
  51.        
  52.         <!--Character image-->
  53.        
  54.         <div class="col-12 col-lg-5 mb-3 order-1 order-lg-2">
  55.             <div class="card border-0 rounded-0 bg-faded p-2" style="box-shadow:1px 2px 5px rgba(0,0,0,0.4); min-height:300px;max-height:350px;max-width:300px;margin-left:auto;margin-right:auto;
  56.                background-image:url( img link );
  57.                background-size:cover;
  58.                background-position:center">
  59.                
  60.                 <!--Image credit-->
  61.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:3px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  62.                
  63.             </div>
  64.         </div>
  65.        
  66.         <!--end Character image-->
  67.        
  68.        
  69.     </div>
  70.    
  71.    
  72.     <!--Moodboard-->
  73.    
  74.     <div class="row">
  75.        
  76.        
  77.         <!--img 1-->
  78.        
  79.         <div class="col-6 col-sm-3 mb-3">
  80.             <div class="card border-0 rounded-0 bg-success p-2 h-100" style="box-shadow:1px 2px 5px rgba(0,0,0,0.4); min-height:150px;
  81.                background-image:url( img link );
  82.                background-size:cover;
  83.                background-position:center">
  84.                
  85.                 <!--Image credit-->
  86.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:3px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  87.                
  88.             </div>
  89.         </div>
  90.        
  91.        
  92.         <!--img 2-->
  93.        
  94.         <div class="col-6 col-sm-3 mb-3">
  95.             <div class="card border-0 rounded-0 bg-danger p-2 h-100" style="box-shadow:1px 2px 5px rgba(0,0,0,0.4); min-height:150px;
  96.                background-image:url( img link );
  97.                background-size:cover;
  98.                background-position:center">
  99.                
  100.                 <!--Image credit-->
  101.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:3px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  102.                
  103.             </div>
  104.         </div>
  105.        
  106.        
  107.         <!--img 3-->
  108.        
  109.         <div class="col-6 col-sm-3 mb-3">
  110.             <div class="card border-0 rounded-0 bg-info p-2 h-100" style="box-shadow:1px 2px 5px rgba(0,0,0,0.4); min-height:150px;
  111.                background-image:url( img link );
  112.                background-size:cover;
  113.                background-position:center">
  114.                
  115.                 <!--Image credit-->
  116.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:3px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  117.                
  118.             </div>
  119.         </div>
  120.        
  121.        
  122.         <!--img 4-->
  123.        
  124.         <div class="col-6 col-sm-3 mb-3">
  125.             <div class="card border-0 rounded-0 bg-warning p-2 h-100" style="box-shadow:1px 2px 5px rgba(0,0,0,0.4); min-height:150px;
  126.                background-image:url( img link );
  127.                background-size:cover;
  128.                background-position:center">
  129.                
  130.                 <!--Image credit-->
  131.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:3px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  132.                
  133.             </div>
  134.         </div>
  135.        
  136.     </div>
  137.    
  138.     <!--end moodboard-->
  139.    
  140.  
  141. <!--Credit. You may move it, but please do not delete/remove-->
  142. <p style="text-align:right">HTML by <a href="https://toyhou.se/14029945" style="color:#"><i class='fa fa-heart'></i> Jade-Everstone</a></p>
  143.    
  144. </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!