API tools faq
paste
Jade-Everstone

Pearlescent Sea (CQ 2021 August)

Jade-Everstone
Aug 8th, 2021 (edited)
1,159
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 27.17 KB | None | 0 0
raw download clone embed print report
  1. <!--Rules:
  2.  
  3. For the Coders Quarters August challenge: https://toyhou.se/~world/82691.coders-quarters/page/36197.august-challenge
  4. Moodboard & colors provided 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. -Text, borders, image bgs: #3c6598
  20. -Header Gradient: #3c6598, #87dadb
  21. -Box color: #e9decf
  22. -Header text, Credit: text-white
  23.  
  24. -->
  25.  
  26. <div class="container py-3" style="max-width:800px">
  27.    
  28.     <!--basic info-->
  29.    
  30.     <!--header-->
  31.    
  32.     <div class="card text-white mb-2 p-2 rounded-0" style="
  33.        border-color:#3c6598;
  34.        border-width:2px;
  35.        background-color:#3c6598;
  36.        background-image: linear-gradient(to right, #3c6598, #87dadb);
  37.        background-size:cover;
  38.        background-position:center;
  39.        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  40.        
  41.         <p style="font-size:2em;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
  42.             <i class="fas fa-water"></i> Character Name
  43.         </p>
  44.        
  45.     </div>
  46.    
  47.    
  48.     <div class="row">
  49.        
  50.         <!--image-->
  51.            
  52.         <div class="col-12 col-lg-5 mb-2">
  53.            
  54.             <div class="card rounded-0 h-100" style="
  55.                min-height:275px;
  56.                background-color:#3c6598;
  57.                border-color:#3c6598;
  58.                background-image:url(https://images.unsplash.com/photo-1616359289401-a26aaf72490c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=502&q=80);
  59.                background-size:cover;
  60.                background-position:center;
  61.                border-width:2px;
  62.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  63.                
  64.                 <!--Image credit-->
  65.  
  66.                 <a href="https://unsplash.com/photos/kynvS_nv3Ww" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
  67.                
  68.             </div>
  69.  
  70.         </div>
  71.        
  72.         <!--end image-->
  73.        
  74.        
  75.         <!--info-->
  76.            
  77.         <div class="col-12 col-lg-7 mb-2 h-100">
  78.             <div class="card rounded-0" style="
  79.                min-height:200px;
  80.                color:#3c6598;
  81.                background-color:#e9decf;
  82.                border-color:#3c6598;
  83.                border-width:2px;
  84.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  85.                
  86.                 <div class="card-body p-3">
  87.                    
  88.                     <!--breif info-->
  89.                    
  90.                     <span style="font-weight:bold"> <i class="fas fa-tint"></i> Gender</span>
  91.                     <span class="pull-right faded">Text</span>
  92.                     <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
  93.                    
  94.                     <span style="font-weight:bold"> <i class="fas fa-tint"></i> Race/Species</span>
  95.                     <span class="pull-right faded">Text</span>
  96.                     <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
  97.                    
  98.                     <span style="font-weight:bold"> <i class="fas fa-tint"></i> Birthday</span>
  99.                     <span class="pull-right faded">Text</span>
  100.                     <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
  101.                    
  102.                     <span style="font-weight:bold"> <i class="fas fa-tint"></i> Title</span>
  103.                     <span class="pull-right faded">Text</span>
  104.                     <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
  105.                    
  106.                     <span style="font-weight:bold"> <i class="fas fa-tint"></i> Title</span>
  107.                     <span class="pull-right faded">Text</span>
  108.                     <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
  109.                    
  110.                     <hr style="visibility:hidden">
  111.                    
  112.                     <!--about-->
  113.                    
  114.                     <p>Have a lot of info? This section will expand!</p>
  115.                    
  116.                     <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>
  117.                    
  118.                 </div>
  119.             </div>
  120.         </div>
  121.        
  122.         <!--end info-->
  123.        
  124.     </div>
  125.    
  126.     <!--end basic info-->
  127.    
  128.    
  129.     <!--backstory-->
  130.    
  131.     <!--header-->
  132.    
  133.     <div class="card text-white mb-2 p-2 rounded-0" style="
  134.        border-color:#3c6598;
  135.        border-width:2px;
  136.        background-color:#3c6598;
  137.        background-image: linear-gradient(to left, #3c6598, #87dadb);
  138.        background-size:cover;
  139.        background-position:center;
  140.        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  141.        
  142.         <p style="font-size:2em;text-align:right;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
  143.             Backstory <i class="fas fa-water"></i>
  144.         </p>
  145.        
  146.     </div>
  147.    
  148.     <div class="row">
  149.        
  150.         <!--text-->
  151.        
  152.         <div class="col-12 col-lg-8 mb-2">
  153.             <div class="card rounded-0" style="
  154.                min-height:200px;
  155.                color:#3c6598;
  156.                background-color:#e9decf;
  157.                border-color:#3c6598;
  158.                border-width:2px;
  159.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  160.                
  161.                 <div class="card-body p-3">
  162.                    
  163.                     <p>Have a lot of info? This section will expand!</p>
  164.                    
  165.                     <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>
  166.                    
  167.                     <span style="font-weight:bold"> <i class="fas fa-tint"></i> (sub-header)</span>
  168.                     <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3c6598">
  169.                    
  170.                     <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>
  171.                    
  172.                     <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>
  173.                    
  174.                 </div>
  175.             </div>
  176.         </div>
  177.        
  178.         <!--end text-->
  179.        
  180.        
  181.         <!--image-->
  182.        
  183.         <div class="col-12 col-lg-4 mb-2">
  184.            
  185.             <div class="card rounded-0 h-100" style="
  186.                min-height:275px;
  187.                background-color:#3c6598;
  188.                border-color:#3c6598;
  189.                background-image:url(https://images.unsplash.com/photo-1624813532831-74373324d26b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80);
  190.                background-size:cover;
  191.                background-position:center;
  192.                border-width:2px;
  193.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  194.                
  195.                 <!--Image credit-->
  196.  
  197.                 <a href="https://unsplash.com/photos/vAwrYUEewok" data-toggle="tooltip" title="img - Unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
  198.                
  199.             </div>
  200.  
  201.         </div>
  202.        
  203.         <!--end image-->
  204.        
  205.     </div>
  206.    
  207.     <!--end story-->
  208.    
  209.    
  210.     <!--Misc. info-->
  211.    
  212.     <!--header-->
  213.    
  214.     <div class="card text-white mb-2 p-2 rounded-0" style="
  215.        border-color:#3c6598;
  216.        border-width:2px;
  217.        background-color:#3c6598;
  218.        background-image: linear-gradient(to right, #3c6598, #87dadb);
  219.        background-size:cover;
  220.        background-position:center;
  221.        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  222.        
  223.         <p style="font-size:2em;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
  224.             <i class="fas fa-water"></i> Misc. info
  225.         </p>
  226.        
  227.     </div>
  228.    
  229.     <div class="row">
  230.        
  231.         <!--trivia-->
  232.        
  233.         <div class="col-12 col-lg-6 mb-2">
  234.             <div class="card rounded-0 h-100" style="
  235.                color:#3c6598;
  236.                background-color:#e9decf;
  237.                border-color:#3c6598;
  238.                border-width:2px;
  239.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  240.                
  241.                 <div class="card-body p-3">
  242.                    
  243.                     <p><i class="fas fa-tint"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  244.                    
  245.                     <p><i class="fas fa-tint"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
  246.                    
  247.                     <p><i class="fas fa-tint"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  248.                    
  249.                 </div>
  250.             </div>
  251.         </div>
  252.        
  253.         <!--end trivia-->
  254.        
  255.        
  256.         <!--playlist-->
  257.        
  258.         <div class="col-12 col-lg-6 mb-2">
  259.             <div class="card rounded-0 h-100" style="
  260.                color:#3c6598;
  261.                background-color:#e9decf;
  262.                border-color:#3c6598;
  263.                border-width:2px;
  264.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  265.                
  266.                 <div class="card-body p-3" style="font-size:1.25em">
  267.                    
  268.                     <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
  269.                     <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
  270.                    
  271.                     <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
  272.                     <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
  273.                    
  274.                     <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
  275.                     <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
  276.                    
  277.                     <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
  278.                     <hr class="my-1" style="border-style:dashed;border-color:#3c6598">
  279.                    
  280.                     <a href="#" style="font-weight:bold;color:#3c6598"> <i class="fas fa-music"></i> Song Title - Artist Name</a>
  281.                     <br>
  282.                    
  283.                 </div>
  284.             </div>
  285.         </div>
  286.        
  287.         <!--end playlist-->
  288.        
  289.     </div>
  290.    
  291.     <!--end Misc. info-->
  292.    
  293.    
  294.     <!--Relationships-->
  295.    
  296.     <!--header-->
  297.    
  298.     <div class="card text-white mb-2 p-2 rounded-0" style="
  299.        border-color:#3c6598;
  300.        border-width:2px;
  301.        background-color:#3c6598;
  302.        background-image: linear-gradient(to left, #3c6598, #87dadb);
  303.        background-size:cover;
  304.        background-position:center;
  305.        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  306.        
  307.         <p style="font-size:2em;text-align:right;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
  308.             Relationships <i class="fas fa-water"></i>
  309.         </p>
  310.        
  311.     </div>
  312.    
  313.     <div class="row">
  314.            
  315.         <!--image-->
  316.        
  317.         <div class="col-12 col-lg-3 mb-2 order-2 order-lg-1">
  318.            
  319.             <div class="card rounded-0 h-100" style="
  320.                min-height:250px;
  321.                background-color:#3c6598;
  322.                border-color:#3c6598;
  323.                background-image:url(https://images.unsplash.com/photo-1516638489986-0c17c234db55?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
  324.                background-size:cover;
  325.                background-position:center;
  326.                border-width:2px;
  327.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  328.                
  329.                 <!--Image credit-->
  330.  
  331.                 <a href="https://unsplash.com/photos/uk-no6Yv91g" data-toggle="tooltip" title="img - Unsplash" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
  332.                
  333.             </div>
  334.  
  335.         </div>
  336.        
  337.         <!--end image-->
  338.        
  339.        
  340.         <div class="col-12 col-lg-9 mb-2 order-1 order-lg-2">
  341.            
  342.            
  343.             <!--Relationship 1-->
  344.            
  345.             <div class="card rounded-0 mb-2" style="
  346.                color:#3c6598;
  347.                background-color:#e9decf;
  348.                border-color:#3c6598;
  349.                border-width:2px;
  350.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  351.                
  352.                 <div class="row no-gutters">
  353.                    
  354.                     <!--charapic-->
  355.                    
  356.                     <div class="col-12 col-sm-2 col-md-3">
  357.                         <div class="card border-0 rounded-0" style="max-width:150px;margin-left:auto;margin-right:auto;background-color:#3c6598">
  358.                            
  359.                             <img src="https://i.imgur.com/EMT3io6.png">
  360.                            
  361.                         </div>
  362.                     </div>
  363.                    
  364.                     <!--notes-->
  365.                    
  366.                     <div class="col-12 col-sm-10 col-md-9">
  367.                         <div class="card-body p-2">
  368.                             <a href="#" style="color:#3c6598;font-weight:bold"> <i class="fas fa-tint"></i> Character Name</a>
  369.                             <span class="pull-right faded">relationship</span>
  370.                             <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3c6598">
  371.                            
  372.                             <p>A few notes. This section will expand, but for the best look keep it I suggest keeping it breif</p>
  373.                            
  374.                         </div>
  375.                     </div>
  376.                    
  377.                 </div>
  378.             </div>
  379.            
  380.             <!--end Relationship 1-->
  381.            
  382.            
  383.             <!--Relationship 2-->
  384.            
  385.             <div class="card rounded-0 mb-2" style="
  386.                color:#3c6598;
  387.                background-color:#e9decf;
  388.                border-color:#3c6598;
  389.                border-width:2px;
  390.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  391.                
  392.                 <div class="row no-gutters">
  393.                    
  394.                     <!--charapic-->
  395.                    
  396.                     <div class="col-12 col-sm-2 col-md-3">
  397.                         <div class="card border-0 rounded-0" style="max-width:150px;margin-left:auto;margin-right:auto;background-color:#3c6598">
  398.                            
  399.                             <img src="https://i.imgur.com/EMT3io6.png">
  400.                            
  401.                         </div>
  402.                     </div>
  403.                    
  404.                     <!--notes-->
  405.                    
  406.                     <div class="col-12 col-sm-10 col-md-9">
  407.                         <div class="card-body p-2">
  408.                             <a href="#" style="color:#3c6598;font-weight:bold"> <i class="fas fa-tint"></i> Character Name</a>
  409.                             <span class="pull-right faded">relationship</span>
  410.                             <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3c6598">
  411.                            
  412.                             <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>
  413.                            
  414.                         </div>
  415.                     </div>
  416.                    
  417.                 </div>
  418.             </div>
  419.            
  420.             <!--end Relationship 2-->
  421.            
  422.            
  423.             <!--Relationship 3-->
  424.            
  425.             <div class="card rounded-0" style="
  426.                color:#3c6598;
  427.                background-color:#e9decf;
  428.                border-color:#3c6598;
  429.                border-width:2px;
  430.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  431.                
  432.                 <div class="row no-gutters">
  433.                    
  434.                     <!--charapic-->
  435.                    
  436.                     <div class="col-12 col-sm-2 col-md-3">
  437.                         <div class="card border-0 rounded-0" style="max-width:150px;margin-left:auto;margin-right:auto;background-color:#3c6598">
  438.                            
  439.                             <img src="https://i.imgur.com/EMT3io6.png">
  440.                            
  441.                         </div>
  442.                     </div>
  443.                    
  444.                     <!--notes-->
  445.                    
  446.                     <div class="col-12 col-sm-10 col-md-9">
  447.                         <div class="card-body p-2">
  448.                             <a href="#" style="color:#3c6598;font-weight:bold"> <i class="fas fa-tint"></i> Character Name</a>
  449.                             <span class="pull-right faded">relationship</span>
  450.                             <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3c6598">
  451.                            
  452.                             <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>
  453.                            
  454.                         </div>
  455.                     </div>
  456.                    
  457.                 </div>
  458.             </div>
  459.            
  460.             <!--end Relationship 3-->
  461.            
  462.            
  463.         </div>
  464.            
  465.     </div>
  466.    
  467.     <!--end Relationships-->
  468.    
  469.    
  470.     <!--Design-->
  471.    
  472.    
  473.     <!--Header-->
  474.    
  475.     <div class="card text-white mb-2 p-2 rounded-0" style="
  476.        border-color:#3c6598;
  477.        border-width:2px;
  478.        background-color:#3c6598;
  479.        background-image: linear-gradient(to right, #3c6598, #87dadb);
  480.        background-size:cover;
  481.        background-position:center;
  482.        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  483.        
  484.         <p style="font-size:2em;text-shadow: 2px 2px 4px rgba(0,0,0,0.8)">
  485.             <i class="fas fa-water"></i> Design
  486.         </p>
  487.        
  488.     </div>
  489.    
  490.     <div class="row">
  491.        
  492.         <!--design notes-->
  493.        
  494.         <div class="col-12 col-lg-4 mb-2">
  495.            
  496.             <div class="card rounded-0 h-100" style="
  497.                min-height:100px;
  498.                color:#3c6598;
  499.                background-color:#e9decf;
  500.                border-color:#3c6598;
  501.                border-width:2px;
  502.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  503.                
  504.                 <div class="card-body p-3">
  505.                    
  506.                     <p><i class="fas fa-tint"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  507.                    
  508.                     <p><i class="fas fa-tint"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
  509.                    
  510.                     <p><i class="fas fa-tint"></i> It has survived not only five centuries</p>
  511.                    
  512.                     <p><i class="fas fa-tint"></i> but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  513.                    
  514.                 </div>
  515.             </div>
  516.            
  517.         </div>
  518.        
  519.         <!--end design notes-->
  520.        
  521.        
  522.         <!--Refrence image-->
  523.        
  524.         <div class="col-12 col-lg-8 mb-2">
  525.            
  526.             <div class="card rounded-0 h-100" style="
  527.                min-height:350px;
  528.                color:#3c6598;
  529.                background-color:#3c6598;
  530.                border-color:#3c6598;
  531.                background-image:url(https://images.unsplash.com/photo-1534940490337-8f9799735021?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80);
  532.                background-size:cover;
  533.                background-position:center;
  534.                border-width:2px;
  535.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  536.                
  537.                 <!--full size-->
  538.  
  539.                 <a href="https://unsplash.com/photos/df-fICrHWPw" data-toggle="tooltip" title="(full size)" style="color:#ffffff;position:absolute;top:2px;right:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-external-link"></i> </a>
  540.                
  541.             </div>
  542.  
  543.         </div>
  544.        
  545.         <!--end Refrence image-->
  546.        
  547.     </div>
  548.    
  549.     <!--end Design-->
  550.    
  551.    
  552.     <!--Footer/Aesthetic-->
  553.    
  554.     <!--header-->
  555.    
  556.     <div class="card text-white mb-2 p-2 rounded-0" style="
  557.        border-color:#3c6598;
  558.        border-width:2px;
  559.        background-color:#3c6598;
  560.        background-image: linear-gradient(to left, #3c6598, #87dadb);
  561.        background-size:cover;
  562.        background-position:center;
  563.        box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  564.        
  565.         <p style="font-size:2em;text-align:center;text-shadow: 2px 2px 4px rgba(0,0,0,0.8);letter-spacing:5px">
  566.             <i class="fas fa-fish"></i> <i class="fas fa-water"></i> <i class="fas fa-tint"></i>
  567.         </p>
  568.        
  569.     </div>
  570.    
  571.     <div class="row">
  572.        
  573.         <!--image 1-->
  574.            
  575.         <div class="col-6 col-sm-3 col-md-6 col-lg-3 mb-2">
  576.            
  577.             <div class="card rounded-0 h-100" style="
  578.                min-height:150px;
  579.                background-color:#3c6598;
  580.                border-color:#3c6598;
  581.                background-image:url(https://images.unsplash.com/photo-1534940490337-8f9799735021?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80);
  582.                background-size:cover;
  583.                background-position:center;
  584.                border-width:2px;
  585.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  586.                
  587.                 <!--Image credit-->
  588.  
  589.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
  590.                
  591.             </div>
  592.  
  593.         </div>
  594.        
  595.         <!--end image 1-->
  596.        
  597.        
  598.         <!--image 2-->
  599.        
  600.         <div class="col-6 col-sm-3 col-md-6 col-lg-3 mb-2">
  601.            
  602.             <div class="card rounded-0 h-100" style="
  603.                min-height:150px;
  604.                background-color:#3c6598;
  605.                border-color:#3c6598;
  606.                background-image:url(https://images.unsplash.com/photo-1624813532831-74373324d26b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80);
  607.                background-size:cover;
  608.                background-position:center;
  609.                border-width:2px;
  610.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  611.                
  612.                 <!--Image credit-->
  613.  
  614.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
  615.                
  616.             </div>
  617.  
  618.         </div>
  619.        
  620.         <!--end image 2-->
  621.        
  622.        
  623.         <!--image 3-->
  624.        
  625.         <div class="col-6 col-sm-3 col-md-6 col-lg-3 mb-2">
  626.            
  627.             <div class="card rounded-0 h-100" style="
  628.                min-height:150px;
  629.                background-color:#3c6598;
  630.                border-color:#3c6598;
  631.                background-image:url(https://images.unsplash.com/photo-1616359289401-a26aaf72490c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=502&q=80);
  632.                background-size:cover;
  633.                background-position:center;
  634.                border-width:2px;
  635.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  636.                
  637.                 <!--Image credit-->
  638.  
  639.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
  640.                
  641.             </div>
  642.  
  643.         </div>
  644.        
  645.         <!--end image 3-->
  646.        
  647.        
  648.         <!--image 4-->
  649.        
  650.         <div class="col-6 col-sm-3 col-md-6 col-lg-3 mb-2">
  651.            
  652.             <div class="card rounded-0 h-100" style="
  653.                min-height:150px;
  654.                background-color:#3c6598;
  655.                border-color:#3c6598;
  656.                background-image:url(https://images.unsplash.com/photo-1516638489986-0c17c234db55?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
  657.                background-size:cover;
  658.                background-position:center;
  659.                border-width:2px;
  660.                box-shadow:2px 2px 5px rgba(0,0,0,0.6)">
  661.                
  662.                 <!--Image credit-->
  663.  
  664.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;bottom:2px;left:6px;font-size:20px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-fish"></i> </a>
  665.                
  666.             </div>
  667.  
  668.         </div>
  669.        
  670.         <!--end image 4-->
  671.        
  672.            
  673.     </div>
  674.    
  675.     <!--Footer/Aesthetic-->
  676.    
  677.    
  678.     <!--Credit. You may move it, but please do not delete/remove-->
  679.  
  680.     <p style="text-align:right">HTML by <a href="https://toyhou.se/12259127" style="color:#3c6598"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
  681.    
  682. </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!