Advertisement
orcasharks

TABBY f2u html

Aug 18th, 2022
646
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.50 KB | None | 0 0
  1. <!--
  2.  
  3.  
  4. Press CTRL + F to find and replace the following colors!:
  5.  
  6.  
  7.    BOX COLOR: #648767
  8.  
  9.    SUB BOX TITLE TEXT COLOR: #e3fae5
  10.  
  11.    LARGE TEXT COLOR: #648767
  12.  
  13.   The TAB ICONS are from fontawesome, you can change the icons used by visiting their site, copying their html and using CTRL + F to find and replace the following in with whatever you want :)
  14.   1. <i class="fa-solid fa-book"></i>
  15.   2. <i class="fa-solid fa-list-radio"></i>
  16.   3. <i class="fa-solid fa-user-group"></i>
  17.  
  18.  To replace character relationship urls, search URL and paste their url between the quotation marks!
  19.  
  20. -->
  21.  
  22.  
  23. <div class="container-fluid pt-4 " style="font-weight:400;font-size:13px;font-color:black;max-width:1000px">
  24.  
  25. <div class="row no-gutters">
  26.  
  27.  
  28.    <!-- CONTAINER-->
  29.  
  30.     <center style=margin-left:10px;margin-top:10px;float:left;width:850px;>
  31.  
  32.        
  33.  
  34.         <center>
  35.  
  36.     <div style="background:white;width:850px;height:600px;border-width:3px;border:solid;border-color:#648767">
  37.  
  38.    
  39.  
  40.     <!-- IMAGE BOX  -->
  41.  
  42.    
  43.  
  44.     <center style=margin-left:10px;margin-top:10px;float:left;width:300px;>
  45.  
  46.         <p style="margin:0px;background-color:#648767;border-width:3px;border:solid;border-color:#648767;color:white;">
  47.  
  48.             <span class="font-weight-bold" style="color:#e3fae5;font-size:13px;letter-spacing:1px;">
  49.  
  50.         </span>
  51.  
  52.     </p>
  53.  
  54.       <img src="https://via.placeholder.com/300x550" style="width:300x;height:550px;border:solid;border-color:#648767">
  55.  
  56.     </p>
  57.  
  58.    </center>
  59.  
  60.    
  61.  
  62.     <!-- BASIC INFO BOX -->
  63.  
  64.     <div>
  65.  
  66.     <center style=margin-left:10px;margin-top:10px;float:left;width:514px;>
  67.  
  68.         <p style="margin:0px;background-color:#648767;border-width:3px;border:solid;border-color:#648767;color:white;">
  69.  
  70.             <span class="font-weight-bold" style="color:#e3fae5;font-size:13px;letter-spacing:1px;">
  71.  
  72.         </span>
  73.  
  74.     </p>
  75.  
  76.    
  77.  
  78.     <div style="height:150px;font-size300%;color:#648767;margin:0px;background:white;border-width:3px;border:solid;border-color:#648767;padding-right:10px;padding-left:10px;">
  79.  
  80.            
  81.  
  82.             <p class="justify-content-between my-2">
  83.  
  84.               <span class="font-weight-bold" style="color:#648767;font-size:13px;letter-spacing:1px;">NAME</span>
  85.           <span style=letter-spacing:5px;>...</span>
  86.                <span style="color:black;font-size:13px;letter-spacing:1px;">name</span>
  87.  
  88.             </p>
  89.  
  90.            
  91.  
  92.             <p class="justify-content-between my-2">
  93.  
  94.               <span class="font-weight-bold" style="color:#648767;font-size:13px;letter-spacing:1px;">AGE</span>
  95.           <span style=letter-spacing:5px;>...</span>
  96.                <span style="color:black;font-size:13px;letter-spacing:1px;">age</span>
  97.  
  98.             </p>
  99.  
  100.            
  101.  
  102.             <p class="justify-content-between my-2">
  103.  
  104.               <span class="font-weight-bold" style="color:#648767;font-size:13px;letter-spacing:1px;">GENDER</span>
  105.           <span style=letter-spacing:5px>...</span>
  106.                <span style="color:black;font-size:13px;letter-spacing:1px;">gender</span>
  107.  
  108.             </p>
  109.  
  110.            
  111.  
  112.             <p class="justify-content-between my-2">
  113.  
  114.               <span class="font-weight-bold" style="color:#648767;font-size:13px;letter-spacing:1px;">SPECIES</span>
  115.           <span style=letter-spacing:5px>...</span>
  116.                <span style="color:black;font-size:13px;letter-spacing:1px;">species</span>
  117.  
  118.             </p>
  119.  
  120.            
  121.  
  122.             <p class="justify-content-between my-2">
  123.  
  124.               <span class="font-weight-bold" style="color:#648767;font-size:13px;letter-spacing:1px;">OCCUPATION</span>
  125.           <span style=letter-spacing:5px>...</span>
  126.                <span style="color:black;font-size:13px;letter-spacing:1px;">occupation</span>
  127.  
  128.             </p>
  129.  
  130.     </div></center>
  131.  
  132.  
  133. <!-- EXTENDED INFO HEADER -->
  134.  
  135.    
  136.  
  137.     <center style=margin-right:10px;margin-top:10px;float:right;width:514px;>
  138.  
  139.      
  140.  
  141. <!-- TABS -->
  142. <ul class="nav nav-tabs">
  143.  
  144.   <!-- STORY TAB -->
  145.  <li class="nav-item">
  146.     <a class="nav-link active" data-toggle="tab" href="#TAB-1" style="margin:0px;background-color:#648767;border-width:3px;border:solid;border-color:#648767;color:white;"><i class="fa-solid fa-book"></i></a>
  147.   </li>
  148.  
  149.   <!-- NOTES TAB -->
  150.   <li class="nav-item">
  151.      <a class="nav-link" data-toggle="tab" href="#TAB-2" style="margin:0px;background-color:#648767;border-width:3px;border:solid;border-color:#648767;color:white;"><i class="fa-solid fa-list-radio"></i></a>
  152.   </li>
  153.  
  154.   <!-- RELATIONSHIPS TAB -->
  155.   <li class="nav-item">
  156.     <a class="nav-link" data-toggle="tab" href="#TAB-3" style="margin:0px;background-color:#648767;border-width:3px;border:solid;border-color:#648767;color:white;"><i class="fa-solid fa-user-group"></i></a>
  157.  </li>
  158.  
  159. </ul>
  160.  
  161.                 <span>
  162.  
  163.  
  164.     <!-- EXTENDED INFO TEXT BOX -->
  165.  
  166.     <div style="height:350px;font-size300%;color:black;margin:0px;background:white;border-width:3px;border:solid;border-color:#648767;padding-right:20px;padding-left:20px;padding-top:15px;padding-bottom:20px;overflow:auto">
  167.  
  168. <!-- TAB TEXTS -->
  169. <div class="tab-content">
  170.  
  171.   <!-- STORY TEXT -->
  172.  <div class="tab-pane fade show active" id="TAB-1">
  173.    
  174.    <p style=text-align:left>    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.
  175.    
  176.    <p style=text-align:left>    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.
  177.  
  178.    <p style=text-align:left>    Sed velit dignissim sodales ut. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Non nisi est sit amet facilisis magna etiam tempor orci. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nunc mattis enim ut tellus elementum sagittis. Semper eget duis at tellus at urna. Urna porttitor rhoncus dolor purus non enim praesent. Diam ut venenatis tellus in metus vulputate eu scelerisque felis. Mattis aliquam faucibus purus in massa tempor nec feugiat nisl. Arcu dictum varius duis at consectetur lorem donec massa sapien. Ac turpis egestas integer eget. Aliquam ultrices sagittis orci a scelerisque.</p>
  179.   </div>
  180.  
  181.   <!-- NOTES TEXT -->
  182.   <div class="tab-pane fade" id="TAB-2">
  183.     <p>
  184.    NOTES <div class="my-1" style="border: 1px dashed #648767;"></div>
  185.        
  186.      <div style= "text-align:left;margin-top:15px">   <ul>
  187.       <li>Fact 1</li>
  188.       <li>Fact 2</li>
  189.       <li>Fact 3</li>
  190.       <li>Fact 4</li>
  191.       <li>Fact 5</li>
  192.     </ul> </div>
  193.    
  194.     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  195.  
  196. </p>
  197.   </div>
  198.  
  199. <!-- RELATIONSHIPS -->
  200.   <div class="tab-pane fade" id="TAB-3">
  201.  
  202. <p>
  203.  
  204. <!-- RELATIONSHIP 1 -->
  205.   <div class="row no-gutters">
  206.  
  207.  
  208.   <div class="col-12 col-md-15 p-1">
  209.   <div class="justify-content-between" style="letter-spacing: 1px;">
  210.  
  211. <!-- NAME + RELATION 1 -->
  212.  
  213.     <span>
  214.       <a href="INSERT URL HERE" style="color: #648767;font-size:15px;letter-spacing:1px;"> NAME</a> ; relation
  215.     </span>
  216.  
  217. <!-- HEARTS 1 -->
  218.   <span style="color: #648767;"><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>
  219.  
  220.   </div><div class="my-1" style="border: 1px solid #648767;"></div>
  221.   <div class="p-1 mb-1">
  222.  
  223. <!-- DESCRIPTION 1 -->
  224.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  225.  
  226.   </div></div></div>
  227.  
  228.   <!-- RELATIONSHIP 2 -->
  229.   <div class="row no-gutters">
  230.  
  231.  
  232.   <div class="col-12 col-md-15 p-1">
  233.   <div class="justify-content-between" style="letter-spacing: 1px;">
  234.  
  235. <!-- NAME + RELATION 2 -->
  236.  
  237.     <span>
  238.       <a href="INSERT URL HERE" style="color: #648767;font-size:15px;letter-spacing:1px;"> NAME</a> ; relation
  239.     </span>
  240.  
  241. <!-- HEARTS 2 -->
  242.   <span style="color: #648767;"><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>
  243.  
  244.   </div><div class="my-1" style="border: 1px solid #648767;"></div>
  245.   <div class="p-1 mb-1">
  246.  
  247. <!-- DESCRIPTION 2 -->
  248.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  249.  
  250.   </div></div></div>
  251.  
  252.   <!-- RELATIONSHIP 3 -->
  253.   <div class="row no-gutters">
  254.  
  255.  
  256.   <div class="col-12 col-md-15 p-1">
  257.   <div class="justify-content-between" style="letter-spacing: 1px;">
  258.  
  259. <!-- NAME + RELATION 3 -->
  260.  
  261.     <span>
  262.       <a href="INSERT URL HERE" style="color: #648767;font-size:15px;letter-spacing:1px;"> NAME</a> ; relation
  263.     </span>
  264.  
  265. <!-- HEARTS 3 -->
  266.   <span style="color: #648767;"><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>
  267.  
  268.   </div><div class="my-1" style="border: 1px solid #648767;"></div>
  269.   <div class="p-1 mb-1">
  270.  
  271. <!-- DESCRIPTION 3 -->
  272.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  273.  
  274.   </div></div></div>
  275.  
  276. </p>
  277.  
  278. </div>
  279.  
  280.  
  281.   </div>
  282.  </center>
  283.  
  284.  
  285.  
  286.   <!-- CREDIT -->
  287.  
  288.   <div>
  289.  
  290.   <a href="https://toyhou.se/orcasharks" style="color:#648767;font-size:10px;letter-spacing:1px;padding:5px;float:right"><b></b></a>
  291.  
  292.   </div>
  293.  
  294.  
  295.  
  296.   </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement