API tools faq
paste
Teison

[TH-HTML] Froggy: Tabs

Teison
Jan 17th, 2021 (edited)
129
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 25.09 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------------------------------------------------------------
  2.  
  3.    CODING BY MOUEI @ TOYHOU.SE
  4.        
  5.        !* YOU WILL NEED TO ADD YOUR OWN IMAGE URLs. CTRL + F TO FIND "URL"
  6.  
  7.        !* To change repetitive details easily in the Toyhou.s editor (on Google Chrome),
  8.            - highlight the desired piece of code ie. a color HEX code.
  9.            - ctrl + f
  10.            - click the '+' sign under the 'find' box
  11.            - in the 'replace with' box that appears, enter your desired outcome.
  12.  
  13.        !* MAIN COLOUR CODES USED
  14.                        OBJECT                  |   COLOUR
  15.                    ------------------------------------------
  16.                        Main Text Colour        |   #426A5B
  17.                        Content Box Background  |   white
  18.                        Accent Colour           |   #8FDBBE
  19.                        Title Text              |   #FFFFFF
  20.  
  21.            - click 'replace all'
  22.  
  23. ----------------------------------------------------------------------------------------------------------------------------->
  24.  
  25. <div style="background: #eaf2ba url(BACKGROUND IMAGE URL GOES HERE) fixed; position: absolute; top: 0px; bottom: 0px; left: 0; z-index: 1; width: 100%; height: 100%;"></div>
  26.  
  27. <div class="container-fluid card" style="max-width: 1200px; z-index: 2; color: #426a5b; background: transparent; top: -200px; bottom: 0; left: 0; right: 0; border-radius: 0; border: none;">
  28. <!----------------------------------------------------------------------------------------------------------------------------
  29.        CHARACTER NAME TITLE
  30. ------------------------------------------------------------------------------------------------------------------------------>
  31.  
  32.     <div class="row mx-2 align-items-end" style="margin-bottom: -30px;">
  33.         <div class="col mx-2 p-0" style="font-size: 60pt; font-weight: bolder; letter-spacing: 5pt; color: white;">
  34.             <div style="color: #8fdbbe; display: inline; text-align: center;">F</div>
  35.             <div style="display: inline;">ULL NAME</div>
  36.         </div>
  37.  
  38. <!---------------------------------------------------------------------------------------------------------------------------->
  39.  
  40. <!----------------------------------------------------------------------------------------------------------------------------
  41.        CREDIT - DO NOT REMOVE!
  42. ------------------------------------------------------------------------------------------------------------------------------>
  43.  
  44.         <div class="col-2" style="margin-bottom: 15px; right: 0; margin-right: 0; text-align: right; font-size: 7pt; letter-spacing: 2pt; text-transform: uppercase;">
  45.           Coding by @mouei
  46.         </div>
  47.     </div>
  48.  
  49. <!---------------------------------------------------------------------------------------------------------------------------->
  50.  
  51.     <div class="row m-2">
  52. <!----------------------------------------------------------------------------------------------------------------------------
  53.        LEFT COLUMN: CHARACTER ICON
  54. ------------------------------------------------------------------------------------------------------------------------------>
  55.  
  56.         <div class="col-md-3 m-2">
  57.             <div class="row">
  58.                 <div
  59.                    class="col"
  60.                    style="background: url(BACKGROUND IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; height: auto; min-height: 284px;"
  61.                ></div>
  62.             </div>
  63.  
  64. <!---------------------------------------------------------------------------------------------------------------------------->
  65.  
  66. <!----------------------------------------------------------------------------------------------------------------------------
  67.        LEFT COLUMN: CHARACTER DETAILS
  68. ------------------------------------------------------------------------------------------------------------------------------>
  69.             <div class="row mt-2">
  70.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8fdbbe; border-radius: 10px 0 0 10px;">
  71.                     <i class="fal fa-user"></i>
  72.                 </div>
  73.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  74.                     Name
  75.                 </div>
  76.             </div>
  77.  
  78.             <div class="row mt-2">
  79.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8fdbbe; border-radius: 10px 0 0 10px;">
  80.                     <i class="fal fa-user"></i>
  81.                 </div>
  82.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  83.                     Age
  84.                 </div>
  85.             </div>
  86.  
  87.             <div class="row mt-2">
  88.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8fdbbe; border-radius: 10px 0 0 10px;">
  89.                     <i class="fal fa-user"></i>
  90.                 </div>
  91.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  92.                     Identity
  93.                 </div>
  94.             </div>
  95.  
  96.             <div class="row mt-2">
  97.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8fdbbe; border-radius: 10px 0 0 10px;">
  98.                     <i class="fal fa-user"></i>
  99.                 </div>
  100.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  101.                     Species
  102.                 </div>
  103.             </div>
  104.  
  105.             <div class="row mt-2">
  106.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8fdbbe; border-radius: 10px 0 0 10px;">
  107.                     <i class="fal fa-user"></i>
  108.                 </div>
  109.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  110.                     Height
  111.                 </div>
  112.             </div>
  113.  
  114.             <div class="row mt-2">
  115.                 <div class="col-2 p-1" style="text-align: center; color: white; background: #8fdbbe; border-radius: 10px 0 0 10px;">
  116.                     <i class="fal fa-user"></i>
  117.                 </div>
  118.                 <div class="col py-1 px-2" style="background: white; border-radius: 0 10px 10px 0;">
  119.                     Weight
  120.                 </div>
  121.             </div>
  122.         </div>
  123.        
  124. <!---------------------------------------------------------------------------------------------------------------------------->
  125.  
  126. <!----------------------------------------------------------------------------------------------------------------------------
  127.        COLOUR PALETTE DIVIDER
  128. ------------------------------------------------------------------------------------------------------------------------------>
  129.        
  130.         <div class="col m-2" style="color: transparent !important; max-height: 100%; max-width: 20px;">
  131.             <div class="row">
  132.                 <div class="col p-0" style="background: #ffd9bd; min-height: 50px; border-radius: 10px 10px 0 0;"></div>
  133.             </div>
  134.             <div class="row">
  135.                 <div class="col p-0" style="background: #ffaaa5; min-height: 60px;"></div>
  136.             </div>
  137.             <div class="row">
  138.                 <div class="col p-0" style="background: #ff9943; min-height: 40px;"></div>
  139.             </div>
  140.             <div class="row">
  141.                 <div class="col p-0" style="background: #d9e3a1; min-height: 70px;"></div>
  142.             </div>
  143.             <div class="row">
  144.                 <div class="col p-0" style="background: #8fdbbe; min-height: 30px;"></div>
  145.             </div>
  146.             <div class="row">
  147.                 <div class="col p-0" style="background: #8fdbbe; min-height: 90px;"></div>
  148.             </div>
  149.             <div class="row">
  150.                 <div class="col p-0" style="background: #bbd6ea; min-height: 86px;"></div>
  151.             </div>
  152.             <div class="row">
  153.                 <div class="col p-0" style="background: #5d6f67; min-height: 80px; border-radius: 0 0 10px 10px;"></div>
  154.             </div>
  155.         </div>
  156. <!---------------------------------------------------------------------------------------------------------------------------->
  157.  
  158. <!----------------------------------------------------------------------------------------------------------------------------
  159.        CENTER COLUMN: NAVIGATION
  160. ------------------------------------------------------------------------------------------------------------------------------>
  161.         <div class="col-md-5 m-2 py-5 pl-5 pr-1" style="background: white; border-radius: 10px; overflow: hidden;">
  162.             <div class="row">
  163.                 <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist" style="margin-top: -20px;">
  164.                     <li class="nav-item">
  165.                         <a
  166.                            class="nav-link active"
  167.                            id="pills-about-tab"
  168.                            data-toggle="pill"
  169.                            href="#pills-about"
  170.                            role="tab"
  171.                            aria-controls="pills-about"
  172.                            aria-selected="true"
  173.                            style="background: transparent !important; color: #8fdbbe !important; font-weight: bold; font-size: 15pt;"
  174.                        >
  175.                             About
  176.                         </a>
  177.                     </li>
  178.                     <li class="nav-item">
  179.                         <a
  180.                            class="nav-link"
  181.                            id="pills-personality-tab"
  182.                            data-toggle="pill"
  183.                            href="#pills-personality"
  184.                            role="tab"
  185.                            aria-controls="pills-personality"
  186.                            aria-selected="false"
  187.                            style="background: transparent !important; color: #8fdbbe !important; font-weight: bold; font-size: 15pt;"
  188.                        >
  189.                             Personality
  190.                         </a>
  191.                     </li>
  192.                     <li class="nav-item">
  193.                         <a
  194.                            class="nav-link"
  195.                            id="pills-relationships-tab"
  196.                            data-toggle="pill"
  197.                            href="#pills-relationships"
  198.                            role="tab"
  199.                            aria-controls="pills-relationships"
  200.                            aria-selected="false"
  201.                            style="background: transparent !important; color: #8fdbbe !important; font-weight: bold; font-size: 15pt;"
  202.                        >
  203.                             Relationships
  204.                         </a>
  205.                     </li>
  206.                 </ul>
  207. <!---------------------------------------------------------------------------------------------------------------------------->
  208.  
  209. <!----------------------------------------------------------------------------------------------------------------------------
  210.        CENTER COLUMN: ABOUT SECTION
  211. ------------------------------------------------------------------------------------------------------------------------------>                
  212.                 <div class="tab-content" id="pills-tabContent">
  213.                     <div class="tab-pane fade show active" id="pills-about" role="tabpanel" aria-labelledby="pills-about-tab">
  214.                         <div class="col p-0 pr-4 m-0" style="height: 350px; max-height: 350px; overflow: auto;">
  215.                             <div class="col m-0" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  216.                                 About
  217.                             </div>
  218.                             <div class="col m-0 px-0 py-3 text-justify">
  219.                                 <p>
  220.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum
  221.                                     suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Senectus et netus et malesuada
  222.                                     fames ac turpis egestas sed. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id. Sed id semper risus in hendrerit gravida rutrum. In massa tempor nec feugiat nisl. Tincidunt lobortis
  223.                                     feugiat vivamus at augue eget arcu. Diam sollicitudin tempor id eu. Tellus pellentesque eu tincidunt tortor aliquam nulla. Congue nisi vitae suscipit tellus mauris a diam maecenas. Adipiscing tristique
  224.                                     risus nec feugiat in fermentum posuere urna. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Faucibus turpis in eu mi bibendum neque egestas. Turpis cursus in hac habitasse platea.
  225.                                     Etiam tempor orci eu lobortis elementum nibh tellus molestie. Nec feugiat in fermentum posuere urna nec tincidunt. Mattis aliquam faucibus purus in massa tempor nec feugiat.
  226.                                 </p>
  227.                                 <p>
  228.                                     Diam sollicitudin tempor id eu nisl nunc mi. In ante metus dictum at. Elementum sagittis vitae et leo duis ut. Auctor urna nunc id cursus metus aliquam eleifend mi in. Est lorem ipsum dolor sit amet
  229.                                     consectetur adipiscing elit pellentesque. Ante metus dictum at tempor commodo ullamcorper a lacus. Magna ac placerat vestibulum lectus mauris ultrices eros. Tempor orci eu lobortis elementum. Porta non
  230.                                     pulvinar neque laoreet suspendisse interdum consectetur libero id. Volutpat est velit egestas dui. Euismod quis viverra nibh cras pulvinar mattis nunc. Vitae proin sagittis nisl rhoncus mattis rhoncus
  231.                                     urna neque.
  232.                                 </p>
  233.                             </div>
  234.                         </div>
  235.                     </div>
  236.                    
  237. <!---------------------------------------------------------------------------------------------------------------------------->
  238.  
  239. <!----------------------------------------------------------------------------------------------------------------------------
  240.        CENTER COLUMN: PERSONALITY SECTION
  241. ------------------------------------------------------------------------------------------------------------------------------>        
  242.                    
  243.                     <div class="tab-pane fade" id="pills-personality" role="tabpanel" aria-labelledby="pills-personality-tab">
  244.                         <div class="col p-0 pr-4 m-0" style="height: 350px; max-height: 350px; overflow: auto;">
  245.                             <div class="col m-0" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  246.                                 Personality
  247.                             </div>
  248.                             <div class="col m-0 px-0 py-3 text-justify">
  249.                                 <p>
  250.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum
  251.                                     suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Senectus et netus et malesuada
  252.                                     fames ac turpis egestas sed. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id. Sed id semper risus in hendrerit gravida rutrum. In massa tempor nec feugiat nisl. Tincidunt lobortis
  253.                                     feugiat vivamus at augue eget arcu. Diam sollicitudin tempor id eu. Tellus pellentesque eu tincidunt tortor aliquam nulla. Congue nisi vitae suscipit tellus mauris a diam maecenas. Adipiscing tristique
  254.                                     risus nec feugiat in fermentum posuere urna. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Faucibus turpis in eu mi bibendum neque egestas. Turpis cursus in hac habitasse platea.
  255.                                     Etiam tempor orci eu lobortis elementum nibh tellus molestie. Nec feugiat in fermentum posuere urna nec tincidunt. Mattis aliquam faucibus purus in massa tempor nec feugiat.
  256.                                 </p>
  257.                                 <p>
  258.                                     Diam sollicitudin tempor id eu nisl nunc mi. In ante metus dictum at. Elementum sagittis vitae et leo duis ut. Auctor urna nunc id cursus metus aliquam eleifend mi in. Est lorem ipsum dolor sit amet
  259.                                     consectetur adipiscing elit pellentesque. Ante metus dictum at tempor commodo ullamcorper a lacus. Magna ac placerat vestibulum lectus mauris ultrices eros. Tempor orci eu lobortis elementum. Porta non
  260.                                     pulvinar neque laoreet suspendisse interdum consectetur libero id. Volutpat est velit egestas dui. Euismod quis viverra nibh cras pulvinar mattis nunc. Vitae proin sagittis nisl rhoncus mattis rhoncus
  261.                                     urna neque.
  262.                                 </p>
  263.                             </div>
  264.                         </div>
  265.                     </div>
  266.                    
  267.  <!---------------------------------------------------------------------------------------------------------------------------->
  268.  
  269. <!----------------------------------------------------------------------------------------------------------------------------
  270.        CENTER COLUMN: RELATIONSHIPS SECTION
  271. ------------------------------------------------------------------------------------------------------------------------------>                    
  272.                     <div class="tab-pane fade" id="pills-relationships" role="tabpanel" aria-labelledby="pills-relationships-tab">
  273.                         <div class="col p-0 pr-4 m-0" style="height: 350px; max-height: 350px; overflow: auto;">
  274.                             <div class="col m-0" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  275.                                 Name
  276.                             </div>
  277.                             <div class="row m-0">
  278.                                 <div class="col-md-2 m-1" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;"></div>
  279.                                 <div class="col m-1 px-0 py-3 text-justify">
  280.                                     <p>
  281.                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  282.                                     </p>
  283.                                 </div>
  284.                             </div>
  285.                             <div class="col m-0" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  286.                                 Name
  287.                             </div>
  288.                             <div class="row m-0">
  289.                                 <div class="col-md-2 m-1" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;"></div>
  290.                                 <div class="col m-1 px-0 py-3 text-justify">
  291.                                     <p>
  292.                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum
  293.                                         suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing.
  294.                                     </p>
  295.                                 </div>
  296.                             </div>
  297.                             <div class="col m-0" style="border: 2px solid #8fdbbe; border-radius: 10px solid; color: #8fdbbe; font-weight: bold; font-size: 15pt; text-align: center;">
  298.                                 Name
  299.                             </div>
  300.                             <div class="row m-0">
  301.                                 <div class="col-md-2 m-1" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;"></div>
  302.                                 <div class="col m-1 px-0 py-3 text-justify">
  303.                                     <p>
  304.                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae. Tristique et egestas quis ipsum
  305.                                         suspendisse ultrices gravida dictum fusce. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Senectus et netus et
  306.                                         malesuada fames ac turpis egestas sed. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id. Sed id semper risus in hendrerit gravida rutrum. In massa tempor nec feugiat nisl.
  307.                                         Tincidunt lobortis feugiat vivamus at augue eget arcu. Diam sollicitudin tempor id eu. Tellus pellentesque eu tincidunt tortor aliquam nulla. Congue nisi vitae suscipit tellus mauris a diam maecenas.
  308.                                     </p>
  309.                                 </div>
  310.                             </div>
  311.                         </div>
  312.                     </div>
  313.                 </div>
  314.             </div>
  315.         </div>
  316. <!---------------------------------------------------------------------------------------------------------------------------->
  317.  
  318. <!----------------------------------------------------------------------------------------------------------------------------
  319.        RIGHT COLUMN: CHARACTER ART
  320. ------------------------------------------------------------------------------------------------------------------------------>  
  321.         <div class="col-md-3 p-0 m-2" style="background: url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px;"></div>
  322.     </div>
  323.    
  324. <!---------------------------------------------------------------------------------------------------------------------------->
  325.  
  326. <!----------------------------------------------------------------------------------------------------------------------------
  327.        GALLERY ROW
  328. ------------------------------------------------------------------------------------------------------------------------------>      
  329.     <div class="row mx-2" style="margin-bottom: -300px;">
  330.         <div class="col m-2" style="background: white url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;"></div>
  331.         <div class="col m-2" style="background: white url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;"></div>
  332.         <div class="col m-2" style="background: white url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;"></div>
  333.         <div class="col m-2" style="background: white url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;"></div>
  334.         <div class="col m-2" style="background: white url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;"></div>
  335.         <div class="col m-2" style="background: white url(CHARACTER IMAGE URL GOES HERE); background-size: cover; background-position: top center; border-radius: 10px; overflow: hidden;"></div>
  336.         <a href="" class="col m-2" style="background: #8fdbbe; color: white; height: 150px; line-height: 150px; vertical-align: center center; border-radius: 10px; font-weight: bolder; font-size: 20pt; text-align: center;">
  337.             GALLERY
  338.         </a>
  339.     </div>
  340. </div>
  341. <!----------------------------------------------------------------------------------------------------------------------------
  342.                                THANK YOU FOR USING MY CODE & ABIDING BY MY TERMS & CONDITIONS!
  343.                                                    - Mouei
  344. ------------------------------------------------------------------------------------------------------------------------------>
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!