API tools faq
paste
Advertisement
Jade-Everstone

Take off (CQ 2022 January)

Jade-Everstone
Jan 6th, 2022 (edited)
510
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.38 KB | None | 0 0
raw download clone embed print report
  1. <!--Rules:
  2.  
  3. For the Coders Quarters January challenge: https://toyhou.se/~world/82691.coders-quarters/page/47768.january-challenge
  4. Layout by Togo: https://toyhou.se/Togo
  5.  
  6. You may
  7. -frankenstein with other codes (as long as the creator of said code allows it)
  8. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  9.  
  10. You may not
  11. -Redistribute, resell, and/or claim its yours
  12. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  13.  
  14. Misc Notes:
  15. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  16. -Some basic html knowledge is recommended for editing
  17.  
  18. Default Colors:
  19. -image backgrounds, header & footer backgrounds: #ff7ddd
  20. -header& footer gradients: linear-gradient (90deg, rgba(190,42,164,1) 20%, rgba(255,125,221,1) 100%)
  21. -Color pallete (decorative): #ff7ddd #ffd658 #ffffff #ffe68b #ffd8f6
  22.  
  23. -->
  24.  
  25.  
  26. <div class="container my-4">
  27.    
  28.    
  29.     <!--Main content-->
  30.     <div class="row">
  31.        
  32.        
  33.         <!--Moodboard-->
  34.        
  35.         <div class="col-12 col-lg-2 order-2 order-lg-1">
  36.            
  37.             <div class="card mb-3 border-0" style="height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.5);border-radius:20px;
  38.                background-image:url(#);
  39.                background-size:cover;
  40.                background-position:center;
  41.                background-color:#ff7ddd">
  42.                
  43.                 <!--Image credit-->
  44.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:5px;right:10px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-rocket-launch"></i> </a>
  45.  
  46.             </div>
  47.            
  48.             <div class="card mb-3 border-0" style="height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.5);border-radius:20px;
  49.                background-image:url(#);
  50.                background-size:cover;
  51.                background-position:center;
  52.                background-color:#ff7ddd">
  53.                
  54.                 <!--Image credit-->
  55.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:5px;right:10px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-rocket-launch"></i> </a>
  56.                
  57.             </div>
  58.            
  59.             <div class="card mb-3 border-0" style="height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.5);border-radius:20px;
  60.                background-image:url(#);
  61.                background-size:cover;
  62.                background-position:center;
  63.                background-color:#ff7ddd">
  64.                
  65.                 <!--Image credit-->
  66.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:5px;right:10px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-rocket-launch"></i> </a>
  67.                
  68.             </div>
  69.            
  70.         </div>
  71.        
  72.         <!--end Moodboard-->
  73.        
  74.        
  75.         <div class="col-12 col-lg-10 order-1 order-lg-2">
  76.            
  77.             <div class="row">
  78.                
  79.                 <div class="col-12 col-lg-8">
  80.                    
  81.                    
  82.                     <!--Header-->
  83.                    
  84.                     <div class="card bg-faded mb-3 px-3 py-2 border-0 text-white" style="min-height:100px;box-shadow: 2px 3px 5px rgba(0,0,0,0.5);border-radius:20px;text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  85.                        background-color:#ff7ddd;background: linear-gradient(90deg, rgba(190,42,164,1) 20%, rgba(255,125,221,1) 100%);;">
  86.                         <span style="font-size:3em;font-family: 'Roboto'; font-weight:bold;font-style:italic;text-transform: uppercase;margin-top:auto;margin-bottom:auto;letter-spacing:1px"><i class="fas fa-rocket-launch"></i> Character name</span>
  87.                     </div>
  88.                    
  89.                     <div class="row">
  90.                        
  91.                        
  92.                         <!--Basic info-->
  93.                        
  94.                         <div class="col-12 col-lg-10 col-xl-8 mb-3">
  95.                             <div class="card bg-faded border-0 h-100" style="max-height:300px;box-shadow: 2px 3px 5px rgba(0,0,0,0.5);border-radius:20px">
  96.                                 <div class="card-body table-responsive p-3" style="max-height:240px">
  97.                                    
  98.                                     <p>have a lot of info? This section will scroll!</p>
  99.                        
  100.                                     <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>
  101.                                    
  102.                                 </div>
  103.                                
  104.                                
  105.                                 <!--Pallete (more for aesthetic use than practical use tbh)-->
  106.                                
  107.                                 <span style="text-align:center;margin-top:auto;margin-bottom:5px;font-size:2em;letter-spacing:5px">
  108.                                    
  109.                                     <i class='fas fa-rocket' data-toggle="tooltip" title="#ff7ddd" style="
  110.                                    color:#ff7ddd;
  111.                                    text-shadow: 0px 1px 3px #000000"></i>
  112.                                    
  113.                                     <i class='fas fa-rocket' data-toggle="tooltip" title="#ffd658" style="
  114.                                    color:#ffd658;
  115.                                    text-shadow: 0px 1px 3px #000000"></i>
  116.                                    
  117.                                     <i class='fas fa-rocket' data-toggle="tooltip" title="#ffffff" style="
  118.                                    color:#ffffff;
  119.                                    text-shadow: 0px 1px 3px #000000"></i>
  120.                                    
  121.                                     <i class='fas fa-rocket' data-toggle="tooltip" title="#ffe68b" style="
  122.                                    color:#ffe68b;
  123.                                    text-shadow: 0px 1px 3px #000000"></i>
  124.                                    
  125.                                     <i class='fas fa-rocket' data-toggle="tooltip" title="#ffd8f6" style="
  126.                                    color:#ffd8f6;
  127.                                    text-shadow: 0px 1px 3px #000000"></i>
  128.                                    
  129.                                 </span>
  130.                                
  131.                             </div>
  132.                         </div>
  133.                        
  134.                         <!--spacer-->
  135.                         <div class="col-12 col-lg-2 col-xl-4 d-none d-lg-block">
  136.                             <div class="card bg-transparent border-0 mb-3" style="height:300px"></div>
  137.                         </div>
  138.                        
  139.                     </div>
  140.                    
  141.                 </div>
  142.                
  143.                 <!--Character img-->
  144.                 <div class="col-12 col-lg-4 mb-3">
  145.                     <div class="card table-responsive h-100 p-3 border-0" style="min-height:300px;max-height:416px;box-shadow: 2px 3px 5px rgba(0,0,0,0.5);border-radius:20px;
  146.                        background-image:url(#);
  147.                        background-size:cover;
  148.                        background-position:center;
  149.                        background-color:#ff7ddd">
  150.                        
  151.                         <!--Image credit-->
  152.                         <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:5px;left:10px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-rocket-launch"></i> </a>
  153.                        
  154.                     </div>
  155.                 </div>
  156.                
  157.             </div>
  158.            
  159.            
  160.             <!--misc. info-->
  161.             <div class="card bg-faded mb-3 px-3 py-2 border-0" style="min-height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.5);border-radius:20px">
  162.                 <div class="card-body">
  163.                     <div class="row">
  164.                        
  165.                         <div class="col-12 col-lg-5 mb-3 mb-lg-0">
  166.                            
  167.                             <span style="font-family: 'Roboto';text-transform: uppercase;font-style:italic;font-size:1.25em;letter-spacing:1px"><i class="fa fa-transgender-alt"></i> Gender (pro/noun)</span>
  168.                             <hr class="my-1">
  169.                            
  170.                             <span style="font-family: 'Roboto';text-transform: uppercase;font-style:italic;font-size:1.25em;letter-spacing:1px"><i class="fa fa-paw"></i> Species/Race</span>
  171.                             <hr class="my-1">
  172.                            
  173.                             <span style="font-family: 'Roboto';text-transform: uppercase;font-style:italic;font-size:1.25em;letter-spacing:1px"><i class="fas fa-birthday-cake"></i> Birthday</span>
  174.                             <hr class="my-1">
  175.                            
  176.                             <span style="font-family: 'Roboto';text-transform: uppercase;font-style:italic;font-size:1.25em;letter-spacing:1px"><i class="fas fa-tag"></i> (Category)</span>
  177.                             <hr class="my-1">
  178.                            
  179.                             <span style="font-family: 'Roboto';text-transform: uppercase;font-style:italic;font-size:1.25em;letter-spacing:1px"><i class="fas fa-play"></i> Theme Song - Artist</span>
  180.                             <hr class="my-1">
  181.                            
  182.                         </div>
  183.                        
  184.                         <div class="col-12 col-lg-7">
  185.                            
  186.                             <div class="row">
  187.                                
  188.                                
  189.                                 <!--Likes-->
  190.                                
  191.                                 <div class="col-12 col-lg-6 mb-3 mb-lg-0">
  192.                                     <span style="font-family: 'Roboto';text-transform: uppercase;font-style:italic;font-size:1.25em;letter-spacing:1px"><i class="fas fa-check"></i> Likes</span>
  193.                                     <hr class="my-1">
  194.                                    
  195.                                     <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>
  196.                                 </div>
  197.                                
  198.                                
  199.                                 <!--Dislikes-->
  200.                                
  201.                                 <div class="col-12 col-lg-6 mb-3 mb-lg-0">
  202.                                     <span style="font-family: 'Roboto';text-transform: uppercase;font-style:italic;font-size:1.25em;letter-spacing:1px"><i class="fas fa-times"></i> Dislikes</span>
  203.                                     <hr class="my-1">
  204.                                    
  205.                                     <p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  206.                                 </div>
  207.                                
  208.                             </div>
  209.                            
  210.                         </div>
  211.                        
  212.                     </div>
  213.                 </div>
  214.             </div>
  215.            
  216.         </div>
  217.        
  218.     </div>
  219.     <!--end Main content-->
  220.    
  221.    
  222.     <!--Credit. You may move it, but please do not delete/remove-->
  223.    
  224.     <div class="card bg-faded p-2 border-0 text-white" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.5);border-radius:20px;text-shadow: 2px 2px 5px rgba(0,0,0,0.5);background-color:#ff7ddd;background: linear-gradient(90deg, rgba(255,125,221,1) 0%, rgba(190,42,164,1) 100%);">
  225.         <p style="text-align:right">HTML by <a href="https://toyhou.se/14209024" style="color:#ffffff"><i class='fas fa-heart'></i> Jade-Everstone</a> // Layout by <a href="https://toyhou.se/Togo" style="color:#ffffff">Togo</a></p>
  226.     </div>
  227.    
  228. </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!