API tools faq
paste
Advertisement
0wlian

Griffia Character Code

0wlian
Dec 24th, 2022
578
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.81 KB | Source Code | 0 0
raw download clone embed print report
  1. <!--
  2.    ======================================================
  3.                  GRIFFIA CHARACTER CODE
  4.    ======================================================
  5.    
  6.    GREEN BOXES COLOR   ==    #CBDBBE
  7.    MAIN ACCENT         ==    #169179
  8.    SECONDARY ACCENT    ==    #2DC26B
  9.    
  10.    NPC INDEX TEXT      ==    #B6B699
  11.    
  12.    ======================================================
  13.    You can use Ctrl+F to find and "+" square button on the floating
  14.    window to easily find & replace the colors if needed!
  15. -->
  16.  
  17.  
  18.  
  19.  
  20. <div class="py-5">
  21. <div class="container p-3 pt-4 card border-0" style="max-width: 1000px; border-radius: 1em; background-color: #fff; color: #212529; font-family: arial; box-shadow: 0 0 15px rgba(0,0,0, .2)">
  22.    
  23.     <!--
  24.    ===========================================================
  25.                            HEADER
  26.    ===========================================================
  27.    -->
  28.     <h1 class="text-center" style="color: #B6B699; font-size: 26px;">
  29.         NPC Index
  30.     </h1>
  31.    
  32.    
  33.    
  34.     <!--
  35.    ===========================================================
  36.                        COLORED LINE
  37.    ===========================================================
  38.    -->
  39.     <div class="mb-3" style="background-color: #CBDBBE; height: 40px;"></div>
  40.    
  41.    
  42.    
  43.    
  44.    
  45.     <!--
  46.    ===========================================================
  47.    
  48.                  FIRST ROW (INTRO + CARD)
  49.    
  50.    ===========================================================
  51.    -->
  52.     <div class="row no-gutters">
  53.        
  54.         <!--
  55.        ===========================================================
  56.        
  57.                LEFT COLUMN (NAME + QUOTE + INTRODUCTION)
  58.        
  59.        ===========================================================
  60.        -->
  61.         <div class="col-12 col-lg order-1 order-lg-0 mb-3 mb-lg-0">
  62.         <div class="h-100 flex-column">
  63.             <!--
  64.            ===========================================================
  65.                        CHARACTER NAME + NAME SPELLING
  66.            ===========================================================
  67.            -->
  68.             <h1 class="text-center text-lg-left" style="font-size: 26px; color: #169179;">
  69.                    
  70.                 Name
  71.                
  72.                 ("<i>Name spelling</i>")
  73.             </h1>
  74.            
  75.            
  76.             <!--
  77.            ===========================================================
  78.                        CHARACTER NAME + NAME SPELLING
  79.            ===========================================================
  80.            -->
  81.             <h1 class="text-center text-lg-left" style="color: #2DC26B;">
  82.                
  83.                 "Character quote goes here."
  84.                
  85.             </h1>
  86.            
  87.             <!--
  88.            ===========================================================
  89.                               INTRODUCTION TEXT
  90.            ===========================================================
  91.            -->
  92.             <div class="card rounded-0 border-0 bg-transparent flex-grow-1 d-block d-lg-flex mt-4">
  93.             <div class="col p-2" style="overflow-y: auto;">
  94.                
  95.                 <!--
  96.                ===========================================================
  97.                                    WHO IS [NAME]
  98.                ===========================================================
  99.                -->
  100.                 <div>
  101.                     <p class="mb-0" style="font-weight: 600;">
  102.                         Who is Name
  103.                     </p>
  104.                    
  105.                    
  106.                     <p>
  107.                         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. 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.
  108.                     </p>
  109.                    
  110.                    
  111.                     <!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
  112.                 </div>
  113.                
  114.                
  115.                
  116.                
  117.                
  118.                 <!--
  119.                ===========================================================
  120.                            WHERE CAN I INTERACT WITH [NAME]
  121.                ===========================================================
  122.                -->
  123.                 <div class="mt-5">
  124.                     <p class="mb-0" style="font-weight: 600;">
  125.                         Where can I interact with Name
  126.                     </p>
  127.                    
  128.                    
  129.                     <p>
  130.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  131.                     </p>
  132.                    
  133.                    
  134.                     <!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
  135.                 </div>
  136.                
  137.                
  138.             </div>
  139.             </div>
  140.         </div>
  141.         </div>
  142.        
  143.        
  144.        
  145.         <!--
  146.        ===========================================================
  147.        
  148.                   RIGHT COLUMN (CHARACTER INFO CARD)
  149.        
  150.        ===========================================================
  151.        -->
  152.         <div class="col-12 col-lg-5 mr-lg-4">
  153.            
  154.             <!--
  155.            ===========================================================
  156.               INFO CARD IMAGE == replace URLHERE with your image url
  157.            ===========================================================
  158.            -->
  159.             <div class="h-100" style="min-height: 500px;
  160.            
  161.            background-image: url('URLHERE');
  162.            background-size: contain;
  163.            background-repeat: no-repeat;
  164.            background-position: center;"></div>
  165.         </div>
  166.     </div>
  167.    
  168.    
  169.    
  170.    
  171.    
  172.    
  173.    
  174.    
  175.    
  176.    
  177.     <!--
  178.    ===========================================================
  179.    
  180.              SECOND ROW (BIO + INFO + COLLECTIBLE)
  181.    
  182.    ===========================================================
  183.    -->
  184.     <div style="background-color: #CBDBBE;">
  185.     <div class="row no-gutters pb-3">
  186.        
  187.         <!--
  188.        ===========================================================
  189.                        CHARACTER HEAD IMAGE
  190.        ===========================================================
  191.        -->
  192.         <div class="col-12 col-lg-3 p-2">
  193.            
  194.             <!--
  195.            ===========================================================
  196.                HEAD IMAGE == replace URLHERE with your image url
  197.            ===========================================================
  198.            -->
  199.             <div class="h-100" style="min-height: 200px;
  200.            
  201.            background-image: url('URLHERE');
  202.            background-size: contain;
  203.            background-repeat: no-repeat;
  204.            background-position: center;
  205.            "></div>
  206.         </div>
  207.        
  208.        
  209.        
  210.        
  211.         <!--
  212.        ===========================================================
  213.                          CHARACTER BIO
  214.        ===========================================================
  215.        -->
  216.         <div class="col-12 col-md-6 col-lg-3 p-2">
  217.             <p class="text-uppercase mb-3 text-center text-lg-left" style="font-weight: 600;">
  218.                 Bio
  219.             </p>
  220.            
  221.             <!-- FULL NAME -->
  222.             <p class="mb-0"><span style="font-weight: 600;">Name:</span>
  223.                
  224.                 Content
  225.             </p>
  226.            
  227.             <!-- NICKNAME -->
  228.             <p class="mb-0"><span style="font-weight: 600;">Nickname:</span>
  229.                
  230.                 Content
  231.             </p>
  232.            
  233.             <!-- SPECIES -->
  234.             <p class="mb-0"><span style="font-weight: 600;">Species:</span>
  235.                
  236.                 Content
  237.             </p>
  238.            
  239.             <!-- SUBTYPE -->
  240.             <p class="mb-0"><span style="font-weight: 600;">Subtype:</span>
  241.                
  242.                 Content
  243.             </p>
  244.            
  245.             <!-- BLOOMDAY -->
  246.             <p class="mb-0"><span style="font-weight: 600;">Bloomday:</span>
  247.                
  248.                 Content
  249.             </p>
  250.            
  251.             <!-- DIET -->
  252.             <p class="mb-0"><span style="font-weight: 600;">Diet:</span>
  253.                
  254.                 Content
  255.             </p>
  256.            
  257.             <!-- LOCATION -->
  258.             <p class="mb-0"><span style="font-weight: 600;">Location:</span>
  259.                
  260.                 Content, Content
  261.             </p>
  262.            
  263.            
  264.         </div>
  265.        
  266.        
  267.        
  268.        
  269.         <!--
  270.        ===========================================================
  271.                          CHARACTER INFO
  272.        ===========================================================
  273.        -->
  274.         <div class="col-12 col-md-6 col-lg-3 p-2">
  275.             <p class="text-uppercase mb-3 text-center text-lg-left" style="font-weight: 600;">
  276.                 Info
  277.             </p>
  278.            
  279.             <!-- OCCUPATION -->
  280.             <p class="mb-0"><span style="font-weight: 600;">Occupation:</span>
  281.                
  282.                 Content
  283.             </p>
  284.            
  285.             <!-- ARPG -->
  286.             <p class="mb-0"><span style="font-weight: 600;">ARPG:</span>
  287.                
  288.                 Content
  289.             </p>
  290.            
  291.             <!-- GAME -->
  292.             <p class="mb-0"><span style="font-weight: 600;">Game:</span>
  293.                
  294.                 Content
  295.             </p>
  296.            
  297.             <!-- AFFINITY -->
  298.             <p class="mb-0"><span style="font-weight: 600;">Affinity:</span>
  299.                
  300.                 Content
  301.             </p>
  302.            
  303.             <!-- ABILITY -->
  304.             <p class="mb-0"><span style="font-weight: 600;">Ability:</span>
  305.                
  306.                 Content
  307.             </p>
  308.            
  309.             <!-- MAGIC -->
  310.             <p class="mb-0"><span style="font-weight: 600;">Magic:</span>
  311.                
  312.                 Content
  313.             </p>
  314.            
  315.            
  316.         </div>
  317.        
  318.        
  319.        
  320.        
  321.         <!--
  322.        ===========================================================
  323.                      CHARACTER COLLECTIBLE
  324.        ===========================================================
  325.        -->
  326.         <div class="col-12 col-lg-3 p-2 flex-column">
  327.             <p class="text-uppercase mb-3 text-center" style="font-weight: 600;">
  328.                 Collectible
  329.             </p>
  330.            
  331.            
  332.             <!--
  333.            ===========================================================
  334.             COLLECTIBLE IMAGE == replace URLHERE with your image url
  335.            ===========================================================
  336.            -->
  337.             <div class="flex-grow-1" style="min-height: 150px;
  338.            
  339.            background-image: url('URLHERE');
  340.            background-size: contain;
  341.            background-repeat: no-repeat;
  342.            background-position: center;
  343.            "></div>
  344.         </div>
  345.        
  346.        
  347.     </div>
  348.     </div>
  349.    
  350.    
  351.    
  352.    
  353.    
  354.    
  355.    
  356.    
  357.    
  358.    
  359.     <!--
  360.    ===========================================================
  361.    
  362.      THIRD ROW (IMAGE + PERSONALITY + INTERESTS + TALENTS)
  363.    
  364.    ===========================================================
  365.    -->
  366.     <div class="row no-gutters">
  367.        
  368.         <!--
  369.        ===========================================================
  370.        LEFT CHARACTER IMAGE == replace URLHERE with your image url
  371.        ===========================================================
  372.        -->
  373.         <div class="col-12 col-lg-5 p-2">
  374.             <div style="min-height: 420px;
  375.            
  376.            background-image: url('URLHERE');
  377.            background-size: contain;
  378.            background-repeat: no-repeat;
  379.            background-position: center;"></div>
  380.         </div>
  381.        
  382.        
  383.         <!--
  384.        ===========================================================
  385.                PERSONALITY + INTERESTS + TALENTS
  386.        ===========================================================
  387.        -->
  388.         <div class="col-12 col-lg-7 align-items-center justify-content-center pr-lg-5 mb-5 mb-lg-0">
  389.         <div class="col p-0">
  390.            
  391.            
  392.             <!-- PERSONALITY -->
  393.             <div>
  394.                 <p class="mb-0" style="font-weight: 600;">
  395.                     Personality
  396.                 </p>
  397.                 <p>
  398.                    
  399.                     Content, content, content.
  400.                    
  401.                 </p>
  402.             </div>
  403.            
  404.            
  405.            
  406.            
  407.             <!-- INTERESTS -->
  408.             <div class="my-3">
  409.                 <p class="mb-0" style="font-weight: 600;">
  410.                     Interests
  411.                 </p>
  412.                 <p>
  413.                    
  414.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  415.                    
  416.                 </p>
  417.             </div>
  418.            
  419.            
  420.            
  421.            
  422.             <!-- TALENTS -->
  423.             <div>
  424.                 <p class="mb-0" style="font-weight: 600;">
  425.                     Talents
  426.                 </p>
  427.                 <p>
  428.                    
  429.                     Content, content, content, content, content.
  430.                    
  431.                 </p>
  432.             </div>
  433.            
  434.         </div>
  435.         </div>
  436.     </div>
  437.    
  438.    
  439.    
  440.    
  441.    
  442.    
  443.    
  444.    
  445.    
  446.    
  447.    
  448.     <!--
  449.    ===========================================================
  450.    
  451.      FOURTH ROW (FAV MUTATIONS + ALTERNATE FORM + COMPANION)
  452.    
  453.    ===========================================================
  454.    -->
  455.     <div style="background-color: #CBDBBE;">
  456.     <div class="row no-gutters">
  457.        
  458.         <!--
  459.        ===========================================================
  460.                      FAVOURITE MUTATIONS
  461.        ===========================================================
  462.        -->
  463.         <div class="col-12 col-lg-4 p-3 px-4 text-center">
  464.             <p class="mb-0" style="font-weight: 600;">
  465.                 Favourite mutations
  466.             </p>
  467.             <p>
  468.                 Content content
  469.             </p>
  470.            
  471.             <!--
  472.            ===========================================================
  473.                CHARACTER IMAGE == replace URLHERE with your image url
  474.            ===========================================================
  475.            -->
  476.             <img src="URLHERE">
  477.         </div>
  478.        
  479.        
  480.         <!--
  481.        ===========================================================
  482.                         ALTERNATE FORM
  483.        ===========================================================
  484.        -->
  485.         <div class="col-12 col-lg-4 p-3 px-4 text-center">
  486.             <p class="mb-0" style="font-weight: 600;">
  487.                 Alternate form
  488.             </p>
  489.             <p>
  490.                 Content content
  491.             </p>
  492.            
  493.             <!--
  494.            ===========================================================
  495.                CHARACTER IMAGE == replace URLHERE with your image url
  496.            ===========================================================
  497.            -->
  498.             <img src="URLHERE">
  499.         </div>
  500.        
  501.        
  502.         <!--
  503.        ===========================================================
  504.                      LEFT CHARACTER IMAGE
  505.        ===========================================================
  506.        -->
  507.         <div class="col-12 col-lg-4 p-3 px-4 text-center flex-column">
  508.             <p class="mb-0" style="font-weight: 600;">
  509.                 Companion/Sidekick/pet/smol
  510.             </p>
  511.             <p>
  512.                 Content content
  513.             </p>
  514.            
  515.             <!--
  516.            ===========================================================
  517.              COMPANION IMAGE == replace URLHERE with your image url
  518.            ===========================================================
  519.            -->
  520.             <div class="card rounded-0 bg-transparent border-0 flex-grow-1 px-4 px-md-5 px-lg-3">
  521.             <img src="URLHERE"
  522.            class="my-auto">
  523.             </div>
  524.         </div>
  525.        
  526.        
  527.     </div>
  528.     </div>
  529.    
  530.    
  531.    
  532.    
  533.    
  534.    
  535.    
  536.    
  537.    
  538.    
  539.     <!--
  540.    ===========================================================
  541.    
  542.                  DRAGON MIGRATION SECTION
  543.    
  544.    ===========================================================
  545.    -->
  546.     <div class="p-2">
  547.         <p class="mb-0 text-center text-lg-left" style="font-weight: 600;">
  548.             Name's choice. [Dragon Migration 2021]
  549.         </p>
  550.        
  551.         <p>
  552.             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. 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.
  553.         </p>
  554.        
  555.        
  556.        
  557.         <!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
  558.     </div>
  559.    
  560.    
  561.    
  562.    
  563.    
  564.    
  565.    
  566.    
  567.    
  568.    
  569.     <!--
  570.    ===========================================================
  571.    
  572.              HISTORY + CREATION DATE + SIDE IMAGE
  573.    
  574.    ===========================================================
  575.    -->
  576.     <div style="background-color: #CBDBBE;">
  577.     <div class="row no-gutters">
  578.         <div class="col-12 col-lg-8 p-2 justify-content-center align-items-center">
  579.         <div class="col p-0">
  580.            
  581.             <!--
  582.            ===========================================================
  583.                              CHARACTER HISTORY
  584.            ===========================================================
  585.            -->
  586.             <div class="mb-3">
  587.                 <p class="mb-0 text-center text-lg-left" style="font-weight: 600;">
  588.                     History
  589.                 </p>
  590.                 <p>
  591.                    
  592.                     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.
  593.                    
  594.                 </p>
  595.             </div>
  596.            
  597.            
  598.             <!--
  599.            ===========================================================
  600.                                CREATION DATE
  601.            ===========================================================
  602.            -->
  603.             <div>
  604.                 <p class="text-center text-lg-left" style="font-weight: 600;">
  605.                    
  606.                     Created Month xx, 20xx.
  607.                    
  608.                 </p>
  609.             </div>
  610.         </div>
  611.         </div>
  612.        
  613.        
  614.         <!--
  615.        ===========================================================
  616.                      CHARACTER SIDE IMAGE
  617.        ===========================================================
  618.        -->
  619.         <div class="col-12 col-lg-4 p-2">
  620.             <!--
  621.            ===========================================================
  622.                SIDE IMAGE == replace URLHERE with your image url
  623.            ===========================================================
  624.            -->
  625.             <img src="URLHERE">
  626.         </div>
  627.        
  628.     </div>
  629.     </div>
  630.    
  631.    
  632.    
  633.    
  634.    
  635.    
  636.    
  637.    
  638.    
  639.    
  640.     <!--
  641.    ===========================================================
  642.    
  643.                     QUESTIONS SECTION
  644.    
  645.    ===========================================================
  646.    -->
  647.     <div class="my-5">
  648.         <p class="text-center mb-lg-5">
  649.             Questions asked during the NPC Questionaire 2021 Beanaversary Event.
  650.         </p>
  651.        
  652.        
  653.        
  654.         <!--
  655.        ===========================================================
  656.        
  657.                       SINGLE QUESTION BLOCK
  658.        
  659.        ===========================================================
  660.        -->
  661.         <div class="row no-gutters">
  662.            
  663.             <!--
  664.            ===========================================================
  665.                HEAD IMAGE == replace URLHERE with your image url
  666.            ===========================================================
  667.            -->
  668.             <div class="col-12 col-lg-3 p-2">
  669.             <div class="card rounded-0 border-0 bg-transparent">
  670.                 <img class="mx-auto" src="URLHERE">
  671.             </div>
  672.             </div>
  673.            
  674.             <!--
  675.            ===========================================================
  676.                          QUESTION + ID + ANSWER
  677.            ===========================================================
  678.            -->
  679.             <div class="col-12 col-lg-9 align-items-center justify-content-center">
  680.             <div class="col p-0">
  681.                 <p class="text-center text-lg-left" style="font-weight: 600;">
  682.                     Asked by ID:
  683.                    
  684.                     <a style="color: #169179;"
  685.                    
  686.                    href="LINK_HERE">
  687.                        
  688.                         XXXXX
  689.                     </a>
  690.                 </p>
  691.                
  692.                 <p class="text-center text-lg-left" style="font-weight: 600;">
  693.                    
  694.                     Question goes here?
  695.                    
  696.                 </p>
  697.                
  698.                 <p>
  699.                     Answer goes here. 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.
  700.                 </p>
  701.             </div>
  702.             </div>
  703.         </div>
  704.        
  705.        
  706.        
  707.        
  708.         <!--
  709.        ===========================================================
  710.        
  711.                       SINGLE QUESTION BLOCK
  712.        
  713.        ===========================================================
  714.        -->
  715.         <div class="row no-gutters">
  716.            
  717.             <!--
  718.            ===========================================================
  719.                HEAD IMAGE == replace URLHERE with your image url
  720.            ===========================================================
  721.            -->
  722.             <div class="col-12 col-lg-3 p-2">
  723.             <div class="card rounded-0 border-0 bg-transparent">
  724.                 <img class="mx-auto" src="URLHERE">
  725.             </div>
  726.             </div>
  727.            
  728.             <!--
  729.            ===========================================================
  730.                          QUESTION + ID + ANSWER
  731.            ===========================================================
  732.            -->
  733.             <div class="col-12 col-lg-9 align-items-center justify-content-center">
  734.             <div class="col p-0">
  735.                 <p class="text-center text-lg-left" style="font-weight: 600;">
  736.                     Asked by ID:
  737.                    
  738.                     <a style="color: #169179;"
  739.                    
  740.                    href="LINK_HERE">
  741.                        
  742.                         XXXXX
  743.                     </a>
  744.                 </p>
  745.                
  746.                 <p class="text-center text-lg-left" style="font-weight: 600;">
  747.                    
  748.                     Question goes here?
  749.                    
  750.                 </p>
  751.                
  752.                 <p>
  753.                     Answer goes here. 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.
  754.                 </p>
  755.             </div>
  756.             </div>
  757.         </div>
  758.        
  759.        
  760.        
  761.        
  762.         <!--
  763.        ===========================================================
  764.        
  765.                       SINGLE QUESTION BLOCK
  766.        
  767.        ===========================================================
  768.        -->
  769.         <div class="row no-gutters">
  770.            
  771.             <!--
  772.            ===========================================================
  773.                HEAD IMAGE == replace URLHERE with your image url
  774.            ===========================================================
  775.            -->
  776.             <div class="col-12 col-lg-3 p-2">
  777.             <div class="card rounded-0 border-0 bg-transparent">
  778.                 <img class="mx-auto" src="URLHERE">
  779.             </div>
  780.             </div>
  781.            
  782.             <!--
  783.            ===========================================================
  784.                          QUESTION + ID + ANSWER
  785.            ===========================================================
  786.            -->
  787.             <div class="col-12 col-lg-9 align-items-center justify-content-center">
  788.             <div class="col p-0">
  789.                 <p class="text-center text-lg-left" style="font-weight: 600;">
  790.                     Asked by ID:
  791.                    
  792.                     <a style="color: #169179;"
  793.                    
  794.                    href="LINK_HERE">
  795.                        
  796.                         XXXXX
  797.                     </a>
  798.                 </p>
  799.                
  800.                 <p class="text-center text-lg-left" style="font-weight: 600;">
  801.                    
  802.                     Question goes here?
  803.                    
  804.                 </p>
  805.                
  806.                 <p>
  807.                     Answer goes here. 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.
  808.                 </p>
  809.             </div>
  810.             </div>
  811.         </div>
  812.        
  813.        
  814.        
  815.        
  816.        
  817.        
  818.        
  819.         <!-- YOU CAN ADD MORE Q&A BLOCKS ABOVE -->
  820.     </div>
  821.    
  822.    
  823.    
  824.    
  825.    
  826.    
  827.    
  828.    
  829.    
  830.    
  831.     <!--
  832.    ===========================================================
  833.    
  834.                   COLLECTIBLES SECTION
  835.    
  836.    ===========================================================
  837.    -->
  838.     <h1 class="display-4 text-center text-lg-left" style="color: #169179;">
  839.         Collectibles
  840.     </h1>
  841.     <div style="background-color: #CBDBBE;">
  842.     <div class="row no-gutters">
  843.        
  844.         <!--
  845.        ===========================================================
  846.         COLLECTIBLE IMAGE == replace URLHERE with your image url
  847.        ===========================================================
  848.        -->
  849.         <div class="col-6 col-md-4 col-lg-2 p-2 text-center">
  850.             <img src="URLHERE">
  851.         </div>
  852.        
  853.        
  854.        
  855.        
  856.         <!-- YOU CAN COPY/PASTE THE COLLECTIBLE IMAGE BLOCK TO ADD MORE -->
  857.     </div>
  858.     </div>
  859.    
  860.    
  861.  
  862. </div>
  863. <!-- CODE CREDIT == DO NOT REMOVE -->
  864. <p class="text-center mt-1"><a class="tooltipster" title="Code by ChiiAka" href="https://toyhou.se/ChiiAka"><i class="far fa-code"></i></a></p>
  865. </div>
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!