API tools faq
paste
Ansuperope

Nov 2023

Ansuperope
Nov 5th, 2023
1,058
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.14 KB | None | 0 0
raw download clone embed print report
  1. <!-- CODE INFO -----------------------------------
  2. Thank you for downloading! :D
  3.  
  4. Feel free to do whatever you want with the
  5. code such as editing, changing or frakensteining
  6. it. You're free to move and edit the credits
  7. but make sure its somewhere on the code please.
  8.  
  9.    LIVE PREVIEW
  10.        https://toyhou.se/24202288.f2u-nov-2023
  11.  
  12.    BOOTSTRAP COLORS
  13.        - NAME:             bg-primary
  14.        - OUTLINE:          card-outline-primary
  15.        - SUB OUTLINE:      card-outline-secondary
  16.        - CONTENT BG:       bg-faded
  17.        - HEADER TEXT:      text-secondary
  18.  
  19.        delete bootstrap colors to use custom colors
  20.        or you can use a combo of both up to you
  21.  
  22.    CUSTOM COLORS
  23.        - MAIN BG:      background-color:#MAIN_BG_CC
  24.        - SUB BG:       background-color:#SUB_BG_CC
  25.        - SUB2 BG:      background-color:#SUB2_BG_CC
  26.        - MAIN OUTLINE: border-color:#MAIN_OUT_CC
  27.        - SUB OUTLINE:  border-color:#SUB_OUT_CC
  28.        - SUB2 OUTLINE: border-color:#SUB2_OUT_CC
  29.        - MAIN TEXT:    color:#MAIN_TEXT_CC
  30.        - SUB TEXT:     color:#SUB_TEXT_CC
  31.  
  32.  
  33. TIPS & HELPFUL INFO
  34.  
  35.    SHORT CUTS:
  36.        "Ctrl" + "F" - find, replace, delete and edit text faster
  37.        "Ctrl" + "Z" - undo
  38.        "Ctrl" + "Y" - redo
  39.  
  40.    LIVE CODE EDITOR (highly recommend using):
  41.        https://th.circlejourney.net/
  42.  
  43.    HELP THREAD / ASK FOR HELP HERE:
  44.        https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
  45.  
  46.    BOOSTRAP COLORS:
  47.        https://getbootstrap.com/docs/4.0/utilities/colors/
  48.  
  49.    ICONS (you can use ones labled pro):
  50.        https://fontawesome.com/search
  51.  
  52.    COLOR PICKER WEBSITE:
  53.        https://imagecolorpicker.com/color-code/2596be
  54.        
  55. ------------------------------------------------->
  56.  
  57. <!-- BACKGROUND --------------------------------->
  58. <div class="bg-" style="z-index:-1; position:absolute; top:0; bottom:0; left:0; width:100%;
  59.    background:url('');
  60.    background-color:#;
  61.    background-position:center;
  62.    background-size:cover;"></div>
  63. <!-- END BACKGROUND ----------------------------->
  64.  
  65.  
  66.  
  67.  
  68. <!-- CODE --------------------------------------->
  69. <div class="mx-auto" style="max-width:600px; color:#MAIN_TEXT_CC;"><div class="row no-gutters justify-content-center">
  70.    
  71.     <!-- NAME MOBILE VERSION ------------------->
  72.     <div class="d-lg-none col card mb-2 pb-2 rounded-0 d-flex flex-fill justify-content-center align-items-center display-4 bg-primary" style="font-variant:small-caps; background-color:#MAIN_BG_CC;">name</div>
  73.     <!-- END NAME MOBILE VERSION --------------->
  74.  
  75.  
  76.  
  77.  
  78.     <!-- NAME COMPUTER VERSION ----------------->
  79.     <div class="d-none d-sm-block col-auto"><div class="h-100 flex-column">
  80.         <div class="col card mb-1 pb-2 rounded-0 d-flex flex-fill justify-content-center align-items-center display-4 flex-column bg-primary" style="font-variant:small-caps; background-color:#MAIN_BG_CC;">
  81.             <span>n</span>
  82.             <span>a</span>
  83.             <span>m</span>
  84.             <span>e</span>
  85.         </div>
  86.        
  87.         <div class="col-auto card mb-1 py-4 rounded-0 justify-content-center bg-primary" style="opacity:.6; background-color:#MAIN_BG_CC;"></div>
  88.        
  89.         <div class="col-auto card mb-1 py-3 rounded-0 bg-primary" style="opacity:.4; background-color:#MAIN_BG_CC;"></div>
  90.        
  91.         <div class="col-auto card py-2 rounded-0 bg-primary" style="opacity:.2; background-color:#MAIN_BG_CC;"></div>
  92.     </div></div>
  93.     <!-- END NAME COMPUTER VERSION ------------->
  94.    
  95.    
  96.    
  97.    
  98.     <!-- RIGHT CONTENT ------------------------->
  99.     <div class="col card ml-lg-2 p-3 rounded-0 h-100 bg-faded card-outline-primary" style="border-color:#MAIN_OUT_CC; background-color:#MAIN_BG_CC;">
  100.        
  101.         <!-- TOP CONTENT / QUOTE --------------->
  102.         <div class="card p-2 col mb-2" style="border-color:#MAIN_OUT_CC; background-color:#SUB_BG_CC;"><div class="card p-1 card-outline-primary bg-faded" style="border-color:#SUB_OUT_CC; border-style:dashed; background-color:#SUB2_BG_CC;"><div class="text-center justify-content-center" style="font-variant:small-caps; letter-spacing:2px;">
  103.             <i class="fa-solid fa-quote-left pt-1"></i>
  104.             <span class="px-2">Insert quote</span>
  105.             <i class="fa-solid fa-quote-right pt-1"></i>
  106.         </div></div></div>
  107.         <!-- END TOP CONTENT / QUOTE ----------->
  108.        
  109.        
  110.        
  111.         <!-- MIDDLE CONTENT -------------------->
  112.         <div class="row no-gutters">
  113.            
  114.             <!-- IMAGE ------------------------->
  115.             <div class="order-lg-3 card col-12 col-lg-auto my-2 ml-lg-3 p-2" style="border-color:#MAIN_OUT_CC; background-color:#SUB_BG_CC;"><div class="card p-1 align-items-center card-outline-primary bg-faded" style="border-color:#SUB_OUT_CC; border-style:dashed; background-color:#SUB2_BG_CC;">
  116.                 <div style="min-height:150px; width:200px; background-color:#;
  117.                background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/35501574_UgeKlRSMZWWgyKo.png?1664395374');
  118.                background-position:top;
  119.                background-size:cover;"></div>
  120.             </div></div>
  121.             <!-- END IMAGE -------------------->
  122.            
  123.            
  124.             <!-- QUICK INFO ------------------->
  125.             <div class="order-lg-1 card col my-2 p-2 h-100 w-100 row no-gutters" style="border-color:#MAIN_OUT_CC; font-variant:small-caps; background-color:#SUB_BG_CC;"><div class="card p-1 card-outline-primary bg-faded" style="border-color:#SUB_OUT_CC; border-style:dashed; background-color:#SUB2_BG_CC;">
  126.                
  127.                 <div class="row no-gutters justify-content-center py-1 px-2 ">
  128.                     <div class="card p-2 justify-content-center card-outline-secondary text-secondary" style="border-color:#SUB2_OUT_CC; border-style:dashed; background-color:#SUB_BG_CC;"><i class="fa-solid fa-signature fa-xs"></i></div>
  129.                     <div class="col ml-2">name</div>
  130.                 </div>
  131.                
  132.                 <div class="row no-gutters justify-content-center py-1 px-2 ">
  133.                     <div class="card p-2 justify-content-center card-outline-secondary text-secondary" style="border-color:#SUB2_OUT_CC; border-style:dashed; background-color:#SUB_BG_CC;"><i class="fa-solid fa-hourglass fa-xs"></i></div>
  134.                     <div class="col ml-2">age + birthday</div>
  135.                 </div>
  136.                
  137.                 <div class="row no-gutters justify-content-center py-1 px-2 ">
  138.                     <div class="card p-2 justify-content-center card-outline-secondary text-secondary" style="border-color:#SUB2_OUT_CC; border-style:dashed; background-color:#SUB_BG_CC;"><i class="fa-solid fa-venus-mars fa-xs"></i></div>
  139.                     <div class="col ml-2">gender</div>
  140.                 </div>
  141.                
  142.                 <div class="row no-gutters justify-content-center py-1 px-2 ">
  143.                     <div class="card p-2 justify-content-center card-outline-secondary text-secondary" style="border-color:#SUB2_OUT_CC; border-style:dashed; background-color:#SUB_BG_CC;"><i class="fa-solid fa-heart fa-xs"></i></div>
  144.                     <div class="col ml-2">sexuality</div>
  145.                 </div>
  146.                
  147.                 <div class="row no-gutters justify-content-center py-1 px-2 ">
  148.                     <div class="card p-2 justify-content-center card-outline-secondary text-secondary" style="border-color:#SUB2_OUT_CC; border-style:dashed; background-color:#SUB_BG_CC;"><i class="fa-solid fa-ruler-vertical fa-xs"></i></div>
  149.                     <div class="col ml-2">height</div>
  150.                 </div>
  151.                
  152.             </div></div>
  153.             <!-- END QUICK INFO --------------->
  154.            
  155.         </div>
  156.         <!-- END MIDDLE CONTENT ---------------->
  157.        
  158.        
  159.        
  160.         <!-- BOTTOM CONTENT -------------------->
  161.         <div class="card p-2 mt-2" style="border-color:#MAIN_OUT_CC; background-color:#SUB_BG_CC;"><div class="card py-2 px-3 card-outline-primary bg-faded" style="border-color:#SUB_OUT_CC; border-style:dashed; background-color:#SUB2_BG_CC;"><div style="overflow:auto; height:180px;">
  162.            
  163.             <!-- LEFT BUTTONS ------------------>
  164.             <div class="col-auto row no-gutters" style="position:absolute; top:10px; left:-35px;"><ul class="nav flex-column">
  165.                
  166.                 <li class="nav-item card m-1 p-1" style="border-color:#MAIN_OUT_CC; background-color:#SUB_BG_CC;"><a data-toggle="tab" href="#ABOUT" class="card p-1 card-outline-primary bg-faded text-secondary" style="color:#SUB_TEXT_CC; border-color:#SUB_OUT_CC; border-style:dashed; background-color:#SUB2_BG_CC;"><i class="fa-solid fa-sparkles fa-fade"></i></a></li>
  167.                
  168.                 <li class="nav-item card m-1 p-1" style="border-color:#MAIN_OUT_CC; background-color:#SUB_BG_CC;"><a data-toggle="tab" href="#DESIGN" class="card p-1 card-outline-primary bg-faded text-secondary" style="color:#SUB_TEXT_CC; border-color:#SUB_OUT_CC; border-style:dashed; background-color:#SUB2_BG_CC;"><i class="fa-solid fa-sparkles fa-fade"></i></a></li>
  169.                
  170.                 <li class="nav-item card m-1 p-1" style="border-color:#MAIN_OUT_CC; background-color:#SUB_BG_CC;"><a data-toggle="tab" href="#OTHER" class="card p-1 card-outline-primary bg-faded text-secondary" style="color:#SUB_TEXT_CC; border-color:#SUB_OUT_CC; border-style:dashed; background-color:#SUB2_BG_CC;"><i class="fa-solid fa-sparkles fa-fade"></i></a></li>
  171.                
  172.                 <!-- add more above here -------
  173.                - fa-fade to make icon glow
  174.                - make sure href has # and
  175.                - matches an id
  176.                -------------------------------->
  177.                
  178.             </ul></div>
  179.             <!-- END LEFT BUTTONS -------------->
  180.            
  181.            
  182.            
  183.             <!-- TAB CONTENT ------------------->
  184.             <div class="tab-content">
  185.                
  186.                 <!-- ABOUT --------------------->
  187.                 <div data-toggle="tab" id="ABOUT" class="active tab-pane mx-2 row no-gutters justify-content-center">
  188.                    
  189.                     <!-- ABOUT SECTION --------->
  190.                     <div class="mb-3">
  191.                        
  192.                         <!-- HEADER ------------>
  193.                         <div class="col mx-auto row no-gutters justify-content-center text-secondary" style="color:#SUB_TEXT_CC; font-variant:small-caps; letter-spacing:3px;">
  194.                             <i class="fa-solid fa-sparkles pt-1"></i>
  195.                             <span class="px-2">About</span>
  196.                             <i class="fa-solid fa-sparkles pt-1"></i>
  197.                         </div>
  198.                         <!-- END HEADER -------->
  199.                        
  200.                         <!-- LINE -------------->
  201.                         <div class="col-auto card border-bottom-0 my-1 card-outline-secondary" style="background-color:#MAIN_BG_CC;"></div>
  202.                        
  203.                        
  204.                         <!-- CONTENT ----------->
  205.                         <div class="col row no-gutters text-center">
  206.                             <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed</div>
  207.                         </div>
  208.                         <!-- END CONTENT ------->
  209.                        
  210.                     </div>
  211.                     <!-- END ABOUT SECTION ----->
  212.                    
  213.                    
  214.                    
  215.                     <!-- INTRESTS SECTION ------>
  216.                     <div class="mt-3">
  217.                        
  218.                         <!-- LINE -------------->
  219.                         <div class="col-auto card border-bottom-0 my-1 card-outline-secondary" style="background-color:#MAIN_BG_CC;"></div>
  220.                        
  221.                         <!-- HEADER ------------>
  222.                         <div class="col mx-auto row no-gutters justify-content-center text-secondary" style="color:#SUB_TEXT_CC; font-variant:small-caps; letter-spacing:3px;">
  223.                             <i class="fa-solid fa-sparkles pt-1"></i>
  224.                             <span class="px-2">Intrests</span>
  225.                             <i class="fa-solid fa-sparkles pt-1"></i>
  226.                         </div>
  227.                         <!-- END HEADER -------->
  228.                        
  229.                         <!-- LINE -------------->
  230.                         <div class="col-auto card border-bottom-0 my-1 card-outline-secondary" style="background-color:#MAIN_BG_CC;"></div>
  231.                        
  232.                        
  233.                         <!-- CONTENT ----------->
  234.                         <div class="row no-gutters">
  235.                            
  236.                             <!-- LIKES --------->
  237.                             <div class="col-lg-6"><ul class="ml-n4" style="list-style:none;">
  238.                                 <li class="row no-gutters">
  239.                                     <div class="col-auto mr-3"><i class="fa-regular fa-heart"></i></div>
  240.                                     <div class="col">content</div>
  241.                                 </li>
  242.                                
  243.                                 <li class="row no-gutters">
  244.                                     <div class="col-auto mr-3"><i class="fa-regular fa-heart"></i></div>
  245.                                     <div class="col">content</div>
  246.                                 </li>
  247.                                
  248.                                 <li class="row no-gutters">
  249.                                     <div class="col-auto mr-3"><i class="fa-regular fa-heart"></i></div>
  250.                                     <div class="col">content</div>
  251.                                 </li>
  252.                                
  253.                                 <!-- add more above here -->
  254.                             </ul></div>
  255.                             <!-- END LIKES ----->
  256.                            
  257.                             <!-- DISLIKES ------>
  258.                             <div class="col-lg-6"><ul class="ml-n4" style="list-style:none;">
  259.                                 <li class="row no-gutters">
  260.                                     <div class="col-auto mr-3"><i class="fa-solid fa-xmark"></i></div>
  261.                                     <div class="col">content</div>
  262.                                 </li>
  263.                                
  264.                                 <li class="row no-gutters">
  265.                                     <div class="col-auto mr-3"><i class="fa-solid fa-xmark"></i></div>
  266.                                     <div class="col">content</div>
  267.                                 </li>
  268.                                
  269.                                 <li class="row no-gutters">
  270.                                     <div class="col-auto mr-3"><i class="fa-solid fa-xmark"></i></div>
  271.                                     <div class="col">content</div>
  272.                                 </li>
  273.                                
  274.                                 <!-- add more above here -->
  275.                             </ul></div>
  276.                             <!-- END DISLIKES -->
  277.                            
  278.                         </div>
  279.                         <!-- END CONTENT ------->
  280.                        
  281.                     </div>
  282.                     <!-- END INTRESTS SECTION -->
  283.                    
  284.                 </div>
  285.                 <!-- END ABOUT ----------------->
  286.            
  287.            
  288.            
  289.                 <!-- DESIGN -------------------->
  290.                 <div data-toggle="tab" id="DESIGN" class="tab-pane mx-2 row no-gutters justify-content-center">
  291.                    
  292.                     <!-- DESIGN SECTION -------->
  293.                     <div class="mb-3">
  294.                        
  295.                         <!-- HEADER ------------>
  296.                         <div class="col mx-auto row no-gutters justify-content-center text-secondary" style="color:#SUB_TEXT_CC; font-variant:small-caps; letter-spacing:3px;">
  297.                             <i class="fa-solid fa-sparkles pt-1"></i>
  298.                             <span class="px-2">Design</span>
  299.                             <i class="fa-solid fa-sparkles pt-1"></i>
  300.                         </div>
  301.                         <!-- END HEADER -------->
  302.                        
  303.                         <!-- LINE -------------->
  304.                         <div class="col-auto card border-bottom-0 my-1 card-outline-secondary" style="background-color:#MAIN_BG_CC;"></div>
  305.                        
  306.                        
  307.                         <!-- CONTENT ----------->
  308.                         <ul class="ml-n2" style="list-style-type:square;">
  309.                             <li>content</li>
  310.                            
  311.                             <li>content</li>
  312.                            
  313.                             <li>content</li>
  314.                            
  315.                             <li>content</li>
  316.                            
  317.                             <li>content</li>
  318.                            
  319.                             <!-- add more above here -->
  320.                         </ul>
  321.                         <!-- END CONTENT ------->
  322.                        
  323.                     </div>
  324.                     <!-- END DESIGN SECTION ---->
  325.                    
  326.                 </div>
  327.                 <!-- END DESIGN ---------------->
  328.                
  329.                
  330.                
  331.                 <!-- OTHER --------------------->
  332.                 <div data-toggle="tab" id="OTHER" class="tab-pane mx-2 row no-gutters justify-content-center">
  333.                    
  334.                     <!-- OTHER SECTION --------->
  335.                     <div class="mb-3">
  336.                        
  337.                         <!-- HEADER ------------>
  338.                         <div class="col mx-auto row no-gutters justify-content-center text-secondary" style="color:#SUB_TEXT_CC; font-variant:small-caps; letter-spacing:3px;">
  339.                             <i class="fa-solid fa-sparkles pt-1"></i>
  340.                             <span class="px-2">Other</span>
  341.                             <i class="fa-solid fa-sparkles pt-1"></i>
  342.                         </div>
  343.                         <!-- END HEADER -------->
  344.                        
  345.                         <!-- LINE -------------->
  346.                         <div class="col-auto card border-bottom-0 my-1 card-outline-secondary" style="background-color:#MAIN_BG_CC;"></div>
  347.                        
  348.                        
  349.                         <!-- CONTENT ----------->
  350.                         <ul class="ml-n2" style="list-style-type:square;">
  351.                             <li>content</li>
  352.                            
  353.                             <li>content</li>
  354.                            
  355.                             <li>content</li>
  356.                            
  357.                             <!-- add more above here -->
  358.                         </ul>
  359.                         <!-- END CONTENT ------->
  360.                        
  361.                     </div>
  362.                     <!-- END OTHER SECTION ----->
  363.                    
  364.                    
  365.                     <!-- HISTORY SECTION ------->
  366.                     <div class="mt-3">
  367.                        
  368.                         <!-- LINE -------------->
  369.                         <div class="col-auto card border-bottom-0 my-1 card-outline-secondary" style="background-color:#MAIN_BG_CC;"></div>
  370.                        
  371.                         <!-- HEADER ------------>
  372.                         <div class="col mx-auto row no-gutters justify-content-center text-secondary" style="color:#SUB_TEXT_CC; font-variant:small-caps; letter-spacing:3px;">
  373.                             <i class="fa-solid fa-sparkles pt-1"></i>
  374.                             <span class="px-2">History</span>
  375.                             <i class="fa-solid fa-sparkles pt-1"></i>
  376.                         </div>
  377.                         <!-- END HEADER -------->
  378.                        
  379.                         <!-- LINE -------------->
  380.                         <div class="col-auto card border-bottom-0 my-1 card-outline-secondary" style="background-color:#MAIN_BG_CC;"></div>
  381.                        
  382.                        
  383.                         <!-- CONTENT ----------->
  384.                         <div class="col row no-gutters text-center">
  385.                             <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  386.                         </div>
  387.                         <!-- END CONTENT ------->
  388.                        
  389.                     </div>
  390.                     <!-- END HISTORY SECTION --->
  391.                    
  392.                 </div>
  393.                 <!-- END OTHER ----------------->
  394.                
  395.                
  396.                 <!-- add more above here -------
  397.                - make sure id doesn't have
  398.                - # and matches href
  399.                - only one should have active
  400.                - in class
  401.                -------------------------------->
  402.            
  403.             </div>
  404.             <!-- END TAB CONTENT --------------->
  405.            
  406.         </div></div></div>
  407.         <!-- END BOTTOM CONTENT ---------------->
  408.        
  409.     </div>
  410.     <!-- END RIGHT CONTENT --------------------->
  411.    
  412.    
  413.    
  414.    
  415.     <!-- CREDITS - CAN MOVE OR EDIT ------------>
  416.     <div class="col-12 mt-4 pt-1 justify-content-center align-items-center"><div class="card p-1 bg-faded card-outline-primary" style="position:absolute; bottom:0; border-color:#MAIN_OUT_CC; background-color:#MAIN_BG_CC;"><div class="card pb-1 px-2 card-outline-secondary" style="border-color:#SUB2_OUT_CC; border-style:dashed; background-color:#SUB_BG_CC;">
  417.         <a href="https://toyhou.se/AnsuCodes" class="text-secondary" style="color:#BBBBBB;"><i class="pb-1 fa-solid fa-trash fa-xs fa-fade"></i></a>
  418.     </div></div></div>
  419.     <!-- END CREDITS - CAN MOVE OR EDIT ------->
  420.    
  421. </div></div>
  422. <!-- END CODE ----------------------------------->
Advertisement
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!