API tools faq
paste
Advertisement
orcasharks

saltwater [F2U HTML]

orcasharks
Aug 18th, 2022 (edited)
1,149
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.87 KB | None | 0 0
raw download clone embed print report
  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;">WELCOME</p> </span>
  34.  
  35.         <center>
  36.  
  37.     <div style="background:white;width:600px;height:500px;border-width:3px;border:solid;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-list-radio"></i></a>
  68.   </li>
  69.  
  70.   <!-- STORY 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-book"></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-user-group"></i></a>
  78.  </li>
  79.  
  80. </ul>
  81.  
  82.                 <span>
  83.  
  84.  
  85.     <!-- EXTENDED INFO TEXT BOX -->
  86.  
  87.     <div style="height:250px;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.   <p class="justify-content-between my-2">
  96.  
  97.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;">NAME</span>
  98.  
  99.                <span style="color:black;font-size:15px;letter-spacing:1px;">name</span>
  100.  
  101.             </p>
  102.  
  103.            
  104.  
  105.             <p class="justify-content-between my-2">
  106.  
  107.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;">AGE</span>
  108.  
  109.                <span style="color:black;font-size:15px;letter-spacing:1px;">age</span>
  110.  
  111.             </p>
  112.  
  113.            
  114.  
  115.             <p class="justify-content-between my-2">
  116.  
  117.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;">GENDER</span>
  118.  
  119.                <span style="color:black;font-size:15px;letter-spacing:1px;">gender</span>
  120.  
  121.             </p>
  122.  
  123.             <p class="justify-content-between my-2">
  124.  
  125.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;">ORIENTATION</span>
  126.  
  127.                <span style="color:black;font-size:15px;letter-spacing:1px;">orientation</span>
  128.  
  129.             </p>
  130.  
  131.             <p class="justify-content-between my-2">
  132.  
  133.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;">SPECIES</span>
  134.  
  135.                <span style="color:black;font-size:15px;letter-spacing:1px;">species</span>
  136.  
  137.             </p>
  138.  
  139.            
  140.  
  141.             <p class="justify-content-between my-2">
  142.  
  143.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;">OCCUPATION</span>
  144.  
  145.                <span style="color:black;font-size:15px;letter-spacing:1px;">occupation</span>
  146.  
  147.             </p>
  148.            
  149.            
  150.             <p class="justify-content-between my-2">
  151.  
  152.               <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:1px;">STATUS</span>
  153.  
  154.                <span style="color:black;font-size:15px;letter-spacing:1px;">status</span>
  155.  
  156.             </p>
  157.   </div>
  158.  
  159.   <!-- STORY TEXT -->
  160.   <div class="tab-pane fade" id="TAB-2">
  161.     <p style=text-align:left;margin-top:5px;margin-bottom:3px;>
  162.       <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:2px;">HISTORY</p>
  163.          
  164.   <p style=text-align:left;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. Mauris pellentesque pulvinar pellentesque habitant morbi. Nascetur ridiculus mus mauris vitae ultricies leo. Tellus molestie nunc non blandit massa enim nec dui nunc. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Massa enim nec dui nunc mattis enim ut tellus. Mollis nunc sed id semper. Facilisis volutpat est velit egestas dui id ornare. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. </p>
  165.    
  166.     <p style=text-align:left;margin-top:-5px;margin-bottom:3px;>  
  167.       <span class="font-weight-bold" style="color:#167b7d;font-size:15px;letter-spacing:2px;">PRESENT</p>
  168.    
  169.    <p style=text-align:left;margin-top:3px;color:black;letter-spacing:1px;> Facilisis gravida neque convallis a cras semper. Id aliquet risus feugiat in. Sapien et ligula ullamcorper malesuada proin libero nunc. Eget nunc lobortis mattis aliquam faucibus purus in massa. Justo donec enim diam vulputate ut pharetra sit. Risus ultricies tristique nulla aliquet. Nec feugiat in fermentum posuere urna nec tincidunt. Volutpat sed cras ornare arcu. Amet mattis vulputate enim nulla aliquet porttitor lacus. Dignissim cras tincidunt lobortis feugiat vivamus. Mattis rhoncus urna neque viverra justo. At erat pellentesque adipiscing commodo elit at imperdiet. Volutpat ac tincidunt vitae semper quis. Vitae tortor condimentum lacinia quis vel. </p>
  170.  
  171.  
  172.   </div>
  173.  
  174. <!-- RELATIONSHIPS -->
  175.   <div class="tab-pane fade" id="TAB-3">
  176.  
  177. <p>
  178.  
  179. <!-- RELATIONSHIP 1 -->
  180.   <div class="row no-gutters">
  181.  
  182.  
  183.   <div class="col-12 col-md-15 p-1">
  184.   <div class="justify-content-between" style="letter-spacing: 1px;">
  185.  
  186. <!-- NAME + RELATION 1 -->
  187.  
  188.     <span>
  189.       <a href="INSERT URL HERE" style="color: #167b7d;font-size:15px;letter-spacing:1px;" class="font-weight-bold"> NAME</a> ; relation
  190.     </span>
  191.  
  192. <!-- HEARTS 1 -->
  193.   <span style="color: #167b7d;"><i class="fas fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i><i class="far fa-heart fa-fw"></i><i class="far fa-heart fa-fw"></i></span>
  194.  
  195.   </div><div class="my-1" style="border: 1px solid #167b7d;"></div>
  196.   <div class="p-1 mb-1">
  197.  
  198. <!-- DESCRIPTION 1 -->
  199.     <p style=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.</p>
  200.  
  201.   </div></div></div>
  202.  
  203.   <!-- RELATIONSHIP 2 -->
  204.   <div class="row no-gutters">
  205.  
  206.  
  207.   <div class="col-12 col-md-15 p-1">
  208.   <div class="justify-content-between" style="letter-spacing: 1px;">
  209.  
  210. <!-- NAME + RELATION 2 -->
  211.  
  212.     <span>
  213.       <a href="INSERT URL HERE" style="color: #167b7d;font-size:15px;letter-spacing:1px;" class="font-weight-bold"> NAME</a> ; relation
  214.     </span>
  215.  
  216. <!-- HEARTS 2 -->
  217.   <span style="color: #167b7d;"><i class="fas fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i><i class="far fa-heart fa-fw"></i><i class="far fa-heart fa-fw"></i></span>
  218.  
  219.   </div><div class="my-1" style="border: 1px solid #167b7d;"></div>
  220.   <div class="p-1 mb-1">
  221.  
  222. <!-- DESCRIPTION 2 -->
  223.     <p style=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.</p>
  224.  
  225.   </div></div></div>
  226.  
  227.  
  228. </p>
  229.  </center>
  230.   </div></div></div></div>
  231.  
  232.  
  233.  
  234. <!-- BOTTOM BORDER -->
  235.  
  236.         <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;">
  237.          
  238. <!-- CREDIT -->
  239.             <span class="font-weight-bold" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;"><a href="https://toyhou.se/saintarcs" style="color:#FFFFFF;font-size:20px;letter-spacing:1px;padding:15px;float:center"><b> <i class="fa-solid fa-moon-stars"></i> </b></a>
  240.              
  241.        
  242.              
  243.               </p> </span>
  244. </body>
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!