API tools faq
paste
Jade-Everstone

Traveler (CQ 2023 October - folder vers)

Jade-Everstone
Oct 24th, 2023 (edited)
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <!--Rules:
  3.  
  4. Traveler (folder vers)
  5. For the Coders Quarters October 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. - Photo Borders: #ffffff
  21. - Character Links, Card header: #4f5a3f
  22. - Info/Warning Buttons: #4f5a3f , #c46439
  23. - Pins: #c46439 , #b3cecf
  24.  
  25. Change the colors: Ctrl+f and search for the color you want to change.
  26.  
  27. -->
  28.  
  29.  
  30. <!-- /// BACKGROUND /// -->
  31.     <!--bg image sourced from transparent textures:
  32.    (https://www.transparenttextures.com/patterns/axiom-pattern.png)-->
  33. <div style="position:absolute;
  34.    top:0px;bottom:0px;
  35.    left: 0px;
  36.    background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/72565784_TPO2Zi7szDbhC8D.png);
  37.    background-position:center;
  38.    background-attachment:fixed;
  39.    width: 100%;
  40.    z-index: -1;">.</div>
  41. <!-- /// END BACKGROUND /// -->
  42.  
  43.  
  44. <div class="container" style="max-width:800px">
  45.    
  46.     <!-- /// HEADER/// -->
  47.     <div class="row align-items-center">
  48.        
  49.         <!-- /// SIDE IMAGE /// -->
  50.         <div class="col-lg-3">
  51.            
  52.             <!--Photo-->
  53.             <div class="mb-3" style="height:200px;width:200px;transform:rotate(-5deg);
  54.                border-style:solid;border-width:7px 7px 30px;border-color:#ffffff;
  55.                margin-left:auto;margin-right:auto;
  56.                background-image:url(https://images.unsplash.com/photo-1574260031597-bcd9eb192b4f?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  57.                background-size:cover;
  58.                background-position:center;
  59.                background-repeat:no-repeat;
  60.                box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
  61.                
  62.                 <!--image credit-->
  63.                 <a href="https://unsplash.com/photos/camper-trailer-on-cliff-near-sea-ryfptJi3fAM" title="img - unsplash" data-toggle="tooltip" style="color:#ffffff;font-size:20px;text-shadow:1px 1px 3px rgba(0,0,0,0.5);position:absolute;left:3px" target="_blank">
  64.                     <i class="fa-regular fa-compass"></i>
  65.                 </a>
  66.                
  67.                 <!--Decorative pin-->
  68.                 <div style="position:absolute;top:-20px;left:75px">
  69.                     <i class="fa-solid fa-circle" style="color:#c46439 ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
  70.                 </div>
  71.                
  72.             </div>
  73.         </div>
  74.         <!-- /// END SIDE IMAGE /// -->
  75.        
  76.        
  77.         <!-- /// TEXT INFO /// -->
  78.         <div class="col-lg-9">
  79.            
  80.             <!--Header-->
  81.             <h1 style="font-size:2.5em"> <i class="fa-thin fa-compass"></i> Folder Name</h1>
  82.            
  83.             <!--Info Card-->
  84.             <div style="height:10px;background-color:#4f5a3f;box-shadow:2px 2px 5px rgba(0,0,0,0.5)"></div>
  85.             <div class="bg-faded p-3 mb-1" style="box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
  86.                 <p>This section will Expand</p>
  87.                 <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>
  88.             </div>
  89.            
  90.             <!--Tags-->
  91.             <div class="d-flex flex-wrap mb-3">
  92.                 <div class="p-1 px-2 m-1" style="background-color:#4f5a3f;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
  93.                     Genre
  94.                 </div>
  95.                 <div class="p-1 px-2 m-1" style="background-color:#4f5a3f;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
  96.                     Status
  97.                 </div>
  98.                 <div class="p-1 px-2 m-1" style="background-color:#c46439;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
  99.                     Content Warning
  100.                 </div>
  101.                 <div class="p-1 px-2 m-1" style="background-color:#c46439;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
  102.                     Warning
  103.                 </div>
  104.             </div>
  105.         </div>
  106.         <!-- /// END TEXT INFO /// -->
  107.        
  108.     </div>
  109.     <!-- /// END HEADER/// -->
  110.    
  111.    
  112.     <!-- /// CHARA LINKS /// -->
  113.     <div class="row my-3">
  114.        
  115.         <!--link 1-->
  116.         <div class="col-sm-6 col-lg-3">
  117.             <div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(5deg);
  118.                background-color:#ffffff;
  119.                margin-left:auto;margin-right:auto;
  120.                box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  121.                text-align:center;font-size:1.25em">
  122.                
  123.                 <!--Decorative pin-->
  124.                 <div style="position:absolute;top:-20px;left:80px">
  125.                     <i class="fa-solid fa-circle" style="color:#b3cecf;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
  126.                 </div>
  127.                
  128.                 <!--charaimg-->
  129.                 <div class="w-100 h-100" style="
  130.                    background-image:url(https://images.unsplash.com/photo-1532154187607-d766ed024aac?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  131.                    background-size:cover;
  132.                    background-position:center;
  133.                    background-repeat:no-repeat;
  134.                    min-height:180px;width:100%;"></div>
  135.                
  136.                 <!--link-->
  137.                 <a href="#" style="color:#4f5a3f">Character Name</a>
  138.                
  139.             </div>
  140.         </div>
  141.        
  142.         <!--link 2-->
  143.         <div class="col-sm-6 col-lg-3">
  144.             <div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(-5deg);
  145.                background-color:#ffffff;
  146.                margin-left:auto;margin-right:auto;
  147.                box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  148.                text-align:center;font-size:1.25em">
  149.                
  150.                 <!--Decorative pin-->
  151.                 <div style="position:absolute;top:-20px;left:80px">
  152.                     <i class="fa-solid fa-circle" style="color:#c46439 ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
  153.                 </div>
  154.                
  155.                 <!--charaimg-->
  156.                 <div class="w-100 h-100" style="
  157.                    background-image:url(https://images.unsplash.com/photo-1446034295857-c39f8844fad4?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  158.                    background-size:cover;
  159.                    background-position:center;
  160.                    background-repeat:no-repeat;
  161.                    min-height:180px;width:100%;"></div>
  162.                
  163.                 <!--link-->
  164.                 <a href="#" style="color:#4f5a3f">Character Name</a>
  165.                
  166.             </div>
  167.         </div>
  168.        
  169.         <!--link 3-->
  170.         <div class="col-sm-6 col-lg-3">
  171.             <div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(5deg);
  172.                background-color:#ffffff;
  173.                margin-left:auto;margin-right:auto;
  174.                box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  175.                text-align:center;font-size:1.25em">
  176.                
  177.                 <!--Decorative pin-->
  178.                 <div style="position:absolute;top:-20px;left:80px">
  179.                     <i class="fa-solid fa-circle" style="color:#b3cecf;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
  180.                 </div>
  181.                
  182.                 <!--charaimg-->
  183.                 <div class="w-100 h-100" style="
  184.                    background-image:url(https://images.unsplash.com/photo-1532154187607-d766ed024aac?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  185.                    background-size:cover;
  186.                    background-position:center;
  187.                    background-repeat:no-repeat;
  188.                    min-height:180px;width:100%;"></div>
  189.                
  190.                 <!--link-->
  191.                 <a href="#" style="color:#4f5a3f">Character Name</a>
  192.                
  193.             </div>
  194.         </div>
  195.        
  196.         <!--link 4-->
  197.         <div class="col-sm-6 col-lg-3">
  198.             <div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(-5deg);
  199.                background-color:#ffffff;
  200.                margin-left:auto;margin-right:auto;
  201.                box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  202.                text-align:center;font-size:1.25em">
  203.                
  204.                 <!--Decorative pin-->
  205.                 <div style="position:absolute;top:-20px;left:80px">
  206.                     <i class="fa-solid fa-circle" style="color:#c46439 ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
  207.                 </div>
  208.                
  209.                 <!--charaimg-->
  210.                 <div class="w-100 h-100" style="
  211.                    background-image:url(https://images.unsplash.com/photo-1446034295857-c39f8844fad4?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  212.                    background-size:cover;
  213.                    background-position:center;
  214.                    background-repeat:no-repeat;
  215.                    min-height:180px;width:100%;"></div>
  216.                
  217.                 <!--link-->
  218.                 <a href="#" style="color:#4f5a3f">Character Name</a>
  219.                
  220.             </div>
  221.         </div>
  222.        
  223.     </div>
  224.     <!-- /// END CHARA LINKS /// -->
  225.    
  226.    
  227.     <!--Credit. You may move it, but please do not delete/remove-->
  228.     <p style="text-align:right">HTML by <a href="https://toyhou.se/24049872"><i class='fa-solid fa-compass'></i> Jade-Everstone</a> // img - <a href="https://www.transparenttextures.com/" target="_blank">Transparent Textures</a></p>
  229.    
  230. </div>
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!