API tools faq
paste
Advertisement
Euna-

[f2u] SodaShark

Euna-
Jun 13th, 2025 (edited)
587
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.17 KB | None | 0 0
raw download clone embed print report
  1. <!--=================================
  2. gradient stop 1:            #ba71d5
  3. gradient stop 2:            #85d7e2
  4. gradient stop 2:            #c4eb88
  5.  
  6. highlight 1:                #9cfaff
  7. highlight 2:                #dfffad
  8.  
  9. text color:                 #ededed
  10. background:                 #383838
  11. outline:                    #ffffff
  12.  
  13. button background stop 1:   rgba(0, 0, 0, 0.6)
  14. button background stop 2:   rgba(0, 0, 0, 0.2)
  15.  
  16. icons:                      https://fontawesome.com/
  17.  
  18. ====================================-->
  19.  
  20.  
  21. <div class="mx-auto" style="max-width: 900px;">
  22.     <div>
  23.      
  24.         <!--background gradient-->
  25.         <div class="p-4" style="background-image: linear-gradient(45deg, #ba71d5, #85d7e2, #c4eb88); border: solid 4px #ffffff; border-radius: 20px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);">
  26.          
  27.             <div>
  28.              
  29.                 <!--banner image-->
  30.                 <div style="background-image: url(
  31.    
  32.                 https://images.unsplash.com/photo-1589691962030-8d2b7f2a1ffe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80
  33.                 )
  34.                 ; background-size:cover; background-position: center; min-height: 120px; border-radius: 16px; border: 2px solid #ffffff;
  35.                 "></div>
  36.          
  37.          
  38.                 <div class="mx-auto" style="margin-top: -60px; max-width: 800px;">
  39.                  
  40.                     <div class="row no-gutters mb-3">
  41.                         <div class="col-sm-3 p-2">
  42.                          
  43.                             <!--profile image-->
  44.                             <div class="rounded-circle mx-auto" style="background-image: url(
  45.          
  46.                             https://images.unsplash.com/photo-1560275619-4662e36fa65c?q=80&w=2700&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
  47.                          
  48.                             )
  49.                             ; background-size:cover; background-position: center; height: 160px; max-width: 160px; border: 2px solid #ffffff;"></div>
  50.                          
  51.                         </div>
  52.                         <div class="col-sm-9 p-2">
  53.                             <!--info box-->
  54.                             <div class="p-3" style="background: #383838; color: #ededed; border: 2px solid #ffffff; border-radius: 16px; margin-top: 40px;">
  55.                              
  56.                                 <h1 style="font-variant: small-caps;">
  57.                                     Name here
  58.                                 </h1>
  59.                              
  60.                                 <hr class="my-1" style="height: 1px; background-image: linear-gradient(45deg, #ba71d5, #85d7e2, #c4eb88);">
  61.                              
  62.                                 <p> place a short description or quote here. box will grow with content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  63.                              
  64.                             </div>
  65.                          
  66.                         </div>
  67.                     </div>
  68.                  
  69.                 </div>
  70.          
  71.             </div>   
  72.          
  73.             <div class="row no-gutters">
  74.                 <div class="col-sm-4 p-2">
  75.                     <ul class="nav nav-tabs row" style="border: 0;">
  76.                         <li class="col-12 mb-1"><a class="w-100 btn text-left mb-2  active" data-toggle="tab" href="#profiletab1" style="background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); color: #9cfaff; border-radius: 14px; border: 2px solid #ffffff; font-variant: small-caps; font-size: 1.2em;">
  77.                             Basics
  78.                         </a></li>
  79.                         <li class="col-12 mb-1"><a class="w-100 btn text-left mb-2 " data-toggle="tab" href="#profiletab2" style="background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); color: #9cfaff; border-radius: 14px; border: 2px solid #ffffff; font-variant: small-caps; font-size: 1.2em;">
  80.                             Lore
  81.                         </a></li>
  82.                         <li class="col-12 mb-1"><a class="w-100 btn text-left mb-2 " data-toggle="tab" href="#profiletab3" style="background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); color: #9cfaff; border-radius: 14px; border: 2px solid #ffffff; font-variant: small-caps; font-size: 1.2em;">
  83.                             Trivia
  84.                         </a></li>
  85.                         <li class="col-12 mb-1"><a class="w-100 btn text-left" data-toggle="tab" href="#profiletab4" style="background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); color: #9cfaff; border-radius: 14px; border: 2px solid #ffffff; font-variant: small-caps; font-size: 1.2em;">
  86.                             Design
  87.                         </a></li>
  88.                     </ul>
  89.                 </div>
  90.              
  91.                 <div class="col-sm-8 p-2">
  92.                  
  93.                     <!--info box-->
  94.                     <div class="p-3" style="background: #383838; color: #ededed; border-radius: 16px; border: 2px solid #ffffff;">
  95.                         <div class="tab-content">
  96.                          
  97.                             <!--==============tab 1=================================================================-->
  98.                             <div class="tab-pane fade active show" id="profiletab1">
  99.                                 <div class="overflow-auto" style="height: 320px;">
  100.                                  
  101.                                     <div class="row no-gutters">
  102.                                      
  103.                                         <div class="col-sm-6 p-1">
  104.                                             <div class="d-flex justify-content-between">
  105.                                                 <span style="color: #dfffad; font-variant: small-caps;">First name</span>
  106.                                                 <span>content</span>
  107.                                             </div>
  108.                                             <hr class="my-1" style="background: #dfffad;">
  109.                                         </div>
  110.                                      
  111.                                         <div class="col-sm-6 p-1">
  112.                                             <div class="d-flex justify-content-between">
  113.                                                 <span style="color: #dfffad; font-variant: small-caps;">Last name</span>
  114.                                                 <span>content</span>
  115.                                             </div>
  116.                                             <hr class="my-1" style="background: #dfffad;">
  117.                                         </div>
  118.                                      
  119.                                         <div class="col-sm-6 p-1">
  120.                                             <div class="d-flex justify-content-between">
  121.                                                 <span style="color: #dfffad; font-variant: small-caps;">Gender</span>
  122.                                                 <span>content</span>
  123.                                             </div>
  124.                                             <hr class="my-1" style="background: #dfffad;">
  125.                                         </div>
  126.                                      
  127.                                         <div class="col-sm-6 p-1">
  128.                                             <div class="d-flex justify-content-between">
  129.                                                 <span style="color: #dfffad; font-variant: small-caps;">Species</span>
  130.                                                 <span>content</span>
  131.                                             </div>
  132.                                             <hr class="my-1" style="background: #dfffad;">
  133.                                         </div>
  134.                                      
  135.                                         <div class="col-sm-6 p-1">
  136.                                             <div class="d-flex justify-content-between">
  137.                                                 <span style="color: #dfffad; font-variant: small-caps;">Race</span>
  138.                                                 <span>content</span>
  139.                                             </div>
  140.                                             <hr class="my-1" style="background: #dfffad;">
  141.                                         </div>
  142.                                      
  143.                                         <div class="col-sm-6 p-1">
  144.                                             <div class="d-flex justify-content-between">
  145.                                                 <span style="color: #dfffad; font-variant: small-caps;">Birthday</span>
  146.                                                 <span>content</span>
  147.                                             </div>
  148.                                             <hr class="my-1" style="background: #dfffad;">
  149.                                         </div>
  150.                                      
  151.                                         <div class="col-sm-6 p-1">
  152.                                             <div class="d-flex justify-content-between">
  153.                                                 <span style="color: #dfffad; font-variant: small-caps;">Age</span>
  154.                                                 <span>content</span>
  155.                                             </div>
  156.                                             <hr class="my-1" style="background: #dfffad;">
  157.                                         </div>
  158.                                      
  159.                                         <div class="col-sm-6 p-1">
  160.                                             <div class="d-flex justify-content-between">
  161.                                                 <span style="color: #dfffad; font-variant: small-caps;">Profession</span>
  162.                                                 <span>content</span>
  163.                                             </div>
  164.                                             <hr class="my-1" style="background: #dfffad;">
  165.                                         </div>
  166.                                      
  167.                                     </div>
  168.                                  
  169.                                     <!--short intro-->
  170.                                     <p>short intro here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim facilisis gravida neque convallis a cras semper auctor neque. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sodales ut etiam sit amet nisl. </p>
  171.                                  
  172.                                  
  173.                                     <!--likes and dislike-->
  174.                                     <div class="row no-gutters">
  175.                                      
  176.                                         <div class="col-sm-6 p-1">
  177.                                             <hr class="my-1" style="background: #dfffad;">
  178.                                             <div style="color: #dfffad; font-variant: small-caps;">Likes</div>
  179.                                             <ul class="fa-ul">
  180.                                                
  181.                                                 <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-heart"></i></span>
  182.                                                     content
  183.                                                 </li>
  184.                                                
  185.                                                 <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-heart"></i></span>
  186.                                                     content
  187.                                                 </li>
  188.                                                
  189.                                                 <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-heart"></i></span>
  190.                                                     content
  191.                                                 </li>
  192.                                                
  193.                                                 <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-heart"></i></span>
  194.                                                     content
  195.                                                 </li>
  196.                                                
  197.                                             </ul>
  198.                                         </div>
  199.                                      
  200.                                         <div class="col-sm-6 p-1">
  201.                                             <hr class="my-1" style="background: #dfffad;">
  202.                                             <div style="color: #dfffad; font-variant: small-caps;">Dislikes</div>
  203.                                             <ul class="fa-ul">
  204.                                                
  205.                                                 <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-heart-crack"></i></span>
  206.                                                     content
  207.                                                 </li>
  208.                                                
  209.                                                 <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-heart-crack"></i></span>
  210.                                                     content
  211.                                                 </li>
  212.                                                
  213.                                                
  214.                                                 <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-heart-crack"></i></span>
  215.                                                     content
  216.                                                 </li>
  217.                                                
  218.                                                 <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-heart-crack"></i></span>
  219.                                                     content
  220.                                                 </li>
  221.                                                
  222.                                             </ul>
  223.                                         </div>
  224.                                      
  225.                                      
  226.                                     </div>      
  227.                                  
  228.                                 </div>
  229.                              
  230.                             </div>
  231.                          
  232.                             <!--======================tab 2==========================================================-->
  233.                             <div class="tab-pane fade" id="profiletab2">
  234.                                 <div class="overflow-auto" style="height: 320px;">
  235.                                  
  236.                                     <h2 style="color: #dfffad; font-variant: small-caps;">
  237.                                         <i class="fa-duotone fa-regular fa-bookmark"></i>
  238.                                         Header title
  239.                                     </h2>
  240.                                     <p>
  241.                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim facilisis gravida neque convallis a cras semper auctor neque. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sodales ut etiam sit amet nis
  242.                                     </p>
  243.                                  
  244.                                     <p>
  245.                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim facilisis gravida neque convallis a cras semper auctor neque. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sodales ut etiam sit amet nis
  246.                                     </p>
  247.                                  
  248.                                     <h2 style="color: #dfffad; font-variant: small-caps;">
  249.                                         <i class="fa-duotone fa-regular fa-bookmark"></i>
  250.                                         Header title
  251.                                     </h2>
  252.                                     <p>
  253.                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim facilisis gravida neque convallis a cras semper auctor neque. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sodales ut etiam sit amet nis
  254.                                     </p>
  255.                                  
  256.                                     <h2 style="color: #dfffad; font-variant: small-caps;">
  257.                                         <i class="fa-duotone fa-regular fa-bookmark"></i>
  258.                                         Header title
  259.                                     </h2>
  260.                                     <p>
  261.                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim facilisis gravida neque convallis a cras semper auctor neque. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sodales ut etiam sit amet nis
  262.                                     </p>
  263.                                  
  264.                                  
  265.                                 </div>
  266.  
  267.                             </div>
  268.                          
  269.                             <!--===========================tab 3======================================================-->
  270.                             <div class="tab-pane fade" id="profiletab3">
  271.                                 <div class="overflow-auto" style="height: 320px;">
  272.                                     <h2 style="color: #dfffad; font-variant: small-caps;">
  273.                                         Trivia
  274.                                     </h2>
  275.                                     <ul class="fa-ul">
  276.                                        
  277.                                         <li><span class="fa-li"><i class="fa-duotone fa-regular fa-thought-bubble" style="color: #9cfaff;"></i></span>
  278.                                             content
  279.                                         </li>
  280.                                        
  281.                                         <li><span class="fa-li"><i class="fa-duotone fa-regular fa-thought-bubble" style="color: #9cfaff;"></i></span>
  282.                                             content
  283.                                         </li>
  284.                                        
  285.                                         <li><span class="fa-li"><i class="fa-duotone fa-regular fa-thought-bubble" style="color: #9cfaff;"></i></span>
  286.                                             content
  287.                                         </li>
  288.                                        
  289.                                         <li><span class="fa-li"><i class="fa-duotone fa-regular fa-thought-bubble" style="color: #9cfaff;"></i></span>
  290.                                             content
  291.                                         </li>
  292.                                        
  293.                                         <li><span class="fa-li"><i class="fa-duotone fa-regular fa-thought-bubble" style="color: #9cfaff;"></i></span>
  294.                                             content
  295.                                         </li>
  296.                                        
  297.                                     </ul>
  298.                                  
  299.                                 </div>
  300.  
  301.                             </div>
  302.                          
  303.                             <!--===========================tab 4======================================================-->
  304.                             <div class="tab-pane fade" id="profiletab4">
  305.                                 <div class="overflow-auto" style="height: 320px;">
  306.                                  
  307.                                     <h2 style="color: #dfffad; font-variant: small-caps;">
  308.                                         Design notes
  309.                                     </h2>
  310.                                     <ul class="fa-ul">
  311.                                        
  312.                                         <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-pencil"></i></span>
  313.                                             content
  314.                                         </li>
  315.                                        
  316.                                         <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-pencil"></i></span>
  317.                                             content
  318.                                         </li>
  319.                                        
  320.                                         <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-pencil"></i></span>
  321.                                             content
  322.                                         </li>
  323.                                        
  324.                                         <li><span class="fa-li" style="color: #9cfaff;"><i class="fa-duotone fa-regular fa-pencil"></i></span>
  325.                                             content
  326.                                         </li>
  327.                                        
  328.                                     </ul>
  329.                                  
  330.                                     <!--reference image here-->
  331.                                     <img src="
  332.                                     https://plus.unsplash.com/premium_photo-1675761990188-7286f7dc0d10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80
  333.                                     ">
  334.                                  
  335.                                 </div>
  336.  
  337.                             </div>
  338.                          
  339.                         </div>
  340.                     </div>
  341.                     </div>
  342.  
  343.                 </div>
  344.              
  345.                 <!--code credit-->
  346.                 <div style="text-align: right;">
  347.                     <a class="badge" style="color: #ededed; background: #383838; border: 1px solid #ffffff;" data-toggle="tooltip" data-placement="left" title="html by EunaCodes" href="https://toyhou.se/EunaCodes" target="_blank">
  348.                         <i class="fa-solid fa-code"></i>
  349.                         code</a>
  350.                 </div>
  351.                  
  352.                  
  353.             </div>
  354.          
  355.                      
  356.         </div>      
  357.     </div>
  358.  
  359.    
  360. </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!