API tools faq
paste
Advertisement
Jade-Everstone

I Miss You (CQ March 2023 - CC)

Jade-Everstone
Mar 16th, 2023
1,113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3.  
  4. <!--Rules:
  5.  
  6. I miss you
  7.  
  8. For the Coders Quarters March 2023 Challenge
  9.  
  10. You may
  11. -frankenstein with other codes (as long as the creator of said code allows it)
  12. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  13. -use offsite
  14.  
  15. You may not
  16. -Redistribute, resell, and/or claim its yours
  17. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  18.  
  19. Misc Notes:
  20. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  21. -Some basic html knowledge is recommended for editing
  22.  
  23. Default Colors (Custom Color vers):
  24. - links/pfp bg: #6db1c6
  25. - Main text/credit links: #ffffff
  26. - headers: #413f73
  27. - main bg: #1c1c29
  28. - image bgs, sidebar bgs: #262736
  29.  
  30. Change the colors: Ctrl+f and search for the color you want to change.
  31.  
  32. -->
  33.  
  34.  
  35. <div class="mx-auto" style="max-width:500px">
  36.    
  37.     <div style="border-style:solid;border-width:2px;border-color:rgba(0,0,0,0.3);box-shadow:3px 3px 0px rgba(0,0,0,0.3);color:#ffffff;background-color:#1c1c29">
  38.        
  39.        
  40.        
  41.         <!-- /// Main info /// -->
  42.         <div class="px-2 py-1 text-white" style="font-size:2em;font-weight:bold;letter-spacing:1px;text-align:right;background-color:#413f73">
  43.             Username
  44.         </div>
  45.        
  46.         <!--header image-->
  47.         <div style="min-height:250px;background-color:#262736;
  48.        background-image:url(https://images.unsplash.com/photo-1534085838602-9624ac7ab9e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
  49.        background-size:cover;
  50.        background-position:bottom">
  51.            
  52.             <!--Image Credits-->
  53.             <a href="https://unsplash.com/photos/6jjvx8sZrRc" target="_blank"
  54.                data-toggle="tooltip"
  55.                title="img - unsplash"
  56.                style="position:relative;left:5px;top:3px;font-size:1.1em;text-shadow:3px 3px 0px rgba(0,0,0,0.3)">
  57.                 <i class="fa-solid fa-image text-white"></i>
  58.             </a>
  59.            
  60.         </div>
  61.        
  62.         <div style="height:25px;background-color:#413f73"></div>
  63.        
  64.         <div class="row no-gutters">
  65.             <div class="col-sm-4">
  66.                
  67.                 <div class="p-2 h-100" style="min-height:100px;background-color:#262736">
  68.                    
  69.                     <!--user image-->
  70.                     <div class="mb-2" style="
  71.                        height:125px;width:125px;
  72.                        margin-left:auto;margin-right:auto;margin-top:-120px;
  73.                        box-shadow:3px 3px 0px rgba(0,0,0,0.3);
  74.                        background-color:#6db1c6;
  75.                        background-image:url( )"></div>
  76.                    
  77.                     <!--basic info-->
  78.                     <span>(Pref.) name</span><hr class="mt-0 mb-1">
  79.                     <span>Gender</span><hr class="mt-0 mb-1">
  80.                     <span>Pro/Noun</span>
  81.                    
  82.                     <hr class="my-2" style="border-width:2px">
  83.                    
  84.                     <!--Socials-->
  85.                     <a href="#" target="_blank" style="color:#6db1c6"><i class="fa-solid fa-circle"></i>
  86.                     Social Link
  87.                     </a><hr class="mt-0 mb-1">
  88.                    
  89.                     <a href="#" target="_blank" style="color:#6db1c6"><i class="fa-solid fa-circle"></i>
  90.                     Social Link
  91.                     </a><hr class="mt-0 mb-1">
  92.                    
  93.                     <a href="#" target="_blank" style="color:#6db1c6"><i class="fa-solid fa-circle"></i>
  94.                     Social Link
  95.                     </a>
  96.                    
  97.                 </div>
  98.             </div>
  99.            
  100.             <!--info-->
  101.             <div class="col-sm-8">
  102.                 <div class="p-2 h-100" style="min-height:200px">
  103.                     <p>An introduction to yourself. I would recommend not putting revealing info here though. Safety first yunno.</p>
  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.</p>
  105.                 </div>
  106.             </div>
  107.            
  108.         </div>
  109.         <!-- /// End Main info /// -->
  110.        
  111.        
  112.        
  113.         <!-- /// Art Status /// -->
  114.         <div class="px-2 py-1 text-white" style="font-size:1.5em;font-weight:bold;letter-spacing:1px;background-color:#413f73">
  115.             Art Status
  116.         </div>
  117.        
  118.         <div class="row no-gutters">
  119.            
  120.             <!--info-->
  121.             <div class="col-sm-8">
  122.                 <div class="p-2 h-100">
  123.                    
  124.                     <!--basic stats-->
  125.                     <div class="d-flex flex-wrap">
  126.                         <span class="mr-auto" style="font-weight:bold">Commissions</span>
  127.                         <span>Status</span>
  128.                     </div>
  129.                     <hr class="mt-0 mb-2">
  130.                    
  131.                     <div class="d-flex flex-wrap">
  132.                         <span class="mr-auto" style="font-weight:bold">Trades</span>
  133.                         <span>Status</span>
  134.                     </div>
  135.                     <hr class="mt-0 mb-2">
  136.                    
  137.                     <div class="d-flex flex-wrap">
  138.                         <span class="mr-auto" style="font-weight:bold">Requests</span>
  139.                         <span>Status</span>
  140.                     </div>
  141.                    
  142.                     <!--blurb-->
  143.                     <hr class="mt-0 mb-2">
  144.                    
  145.                     <p>More notes about the above: ongoing projects, hiatuses, how busy you are, trello links, etc.</p>
  146.                    
  147.                 </div>
  148.             </div>
  149.            
  150.             <!--sidebar image-->
  151.             <div class="col-sm-4">
  152.                 <div class="h-100" style="position:sticky;top:0px;min-height:150px;background-color:#262736;
  153.                    background-image:url(https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
  154.                    background-size:cover;
  155.                    background-position:center;
  156.                    text-align:right">
  157.                    
  158.                     <!--Image Credits-->
  159.                     <a href="https://unsplash.com/photos/XJXWbfSo2f0" target="_blank"
  160.                        data-toggle="tooltip"
  161.                        title="img - unsplash"
  162.                        style="position:relative;right:5px;top:3px;font-size:1.1em;text-shadow:3px 3px 0px rgba(0,0,0,0.3)">
  163.                         <i class="fa-solid fa-image text-white"></i>
  164.                     </a>
  165.            
  166.                 </div>
  167.             </div>
  168.            
  169.         </div>
  170.         <!-- /// End Art Status /// -->
  171.        
  172.        
  173.        
  174.         <!-- /// Notice /// -->
  175.         <div class="px-2 py-1 text-white" style="font-size:1.5em;font-weight:bold;letter-spacing:1px;text-align:right;background-color:#413f73">
  176.             Notice
  177.         </div>
  178.        
  179.         <div class="row no-gutters">
  180.            
  181.             <!--sidebar image-->
  182.             <div class="col-sm-3 order-2 order-sm-1">
  183.                 <div class="h-100" style="position:sticky;top:0px;min-height:150px;background-color:#262736;
  184.                    background-image:url(https://images.unsplash.com/photo-1600201574319-ac79b6dab11c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80);
  185.                    background-size:cover;
  186.                    background-position:center">
  187.                    
  188.                     <!--Image Credits-->
  189.                     <a href="https://unsplash.com/photos/0flJkZkv4DA" target="_blank"
  190.                        data-toggle="tooltip"
  191.                        title="img - unsplash"
  192.                        style="position:relative;left:5px;top:3px;font-size:1.1em;text-shadow:3px 3px 0px rgba(0,0,0,0.3)">
  193.                         <i class="fa-solid fa-image text-white"></i>
  194.                     </a>
  195.                    
  196.                 </div>
  197.             </div>
  198.            
  199.             <!--info-->
  200.             <div class="col-sm-9 order-1 order-sm-2">
  201.                 <div class="p-2">
  202.                    
  203.                     <p><i class="fa-solid fa-circle"></i> A Content Warning, BYF, DNI, Misc. Notes section. Again, best to avoid putting personal info here.</p>
  204.                     <p><i class="fa-solid fa-circle"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  205.                     <p><i class="fa-solid fa-circle"></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>
  206.                    
  207.                    
  208.                 </div>
  209.             </div>
  210.                
  211.         </div>
  212.         <!-- /// End Notice /// -->
  213.        
  214.        
  215.        
  216.         <!-- /// Featured OCs /// -->
  217.         <div class="px-2 py-1 text-white" style="font-size:1.5em;font-weight:bold;letter-spacing:1px;background-color:#413f73">
  218.             Featured OCs
  219.         </div>
  220.        
  221.         <div class="row no-gutters">
  222.            
  223.             <!--Character 1-->
  224.             <div class="col-sm-4">
  225.                 <a href="#">
  226.                    
  227.                     <!--chara image-->
  228.                     <div style="min-height:175px;background-color:#262736;
  229.                        background-image:url( );
  230.                        background-size:cover;
  231.                        background-position:center">
  232.                        
  233.                         <span class="badge rounded-0 m-2" style="font-size:1.1em;box-shadow:3px 3px 0px rgba(0,0,0,0.3);position:absolute;bottom:0px;background-color:#413f73">Character Name</span>
  234.                        
  235.                     </div>
  236.                 </a>
  237.             </div>
  238.            
  239.            
  240.             <!--Character 2-->
  241.             <div class="col-sm-4">
  242.                 <a href="#">
  243.                    
  244.                     <!--chara image-->
  245.                     <div style="min-height:175px;background-color:#262736;
  246.                        background-image:url( );
  247.                        background-size:cover;
  248.                        background-position:center">
  249.                        
  250.                         <span class="badge rounded-0 m-2" style="font-size:1.1em;box-shadow:3px 3px 0px rgba(0,0,0,0.3);position:absolute;bottom:0px;background-color:#413f73">Character Name</span>
  251.                        
  252.                     </div>
  253.                 </a>
  254.             </div>
  255.            
  256.            
  257.             <!--Character 3-->
  258.             <div class="col-sm-4">
  259.                 <a href="#">
  260.                    
  261.                     <!--chara image-->
  262.                     <div style="min-height:175px;background-color:#262736;
  263.                        background-image:url( );
  264.                        background-size:cover;
  265.                        background-position:center">
  266.                        
  267.                         <span class="badge rounded-0 m-2" style="font-size:1.1em;box-shadow:3px 3px 0px rgba(0,0,0,0.3);position:absolute;bottom:0px;background-color:#413f73">Character Name</span>
  268.                        
  269.                     </div>
  270.                 </a>
  271.             </div>
  272.            
  273.         </div>
  274.         <!-- /// End Featured OCs /// -->
  275.        
  276.        
  277.        
  278.     </div>
  279.    
  280.    
  281.     <!--Credit: you may move but please do not remove!-->
  282.     <p style="margin-top:5px;text-align:right">
  283.         HTML <a href="https://toyhou.se/20650109" style="color:#6db1c6"><i class='fa-solid fa-heart'></i> Jade-Everstone</a>
  284.     </p>
  285.    
  286. </div>
  287.  
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!