API tools faq
paste
Advertisement
icecreampizzer

TH CODE 18 || NEON CIRCUITRY

icecreampizzer
Aug 17th, 2021
2,579
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.13 KB | None | 0 0
raw download clone embed print report
  1. <!-- 18 || NEON CIRCUITRY by icecreampizzeria
  2.    
  3.    RULES:
  4.        - Don't remove my credit please!
  5.        - Feel free to modify/frankenstein as much as you want!
  6.        - Don't redistribute my codes please!
  7.    
  8.    COLOR GUIDE:
  9.        #fff - main text color
  10.        #3c3e42 - dark bg (main content)
  11.        #dc4471 - pink accent
  12.        #3d3261 - violet accent
  13.        #e1a763 - orange accent
  14.    
  15.    find (ctrl + f) URLHERE for links, IMGHERE for image addresses
  16.    
  17. -->
  18.  
  19. <!-- WHOLE THING -->
  20. <div class="container p-0 my-4" style="max-width: 700px; font-family: monospace; color: #fff;">
  21.    
  22.     <!-- BACKGROUND IMAGE & 1ST CIRCUIT (pink) -->
  23.     <div style="
  24.        background: url(IMGHERE) center no-repeat;
  25.        background-size: cover;
  26.        border: 3px #dc4471 solid;
  27.        border-radius: 15px;">
  28.        
  29.         <!-- 2ND CIRCUIT (violet) -->
  30.         <div class="my-n3 mx-lg-3 mx-1 py-4" style="border: 3px #3d3261 solid; border-radius: 15px;">
  31.            
  32.             <!-- 3RD CIRCUIT (orange) -->
  33.             <div class="row mx-lg-n5" style="border: 3px #e1a763 solid; border-radius: 15px;">
  34.            
  35.                 <!-- SIDE IMAGE -->
  36.                 <div class="col-lg ml-lg-n5 my-n5" style="
  37.                    background: url(IMGHERE) center no-repeat;
  38.                    background-size: contain;
  39.                    min-height: 400px;">
  40.                 </div>
  41.                
  42.                
  43.                 <div class="col-lg-7">
  44.                    
  45.                     <!-- TITLE -->
  46.                     <div class="my-3 mr-lg-n5 ml-lg-2 text-center display-2 p-2 font-weight-bold" style="
  47.                        background: #3d3261;
  48.                        border: 3px #e1a763 solid;
  49.                        border-radius: 15px;
  50.                        font-family: courier new;
  51.                        letter-spacing: 6px;
  52.                        text-shadow: -4px 3px 0 #e1a763, 4px 3px 0 #dc4471;
  53.                        ">
  54.                         <i>TITLE</i>
  55.                     </div>
  56.                    
  57.                     <!-- MAIN CONTENT -->
  58.                     <div class="tab-content ml-lg-n5 mr-lg-n2 my-2 mx-n4" style="
  59.                        background: #3c3e42;
  60.                        border: 3px #dc4471 solid;
  61.                        border-radius: 15px;
  62.                        overflow: hidden;">
  63.                        
  64.                         <!-- ABOUT TAB -->
  65.                         <div id="abt" class="tab-pane fade show active p-3" style="height:400px; overflow: auto;">
  66.                            
  67.                             <!-- HEADER -->
  68.                             <div class="m-n3 mb-n4" style="
  69.                                background: url(IMGHERE) center no-repeat;
  70.                                background-size: cover;
  71.                                height: 120px;"></div>
  72.                                
  73.                             <!-- ABT TITLE -->
  74.                             <div class="display-3 font-weight-bold mb-2" style="
  75.                                font-family: courier new;
  76.                                letter-spacing: 6px;
  77.                                text-shadow: -4px 3px 0 #e1a763, 4px 3px 0 #dc4471;
  78.                                ">
  79.                                 <i class="fas fa-chevron-left mr-1 fa-sm"></i>ABOUT<span style="font-size: 2rem;">="</span>
  80.                            
  81.                             </div>
  82.                             <!-- END TITLE -->
  83.                            
  84.                             <!-- BASICS -->
  85.                             <div class="d-flex justify-content-between px-2 py-1" style="
  86.                                background: #3d3261;
  87.                                border-radius: 10px;">
  88.                                 <p class="font-weight-bold my-auto" style="color: #e1a763; font-size: 1.1rem;">NAME:</p>
  89.                                 <p class="my-auto">content;</p>
  90.                             </div>
  91.                            
  92.                             <div class="d-flex justify-content-between px-2 py-1">
  93.                                 <p class="font-weight-bold my-auto" style="color: #e1a763; font-size: 1.1rem;">AGE:</p>
  94.                                 <p class="my-auto">content;</p>
  95.                             </div>
  96.                            
  97.                             <div class="d-flex justify-content-between px-2 py-1" style="
  98.                                background: #3d3261;
  99.                                border-radius: 10px;">
  100.                                 <p class="font-weight-bold my-auto" style="color: #e1a763; font-size: 1.1rem;">GENDER:</p>
  101.                                 <p class="my-auto">content;</p>
  102.                             </div>
  103.                            
  104.                             <div class="d-flex justify-content-between px-2 py-1">
  105.                                 <p class="font-weight-bold my-auto" style="color: #e1a763; font-size: 1.1rem;">SPECIES:</p>
  106.                                 <p class="my-auto">content;</p>
  107.                             </div>
  108.                            
  109.                             <div class="d-flex justify-content-between px-2 py-1" style="
  110.                                background: #3d3261;
  111.                                border-radius: 10px;">
  112.                                 <p class="font-weight-bold my-auto" style="color: #e1a763; font-size: 1.1rem;">ORIENTATION:</p>
  113.                                 <p class="my-auto">content;</p>
  114.                             </div>
  115.                            
  116.                             <div class="d-flex justify-content-between px-2 py-1">
  117.                                 <p class="font-weight-bold my-auto" style="color: #e1a763; font-size: 1.1rem;">OCCUPATION:</p>
  118.                                 <p class="my-auto">content;</p>
  119.                             </div>
  120.                            
  121.                             <div class="d-flex justify-content-between px-2 py-1" style="
  122.                                background: #3d3261;
  123.                                border-radius: 10px;">
  124.                                 <p class="font-weight-bold my-auto" style="color: #e1a763; font-size: 1.1rem;">THEME:</p>
  125.                                 <a href="URLHERE" class="my-auto" style="color: #dc4471;">content;</a>
  126.                             </div>
  127.                             <!-- END BASICS -->
  128.                            
  129.                             <!-- QUOTE -->
  130.                             <div class="font-weight-bold my-3 text-right" style="
  131.                                font-size: 1.2rem;
  132.                                font-family: courier new;
  133.                                line-height: 25px;
  134.                                letter-spacing: 2px;
  135.                                text-shadow: -1px 2px 0 #e1a763, 1px 2px 0 #dc4471;
  136.                                ">
  137.                                 Hey! Stop messing with my code!;"<i class="fas fa-chevron-right fa-sm"></i></div>
  138.                            
  139.                             <!-- BLURB -->
  140.                             <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  141.                            
  142.                             <!-- END TAG -->
  143.                             <div class="font-weight-bold mt-3 text-right" style="
  144.                                font-size: 1.2rem;
  145.                                font-family: courier new;
  146.                                line-height: 25px;
  147.                                letter-spacing: 2px;
  148.                                text-shadow: -1px 2px 0 #e1a763, 1px 2px 0 #dc4471;
  149.                                ">
  150.                                 <i class="fas fa-chevron-left mr-1 fa-sm"></i>/ABOUT<i class="fas fa-chevron-right ml-1 fa-sm"></i>
  151.                             </div>
  152.                             <!-- END END TAG -->
  153.                            
  154.                         </div>
  155.                         <!-- END ABOUT TAB -->
  156.                        
  157.                        
  158.                         <!-- BIO TAB -->
  159.                         <div id="bio" class="tab-pane fade p-3" style="height:400px; overflow: auto;">
  160.                            
  161.                             <!-- HEADER -->
  162.                             <div class="m-n3 mb-n4" style="
  163.                                background: url(IMGHERE) center no-repeat;
  164.                                background-size: cover;
  165.                                height: 120px;"></div>
  166.                            
  167.                             <!-- TITLE -->
  168.                             <div class="display-3 font-weight-bold mb-2" style="
  169.                                font-family: courier new;
  170.                                letter-spacing: 6px;
  171.                                text-shadow: -4px 3px 0 #e1a763, 4px 3px 0 #dc4471;
  172.                                ">
  173.                                
  174.                                 <i class="fas fa-chevron-left mr-1 fa-sm"></i>BIO<i class="fas fa-chevron-right ml-1 fa-sm"></i>
  175.                                
  176.                             </div>
  177.                             <!-- END TITLE -->
  178.                            
  179.                             <!-- TEXT -->
  180.                             <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  181.                            
  182.                             <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  183.                            
  184.                             <!-- ADD MORE PARAGRAPHS ABOVE THIS LINE! -->
  185.                            
  186.                             <!-- END TAG -->
  187.                             <div class="font-weight-bold mt-3 text-right" style="
  188.                                font-size: 1.2rem;
  189.                                font-family: courier new;
  190.                                line-height: 25px;
  191.                                letter-spacing: 2px;
  192.                                text-shadow: -1px 2px 0 #e1a763, 1px 2px 0 #dc4471;
  193.                                ">
  194.                                 <i class="fas fa-chevron-left mr-1 fa-sm"></i>/BIO<i class="fas fa-chevron-right ml-1 fa-sm"></i>
  195.                                
  196.                             </div>
  197.                             <!-- END END TAG -->
  198.                            
  199.                         </div>
  200.                         <!-- END BIO TAB -->
  201.                        
  202.                        
  203.                         <!-- LINKS TAB -->
  204.                         <div id="link" class="tab-pane fade p-3" style="height:400px; overflow: auto;">
  205.                            
  206.                             <!-- HEADER -->
  207.                             <div class="m-n3 mb-n4" style="
  208.                                background: url(IMGHERE) center no-repeat;
  209.                                background-size: cover;
  210.                                height: 120px;"></div>
  211.                                
  212.                             <!-- TITLE -->
  213.                             <div class="display-3 font-weight-bold mb-3" style="
  214.                                font-family: courier new;
  215.                                letter-spacing: 6px;
  216.                                text-shadow: -4px 3px 0 #e1a763, 4px 3px 0 #dc4471;
  217.                                ">
  218.                                 <i class="fas fa-chevron-left mr-1 fa-sm"></i>LINKS<i class="fas fa-chevron-right ml-1 fa-sm"></i>
  219.                             </div>
  220.                             <!-- END TITLE -->
  221.                            
  222.                             <!-- CHARACTER - copy from this comment to END CHARACTER, then paste anywhere inside the link area! -->
  223.                             <!-- ICON -->
  224.                             <div class="rounded-circle mr-2 float-left" style="
  225.                                background: url(IMGHERE) center no-repeat;
  226.                                background-size: cover;
  227.                                height: 120px;
  228.                                width: 120px;
  229.                                border: 3px #dc4471 solid;"></div>
  230.                                
  231.                             <!-- NAME -->
  232.                             <a href="URLHERE" class="font-weight-bold mb-2 pb-1 d-flex justify-content-between" style="
  233.                                color: #e1a763;
  234.                                font-size: 1.5rem;
  235.                                font-family: courier new;
  236.                                line-height: 25px;
  237.                                letter-spacing: 2px;
  238.                                border-bottom: 3px #dc4471 solid;">
  239.                                 NAME
  240.                             </a>
  241.                            
  242.                             <!-- DESC -->
  243.                             <p class="text-justify" style="min-height: 90px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
  244.                             <!-- END CHARACTER -->
  245.                            
  246.                            
  247.                             <!-- CHARACTER - copy from this comment to END CHARACTER, then paste anywhere inside the link area! -->
  248.                             <!-- ICON -->
  249.                             <div class="rounded-circle mr-2 float-left" style="
  250.                                background: url(IMGHERE) center no-repeat;
  251.                                background-size: cover;
  252.                                height: 120px;
  253.                                width: 120px;
  254.                                border: 3px #dc4471 solid;"></div>
  255.                                
  256.                             <!-- NAME -->
  257.                             <a href="URLHERE" class="font-weight-bold mb-2 pb-1 d-flex justify-content-between" style="
  258.                                color: #e1a763;
  259.                                font-size: 1.5rem;
  260.                                font-family: courier new;
  261.                                line-height: 25px;
  262.                                letter-spacing: 2px;
  263.                                border-bottom: 3px #dc4471 solid;">
  264.                                 NAME
  265.                             </a>
  266.                            
  267.                             <!-- DESC -->
  268.                             <p class="text-justify" style="min-height: 90px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
  269.                             <!-- END CHARACTER -->
  270.                            
  271.                             <!-- CHARACTER - copy from this comment to END CHARACTER, then paste anywhere inside the link area! -->
  272.                             <!-- ICON -->
  273.                             <div class="rounded-circle mr-2 float-left" style="
  274.                                background: url(IMGHERE) center no-repeat;
  275.                                background-size: cover;
  276.                                height: 120px;
  277.                                width: 120px;
  278.                                border: 3px #dc4471 solid;"></div>
  279.                                
  280.                             <!-- NAME -->
  281.                             <a href="URLHERE" class="font-weight-bold mb-2 pb-1 d-flex justify-content-between" style="
  282.                                color: #e1a763;
  283.                                font-size: 1.5rem;
  284.                                font-family: courier new;
  285.                                line-height: 25px;
  286.                                letter-spacing: 2px;
  287.                                border-bottom: 3px #dc4471 solid;">
  288.                                 NAME
  289.                             </a>
  290.                            
  291.                             <!-- DESC -->
  292.                             <p class="text-justify" style="min-height: 90px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
  293.                             <!-- END CHARACTER -->
  294.                            
  295.                             <!-- ADD MORE CHARACTERS ABOVE THIS LINE! -->
  296.                            
  297.                             <!-- END TAG -->
  298.                             <div class="font-weight-bold mt-3 text-right" style="
  299.                                font-size: 1.2rem;
  300.                                font-family: courier new;
  301.                                line-height: 25px;
  302.                                letter-spacing: 2px;
  303.                                text-shadow: -1px 2px 0 #e1a763, 1px 2px 0 #dc4471;
  304.                                ">
  305.                                 <i class="fas fa-chevron-left mr-1 fa-sm"></i>/LINKS<i class="fas fa-chevron-right ml-1 fa-sm"></i>
  306.                            
  307.                             </div>
  308.                             <!-- END END TAG -->
  309.                            
  310.                         </div>
  311.                         <!-- END LINKS TAB -->
  312.                        
  313.                        
  314.                     </div>
  315.                     <!-- END MAIN CONTENT -->
  316.                    
  317.                    
  318.                     <!-- NAVIGATION -->
  319.                     <div class="nav mt-3 justify-content-center" style="margin-bottom: -40px;">
  320.                        
  321.                         <!-- ABOUT BUTTON -->
  322.                         <a href="#abt" class="nav-link active btn mx-1 p-3 w-25" data-toggle="tab" style="
  323.                            background: #3d3261;
  324.                            color: #fff;">
  325.                             <i class="fal fa-power-off fa-lg"></i>
  326.                         </a>
  327.                        
  328.                         <!-- BIO BUTTON -->
  329.                         <a href="#bio" class="nav-link btn mx-1 p-3 w-25" data-toggle="tab" style="
  330.                            background: #dc4471;
  331.                            color: #fff;">
  332.                             <i class="fal fa-save fa-lg"></i>
  333.                         </a>
  334.                        
  335.                         <!-- LINKS BUTTON -->
  336.                         <a href="#link" class="nav-link btn mx-1 p-3 w-25" data-toggle="tab" style="
  337.                            background: #e1a763;
  338.                            color: #fff;">
  339.                             <i class="fal fa-code-branch fa-lg"></i>
  340.                         </a>
  341.                        
  342.                     </div>
  343.                     <!-- END NAVIGATION -->
  344.                    
  345.                 </div>
  346.            
  347.             </div>
  348.             <!-- END 3RD CIRCUIT -->
  349.            
  350.         </div>
  351.         <!-- END 2ND CIRCUIT -->
  352.        
  353.     </div>
  354.     <!-- END BG AND 1ST CIRCUIT -->
  355.    
  356.     <!-- CREDITS - please don't remove! <3 -->
  357.     <p class="text-secondary mt-5 text-center" style="font-size: 0.7rem;">code by @icecreampizzeria | art by @ user</p>
  358.    
  359. </div>
  360. <!-- END WHOLE THING -->
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!