API tools faq
paste
Jade-Everstone

showoff (CQ 2022 august)

Jade-Everstone
Aug 6th, 2022 (edited)
542
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  4.  
  5. Showoff
  6. For the Coders Quarters August 2022 challenge
  7. Layout provided 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.  
  13. You may not
  14. -Redistribute, resell, and/or claim its yours
  15. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  16.  
  17. Misc Notes:
  18. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  19. -Some basic html knowledge is recommended for editing
  20.  
  21. Default Colors:
  22. - Icons, headers, image text: text-white
  23.    - Section header icons: rgba (255,255,255,0.15)
  24. - image BG: #1c1444
  25. - image text BG/Gradient: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(82,44,131,0.7) 30%, rgba(48,7,100,1) 100%)
  26. - Header gradients: linear-gradient(90deg, rgba(227,109,217,1) 0%, rgba(115,66,168,1) 48%, rgba(40,28,138,1) 100%)
  27.  
  28.  
  29. Change the colors: Ctrl+f and search for the color you want to change.
  30. !!! for changing the gradients, I strongly recommend using https://cssgradient.io/ to make things easier
  31.  
  32. -->
  33.  
  34. <div class="container" style="max-width:900px">
  35.    
  36.     <div class="card rounded-0 p-3" style="border-width:2px">
  37.        
  38.        
  39.         <!--Main info-->
  40.        
  41.         <div class="row mb-3">
  42.            
  43.             <!--image-->
  44.            
  45.             <div class="col-12 col-lg-6 mb-3 mb-lg-0">
  46.                
  47.                 <div class="card border-0 rounded-0 h-100 bg-faded" style="min-height:500px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  48.                    background-image:url( image url );
  49.                    background-size:cover;
  50.                    background-position:center;
  51.                    background-color:#1c1444">
  52.                    
  53.                     <!--image credit link-->
  54.                     <a href="#" data-toggle="tooltip" title="img - credit" style="color:#ffffff;position:absolute;top:4px;right:10px;font-size:1.5em;text-shadow: 0px 0px 10px #000000"> <i class="fa-light fa-image"></i> </a>
  55.                    
  56.                     <!--Quote/image text-->
  57.                     <div class="card border-0 rounded-0 text-white" style="margin-top:auto;min-height:150px;
  58.                        background: rgb(255,255,255);
  59.                        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(82,44,131,0.7) 30%, rgba(48,7,100,1) 100%);">
  60.                        
  61.                         <div class="card-body p-2" style="margin-top:auto;font-size:1.5em;letter-spacing:1px">
  62.                             "Character Quote. Best to keep it breif for mobile readability"
  63.                         </div>
  64.                        
  65.                     </div>
  66.                    
  67.                 </div>
  68.                
  69.             </div>
  70.            
  71.             <!--end image-->
  72.            
  73.            
  74.             <!--Main info-->
  75.            
  76.             <div class="col-12 col-lg-6">
  77.                
  78.                 <!--header-->
  79.                 <div class="card border-0 rounded-0 bg-faded text-white mb-3" style="height:100px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  80.                    background: rgb(227,109,217);
  81.                    background: linear-gradient(90deg, rgba(227,109,217,1) 0%, rgba(115,66,168,1) 48%, rgba(40,28,138,1) 100%);">
  82.                    
  83.                     <i class="fa-thin fa-heart" style="position:absolute;left:10px;font-size:100px;color:rgba(255,255,255,0.15)"></i>
  84.                    
  85.                     <!--NOTE: header text might overflow on mobile if it gets long. If this does happen, you can reduce the font size (default: 2.5em/ 2.5% bigger than normal text)-->
  86.                     <div class="card-body py-1 px-2" style="margin-top:auto;text-align:right;font-size:2.5em;
  87.                    ">
  88.                         'Chara name
  89.                         <hr class="mt-0 mb-1" style="border-color:#ffffff">
  90.                     </div>
  91.                 </div>
  92.                
  93.                
  94.                 <!--basic info-->
  95.                 <div class="card border-0 rounded-0 bg-faded mb-3" style="height:150px;box-shadow:0px 0px 5px rgba(0,0,0,0.5)">
  96.                     <div class="card-body p-3 table-responsive" style="margin-top:auto;margin-bottom:auto">
  97.                         <div class="row">
  98.                            
  99.                             <div class="col-12 col-md-6">
  100.                                 <span style="font-weight:bold;letter-spacing:1px">Gender</span>
  101.                                 <span class="pull-right faded">Text</span>
  102.                                 <br class="mb-1">
  103.                                
  104.                                 <span style="font-weight:bold;letter-spacing:1px">Pronouns</span>
  105.                                 <span class="pull-right faded">Text</span>
  106.                                 <br class="mb-1">
  107.                                
  108.                                 <span style="font-weight:bold;letter-spacing:1px">Age</span>
  109.                                 <span class="pull-right faded">Text</span>
  110.                                 <br class="mb-1">
  111.                                
  112.                                 <span style="font-weight:bold;letter-spacing:1px">Birthday</span>
  113.                                 <span class="pull-right faded">Text</span>
  114.                                 <br class="mb-1">
  115.                             </div>
  116.                            
  117.                             <div class="col-12 col-md-6">
  118.                                 <span style="font-weight:bold;letter-spacing:1px">Race/Species</span>
  119.                                 <span class="pull-right faded">Text</span>
  120.                                 <br class="mb-1">
  121.                                
  122.                                 <span style="font-weight:bold;letter-spacing:1px">Job/Role</span>
  123.                                 <span class="pull-right faded">Text</span>
  124.                                 <br class="mb-1">
  125.                                
  126.                                 <span style="font-weight:bold;letter-spacing:1px">Title</span>
  127.                                 <span class="pull-right faded">Text</span>
  128.                                 <br class="mb-1">
  129.                                
  130.                                 <span style="font-weight:bold;letter-spacing:1px">Title</span>
  131.                                 <span class="pull-right faded">Text</span>
  132.                                 <br class="mb-1">
  133.                             </div>
  134.                            
  135.                         </div>
  136.                     </div>
  137.                 </div>
  138.                
  139.                
  140.                 <!--Breif About-->
  141.                 <div class="card border-0 rounded-0 bg-faded" style="height:250px;box-shadow:0px 0px 5px rgba(0,0,0,0.5)">
  142.                     <div class="card-body p-3 table-responsive" style="margin-top:auto;margin-bottom:auto">
  143.                         <p>Have a lot of info? this section will scroll!</p>
  144.                         <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>
  145.                     </div>
  146.                 </div>
  147.                
  148.             </div>
  149.            
  150.             <!--end Main info-->
  151.            
  152.         </div>
  153.        
  154.         <!--End Main info-->
  155.        
  156.        
  157.        
  158.         <!--Summary & Trivia-->
  159.        
  160.         <div class="row mb-3">
  161.            
  162.             <div class="col-12 col-lg-6 mb-3 mb-lg-0">
  163.                
  164.                <!--top image-->
  165.                 <div class="card border-0 rounded-0 bg-faded mb-3" style="height:220px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  166.                    background-color:;
  167.                    background-image:url( image url );
  168.                    background-size:cover;
  169.                    background-position:center;
  170.                    background-color:#1c1444">
  171.                    
  172.                     <!--image credit link-->
  173.                     <a href="#" data-toggle="tooltip" title="img - credit" style="color:#ffffff;position:absolute;top:4px;right:10px;font-size:1.5em;text-shadow: 0px 0px 10px #000000"> <i class="fa-light fa-image"></i> </a>
  174.                    
  175.                 </div>
  176.                
  177.                
  178.                 <!--likes/dislikes-->
  179.                 <div class="row">
  180.                    
  181.                     <!--likes-->
  182.                     <div class="col-12 col-sm-6">
  183.                         <div class="card border-0 rounded-0 bg-faded mb-3" style="height:180px;box-shadow:0px 0px 5px rgba(0,0,0,0.5)">
  184.                             <span class="p-2" style="font-size:1.25em;letter-spacing:1px">
  185.                                 <i class="fa-light fa-heart"></i> Likes
  186.                                 <hr class="mt-0 mb-0">
  187.                             </span>
  188.                            
  189.                             <div class="card-body p-2 table-responsive" style="margin-top:auto;margin-bottom:auto">
  190.                                 <i class="fa-light fa-circle-small"></i> Likes or interests <br>
  191.                                 <i class="fa-light fa-circle-small"></i> Likes or interests <br>
  192.                                 <i class="fa-light fa-circle-small"></i> Likes or interests <br>
  193.                                 <i class="fa-light fa-circle-small"></i> Likes or interests <br>
  194.                                 <i class="fa-light fa-circle-small"></i> Likes or interests <br>
  195.                             </div>
  196.                         </div>
  197.                     </div>
  198.                    
  199.                     <!--dislikes-->
  200.                     <div class="col-12 col-sm-6">
  201.                         <div class="card border-0 rounded-0 bg-faded mb-3" style="height:180px;box-shadow:0px 0px 5px rgba(0,0,0,0.5)">
  202.                             <span class="p-2" style="font-size:1.25em;letter-spacing:1px">
  203.                                 <i class="fa-light fa-heart-crack"></i> Dislikes
  204.                                 <hr class="mt-0 mb-0">
  205.                             </span>
  206.                            
  207.                             <div class="card-body p-2 table-responsive" style="margin-top:auto;margin-bottom:auto">
  208.                                 <i class="fa-light fa-circle-small"></i> dislikes or peeves <br>
  209.                                 <i class="fa-light fa-circle-small"></i> dislikes or peeves <br>
  210.                                 <i class="fa-light fa-circle-small"></i> dislikes or peeves <br>
  211.                                 <i class="fa-light fa-circle-small"></i> dislikes or peeves <br>
  212.                                 <i class="fa-light fa-circle-small"></i> dislikes or peeves <br>
  213.                             </div>
  214.                         </div>
  215.                     </div>
  216.                    
  217.                 </div>
  218.                
  219.                
  220.                 <!--bottom image-->
  221.                 <div class="card border-0 rounded-0 bg-faded" style="height:220px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  222.                    background-color:;
  223.                    background-image:url( image url );
  224.                    background-size:cover;
  225.                    background-position:center;
  226.                    background-color:#1c1444">
  227.                    
  228.                     <!--image credit link-->
  229.                     <a href="#" data-toggle="tooltip" title="img - credit" style="color:#ffffff;position:absolute;top:4px;right:10px;font-size:1.5em;text-shadow: 0px 0px 10px #000000"> <i class="fa-light fa-image"></i> </a>
  230.                    
  231.                 </div>
  232.                
  233.             </div>
  234.            
  235.             <div class="col-12 col-lg-6">
  236.                 <div class="card border-0 rounded-0 h-100 bg-faded" style="min-height:500px;box-shadow:0px 0px 5px rgba(0,0,0,0.5)">
  237.                    
  238.                     <!--header-->
  239.                     <div class="card-body py-1 px-2" style="text-align:right;font-size:2.5em;">
  240.                         Summary
  241.                         <i class="fa-thin fa-heart" style="position:absolute;left:10px;font-size:65px;color:rgba(255,255,255,0.15)"></i>
  242.                         <hr class="mt-0 mb-2">
  243.                     </div>
  244.                    
  245.                    
  246.                     <!--info section-->
  247.                     <div class="card-body p-3 table-responsive" style="max-height:570px;margin-top:auto;margin-bottom:auto">
  248.                         <p>Have a lot of info? this section will scroll!</p>
  249.                         <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>
  250.                        
  251.                        
  252.                         <!--subsection-->
  253.                         <span class="pull-right" style="font-size:2em">
  254.                             Subheader
  255.                         </span>
  256.                         <hr class="mt-0 mb-2">
  257.                        
  258.                        
  259.                         <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>
  260.                        
  261.                        
  262.                         <!--trivia/sub-section-->
  263.                         <span class="pull-right" style="font-size:2em">
  264.                             Trivia
  265.                         </span>
  266.                         <hr class="mt-0 mb-2">
  267.                        
  268.                         <i class="fa-duotone fa-circle-dot"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  269.                         <br class="mb-1">
  270.                        
  271.                         <i class="fa-duotone fa-circle-dot"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  272.                         <br class="mb-1">
  273.                        
  274.                         <i class="fa-duotone fa-circle-dot"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
  275.                         <br class="mb-1">
  276.                        
  277.                     </div>
  278.                    
  279.                 </div>
  280.             </div>
  281.            
  282.         </div>
  283.        
  284.         <!--End Summary & Trivia-->
  285.        
  286.        
  287.         <!--Image showcase and Aesthetics-->
  288.        
  289.         <div class="row">
  290.            
  291.             <div class="col-12 col-lg-6 mb-3 mb-lg-0">
  292.                 <div class="card border-0 rounded-0 h-100 bg-faded" style="min-height:664px;box-shadow:0px 0px 5px rgba(0,0,0,0.5)">
  293.                    
  294.                    
  295.                     <!--image carousel-->
  296.                     <div id="carouselxl" class="carousel slide" data-ride="carousel">
  297.                         <div class="carousel-inner">
  298.                            
  299.                             <!--image 1-->
  300.                             <div class="carousel-item active">
  301.                                 <div class="card border-0 rounded-0" style="min-height:664px;
  302.                                    background-image:url( image url );
  303.                                    background-size:cover;
  304.                                    background-position:center;
  305.                                    background-color:#1c1444">
  306.                                    
  307.                                     <!--image credit link-->
  308.                                     <a href="#" data-toggle="tooltip" title="img - credit" style="color:#ffffff;position:absolute;top:4px;right:10px;font-size:1.5em;text-shadow: 0px 0px 10px #000000"> <i class="fa-light fa-image"></i> </a>
  309.                                    
  310.                                     <!--Quote/image text-->
  311.                                     <div class="card border-0 rounded-0" style="margin-top:auto;min-height:150px;
  312.                                        background: rgb(255,255,255);
  313.                                        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(82,44,131,0.7) 30%, rgba(48,7,100,1) 100%);">
  314.                                        
  315.                                         <div class="card-body p-2 text-white" style="margin-top:auto;font-size:1.5em;letter-spacing:1px">
  316.                                         Credit, description, anything really. Best to keep it breif for mobile readability
  317.                                         </div>
  318.                                        
  319.                                     </div>
  320.                                    
  321.                                 </div>
  322.                             </div>
  323.                             <!--end image 1-->
  324.                            
  325.                             <!--image 2-->
  326.                             <div class="carousel-item">
  327.                                 <div class="card border-0 rounded-0" style="min-height:664px;
  328.                                    background-image:url( image url );
  329.                                    background-size:cover;
  330.                                    background-position:center;
  331.                                    background-color:#1c1444">
  332.                                    
  333.                                     <!--image credit link-->
  334.                                     <a href="#" data-toggle="tooltip" title="img - credit" style="color:#ffffff;position:absolute;top:4px;right:10px;font-size:1.5em;text-shadow: 0px 0px 10px #000000"> <i class="fa-light fa-image"></i> </a>
  335.                                    
  336.                                     <!--Quote/image text-->
  337.                                     <div class="card border-0 rounded-0" style="margin-top:auto;min-height:150px;
  338.                                        background: rgb(255,255,255);
  339.                                        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(82,44,131,0.7) 30%, rgba(48,7,100,1) 100%);">
  340.                                        
  341.                                         <div class="card-body p-2 text-white" style="margin-top:auto;font-size:1.5em;letter-spacing:1px">
  342.                                         Credit, description, anything really. Best to keep it breif for mobile readability
  343.                                         </div>
  344.                                        
  345.                                     </div>
  346.                                    
  347.                                 </div>
  348.                             </div>
  349.                             <!--end image 2-->
  350.                            
  351.                             <!--image 3-->
  352.                             <div class="carousel-item">
  353.                                 <div class="card border-0 rounded-0" style="min-height:664px;
  354.                                    background-image:url( image url );
  355.                                    background-size:cover;
  356.                                    background-position:center;
  357.                                    background-color:#1c1444">
  358.                                    
  359.                                     <!--image credit link-->
  360.                                     <a href="#" data-toggle="tooltip" title="img - credit" style="color:#ffffff;position:absolute;top:4px;right:10px;font-size:1.5em;text-shadow: 0px 0px 10px #000000"> <i class="fa-light fa-image"></i> </a>
  361.                                    
  362.                                     <!--Quote/image text-->
  363.                                     <div class="card border-0 rounded-0" style="margin-top:auto;min-height:150px;
  364.                                        background: rgb(255,255,255);
  365.                                        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(82,44,131,0.7) 30%, rgba(48,7,100,1) 100%);">
  366.                                        
  367.                                         <div class="card-body p-2 text-white" style="margin-top:auto;font-size:1.5em;letter-spacing:1px">
  368.                                         Credit, description, anything really. Best to keep it breif for mobile readability
  369.                                         </div>
  370.                                        
  371.                                     </div>
  372.                                    
  373.                                 </div>
  374.                             </div>
  375.                             <!--end image 3-->
  376.                            
  377.                         </div>
  378.                        
  379.                        
  380.                         <!--navs
  381.                        Note: I made these slightly smaller/not work on the corners to keep the credits clickable-->
  382.                         <a class="carousel-control-prev" href="#carouselxl" role="button" data-slide="prev"
  383.                            style="max-height:550px;margin-top:auto;margin-bottom:auto">
  384.                             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  385.                             <span class="sr-only">Previous</span>
  386.                         </a>
  387.                         <a class="carousel-control-next" href="#carouselxl" role="button" data-slide="next"
  388.                            style="max-height:550px;margin-top:auto;margin-bottom:auto">
  389.                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  390.                             <span class="sr-only">Next</span>
  391.                         </a>
  392.                        
  393.                     </div>
  394.                     <!--end image carousel-->
  395.                    
  396.                    
  397.                 </div>
  398.             </div>
  399.            
  400.             <div class="col-12 col-lg-6 mb-3 mb-lg-0">
  401.                
  402.                 <!--header-->
  403.                 <div class="card border-0 rounded-0 bg-faded text-white mb-3" style="height:100px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  404.                    background: rgb(227,109,217);
  405.                    background: linear-gradient(90deg, rgba(227,109,217,1) 0%, rgba(115,66,168,1) 48%, rgba(40,28,138,1) 100%);">
  406.                    
  407.                     <i class="fa-thin fa-heart" style="position:absolute;left:10px;font-size:100px;color:rgba(255,255,255,0.15)"></i>
  408.                    
  409.                     <div class="card-body py-1 px-2" style="margin-top:auto;text-align:right;font-size:2.5em">
  410.                         aesthetic
  411.                         <hr class="mt-0 mb-2" style="border-color:#ffffff">
  412.                     </div>
  413.                 </div>
  414.                
  415.                
  416.                 <!--Moodboard-->
  417.                 <div class="row">
  418.                    
  419.                     <!--image 1-->
  420.                     <div class="col-6">
  421.                         <div class="card border-0 rounded-0 bg-faded mb-3" style="height:130px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  422.                            background-image:url(https://images.unsplash.com/photo-1500067318459-77a2667d9c54?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1964&q=80);
  423.                            background-size:cover;
  424.                            background-position:center">
  425.                            
  426.                             <!--img credit/FA icon-->
  427.                             <a href="https://unsplash.com/photos/jnR7FpNCWCA" class="text-white" data-toggle="tooltip" title="img - unsplash"
  428.                            style="margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-size:60px;
  429.                            text-shadow:0px 0px 10px #000000">
  430.                             <i class="fa-thin fa-heart"></i>
  431.                             </a>
  432.                            
  433.                         </div>
  434.                     </div>
  435.                    
  436.                    
  437.                     <!--image 2-->
  438.                     <div class="col-6">
  439.                         <div class="card border-0 rounded-0 bg-faded mb-3" style="height:130px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  440.                            background-image:url(https://images.unsplash.com/photo-1561344640-2453889cde5b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1934&q=80);
  441.                            background-size:cover;
  442.                            background-position:center">
  443.                            
  444.                             <!--img credit/FA icon-->
  445.                             <a href="https://unsplash.com/photos/psdV2Rl-GvU" class="text-white" data-toggle="tooltip" title="img - unsplash"
  446.                            style="margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-size:60px;
  447.                            text-shadow:0px 0px 10px #000000">
  448.                             <i class="fa-thin fa-city"></i>
  449.                             </a>
  450.                            
  451.                         </div>
  452.                     </div>
  453.                    
  454.                    
  455.                     <!--image 3-->
  456.                     <div class="col-6">
  457.                         <div class="card border-0 rounded-0 bg-faded mb-3" style="height:130px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  458.                            background-image:url(https://images.unsplash.com/photo-1546699822-05024213d7c4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1042&q=80);
  459.                            background-size:cover;
  460.                            background-position:center">
  461.                            
  462.                             <!--img credit/FA icon-->
  463.                             <a href="https://unsplash.com/photos/IkDeiIRVy_U" class="text-white" data-toggle="tooltip" title="img - unsplash"
  464.                            style="margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-size:60px;
  465.                            text-shadow:0px 0px 10px #000000">
  466.                             <i class="fa-thin fa-sparkles"></i>
  467.                             </a>
  468.                            
  469.                         </div>
  470.                     </div>
  471.                    
  472.                    
  473.                     <!--image 4-->
  474.                     <div class="col-6">
  475.                         <div class="card border-0 rounded-0 bg-faded mb-3" style="height:130px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  476.                            background-image:url(https://images.unsplash.com/photo-1572633424705-d813d2fb5cb4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80);
  477.                            background-size:cover;
  478.                            background-position:center">
  479.                            
  480.                             <!--img credit/FA icon-->
  481.                             <a href="#" class="text-white" data-toggle="tooltip" title="img - unsplash"
  482.                            style="margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-size:60px;
  483.                            text-shadow:0px 0px 10px #000000">
  484.                             <i class="fa-thin fa-moon"></i>
  485.                             </a>
  486.                            
  487.                         </div>
  488.                     </div>
  489.                    
  490.                 </div>
  491.                
  492.                
  493.                 <!--Playlist-->
  494.                 <div class="card border-0 rounded-0 bg-faded mb-3" style="height:150px;box-shadow:0px 0px 5px rgba(0,0,0,0.5)">
  495.                     <div class="card-body table-responsive p-2" style="font-size:1.25em;margin-top:auto;margin-bottom:auto">
  496.                        
  497.                         <a href="#">
  498.                             <i class="fa-light fa-circle-play"></i> Song title - Artist name
  499.                             <br class="mb-1">
  500.                         </a>
  501.                        
  502.                         <a href="#">
  503.                             <i class="fa-light fa-circle-play"></i> Song title - Artist name
  504.                             <br class="mb-1">
  505.                         </a>
  506.                        
  507.                         <a href="#">
  508.                             <i class="fa-light fa-circle-play"></i> Song title - Artist name
  509.                             <br class="mb-1">
  510.                         </a>
  511.                        
  512.                         <a href="#">
  513.                             <i class="fa-light fa-circle-play"></i> Song title - Artist name
  514.                             <br class="mb-1">
  515.                         </a>
  516.                        
  517.                     </div>
  518.                 </div>
  519.                
  520.                 <!--large moodboard pic-->
  521.                 <div class="card border-0 rounded-0 bg-faded" style="height:90px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  522.                    background-image:url(https://images.unsplash.com/photo-1487029413235-e3f7a0e8e140?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
  523.                    background-size:cover;
  524.                    background-position:center">
  525.                    
  526.                     <!--img credit/FA icon-->
  527.                     <a href="https://unsplash.com/photos/XW-Z9L930CY" class="text-white" data-toggle="tooltip" title="img - unsplash"
  528.                    style="margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-size:60px;text-shadow:0px 0px 10px #000000">
  529.                     <i class="fa-thin fa-moon-stars"></i>
  530.                     </a>
  531.                
  532.                 </div>
  533.                
  534.             </div>
  535.            
  536.         </div>
  537.        
  538.         <!--End Image showcase and Aesthetics-->
  539.        
  540.        
  541.     </div>
  542.    
  543.     <!--Credit. You may move it, but please do not delete/remove-->
  544.    
  545.     <p style="text-align:right;">HTML by <a href="https://toyhou.se/17409432"><i class='fa-solid fa-heart'></i> Jade-Everstone</a> // Layout by <a href="https://toyhou.se/Togo">Togo</a></p>
  546.    
  547. </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!