Advertisement
orcasharks

freshwater [F2U HTML]

Aug 18th, 2022
1,218
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.32 KB | None | 0 0
  1. <!--
  2.  
  3.  
  4. Press CTRL + F to find and replace the following!:
  5.  
  6.  
  7.    MAIN TITLE TEXT: #FFFFFF
  8.  
  9.    BOX COLOR: #167b7d
  10.  
  11.    SUB BOX TITLE TEXT COLOR: #d1cbd4
  12.  
  13.    LARGE TEXT COLOR: #167b7d
  14.    
  15.    IMAGE URL: https://images.unsplash.com/photo-1464925257126-6450e871c667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80
  16.    Image is currently set to "cover" on line 48, try changing it around as you need!
  17.  
  18.  
  19. -->
  20.  
  21.  
  22. <div class="container-fluid pt-4 " style="font-weight:400;font-size:13px;font-color:black;max-width:700px;">
  23.  
  24. <div class="row no-gutters">
  25.  
  26.  
  27.    <!-- CONTAINER-->
  28.  
  29.     <center style=margin-left:10px;margin-top:10px;float:center;width:600px;border-radius: 40px 40px 0 0;>
  30.  
  31.         <p style="margin:0px;height:50px;background-color:#167b7d;border-width:3px;border:solid;border-color:#167b7d;color:white;border-radius: 40px 40px 0 0;">
  32.  
  33.             <span class="font-weight-bold" style="color:#FFFFFF;font-size:30px;letter-spacing:3px;">PROFILE</p> </span>
  34.  
  35.         <center>
  36.  
  37.     <div style="background:white;width:600px;height:470px;border-width:3px;border-style:solid dashed solid dashed;border-color:#167b7d">
  38.  
  39.    
  40.    <!-- IMAGE BOX -->
  41.  
  42.     <center style=float:center;margin-left:10px;margin-top:15px;margin-right:10px;width:514px;>
  43.  
  44.       <div style="height:150px;font-size300%;color:#167b7d;margin:0px;background:white;border-width:3px;border:solid;border-color:#167b7d;">
  45.  
  46. <div class="h-100 col tooltipster" title="Hello!" data-placement="bottom" style="background-image: url(https://images.unsplash.com/photo-1464925257126-6450e871c667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80);background-size: cover;">
  47.  
  48. </div>
  49.             <p class="justify-content-between my-2">
  50.  
  51.     </div></center>
  52.  
  53.  
  54. <!-- EXTENDED INFO  -->
  55.  
  56.    
  57.  
  58.     <center style=margin-right:10px;margin-top:20px;margin-left:10px;;float:center;width:514px;>
  59.  
  60.      
  61.  
  62. <!-- TABS -->
  63. <ul class="nav nav-tabs">
  64.  
  65.   <!-- INFO TAB -->
  66.  <li class="nav-item">
  67.     <a class="nav-link active" data-toggle="tab" href="#TAB-1" style="margin:0px;background-color:#167b7d;border-width:3px;border:solid;border-color:#167b7d;color:white;"><i class="fa-solid fa-address-card"></i></a>
  68.   </li>
  69.  
  70.   <!-- FEATURED TAB -->
  71.   <li class="nav-item">
  72.      <a class="nav-link" data-toggle="tab" href="#TAB-2" style="margin:0px;background-color:#167b7d;border-width:3px;border:solid;border-color:#167b7d;color:white;"><i class="fa-solid fa-stars"></i></a>
  73.   </li>
  74.  
  75.   <!-- RELATIONSHIPS TAB -->
  76.   <li class="nav-item">
  77.     <a class="nav-link" data-toggle="tab" href="#TAB-3" style="margin:0px;background-color:#167b7d;border-width:3px;border:solid;border-color:#167b7d;color:white;"><i class="fa-solid fa-paintbrush-fine"></i></a>
  78.  </li>
  79.  
  80. </ul>
  81.  
  82.                 <span>
  83.  
  84.  
  85.     <!-- INFO TEXT BOX -->
  86.  
  87.     <div style="height:220px;font-size300%;color:black;margin:0px;background:white;border-width:3px;border:solid;border-color:#167b7d;padding-right:20px;padding-left:20px;padding-top:8px;padding-bottom:8px;overflow:auto;">
  88.  
  89. <!-- TAB TEXTS -->
  90. <div class="tab-content">
  91.  
  92.   <!-- INFO TEXT -->
  93.  <div class="tab-pane fade show active" id="TAB-1">
  94.    
  95. <span class="font-weight-bold" style="color:#167b7d;font-size:30px;letter-spacing:3px;">NAME + AGE + GENDER</p> </span>
  96.  
  97.   <p style=text-align:center;margin-top:3px;color:black;letter-spacing:1px;> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Ultricies leo integer malesuada nunc vel risus. Senectus et netus et malesuada fames ac. Donec adipiscing tristique risus nec feugiat in. </p>
  98.  
  99.             <p style=text-align:center;margin-top:3px;color:black;letter-spacing:5px;fony-size:20px>
  100.                  <a href="https://instagram.com/orcasharks" data-toggle="tooltip" title="instagram" style=color:#167b7d><i class="fa-brands fa-instagram"></i></a>
  101.                  <a href="https://orcasharks.tumblr.com/" data-toggle="tooltip" title="tumblr" style=color:#167b7d><i class="fa-brands fa-tumblr"></i></a>
  102.                  <a href="https://twitter.com/orcasharkss" data-toggle="tooltip" title="twitter" style=color:#167b7d><i class="fa-brands fa-twitter"></i></a>
  103.                  <a href="https://artfight.net/~Orcasharks" data-toggle="tooltip" title="artfight" style=color:#167b7d><i class="fa-solid fa-pen-paintbrush"></i></a>
  104.             </p>
  105.                  
  106.             </p>
  107.   </div>
  108.  
  109.   <!-- FEATURED TEXT -->
  110.   <div class="tab-pane fade" id="TAB-2">
  111.     <p style=text-align:center;margin-top:15px;margin-bottom:3px;>
  112.          
  113. <a href="LINK 1"><img src="https://via.placeholder.com/150" alt="NAME 1" style="width:150px;height:150px;border-radius: 40px 40px 40px 40px;"></a>
  114.  
  115. <a href="LINK 2"><img src="https://via.placeholder.com/150" alt="NAME 2" style="width:150px;height:150px;border-radius: 40px 40px 40px 40px;"</a>
  116.  
  117. <a href="LINK 3"><img src="https://via.placeholder.com/150" alt="NAME 3" style="width:150px;height:150px;border-radius: 40px 40px 40px 40px;"</a></p>
  118.  
  119.   <p><span class="font-weight-bold" style="color:#167b7d;font-size:10px;letter-spacing:3px;">NAME 1 + NAME 2 + NAME 3</p> </span>
  120.  
  121.   </p></div>
  122.  
  123. <!-- ART INFO -->
  124.   <div class="tab-pane fade" id="TAB-3">
  125.  
  126. <p>
  127.  
  128.  
  129. <p class="justify-content-between my-2">
  130.  
  131.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;margin-top:-10px;">COMMISSIONS</span>
  132.  
  133.                <span style="color:black;font-size:15px;letter-spacing:1px;">info</span>
  134.  
  135.             </p>
  136.  
  137.            
  138.  
  139.             <p class="justify-content-between my-2">
  140.  
  141.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;margin-top:-10px;">ART TRADES</span>
  142.  
  143.                <span style="color:black;font-size:15px;letter-spacing:1px;">info</span>
  144.  
  145.             </p>
  146.  
  147.            
  148.  
  149.             <p class="justify-content-between my-2">
  150.  
  151.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;margin-top:-10px;">REQUESTS</span>
  152.  
  153.                <span style="color:black;font-size:15px;letter-spacing:1px;">info</span>
  154.  
  155.             </p>
  156.  
  157. <center>
  158.    
  159.           <img src="http://via.placeholder.com/115x80" style="margin-left:0px;margin-top:10px;width:115px;height:80px;margin-top:5px;">
  160.        
  161.           <img src="http://via.placeholder.com/115x80" style="margin-right:5px;margin-left:5px;margin-top:10px;width:115px;height:80px;margin-top:5px;">
  162.        
  163.           <img src="http://via.placeholder.com/115x80" style="margin-right:0px;margin-top:10px;width:115px;height:80px;margin-top:5px;"></center>
  164.  
  165. </p>
  166.  </center>
  167.   </div></div></div></div>
  168.  
  169.  
  170.  
  171. <!-- BOTTOM BORDER -->
  172.  
  173.         <p style="margin:0px;height:50px;background-color:#167b7d;border-width:3px;border:solid;border-color:#167b7d;color:white;border-radius: 0 0 40px 40px;">
  174.          
  175. <!-- CREDIT -->
  176.             <span class="font-weight-bold" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;"><a href="https://toyhou.se/orcasharks" style="color:#FFFFFF;font-size:20px;letter-spacing:1px;padding:15px;float:center"><b> <i class="fa-solid fa-moon-stars"></i> </b></a>
  177.              
  178.        
  179.              
  180.               </p> </span>
  181. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement