API tools faq
paste
Advertisement
Jade-Everstone

View in (CQ 2023 February)

Jade-Everstone
Feb 17th, 2023
1,457
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.52 KB | None | 1 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <!--Rules:
  3.  
  4. View in
  5.  
  6. For the Coders Quarters Feburary 2023 Challenge
  7. Based on the "Stable" Layout by Togo: https://toyhou.se/Togo
  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. -use offsite
  13.  
  14. You may not
  15. -Redistribute, resell, and/or claim its yours
  16. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  17.  
  18. Misc Notes:
  19. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  20. -Some basic html knowledge is recommended for editing
  21.  
  22. Default Colors:
  23. - Header text: text-white
  24. - credit links: #ffffff
  25.  
  26. Change the colors: Ctrl+f and search for the color you want to change.
  27.  
  28. -->
  29.  
  30. <div class="container" style="max-width:1000px">
  31.    
  32.    
  33.     <div class="row">
  34.        
  35.         <!-- /// Image & basic info /// -->
  36.         <div class="col-lg-4 mb-2">
  37.            
  38.             <!--Background image-->
  39.             <div class="card p-3 h-100 border-0 rounded-0 text-white" style=";
  40.                background-image:url(https://images.unsplash.com/photo-1525713788066-275d83a11fe5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80);
  41.                background-size:cover;
  42.                background-position:center;
  43.                background-attachment:fixed;
  44.                box-shadow:0px 0px 7px rgba(0,0,0,0.5) inset;
  45.                text-shadow:2px 2px 5px rgba(0,0,0,0.7)">
  46.                
  47.                 <div class="mb-2" style="position:sticky;top:10px;text-align:center">
  48.                    
  49.                     <!--Profile pictures -->
  50.                     <div class="card mx-auto mt-3 border-0 rounded-0" style="width:170px;height:170px;
  51.                    background-image:url( link here);
  52.                    background-size:cover;
  53.                    box-shadow:1px 1px 7px rgba(0,0,0,0.5);"
  54.                    ></div>
  55.                    
  56.                     <!--Basic Info-->
  57.                     <p style="font-size:2em;font-weight:bold;letter-spacing:1px;"> <i class="fa-light fa-heart"></i> Username</p>
  58.                     <hr class="mt-0 mb-1" style="border-width:3px;border-color:rgba(255,255,255,0.15)">
  59.                     <span style="font-size:1.2em;font-weight:bold;letter-spacing:1px;text-align:center;">Gender - Pro/noun</span>
  60.                    
  61.                 </div>
  62.                
  63.                 <!--Image Credits-->
  64.                 <span href="https://unsplash.com/photos/JdwgLutpt2Q" target="blank" style="position:absolute;bottom:2px;right:7px;letter-spacing:2px">
  65.                    
  66.                     <!--Profile Pic-->
  67.                     <a href="#" style="font-size:1.25em;color:#ffffff" data-toggle="tooltip" title="PFP - Credit">
  68.                         <i class="fa-light fa-user"></i>
  69.                     </a>
  70.                    
  71.                     <!--Background-->
  72.                     <a href="https://unsplash.com/photos/JdwgLutpt2Q" style="font-size:1.25em;color:#ffffff" data-toggle="tooltip" title="BG - Unsplash">
  73.                         <i class="fa-light fa-image"></i>
  74.                     </a>
  75.                    
  76.                 </span>
  77.                
  78.             </div>
  79.            
  80.         </div>
  81.         <!-- /// end Image & basic info /// -->
  82.        
  83.        
  84.         <!-- /// Info /// -->
  85.         <div class="col-lg-8 mb-2">
  86.            
  87.             <!--(spacer)-->
  88.             <div class="bg-primary mb-2 d-none d-lg-block" style="height:25px;box-shadow:0px 0px 7px rgba(0,0,0,0.5) inset;
  89.                background-image:url(https://images.unsplash.com/photo-1525713788066-275d83a11fe5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80);
  90.                background-size:cover;
  91.                background-position:center;
  92.                background-attachment:fixed;"></div>
  93.            
  94.            
  95.             <!--Bio-->
  96.             <p>An introduction to yourself. I would recommend not putting revealing info here though. <br> Safety first yunno.</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.            
  101.             <!--Socials-->
  102.             <div class="row">
  103.                
  104.                 <div class="col-12 col-md-6">
  105.                     <a href="" target="_blank" style="font-size:1.25em">
  106.                         <i class="fa-solid fa-globe"></i>
  107.                         <span>Website</span>
  108.                     </a>
  109.                     <hr class="my-1">
  110.                 </div>
  111.                
  112.                 <div class="col-12 col-md-6">
  113.                     <a href="" target="_blank" style="font-size:1.25em">
  114.                         <i class="fa-brands fa-instagram"></i>
  115.                         <span>Instagram</span>
  116.                     </a>
  117.                     <hr class="my-1">
  118.                 </div>
  119.                
  120.                 <div class="col-12 col-md-6">
  121.                     <a href="" target="_blank" style="font-size:1.25em">
  122.                         <i class="fa-brands fa-tumblr"></i>
  123.                         <span>Tumblr</span>
  124.                     </a>
  125.                     <hr class="my-1">
  126.                 </div>
  127.                
  128.                 <div class="col-12 col-md-6">
  129.                     <a href="" target="_blank" style="font-size:1.25em">
  130.                         <i class="fa-brands fa-twitter"></i>
  131.                         <span>Twitter</span>
  132.                     </a>
  133.                     <hr class="my-1">
  134.                 </div>
  135.                
  136.                 <div class="col-12 col-md-6">
  137.                     <a href="" target="_blank" style="font-size:1.25em">
  138.                         <i class="fa-solid fa-paintbrush-pencil"></i>
  139.                         <span>ArtFight</span>
  140.                     </a>
  141.                     <hr class="my-1">
  142.                 </div>
  143.                
  144.                 <div class="col-12 col-md-6">
  145.                     <a href="" target="_blank" style="font-size:1.25em">
  146.                         <i class="fa-solid fa-browsers"></i>
  147.                         <span>(social media)</span>
  148.                     </a>
  149.                     <hr class="my-1">
  150.                 </div>
  151.                
  152.             </div>
  153.            
  154.            
  155.             <div class="row">
  156.                
  157.                 <!--Notice-->
  158.                 <div class="col-md-7">
  159.                    
  160.                     <!--(Header)-->
  161.                     <div class="bg-primary px-2 my-2 text-white" style="box-shadow:0px 0px 7px rgba(0,0,0,0.5) inset;
  162.                        background-image:url(https://images.unsplash.com/photo-1525713788066-275d83a11fe5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80);
  163.                        background-size:cover;
  164.                        background-position:center;
  165.                        background-attachment:fixed;
  166.                        text-shadow:2px 2px 5px rgba(0,0,0,0.7)">
  167.                             <span style="font-size:1.25em;font-weight:bold;letter-spacing:1px;">
  168.                             <i class="fa-light fa-heart"></i> Notice
  169.                             </span>
  170.                     </div>
  171.                    
  172.                     <p>A Content Warning, BYF, DNI, Misc. Notes section. Again, best to avoid putting personal info here. Safety first.</p>
  173.                    
  174.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  175.                    
  176.                     <p>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>
  177.                 </div>
  178.                
  179.                
  180.                 <!--Art Status-->
  181.                 <div class="col-md-5 mt-4 mt-md-0">
  182.                    
  183.                     <!--(Header)-->
  184.                     <div class="bg-primary px-2 my-2 text-white" style="box-shadow:0px 0px 7px rgba(0,0,0,0.5) inset;
  185.                        background-image:url(https://images.unsplash.com/photo-1525713788066-275d83a11fe5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80);
  186.                        background-size:cover;
  187.                        background-position:center;
  188.                        background-attachment:fixed;
  189.                        text-shadow:2px 2px 5px rgba(0,0,0,0.7)">
  190.                             <span style="font-size:1.25em;font-weight:bold;letter-spacing:1px;">
  191.                             <i class="fa-light fa-heart"></i> Art Status
  192.                             </span>
  193.                     </div>
  194.                    
  195.                     <span style="font-weight:bold">Requests</span> <span> - Status</span><br>
  196.                     <span style="font-weight:bold">Trades</span> <span> - Status</span><br>
  197.                     <span style="font-weight:bold">Commissions</span> <span> - Status</span><br>
  198.                    
  199.                     <hr class="my-2">
  200.                    
  201.                     <p>More notes about the above: ongoing projects, hiatuses, how busy you are, trello links, etc.</p>
  202.                 </div>
  203.                
  204.             </div>
  205.            
  206.            
  207.             <!--(spacer)-->
  208.             <div class="bg-primary my-2" style="height:25px;box-shadow:0px 0px 7px rgba(0,0,0,0.5) inset;
  209.                background-image:url(https://images.unsplash.com/photo-1525713788066-275d83a11fe5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80);
  210.                background-size:cover;
  211.                background-position:center;
  212.                background-attachment:fixed;"></div>
  213.            
  214.             <!--Credit. You may move it, but please do not delete/remove-->
  215.    
  216.             <p style="text-align:right">HTML by <a href="https://toyhou.se/20124869"><i class='fa-solid fa-heart'></i> Jade-Everstone</a> // Layout by <a href="https://toyhou.se/Togo">Togo</a></p>
  217.            
  218.         </div>
  219.         <!-- /// End Info /// -->
  220.        
  221.     </div>
  222.    
  223. </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!