API tools faq
paste
Advertisement
digi-code

zen (bs)

digi-code
Jan 31st, 2023 (edited)
73
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.53 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    　
  3.    >> ZEN BY DIGITAL_DOODLER
  4.          
  5.    NOTES
  6.    C://› This is the manual edit version, for this version, please use https://th.circlejourney.net/ !!
  7.    C://› Turn off WYSIWYG, I will not be fixing the code if it breaks, I'm completely clueless here buster.
  8.    C://> Please don't remove the credits here I BEG :pray:
  9.      
  10.      
  11.    -->
  12. <!-- MAIN BOX -->
  13. <div class="mx-auto bg-secondary" style="max-width:700px; padding-top:20px; padding-left:20px; padding-right:20px; border-radius:5px">
  14.     <div class="my-auto bg-dark" style="height:400px; border-radius:10px; padding:10px; text-align:center; overflow-y:auto">
  15.         <div class="row no-gutters">
  16.             <div class="col-lg-4 p-2">
  17.                 <!-- SIDEBAR IMAGE -->
  18.                 <div class="card" style="border-radius:0px; height:360px; background-size:cover; background-position:center; background-image:url(https://via.placeholder.com/400x460.png)">
  19.                     <!-- IMAGE CREDIT, DO NOT REMOVE -->
  20.                     <a href="linkhere" data-toggle="tooltip" title="image by C&#58;&#47;&#47;&gt; USERNAME" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  21.                     <!-- IMAGE CREDIT END -->
  22.                 </div>
  23.             </div>
  24.             <!-- IMAGE END -->
  25.             <div class="col-lg-8 p-2 text-light" style="font-family:consolas">
  26.                 <!-- NAV BUTTONS -->
  27.                 <ul class="row no-gutters nav nav-tabs card-header-tabs">
  28.                     <li class="nav-item col mr-2 mb-2 bg-light" style="border-radius:0px"><a data-toggle="tab" href="#infotab" class="active show btn w-100 text-dark">info</a></li>
  29.                     <li class="nav-item col mr-2 mb-2 bg-light" style="border-radius:0px"><a data-toggle="tab" href="#personaltab" class="btn w-100 text-dark">personality</a></li>
  30.                     <li class="nav-item col mr-2 mb-2 bg-light" style="border-radius:0px"><a data-toggle="tab" href="#abouttab" class="btn w-100 text-dark">about</a></li>
  31.                     <li class="nav-item col mb-2 bg-light" style="border-radius:0px"><a data-toggle="tab" href="#playtab" class="btn w-100 text-dark" >playlist</a></li>
  32.                 </ul>
  33.                 <ul class="row no-gutters nav nav-tabs card-header-tabs mt-2 mb-2">
  34.                     <li class="nav-item col mr-2 mt-1 bg-light" style="border-radius:0px"><a data-toggle="tab" href="#reftab" class="btn w-100 text-dark">reference</a></li>
  35.                     <li class="nav-item col mt-1 bg-light" style="border-radius:0px"><a data-toggle="tab" href="#moodtab" class="btn w-100 text-dark">moodboard</a></li>
  36.                 </ul>
  37.                 <!-- BUTTONS END -->
  38.                 <div class="p-2 bg-dark" style=" overflow-x: hidden; height:273px; text-align:left;">
  39.                     <div class="tab-content">
  40.                         <!-- TAB 1 - INFO -->
  41.                         <div class="tab-pane fade active show" id="infotab">
  42.                             <div class="row no-gutters">
  43.                                 <div class="col-6 p-1">
  44.                                     <!-- BASIC INFO -->
  45.                                     <span class="w-50 text-uppercase">name</span>
  46.                                     <span>C&#58;&#47;&#47;&gt;</span>
  47.                                     <span class="p-1 w-50 text-lowercase">xxxxxxxxxx</span>
  48.                                 </div>
  49.                                 <div class="col-6 p-1">
  50.                                     <span class="w-50 text-uppercase">age</span>
  51.                                     <span>&nbsp;&nbsp;C&#58;&#47;&#47;&gt;</span>
  52.                                     <span class="p-1 w-50 text-lowercase">xxx</span>
  53.                                 </div>
  54.                                 <div class="col-6 p-1">
  55.                                     <span class="w-50 text-uppercase">prns.</span>
  56.                                     <span>C&#58;&#47;&#47;&gt;</span>
  57.                                     <span class="p-1 w-50 text-lowercase">xx/xxx</span>
  58.                                 </div>
  59.                                 <div class="col-6 p-1">
  60.                                     <span class="w-50 text-uppercase">gend.</span>
  61.                                     <span>C&#58;&#47;&#47;&gt;</span>
  62.                                     <span class="p-1 w-10 text-lowercase">xxx</span>
  63.                                 </div>
  64.                                 <div class="col-6 p-1">
  65.                                     <span class="w-50 text-uppercase">spec.</span>
  66.                                     <span>C&#58;&#47;&#47;&gt;</span>
  67.                                     <span class="p-1 w-50 text-lowercase">xxx</span>
  68.                                 </div>
  69.                                 <div class="col-6 p-1">
  70.                                     <span class="w-50 text-uppercase">vocl.</span>
  71.                                     <span>C&#58;&#47;&#47;&gt;</span>
  72.                                     <span class="p-1 w-50 text-lowercase"><a href="link" class="text-light">link
  73.                                     </a></span>
  74.                                     <!-- BASIC INFO END -->
  75.                                 </div>
  76.                                 <hr class="col-12 my-auto mx-1" style="border-bottom:4px double">
  77.                                 <div class="col-6 p-1">
  78.                                     <!-- LIKES AND DISLIKES -->
  79.                                     <span class="my-auto mx-5 text-uppercase">&gt; likes</span>
  80.                                     <ul>
  81.                                         <li>hi</li>
  82.                                         <li>hi</li>
  83.                                         <li>hi</li>
  84.                                         <li>hi</li>
  85.                                         <li>hi</li>
  86.                                     </ul>
  87.                                 </div>
  88.                                 <div class="col-6 p-1">
  89.                                     <span class="my-auto mx-5 text-uppercase">&gt; dislikes</span>
  90.                                     <ul>
  91.                                         <li>hi</li>
  92.                                         <li>hi</li>
  93.                                         <li>hi</li>
  94.                                         <li>hi</li>
  95.                                         <li>hi</li>
  96.                                     </ul>
  97.                                     <!-- L AND D END -->
  98.                                 </div>
  99.                             </div>
  100.                         </div>
  101.                         <!-- INFO END -->
  102.                         <!-- TAB 2 - PERSONALITY -->
  103.                         <div class="tab-pane fade" id="personaltab">
  104.                             <div class="card bg-transparent border-0 p-0">
  105.                                 <div class="card py-2 pl-2 rounded-0 border-0 text-uppercase bg-light text-dark" style="position:sticky; top:1px; font-size:18px">&gt;&gt; around strangers</div>
  106.                                 <div class="p-3">
  107.                                     <p class="text-lowercase">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>
  108.                                     <p class="text-lowercase">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>
  109.                                 </div>
  110.                             </div>
  111.                             <div class="card bg-transparent border-0 p-0">
  112.                                 <div class="card py-2 pl-2 rounded-0 border-0 text-uppercase bg-light text-dark" style="position:sticky; top:1px; font-size:18px">&gt;&gt; around familiar people</div>
  113.                                 <div class="p-3">
  114.                                     <p class="text-lowercase">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>
  115.                                     <p class="text-lowercase">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>
  116.                                 </div>
  117.                             </div>
  118.                         </div>
  119.                         <div class="tab-pane fade" id="abouttab">
  120.                             <div class="card bg-transparent border-0 p-0">
  121.                                 <div class="card py-2 pl-2 rounded-0 border-0 text-uppercase bg-light text-dark" style="position:sticky; top:1px; font-size:18px">&gt;&gt; backstory</div>
  122.                                 <div class="p-3">
  123.                                     <p class="text-lowercase">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>
  124.                                     <p class="text-lowercase">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>
  125.                                 </div>
  126.                             </div>
  127.                             <!-- EXTRA STORY PARTS GO ABOVE THIS, SIMPLY COPY
  128.                                <div class="card bg-transparent border-0 p-0">
  129.                                <div class="card py-2 pl-2 rounded-0 border-0 text-uppercase bg-light text-dark" style="position:sticky; top:1px; font-size:18px">&gt;&gt; backstory</div>
  130.                                <div class="p-3">
  131.                                    <p class="text-lowercase">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>
  132.                                    <p class="text-lowercase">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>
  133.                                </div>
  134.                            </div>
  135.                                
  136.                                 -->
  137.                         </div>
  138.                         <div class="tab-pane fade" id="playtab">
  139.                             <!-- MUSIC, REPLACE "GieQq3eWSnE" WITH THE WEIRD STRING OF CHARACTERS AFTER THE "v=" -->
  140.                             <div class="justify-content-between my-2">
  141.                                 <p class="text-uppercase">song title C://> artist</p>
  142.                                 <i class="fa-solid fa-play"></i>
  143.                                 <div style="position:absolute; right:12px; opacity:.001"><iframe src="https://www.youtube.com/embed/GieQq3eWSnE?controls=0" width="20" height="20" frameborder="0"></iframe></div>
  144.                             </div>
  145.                             <hr class="col-12 my-auto mx-1" style="border-bottom:4px double">
  146.                             <div class="justify-content-between my-2">
  147.                                 <p class="text-uppercase">song title C://> artist</p>
  148.                                 <i class="fa-solid fa-play"></i>
  149.                                 <div style="position:absolute; right:12px; opacity:.001"><iframe src="https://www.youtube.com/embed/GieQq3eWSnE?controls=0" width="20" height="20" frameborder="0"></iframe></div>
  150.                             </div>
  151.                             <hr class="col-12 my-auto mx-1" style="border-bottom:4px double">
  152.                          <div class="justify-content-between my-2">
  153.                                 <p class="text-uppercase">song title C://> artist</p>
  154.                                 <i class="fa-solid fa-play"></i>
  155.                                 <div style="position:absolute; right:12px; opacity:.001"><iframe src="https://www.youtube.com/embed/GieQq3eWSnE?controls=0" width="20" height="20" frameborder="0"></iframe></div>
  156.                             </div>
  157.                             <hr class="col-12 my-auto mx-1" style="border-bottom:4px double">
  158.                             <div class="justify-content-between my-2">
  159.                                 <p class="text-uppercase">song title C://> artist</p>
  160.                                 <i class="fa-solid fa-play"></i>
  161.                                 <div style="position:absolute; right:12px; opacity:.001"><iframe src="https://www.youtube.com/embed/GieQq3eWSnE?controls=0" width="20" height="20" frameborder="0"></iframe></div>
  162.                             </div>
  163.                             <hr class="col-12 my-auto mx-1" style="border-bottom:4px double">
  164.                             <div class="justify-content-between my-2">
  165.                                 <p class="text-uppercase">song title C://> artist</p>
  166.                                 <i class="fa-solid fa-play"></i>
  167.                                 <div style="position:absolute; right:12px; opacity:.001"><iframe src="https://www.youtube.com/embed/GieQq3eWSnE?controls=0" width="20" height="20" frameborder="0"></iframe></div>
  168.                             </div>
  169.                             <hr class="col-12 my-auto mx-1" style="border-bottom:4px double">
  170.                             <div class="justify-content-between my-2">
  171.                                 <p class="text-uppercase">song title C://> artist</p>
  172.                                 <i class="fa-solid fa-play"></i>
  173.                                 <div style="position:absolute; right:12px; opacity:.001"><iframe src="https://www.youtube.com/embed/GieQq3eWSnE?controls=0" width="20" height="20" frameborder="0"></iframe></div>
  174.                             </div>
  175.                             <!-- MUSIC END, ADD MORE ABOVE THIS LINE -->
  176.                         </div>
  177.                         <!-- REFERENCE -->
  178.                         <div class="tab-pane fade" id="reftab">
  179.                             <!-- REFERENCE IMAGE -->
  180.                             <div class="card mb-2" style="border-radius:0px; height:150px; background-size:cover; background-position:center; background-image:url(https://via.placeholder.com/400x460.png)">
  181.                                 <!-- IMAGE CREDIT, DO NOT REMOVE -->
  182.                                 <a href="linkhere" data-toggle="tooltip" title="image by C&#58;&#47;&#47;&gt; USERNAME" class="text-light" style="position:absolute;top:2px;right:6px;font-size:17px;"><i class="fas fa-image"></i></a>
  183.                                 <!-- IMAGE CREDIT END -->
  184.                             </div>
  185.                             <!-- REFERENCE IMAGE END -->
  186.                             <!-- COLORS START HERE, IF THERE ARE MANY COLOURS COPY THIS ABOVE THE "<div class="row no-gutters mb-2" style="height: 25px">"
  187.                                <div class="row no-gutters mb-2" style="height: 25px">
  188.                                <span style="background-color: #FFFFFF;" class="col tooltipster" title="placement"></span>
  189.                                <span style="background-color: #d6d6d6;" class="col tooltipster" title="placement"></span>
  190.                                <span style="background-color: #afafaf;" class="col tooltipster" title="placement"></span>
  191.                                <span style="background-color: #898989;" class="col tooltipster" title="placement"></span>
  192.                                <span style="background-color: #656565;" class="col tooltipster" title="placement"></span>
  193.                                <span style="background-color: #434343;" class="col tooltipster" title="placement"></span>
  194.                                    
  195.                                    -->
  196.                             <div class="row no-gutters mb-2" style="height: 25px">
  197.                                 <span style="background-color: #FFFFFF;" class="col tooltipster" title="placement"></span>
  198.                                 <span style="background-color: #d6d6d6;" class="col tooltipster" title="placement"></span>
  199.                                 <span style="background-color: #afafaf;" class="col tooltipster" title="placement"></span>
  200.                                 <span style="background-color: #898989;" class="col tooltipster" title="placement"></span>
  201.                                 <span style="background-color: #656565;" class="col tooltipster" title="placement"></span>
  202.                                 <span style="background-color: #434343;" class="col tooltipster" title="placement"></span>
  203.                                 <!-- PLACE SINGULAR COLOURS ABOVE THIS LINE -->
  204.                                 <span style="background-color: #242424;" class="col tooltipster d-flex justify-content-center align-items-center" title="placement">
  205.                                 <a href="https://toyhou.se/StormyStarlight" data-toggle="tooltip" title="snipped from C&#58;&#47;&#47;&gt; stormystarlight" class="text-light" style="font-size:17px;"><i class="fas fa-code"></i></a>
  206.                                 </span>
  207.                                 <!-- COLORS END -->
  208.                             </div>
  209.                             <hr class="col-11 my-auto" style="border-bottom:4px double">
  210.                             <div class="row no-gutters">
  211.                                 <!-- OTHER INFO -->
  212.                                 <div class="col-6 p-1">
  213.                                     <span class="w-50 text-uppercase">hair</span>
  214.                                     <span>C&#58;&#47;&#47;&gt;</span>
  215.                                     <span class="p-1 w-50 text-lowercase">type</span>
  216.                                 </div>
  217.                                 <div class="col-6 p-1">
  218.                                     <span class="w-50 text-uppercase">skin</span>
  219.                                     <span>C&#58;&#47;&#47;&gt;</span>
  220.                                     <span class="p-1 w-50 text-lowercase">tone</span>
  221.                                 </div>
  222.                                 <div class="col-6 p-1">
  223.                                     <span class="w-50 text-uppercase">B.TY</span>
  224.                                     <span>C&#58;&#47;&#47;&gt;</span>
  225.                                     <span class="p-1 w-50 text-lowercase">body type</span>
  226.                                 </div>
  227.                                 <div class="col-6 p-1">
  228.                                     <span class="w-50 text-uppercase">hgt.</span>
  229.                                     <span>C&#58;&#47;&#47;&gt;</span>
  230.                                     <span class="p-1 w-50 text-lowercase">height</span>
  231.                                 </div>
  232.                                 <div class="col-6 p-1">
  233.                                     <span class="w-50 text-uppercase">wgt.</span>
  234.                                     <span>C&#58;&#47;&#47;&gt;</span>
  235.                                     <span class="p-1 w-50 text-lowercase">weight</span>
  236.                                 </div>
  237.                                 <div class="col-6 p-1">
  238.                                     <span class="w-50 text-uppercase">styl</span>
  239.                                     <span>C&#58;&#47;&#47;&gt;</span>
  240.                                     <span class="p-1 w-50 text-lowercase">clothing preference</span>
  241.                                     <!-- OTHER INFO END, ADD MORE ABOVE THIS LINE -->
  242.                                 </div>
  243.                                 <hr class="col-12 my-auto" style="border-bottom:4px double">
  244.                                 <div class="row no-gutters">
  245.                                     <!-- DESIGN NOTES -->
  246.                                     <p class="col-12 text-uppercase" style="font-size:25px">&gt;&gt; design notes</p>
  247.                                     <div class="col-12 p-1">
  248.                                         <span>C&#58;&#47;&#47;&gt;</span>
  249.                                         <span class="p-1 w-50 text-lowercase">[NOTE HERE]</span>
  250.                                     </div>
  251.                                     <div class="col-12 p-1">
  252.                                         <span>C&#58;&#47;&#47;&gt;</span>
  253.                                         <span class="p-1 w-50 text-lowercase">[NOTE HERE]</span>
  254.                                     </div>
  255.                                     <div class="col-12 p-1">
  256.                                         <span>C&#58;&#47;&#47;&gt;</span>
  257.                                         <span class="p-1 w-50 text-lowercase">[NOTE HERE]</span>
  258.                                     </div>
  259.                                     <div class="col-12 p-1">
  260.                                         <span>C&#58;&#47;&#47;&gt;</span>
  261.                                         <span class="p-1 w-50 text-lowercase">[NOTE HERE]</span>
  262.                                     </div>
  263.                                   <!-- NOTES END, ADD MORE ABOVE THIS LINE -->
  264.                                 </div>
  265.                             </div>
  266.                         </div>
  267.                         <!-- MOODBOARD -->
  268.                         <div class="tab-pane fade" id="moodtab">
  269.                             <div class="row no-gutters">
  270.                                 <!-- IMAGE 1 -->
  271.                                 <div class="col-md-4 p-1">
  272.                                     <div style="background-image:url(https://via.placeholder.com/400x460.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 110px; border-radius: 0px;">
  273.                                         <!-- IMAGE CREDIT, DO NOT REMOVE -->
  274.                                         <a href="linkhere" data-toggle="tooltip" title="image by/from C&#58;&#47;&#47;&gt; USERNAME/WEBSITE" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  275.                                         <!-- IMAGE CREDIT END -->
  276.                                     </div>
  277.                                 </div>
  278.                                 <!-- IMAGE 2 -->
  279.                                 <div class="col-md-4 p-1">
  280.                                     <div style="background-image: url(https://via.placeholder.com/400x460.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 110px; border-radius: 0px;">
  281.                                         <!-- IMAGE CREDIT, DO NOT REMOVE -->
  282.                                         <a href="linkhere" data-toggle="tooltip" title="image by/from C&#58;&#47;&#47;&gt; USERNAME/WEBSITE" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  283.                                         <!-- IMAGE CREDIT END -->
  284.                                     </div>
  285.                                 </div>
  286.                                 <!-- IMAGE 3 -->
  287.                                 <div class="col-md-4 p-1">
  288.                                     <div style="background-image: url(https://via.placeholder.com/400x460.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 110px; border-radius: 0px;">
  289.                                         <!-- IMAGE CREDIT, DO NOT REMOVE -->
  290.                                         <a href="linkhere" data-toggle="tooltip" title="image by/from C&#58;&#47;&#47;&gt; USERNAME/WEBSITE" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  291.                                         <!-- IMAGE CREDIT END -->
  292.                                     </div>
  293.                                 </div>
  294.                                 <!-- IMAGE 4 -->
  295.                                 <div class="col-md-4 p-1">
  296.                                     <div style="background-image: url(https://via.placeholder.com/400x460.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 110px; border-radius: 0px;">
  297.                                         <!-- IMAGE CREDIT, DO NOT REMOVE -->
  298.                                         <a href="linkhere" data-toggle="tooltip" title="image by/from C&#58;&#47;&#47;&gt; USERNAME/WEBSITE" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  299.                                         <!-- IMAGE CREDIT END -->
  300.                                     </div>
  301.                                 </div>
  302.                                 <!-- IMAGE 5 -->
  303.                                 <div class="col-md-4 p-1">
  304.                                     <div style="background-image: url(https://via.placeholder.com/400x460.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 110px; border-radius: 0px;">
  305.                                         <!-- IMAGE CREDIT, DO NOT REMOVE -->
  306.                                         <a href="linkhere" data-toggle="tooltip" title="image by/from C&#58;&#47;&#47;&gt; USERNAME/WEBSITE" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  307.                                         <!-- IMAGE CREDIT END -->
  308.                                     </div>
  309.                                 </div>
  310.                                 <!-- IMAGE 6 -->
  311.                                 <div class="col-md-4 p-1">
  312.                                     <div style="background-image: url(https://via.placeholder.com/400x460.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 110px; border-radius: 0px;">
  313.                                         <!-- IMAGE CREDIT, DO NOT REMOVE -->
  314.                                         <a href="linkhere" data-toggle="tooltip" title="image by/from C&#58;&#47;&#47;&gt; USERNAME/WEBSITE" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  315.                                         <!-- IMAGE CREDIT END -->
  316.                                     </div>
  317.                                 </div>
  318.                                 <!-- IMAGE 7 -->
  319.                                 <div class="col-md-4 p-1">
  320.                                     <div style="background-image: url(https://via.placeholder.com/400x460.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 110px; border-radius: 0px;">
  321.                                         <!-- IMAGE CREDIT, DO NOT REMOVE -->
  322.                                         <a href="linkhere" data-toggle="tooltip" title="image by/from C&#58;&#47;&#47;&gt; USERNAME/WEBSITE" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  323.                                         <!-- IMAGE CREDIT END -->
  324.                                     </div>
  325.                                 </div>
  326.                                 <!-- IMAGE 8 -->
  327.                                 <div class="col-md-4 p-1">
  328.                                     <div style="background-image: url(https://via.placeholder.com/400x460.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 110px; border-radius: 0px;">
  329.                                         <!-- IMAGE CREDIT, DO NOT REMOVE -->
  330.                                         <a href="linkhere" data-toggle="tooltip" title="image by/from C&#58;&#47;&#47;&gt; USERNAME/WEBSITE" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  331.                                         <!-- IMAGE CREDIT END -->
  332.                                     </div>
  333.                                 </div>
  334.                                 <!-- IMAGE 9 -->
  335.                                 <div class="col-md-4 p-1">
  336.                                     <div style="background-image: url(https://via.placeholder.com/400x460.png); background-size: cover; background-repeat: no-repeat; background-position: center; height: 110px; border-radius: 0px;">
  337.                                         <!-- IMAGE CREDIT, DO NOT REMOVE -->
  338.                                         <a href="linkhere" data-toggle="tooltip" title="image by/from C&#58;&#47;&#47;&gt; USERNAME/WEBSITE" class="text-light" style="position:absolute; top:2px; right:6px; font-size:17px;"><i class="fas fa-image"></i></a>
  339.                                         <!-- IMAGE CREDIT END -->
  340.                                     </div>
  341.                                 </div>
  342.                                 <!-- ADD MORE ABOVE THIS LINE -->
  343.                             </div>
  344.                             <!-- MOODBOARD END -->
  345.                         </div>
  346.                     </div>
  347.                 </div>
  348.             </div>
  349.         </div>
  350.     </div>
  351.     <!-- CODE CREDIT, DO NOT REMOVE -->
  352.     <p class="fa-fade" style="--fa-animation-duration:5s;text-align:center; font-family:consolas; font-size:50px;"><a href="https://toyhou.se/that-one-digi" class="text-success" data-toggle="tooltip" title="code by C&#58;&#47;&#47;&gt; that-one-digi"><i class="fas fa-code"></i></a></p>
  353.     <!-- CODE CREDIT END -->
  354. </div>
  355. <!-- MAIN BOX END -->
  356. <div class="mx-auto py-4 bg-secondary" style="max-width:200px;"></div>
  357. <div class="mx-auto py-3 bg-secondary" style="max-width:500px; border-radius:5px"></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!