API tools faq
paste
Advertisement
Jade-Everstone

characard (CQ November 2023 - BS)

Jade-Everstone
Nov 25th, 2023 (edited)
723
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.82 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <!--Rules:
  3.  
  4. Chara-Card (bootstrap vers)
  5. For the Coders Quarters November 2023 challenge
  6.  
  7. You may
  8. -frankenstein with other codes (as long as the creator of said code allows it)
  9. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  10.  
  11. You may not
  12. -Redistribute, resell, and/or claim its yours
  13. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  14.  
  15. Misc Notes:
  16. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  17. -Some basic html knowledge is recommended for editing
  18.  
  19. Default Colors:
  20. - Info section: bg-faded
  21. - Character image bg tint: rgba(0,0,0,0.25)
  22. - Dividers, info badges: bg-primary
  23.    - subheader-divider: bg-secondary
  24.  
  25. Change the colors: Ctrl+f and search for the color you want to change.
  26.  
  27. -->
  28.  
  29.  
  30. <div class="container">
  31.  
  32.  
  33. <!-- /// NAV /// -->    
  34. <div class="mb-2">
  35.     <strong class="bg-primary text-white px-2 mr-2">Jump to...</strong>
  36.     <a href="#basic">Basic Info</a> //
  37.     <a href="#story">Backstory</a> //
  38.     <a href="#trivia">Trivia</a> //
  39.     <a href="#links">Links</a>
  40. </div>
  41. <!-- /// END NAV /// -->
  42.  
  43.  
  44. <!-- /// MAIN BODY /// -->
  45.  
  46.     <!--background image-->
  47. <div style="max-width:1200px;min-height:600px;
  48.    box-shadow:2px 2px 5px rgba(0,0,0,0.5);
  49.    overflow:hidden;
  50.    background-image:url( url here);
  51.    background-size:cover;
  52.    background-position:center;
  53.    background-attachment:fixed;">
  54.    
  55.     <div class="row no-gutters">
  56.        
  57.         <!-- /// INFO SECTION /// -->
  58.         <div class="col-lg-5 col-xl-4 order-2 order-lg-1">
  59.             <div class="p-3 table-responsive bg-faded" style="height:700px;box-shadow:3px 0px 5px rgba(0,0,0,0.5);">
  60.                
  61.                
  62.                 <!-- /// BASIC INFO /// -->
  63.                 <h1 style="font-size:2.5em" id="basic">Character Name</h1>
  64.                 <div class="bg-primary mb-3" style="height:5px"></div>
  65.                
  66.                 <!--the basics-->
  67.                 <div class="row">
  68.                     <div class="col-sm-6 mb-2">
  69.                         <strong class="bg-primary text-white px-2 mr-2">Gender</strong><br> Text
  70.                     </div>
  71.                    
  72.                     <div class="col-sm-6 mb-2">
  73.                         <strong class="bg-primary text-white px-2 mr-2">Pronouns</strong><br> (pro/noun)
  74.                     </div>
  75.                    
  76.                     <div class="col-sm-6 mb-2">
  77.                         <strong class="bg-primary text-white px-2 mr-2">Birthday</strong><br> 00/00
  78.                     </div>
  79.                    
  80.                     <div class="col-sm-6 mb-2">
  81.                         <strong class="bg-primary text-white px-2 mr-2">Species/Race</strong><br> Text
  82.                     </div>
  83.                    
  84.                     <div class="col-sm-6 mb-2">
  85.                         <strong class="bg-primary text-white px-2 mr-2">Title</strong><br> Text
  86.                     </div>
  87.                    
  88.                     <div class="col-sm-6 mb-2">
  89.                         <strong class="bg-primary text-white px-2 mr-2">Title</strong><br> Text
  90.                     </div>
  91.                 </div>
  92.                
  93.                 <hr style="border-width:3px">
  94.                
  95.                 <!--blurb-->
  96.                 <p>This entire section scrolls!</p>
  97.                
  98.                 <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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  99.                
  100.                 <!--quote-->
  101.                 <div class="card rounded-0 p-2 mb-3" style="border-width:0px 0px 0px 10px;font-size:1.2em">
  102.                     "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
  103.                 </div>
  104.                 <!-- /// END BASIC INFO /// -->
  105.                
  106.                
  107.                 <hr style="border-width:3px">
  108.                
  109.                
  110.                 <!-- /// BACKSTORY /// -->
  111.                 <h2 style="font-size:2em" id="story">Backstory</h2>
  112.                 <div class="bg-primary mb-3" style="height:5px"></div>
  113.                
  114.                 <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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  115.                
  116.                 <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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  117.                
  118.                 <h3 style="font-size:1.5em">Subheader</h3>
  119.                 <div class="bg-secondary mb-3" style="height:3px"></div>
  120.                
  121.                 <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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  122.                 <!-- /// END BACKSTORY /// -->
  123.                
  124.                
  125.                 <hr style="border-width:3px">
  126.                
  127.                
  128.                 <!-- /// TRIVIA /// -->
  129.                 <h2 style="font-size:2em" id="trivia">Trivia</h2>
  130.                 <div class="bg-primary mb-3" style="height:5px"></div>
  131.                
  132.                 <ul>
  133.                     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  134.                     <li>Quisque venenatis fermentum metus, eu consequat lorem laoreet eget.</li>
  135.                     <li>Duis gravida volutpat facilisis.</li>
  136.                     <li>Fusce id erat facilisis, molestie justo non, mattis est.</li>
  137.                 </ul>
  138.                
  139.                
  140.                 <!--playlist-->
  141.                 <h3 style="font-size:1.5em">Playlist</h3>
  142.                 <div class="bg-secondary mb-2" style="height:3px"></div>
  143.                
  144.                 <a href="#" target="_blank" style="font-size:1.5em">
  145.                     <i class="fa-regular fa-circle-play"></i> Song Title - Artist Name
  146.                 </a><br>
  147.                 <a href="#" target="_blank" style="font-size:1.5em">
  148.                     <i class="fa-regular fa-circle-play"></i> Song Title - Artist Name
  149.                 </a><br>
  150.                 <a href="#" target="_blank" style="font-size:1.5em">
  151.                     <i class="fa-regular fa-circle-play"></i> Song Title - Artist Name
  152.                 </a><br>
  153.                 <a href="#" target="_blank" style="font-size:1.5em">
  154.                     <i class="fa-regular fa-circle-play"></i> Song Title - Artist Name
  155.                 </a><br>
  156.                 <a href="#" target="_blank" style="font-size:1.5em">
  157.                     <i class="fa-regular fa-circle-play"></i> Song Title - Artist Name
  158.                 </a><br>
  159.                 <!-- /// END TRIVIA /// -->
  160.                
  161.                 <hr style="border-width:3px">
  162.                
  163.                
  164.                 <!-- /// LINKS /// -->
  165.                 <h2 style="font-size:2em" id="links">Links</h2>
  166.                 <div class="bg-primary mb-3" style="height:5px"></div>
  167.                
  168.                 <!-- // Character 1 // -->
  169.                 <div class="row">
  170.                    
  171.                     <!--image-->
  172.                     <div class="col-sm-4">
  173.                         <div class="bg-secondary mx-auto mb-2" style="height:100px;width:100px;box-shadow:2px 2px 5px rgba(0,0,0,0.5)
  174.                        background-image:url( url here);
  175.                        background-size:cover;
  176.                        background-position:center;"></div>
  177.                     </div>
  178.                    
  179.                     <!--Blurb-->
  180.                     <div class="col-sm-8">
  181.                         <a href="#" style="font-size:1.5em">Character Name</a><br>
  182.                         <em>Relationship</em>
  183.                         <div class="bg-secondary mb-2" style="height:3px"></div>
  184.                         <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.</p>
  185.                     </div>
  186.                    
  187.                 </div>
  188.                 <hr style="border-width:3px">
  189.                 <!-- // End Character 1 // -->
  190.                
  191.                
  192.                 <!-- // Character 2 // -->
  193.                 <div class="row">
  194.                    
  195.                     <!--image-->
  196.                     <div class="col-sm-4">
  197.                         <div class="bg-secondary mx-auto mb-2" style="height:100px;width:100px;box-shadow:2px 2px 5px rgba(0,0,0,0.5)
  198.                        background-image:url( url here);
  199.                        background-size:cover;
  200.                        background-position:center;"></div>
  201.                     </div>
  202.                    
  203.                     <!--Blurb-->
  204.                     <div class="col-sm-8">
  205.                         <a href="#" style="font-size:1.5em">Character Name</a><br>
  206.                         <em>Relationship</em>
  207.                         <div class="bg-secondary mb-2" style="height:3px"></div>
  208.                         <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.</p>
  209.                     </div>
  210.                    
  211.                 </div>
  212.                 <hr style="border-width:3px">
  213.                 <!-- // End Character 2 // -->
  214.                
  215.                
  216.                 <!-- // Character 3 // -->
  217.                 <div class="row">
  218.                    
  219.                     <!--image-->
  220.                     <div class="col-sm-4">
  221.                         <div class="bg-secondary mx-auto mb-2" style="height:100px;width:100px;box-shadow:2px 2px 5px rgba(0,0,0,0.5)
  222.                        background-image:url( url here);
  223.                        background-size:cover;
  224.                        background-position:center;"></div>
  225.                     </div>
  226.                    
  227.                     <!--Blurb-->
  228.                     <div class="col-sm-8">
  229.                         <a href="#" style="font-size:1.5em">Character Name</a><br>
  230.                         <em>Relationship</em>
  231.                         <div class="bg-secondary mb-2" style="height:3px"></div>
  232.                         <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.</p>
  233.                     </div>
  234.                    
  235.                 </div>
  236.                 <hr style="border-width:3px">
  237.                 <!-- // End Character 3 // -->
  238.                
  239.                
  240.                 <!-- /// END LINKS /// -->
  241.                
  242.             </div>
  243.         </div>
  244.         <!-- /// END INFO SECTION /// -->
  245.        
  246.        
  247.         <!-- /// IMAGE SECTION /// -->
  248.         <div class="col-lg-7 col-xl-8 order-1 order-lg-2" style="text-align:center">
  249.            
  250.             <!-- // parent div //
  251.                I wrapped the character image in a div so it's easier to make tweaks and keep it responsive w/o breaking the layout.
  252.                'background-color' can be removed if you don't want the tint
  253.            -->
  254.             <div class="p-2 h-100" style="max-height:700px;
  255.                background-color:rgba(0,0,0,0.25);
  256.                overflow:hidden">
  257.                
  258.                 <!-- // Charactrer image //
  259.                    Default width: 650px. I set the max-width to 100% so it'll resize for smaller viewports.
  260.                -->
  261.                 <img src=" url here " alt="character image 650px wide" class="img-fluid" style="width:650px;max-width:100%">
  262.             </div>
  263.            
  264.         </div>
  265.         <!-- /// IMAGE SECTION /// -->
  266.        
  267.     </div>
  268.    
  269. </div>
  270. <!-- /// END MAIN BODY /// -->
  271.  
  272.  
  273. <!--Credit. You may move it, but please do not delete/remove-->
  274. <p class="mt-2" style="text-align:right">HTML by <a href="https://toyhou.se/24526995"><i class='fa-solid fa-heart'></i> Jade-Everstone</a> // bg - <a href="">Credit</a> // OC pic - <a href="">Credit</a></p>
  275.    
  276. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!