API tools faq
paste
Jade-Everstone

Still Here (CQ 2023 April - BS)

Jade-Everstone
May 24th, 2023
1,053
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <!--Rules:
  3.  
  4. Still Here
  5. For the Coders Quarters April 2023 challenge
  6. Layout provided by 8byte: https://toyhou.se/8byte
  7.  
  8. You may
  9. -frankenstein with other codes (as long as the creator of said code allows it)
  10. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  11.  
  12. You may not
  13. -Redistribute, resell, and/or claim its yours
  14. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  15.  
  16. Misc Notes:
  17. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  18. -Some basic html knowledge is recommended for editing
  19.  
  20. Default Colors:
  21. -main color: bg-primary
  22. -dividers, body image bg: bg-secondary
  23.  
  24.  
  25. Change the colors: Ctrl+f and search for the color you want to change.
  26.  
  27. -->
  28.  
  29. <div class="container py-3" style="max-width:600px">
  30.    
  31.     <!-- /// HEADER /// -->
  32.     <div class="row d-flex align-items-end">
  33.        
  34.         <!--character image-->
  35.         <div class="col-md-4">
  36.             <div class="bg-primary align-self-baseline" style="height:120px;width:120px;
  37.                background-image:url( # );
  38.                background-size:contain;
  39.                background-position:center;"></div>
  40.         </div>
  41.        
  42.         <!--Name-->
  43.         <div class="col-md-8">
  44.             <div class="ml-auto">
  45.                 <span style="font-size:3.5em;line-height:1em">Character name</span><br>
  46.                     <div class="bg-secondary mt-1" style="height:5px"></div>
  47.                 </div>
  48.             </div>
  49.        
  50.        </div>
  51.     <!-- /// END HEADER /// -->
  52.    
  53.    
  54.     <!--divider-->
  55.     <div class="d-flex align-items-end mt-2">
  56.         <div class="bg-primary" style="height:30px;width:60%"></div>
  57.         <div class="bg-primary" style="height:30px;width:25%;opacity:50%"></div>
  58.         <div class="bg-primary" style="height:30px;width:15%;opacity:25%"></div>
  59.     </div>
  60.    
  61.     <!-- /// MAIN BODY ///-->
  62.     <div class="bg-faded p-2 p-md-3" style="min-height:200px">
  63.        
  64.         <!-- /// INTRO /// -->
  65.         <div class="row align-items-center">
  66.            
  67.             <!--basic info-->
  68.             <div class="col-md-4">
  69.                 <div style="width:100%">
  70.                     <div class="px-2 bg-primary text-white mt-2 mb-1">GENDER</div>
  71.                     <div style="text-align:right">TEXT</div>
  72.                    
  73.                     <div class="px-2 bg-primary text-white mt-2 mb-1">PRONOUNS</div>
  74.                     <div style="text-align:right">TEXT</div>
  75.                    
  76.                     <div class="px-2 bg-primary text-white mt-2 mb-1">RACE/SPECIES</div>
  77.                     <div style="text-align:right">TEXT</div>
  78.                    
  79.                     <div class="px-2 bg-primary text-white mt-2 mb-1">BIRTHDAY</div>
  80.                     <div style="text-align:right">TEXT</div>
  81.                                
  82.                 </div>
  83.             </div>
  84.            
  85.             <!--about-->
  86.             <div class="col-md-8">
  87.                 <p>This section expands!</p>
  88.                
  89.                 <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. Curabitur ac finibus eros.</p>
  90.                
  91.                 <p>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  92.                
  93.             </div>
  94.            
  95.         </div>
  96.         <!-- /// END INTRO /// -->
  97.        
  98.        
  99.         <!--divider-->
  100.         <div class="bg-secondary my-3 mx-auto" style="height:5px;max-width:400px"></div>
  101.        
  102.        
  103.         <!-- /// TRIVIA /// -->
  104.         <div class="row align-items-center">
  105.            
  106.             <!--trivia-->
  107.             <div class="col-md-8">
  108.                
  109.                 <p><i class="fa-solid fa-arrow-right"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  110.                
  111.                 <p><i class="fa-solid fa-arrow-right"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  112.                
  113.                 <p><i class="fa-solid fa-arrow-right"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  114.                
  115.             </div>
  116.            
  117.             <!--character image-->
  118.             <div class="col-md-4">
  119.                 <div class="card border-0 rounded-0 bg-secondary mx-auto my-2 my-md-auto" style="max-width:200px;height:250px;
  120.                    background-image:url( # );
  121.                    background-size:300px;
  122.                    background-position:top;">
  123.                    
  124.                     <!--image credit-->
  125.                     <span class="text-white" style="font-size:1.25em;position:absolute;right:5px;text-shadow:1px 1px 3px #000000;letter-spacing:2px">
  126.                        
  127.                         <!--image-->
  128.                         <a href="#"><i class="fa-solid fa-image text-white" data-toggle="tooltip" title="img - credit"></i></a>
  129.                        
  130.                     </span>
  131.                    
  132.                 </div>
  133.             </div>
  134.        
  135.         </div>
  136.         <!-- /// END TRIVIA /// -->
  137.        
  138.     </div>
  139.     <!-- /// END MAIN BODY ///-->
  140.    
  141.     <!--divider-->
  142.     <div class="d-flex align-items-end mb-2">
  143.         <div class="bg-primary" style="height:30px;width:15%;opacity:25%"></div>
  144.         <div class="bg-primary" style="height:30px;width:25%;opacity:50%"></div>
  145.         <div class="bg-primary" style="height:30px;width:60%"></div>
  146.     </div>
  147.    
  148.    
  149.     <!-- /// MUSIC /// -->
  150.     <div class="row d-flex align-self-start mb-2">
  151.        
  152.         <!--song info-->
  153.         <div class="col-md-8">
  154.             <span style="font-size:2em;line-height:1em">Still Here (with the ones that i came with)</span><br>
  155.             <div class="bg-secondary my-1" style="height:5px"></div>
  156.             <span style="font-size:1.25em;line-height:1em">Skrillex, Porter Robinson, & Bibi Bourelly </span><br>
  157.        </div>
  158.        
  159.        <!--song-->
  160.        <div class="col-md-4">
  161.            <div class="card border-0 rounded-0 bg-primary text-white align-self-baseline ml-auto" style="height:120px;width:120px;text-align:center;overflow:hidden">
  162.                    
  163.                     <!-- HOW TO CHANGE THE LINK/SONG
  164.                        - Go to youtube and find the song you want to use
  165.                        - the page link has a string of random letters & numbers at the end of it.
  166.                            (eg: https://www.youtube.com/watch?v= [here] )
  167.                        - copy that string of letters and paste it between embed/ and ?controls-0 in the embed link
  168.                            (eg: src="https://www.youtube-nocookie.com/embed/ [here] ?controls=0" )
  169.                    -->
  170.                                
  171.                     <iframe src="https://www.youtube-nocookie.com/embed/V-gGLTPxEhE?controls=0"
  172.                    frameborder="0"
  173.                    style="position:absolute;right:-60px;top:-50px;width:250px;height:200px;z-index:1;opacity:0.001"></iframe>
  174.                                    
  175.                 <span style="font-size:75px">
  176.                     <i class="fa-regular fa-compact-disc"></i>
  177.                 </span>
  178.             </div>
  179.         </div>
  180.        
  181.     </div>
  182.     <!-- /// END MUSIC /// -->
  183.    
  184.     <!--Credit. You may move it, but please do not delete/remove-->
  185.     <hr class="mt-3 mb-1">
  186.     <p style="text-align:right">HTML by <a href="https://toyhou.se/21264072"><i class='fa-solid fa-heart'></i> Jade-Everstone</a> // Layout by <a href="https://toyhou.se/8byte">8byte</a></p>
  187.    
  188. </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!