API tools faq
paste
Advertisement
Jade-Everstone

Evans (CQ 2023 september - CC)

Jade-Everstone
Sep 25th, 2023
1,295
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 24.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  4.  
  5. Evans (custom color vers)
  6. For the Coders Quarters September 2023 challenge
  7.  
  8. You may
  9. -frankenstein with other codes (as long as the creator of said code allows it)
  10. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  11.  
  12. You may not
  13. -Redistribute, resell, and/or claim its yours
  14. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  15.  
  16. Misc Notes:
  17. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  18. -Some basic html knowledge is recommended for editing
  19.  
  20. Default Colors:
  21. - Background: rgba(0,0,0,0.9);
  22. - Text: #ffffff
  23. - Header Backgrounds, image backgrounds: #181d2e
  24. - Borders, Divider lines: #37414c
  25. - Divider accents, header accents, links:#6db6ef
  26. - Large dividers: #082e4d #0d3e64 #1e72b3 #6db6ef
  27.  
  28. Change the colors: Ctrl+f and search for the color you want to change.
  29.  
  30. -->
  31.  
  32. <!--/// BACKGROUND IMAGE ///-->
  33. <div style='position: absolute;
  34.    top: 0px;
  35.    bottom: 0px;
  36.    left: 0px;
  37.    background-image: url("https://images.pexels.com/photos/4666754/pexels-photo-4666754.jpeg");
  38.    background-position:center;
  39.    background-size:cover;
  40.    background-attachment:fixed;
  41.    width: 100%;
  42.    z-index: -1;'>
  43. </div>
  44. <!--/// END BACKGROUND IMAGE ///-->
  45.  
  46.  
  47. <div class="container my-3 py-3" style="max-width:900px;color:#ffffff;background-color:rgba(0,0,0,0.9);">
  48.    
  49.    
  50.     <!--/// MAIN HEADER///-->
  51.     <div class="card mb-3 rounded-0 p-2 bg-faded" style="border-top:10px solid;
  52.        background-color:#181d2e;
  53.        border-color:#37414c;border-top-color:#6db6ef;">
  54.         <h1 class="my-auto" style="font-size:3em;font-style:italic;font-family:serif;letter-spacing:1px">
  55.             <i class="fa-thin fa-chevrons-right"></i> Character Name
  56.         </h1>
  57.     </div>
  58.     <!--/// END MAIN HEADER///-->
  59.    
  60.    
  61.     <!--large divider-->
  62.     <div class="d-flex mb-3">
  63.         <div class="mr-2" style="height:10px;width:83%;background-color:#082e4d"></div>
  64.         <div class="mr-2" style="height:10px;width:10%;background-color:#0d3e64"></div>
  65.         <div class="mr-2" style="height:10px;width:5%;background-color:#1e72b3"></div>
  66.         <div style="height:10px;width:2%;background-color:#6db6ef"></div>
  67.     </div>
  68.    
  69.    
  70.     <div class="row">
  71.        
  72.         <!--/// SIDEBAR ///-->
  73.         <div class="col-lg-4">
  74.            
  75.             <!--/// MAIN IMAGE ///-->
  76.             <div class="p-2 card rounded-0 mx-auto" style="min-height:30px;width:300px;max-width:100%;
  77.                background-color:#181d2e;
  78.                border-color:#37414c;">
  79.                
  80.                 <div style="height:350px;
  81.                    background-image:url(https://images.pexels.com/photos/5472598/pexels-photo-5472598.jpeg);
  82.                    background-size:cover;
  83.                    background-position:center">
  84.                    
  85.                     <!--image credit-->
  86.                     <div style="position:absolute;left:15px;">
  87.                         <a href="https://www.pexels.com/photo/moon-jellyfish-floating-in-water-5472598/" data-toggle="tooltip" title="img - Pexels" style="color:#ffffff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);font-size:20px" target="_blank">
  88.                             <i class="fa-light fa-image"></i>
  89.                         </a>
  90.                     </div>
  91.                    
  92.                 </div>
  93.             </div>
  94.             <!--/// END MAIN IMAGE ///-->
  95.            
  96.            
  97.             <!--divider-->
  98.             <div class="d-flex my-2" style="color:#6db6ef;">
  99.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  100.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  101.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  102.             </div>
  103.            
  104.            
  105.             <!--/// BASIC INFO ///-->
  106.            
  107.             <!--gender & pronouns-->
  108.             <div class="mb-2" style="box-sizing:border-box;padding-left:10px;border-left:2px solid">
  109.                 <p style="font-size:1.2em;font-style:italic;font-family:serif;letter-spacing:1px">
  110.                     <i class="fa-thin fa-comments"></i> Gender (pro/nouns)
  111.                 </p>
  112.             </div>
  113.            
  114.             <!--birthday-->
  115.             <div class="mb-2" style="box-sizing:border-box;padding-left:10px;border-left:2px solid">
  116.                 <p style="font-size:1.2em;font-style:italic;font-family:serif;letter-spacing:1px">
  117.                     <i class="fa-thin fa-cake"></i> (mm/dd)
  118.                 </p>
  119.             </div>
  120.            
  121.             <!--race/species-->
  122.             <div class="mb-2" style="box-sizing:border-box;padding-left:10px;border-left:2px solid">
  123.                 <p style="font-size:1.2em;font-style:italic;font-family:serif;letter-spacing:1px">
  124.                     <i class="fa-thin fa-user"></i> Race / Species
  125.                 </p>
  126.             </div>
  127.            
  128.             <!--job/role-->
  129.             <div class="mb-2" style="box-sizing:border-box;padding-left:10px;border-left:2px solid">
  130.                 <p style="font-size:1.25em;font-style:italic;font-family:serif;letter-spacing:1px">
  131.                     <i class="fa-thin fa-suitcase"></i> Job / Role
  132.                 </p>
  133.             </div>
  134.            
  135.             <!--orientation-->
  136.             <div class="mb-2" style="box-sizing:border-box;padding-left:10px;border-left:2px solid">
  137.                 <p style="font-size:1.25em;font-style:italic;font-family:serif;letter-spacing:1px">
  138.                     <i class="fa-thin fa-heart"></i> Orientation
  139.                 </p>
  140.             </div>
  141.            
  142.            
  143.             <!--divider-->
  144.             <div class="d-flex my-2" style="color:#6db6ef;">
  145.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  146.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  147.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  148.             </div>
  149.            
  150.            
  151.             <!--/// MUSIC PLAYER ///-->
  152.             <div class="card my-3 rounded-0 p-2 bg-faded" style="border-left:5px solid;
  153.                background-color:#181d2e;
  154.                border-color:#37414c;
  155.                border-left-color:#6db6ef">
  156.                
  157.                 <div class="container" style="text-align:center;font-size:30px;overflow:hidden">
  158.                    
  159.                     <!-- HOW TO CHANGE THE LINK/SONG
  160.                        - Go to youtube and find the song you want to use
  161.                        - the page link has a string of random letters & numbers at the end of it.
  162.                                        (eg: https://www.youtube.com/watch?v= [here] )
  163.                        - copy that string of letters and paste it between embed/ and ?controls-0 in the embed link
  164.                                        (eg: src="https://www.youtube-nocookie.com/embed/ [here] ?controls=0" )
  165.                    -->
  166.                    
  167.                     <iframe src="https://www.youtube-nocookie.com/embed/50O6uTR-UgY?controls=0"
  168.                        frameborder="0"
  169.                        style="position:absolute;right:2px;top:-80px;width:250px;height:200px;z-index:1;opacity:0.001"></iframe>
  170.                                    
  171.                     <i class="fa-thin fa-backward"></i>
  172.                     <i class="fa-solid fa-play mx-2"></i>
  173.                     <i class="fa-thin fa-forward"></i>
  174.                    
  175.                 </div>
  176.                 <div class="bg-secondary my-2" style="height:1px;"></div>
  177.                
  178.                 <div class="p-2" style="font-size:1.25em;font-style:italic;font-family:serif;letter-spacing:1px;">Evans - NOSTALGIA ver. <br>
  179.                 - 音源</div>
  180.             </div>
  181.             <!--/// END MUSIC PLAYER ///-->
  182.            
  183.             <!--divider-->
  184.             <div class="d-flex my-2" style="color:#6db6ef;">
  185.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  186.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  187.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  188.             </div>
  189.            
  190.            
  191.             <!--quote-->
  192.             <div class="p-2" style="border-left:2px solid;font-size:1.25em;font-style:italic;font-family:serif;letter-spacing:1px;">
  193.                 "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
  194.             </div>
  195.            
  196.            
  197.             <!--divider-->
  198.             <div class="d-flex my-2" style="color:#6db6ef;">
  199.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  200.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  201.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  202.             </div>
  203.            
  204.            
  205.             <!-- /// MOODBOARD /// -->
  206.            
  207.             <!--image 1-->
  208.             <div class="p-1 card bg-faded rounded-0 mx-auto mb-2" style="min-height:100px;width:300px;max-width:100%;
  209.                background-color:#181d2e;
  210.                border-color:#37414c;">
  211.                
  212.                 <div style="height:150px;
  213.                    background-image:url(https://images.pexels.com/photos/4666754/pexels-photo-4666754.jpeg);
  214.                    background-size:cover;
  215.                    background-position:center">
  216.                    
  217.                     <!--image credit-->
  218.                     <div style="position:absolute;left:10px;">
  219.                         <a href="https://www.pexels.com/photo/scuba-diver-under-water-4666754/" data-toggle="tooltip" title="img - Pexels" style="color:#ffffff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);font-size:20px" target="_blank">
  220.                             <i class="fa-light fa-image"></i>
  221.                         </a>
  222.                     </div>
  223.                    
  224.                 </div>
  225.             </div>
  226.             <!--end image 1-->
  227.            
  228.             <!--image 2-->
  229.             <div class="p-1 card bg-faded rounded-0 mx-auto mb-2" style="min-height:100px;width:300px;max-width:100%;
  230.                background-color:#181d2e;
  231.                border-color:#37414c;">
  232.                
  233.                 <div style="height:150px;
  234.                    background-image:url(https://images.pexels.com/photos/8910283/pexels-photo-8910283.jpeg);
  235.                    background-size:cover;
  236.                    background-position:center">
  237.                    
  238.                     <!--image credit-->
  239.                     <div style="position:absolute;left:10px;">
  240.                         <a href="https://www.pexels.com/photo/an-underwater-shot-of-a-shark-8910283/" data-toggle="tooltip" title="img - Pexels" style="color:#ffffff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);font-size:20px" target="_blank">
  241.                             <i class="fa-light fa-image"></i>
  242.                         </a>
  243.                     </div>
  244.                    
  245.                 </div>
  246.             </div>
  247.             <!--end image 2-->
  248.            
  249.             <!--image 3-->
  250.             <div class="p-1 card bg-faded rounded-0 mx-auto mb-2" style="min-height:100px;width:300px;max-width:100%;
  251.                background-color:#181d2e;
  252.                border-color:#37414c;">
  253.                
  254.                 <div style="height:150px;
  255.                    background-image:url(https://images.pexels.com/photos/7058244/pexels-photo-7058244.jpeg);
  256.                    background-size:cover;
  257.                    background-position:center">
  258.                    
  259.                     <!--image credit-->
  260.                     <div style="position:absolute;left:10px;">
  261.                         <a href="https://www.pexels.com/photo/photograph-of-blue-smoke-7058244/" data-toggle="tooltip" title="img - Pexels" style="color:#ffffff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);font-size:20px" target="_blank">
  262.                             <i class="fa-light fa-image"></i>
  263.                         </a>
  264.                     </div>
  265.                    
  266.                 </div>
  267.             </div>
  268.             <!--end image 3-->
  269.            
  270.             <!--/// END MOODBOARD ///-->
  271.            
  272.         </div>
  273.         <!--/// END SIDEBAR ///-->
  274.        
  275.        
  276.         <!--/// MAIN CONTENT ///-->
  277.         <div class="col-lg-8">
  278.            
  279.             <!--divider-->
  280.             <div class="d-flex my-2 d-block d-lg-none" style="color:#6db6ef;font-size:20px">
  281.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  282.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  283.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  284.             </div>
  285.            
  286.            
  287.             <p>This section will expand</p>
  288.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et orci libero. Quisque pretium ligula id ipsum consequat, at pretium purus bibendum. Phasellus ultricies urna ac augue eleifend, at volutpat orci ultrices. Suspendisse magna augue, convallis sed venenatis vitae, hendrerit sed ipsum. In viverra ipsum quis varius imperdiet. Aliquam at commodo mauris. Pellentesque maximus dolor eros, sed lobortis tortor tristique eu. Aliquam dapibus ultrices nibh in feugiat. Nunc in dui feugiat, suscipit ligula quis, interdum lorem. Nulla viverra enim ultrices erat ultricies aliquam. Cras tincidunt nisl quis odio volutpat, ac semper arcu dignissim. Nulla vel tristique turpis. Morbi imperdiet risus nunc, eget efficitur arcu efficitur sed. </p>
  289.            
  290.            
  291.             <!--divider-->
  292.             <div class="d-flex my-3" style="color:#6db6ef;font-size:20px">
  293.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  294.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  295.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  296.             </div>
  297.            
  298.            
  299.             <!--/// SECTION HEADER ///-->
  300.             <div class="card my-3 rounded-0 p-2 bg-faded" style="border-left:5px solid;
  301.                background-color:#181d2e;
  302.                border-color:#37414c;
  303.                border-left-color:#6db6ef">
  304.                 <h2 class="my-auto" style="font-size:2em;font-style:italic;font-family:serif;letter-spacing:1px">
  305.                     Section title
  306.                 </h2>
  307.             </div>
  308.            
  309.             <p>Nullam consequat vulputate iaculis. Praesent sit amet sem aliquet quam malesuada porttitor ut efficitur metus. Nullam finibus quis ligula vitae semper. Vivamus non sagittis felis, at iaculis dolor. Sed faucibus est id interdum tincidunt. Proin porta tellus vitae consequat hendrerit. Donec consectetur nibh ac viverra ornare. Donec gravida odio ut malesuada ullamcorper. Praesent tincidunt eros nisl, et pulvinar quam eleifend nec. Cras suscipit sodales risus, non laoreet risus. Curabitur a dui non metus consequat rutrum. Etiam aliquet ornare justo, sit amet rutrum est interdum sed. Nunc feugiat convallis est, et auctor augue tincidunt eu. Ut ex arcu, bibendum eu dui sit amet, rutrum tincidunt lectus. Duis feugiat finibus viverra. </p>
  310.            
  311.             <p>Vivamus vitae ligula id urna dignissim lobortis. Aliquam ullamcorper, quam et tempor porta, est lectus vestibulum nisi, ut auctor ligula magna at leo. In hac habitasse platea dictumst. Nam aliquam ex sed massa dapibus hendrerit. Aliquam vestibulum vel lectus sed fringilla. Nullam tempus tempor turpis blandit pretium. Sed id magna in purus tincidunt egestas in feugiat purus.</p>
  312.            
  313.            
  314.             <!--divider-->
  315.             <div class="d-flex my-3" style="color:#6db6ef;font-size:20px">
  316.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  317.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  318.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  319.             </div>
  320.            
  321.            
  322.             <ul>
  323.                 <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  324.                 <li>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.</li>
  325.                 <li>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</li>
  326.             </ul>
  327.            
  328.            
  329.             <!--divider-->
  330.             <div class="d-flex my-2" style="color:#6db6ef;font-size:20px">
  331.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  332.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  333.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  334.             </div>
  335.            
  336.            
  337.             <!--/// DESIGN ///-->
  338.             <div class="card my-3 rounded-0 p-2 bg-faded" style="border-left:5px solid;
  339.                background-color:#181d2e;
  340.                border-color:#37414c;
  341.                border-left-color:#6db6ef">
  342.                 <h2 class="my-auto" style="font-size:2em;font-style:italic;font-family:serif;letter-spacing:1px">
  343.                     Design
  344.                 </h2>
  345.             </div>
  346.            
  347.            
  348.             <!--/// REFRENCE ///-->
  349.             <div class="p-2 card bg-faded rounded-0 mx-auto mb-3" style="min-height:300px;max-width:100%;
  350.                background-color:#181d2e;
  351.                border-color:#37414c;">
  352.                
  353.                 <div style="height:300px;
  354.                    background-image:url(https://images.pexels.com/photos/5472598/pexels-photo-5472598.jpeg);
  355.                    background-size:cover;
  356.                    background-position:center">
  357.                    
  358.                     <!--image credit-->
  359.                     <div style="position:absolute;left:15px;">
  360.                         <a href="https://www.pexels.com/photo/moon-jellyfish-floating-in-water-5472598/" data-toggle="tooltip" title="img - Pexels" style="color:#ffffff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);font-size:20px" target="_blank">
  361.                             <i class="fa-light fa-image"></i>
  362.                         </a>
  363.                     </div>
  364.                    
  365.                 </div>
  366.             </div>
  367.             <!--/// END REFRENCE ///-->
  368.            
  369.             <ul>
  370.                 <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  371.                 <li>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.</li>
  372.                 <li>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</li>
  373.             </ul>
  374.            
  375.            
  376.             <!--divider-->
  377.             <div class="d-flex my-2" style="color:#6db6ef;font-size:20px">
  378.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  379.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  380.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  381.             </div>
  382.            
  383.            
  384.             <!--/// LINKS ///-->
  385.             <div class="card my-3 rounded-0 p-2 bg-faded" style="border-left:5px solid;
  386.                background-color:#181d2e;
  387.                border-color:#37414c;
  388.                border-left-color:#6db6ef">
  389.                 <h2 class="my-auto" style="font-size:2em;font-style:italic;font-family:serif;letter-spacing:1px">
  390.                     Links
  391.                 </h2>
  392.             </div>
  393.            
  394.             <!--/// LINK 1 ///-->
  395.             <div class="row">
  396.                
  397.                 <!--link image-->
  398.                 <div class="col-sm-3 my-auto">
  399.                     <div class="p-1 card bg-faded rounded-0 " style="height:140px;width:140px;
  400.                        background-color:#181d2e;
  401.                        border-color:#37414c;">
  402.                         <div style="height:100%;
  403.                            background-image:url(https://images.pexels.com/photos/5472598/pexels-photo-5472598.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
  404.                            background-size:cover;
  405.                            background-position:center"></div>
  406.                     </div>
  407.                 </div>
  408.                
  409.                 <!--blurb-->
  410.                 <div class="col-sm-9 my-auto">
  411.                     <a href="#" style="font-size:1.75em;font-style:italic;font-family:serif;letter-spacing:1px;color:#6db6ef">
  412.                          Character Name
  413.                     </a>
  414.                        
  415.                     <div class="mb-2" style="height:1px;background-color:#37414c"></div>
  416.                    
  417.                     <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>
  418.                 </div>
  419.                
  420.             </div>
  421.            
  422.            
  423.             <!--divider-->
  424.             <div class="d-flex my-2" style="color:#6db6ef">
  425.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  426.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  427.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  428.             </div>
  429.            
  430.            
  431.             <!--/// LINK 2 ///-->
  432.              <div class="row">
  433.                
  434.                 <!--link image-->
  435.                 <div class="col-sm-3 my-auto">
  436.                     <div class="p-1 card bg-faded rounded-0 " style="height:140px;width:140px;
  437.                        background-color:#181d2e;
  438.                        border-color:#37414c;">
  439.                         <div style="height:100%;
  440.                            background-image:url(https://images.pexels.com/photos/5472598/pexels-photo-5472598.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
  441.                            background-size:cover;
  442.                            background-position:center"></div>
  443.                     </div>
  444.                 </div>
  445.                
  446.                 <!--blurb-->
  447.                 <div class="col-sm-9 my-auto">
  448.                     <a href="#" style="font-size:1.75em;font-style:italic;font-family:serif;letter-spacing:1px;color:#6db6ef">
  449.                          Character Name
  450.                     </a>
  451.                        
  452.                     <div class="mb-2" style="height:1px;background-color:#37414c"></div>
  453.                    
  454.                     <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>
  455.                 </div>
  456.                
  457.             </div>
  458.            
  459.            
  460.             <!--divider-->
  461.             <div class="d-flex my-2" style="color:#6db6ef">
  462.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  463.                 <i class="fa-thin fa-chevrons-down mx-2"></i>
  464.                 <div class="my-auto" style="height:1px;width:100%;background-color:#37414c"></div>
  465.             </div>
  466.            
  467.            
  468.         </div>
  469.         <!--/// END MAIN CONTENT ///-->
  470.        
  471.     </div>
  472.    
  473.    
  474.     <!--large divider-->
  475.     <div class="d-flex my-3">
  476.         <div class="mr-2" style="height:10px;width:2%;background-color:#6db6ef"></div>
  477.         <div class="mr-2" style="height:10px;width:5%;background-color:#1e72b3"></div>
  478.         <div class="mr-2" style="height:10px;width:10%;background-color:#0d3e64"></div>
  479.         <div style="height:10px;width:83%;background-color:#082e4d"></div>
  480.     </div>
  481.    
  482.    
  483.     <!--Credit. You may move it, but please do not delete/remove-->
  484.     <p style="text-align:right">HTML by <a href="https://toyhou.se/23606491" style="color:#6db6ef"><i class='fa-solid fa-heart'></i> Jade-Everstone</a> // img - <a href="https://www.pexels.com/photo/scuba-diver-under-water-4666754/" style="color:#6db6ef">Pexels</a></p>
  485. </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!