API tools faq
paste
Jade-Everstone

characard (CQ November 2023 - CC)

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