API tools faq
paste
Advertisement
Apollyna

F2U // Artifice _ Apollyna @ TH

Apollyna
Aug 11th, 2022 (edited)
3,187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.95 KB | None | 0 0
raw download clone embed print report
  1. <!-- ====================================================================================================
  2.  
  3.               F2U // Artifice
  4.               toyhou.se profile html by Apollyna
  5.  
  6.               main accent: #888888
  7.               link accent: #999999
  8.  
  9.               20220821 // updated music player
  10.  
  11. ==================================================================================================== -->
  12.         <div class="container-fluid p-0 my-5 text-justify" style="max-width:1100px; font-size: 0.9em;">
  13.             <!-- fancy background border spacing -->
  14.             <div class="m-3 card bg-transparent">
  15.                 <div class="m-n2 card bg-transparent">
  16.                     <div class="m-n3">
  17.                         <!-- -->
  18.                         <div class="row no-gutters">
  19.                             <!-- LEFT ==================================================================================================== -->
  20.                             <div class="col-12 col-lg-3 mr-lg-3 mb-3 d-flex flex-fill">
  21.                                 <div class="row no-gutters d-flex flex-fill">
  22.                                     <div class="col col-md-5 col-lg-12 d-flex mb-3 mb-md-0 mb-lg-3">
  23.                                         <div class="d-flex flex-fill mr-md-3 mr-lg-0">
  24.                                             <!-- 1.1 - PORTRAIT IMAGE -->
  25.                                             <div class="flex-fill rounded overflow-hidden" style="background-image:url('https://i.imgur.com/fvlYVab.png'); background-size:cover; background-position: center; min-height:20em; padding-bottom:100%;">
  26.                                                 <div style="height:0px;">&nbsp;</div>
  27.                                             </div>
  28.                                         </div>
  29.                                     </div>
  30.                                     <div class="col col-md-7 col-lg-12 d-flex flex-fill">
  31.                                         <div class="d-flex flex-fill">
  32.                                             <div class="card d-flex flex-fill /border-0 bg-faded h-100 d-flex flex-column justify-content-between mb-2 mb-lg-0 p-3 p-md-4">
  33.                                                 <!-- basic stat entries. you can add or remove these by deleting or duplicating the code between two empty-comment separators. just check your mb-2s and make the last entry have mb-0 -->
  34.                                                 <!-- -->
  35.                                                 <div class="row no-gutters mb-2">
  36.                                                     <div class="/d-none col-auto overflow-hidden text-center" style="width:2em; color: #888888;"><i class="fa fa-light /faded fa-signature py-1" style="margin-left:-0.5em;"></i></div>
  37.                                                     <div class="col-auto text-left display-4" style="letter-spacing:1px; font-size:1.3em; color: #888888;">name</div>
  38.                                                     <div class="col px-2 pb-1">
  39.                                                         <div class="h-75 border-bottom border-dark" style="border-bottom:1px dotted #999;line-height:0px;">&nbsp;</div>
  40.                                                     </div>
  41.                                                     <div class="col-auto text-right">entry</div>
  42.                                                 </div>
  43.                                                 <!-- -->
  44.                                                 <div class="row no-gutters mb-2">
  45.                                                     <div class="/d-none col-auto overflow-hidden text-center" style="width:2em; color: #888888;"><i class="fa fa-light /faded fa-transgender py-1" style="margin-left:-0.5em;"></i></div>
  46.                                                     <div class="col-auto text-left display-4" style="letter-spacing:1px; font-size:1.3em; color: #888888;">prns</div>
  47.                                                     <div class="col px-2 pb-1">
  48.                                                         <div class="h-75 border-bottom border-dark" style="border-bottom:1px dotted #999;line-height:0px;">&nbsp;</div>
  49.                                                     </div>
  50.                                                     <div class="col-auto text-right">en/try</div>
  51.                                                 </div>
  52.                                                 <!-- -->
  53.                                                 <div class="row no-gutters mb-2">
  54.                                                     <div class="/d-none col-auto overflow-hidden text-center" style="width:2em; color: #888888;"><i class="fa fa-light /faded fa-dna py-1" style="margin-left:-0.5em;"></i></div>
  55.                                                     <div class="col-auto text-left display-4" style="letter-spacing:1px; font-size:1.3em; color: #888888;">species</div>
  56.                                                     <div class="col px-2 pb-1">
  57.                                                         <div class="h-75 border-bottom border-dark" style="border-bottom:1px dotted #999;line-height:0px;">&nbsp;</div>
  58.                                                     </div>
  59.                                                     <div class="col-auto text-right">entry</div>
  60.                                                 </div>
  61.                                                 <!-- -->
  62.                                                 <div class="row no-gutters mb-2">
  63.                                                     <div class="/d-none col-auto overflow-hidden text-center" style="width:2em; color: #888888;"><i class="fa fa-light /faded fa-ruler py-1" style="margin-left:-0.5em;"></i></div>
  64.                                                     <div class="col-auto text-left display-4" style="letter-spacing:1px; font-size:1.3em; color: #888888;">height</div>
  65.                                                     <div class="col px-2 pb-1">
  66.                                                         <div class="h-75 border-bottom border-dark" style="border-bottom:1px dotted #999;line-height:0px;">&nbsp;</div>
  67.                                                     </div>
  68.                                                     <div class="col-auto text-right">entry</div>
  69.                                                 </div>
  70.                                                 <!-- -->
  71.                                                 <div class="row no-gutters mb-2">
  72.                                                     <div class="/d-none col-auto overflow-hidden text-center" style="width:2em; color: #888888;"><i class="fa fa-light /faded fa-dumbbell py-1" style="margin-left:-0.5em;"></i></div>
  73.                                                     <div class="col-auto text-left display-4" style="letter-spacing:1px; font-size:1.3em; color: #888888;">build</div>
  74.                                                     <div class="col px-2 pb-1">
  75.                                                         <div class="h-75 border-bottom border-dark" style="border-bottom:1px dotted #999;line-height:0px;">&nbsp;</div>
  76.                                                     </div>
  77.                                                     <div class="col-auto text-right">entry</div>
  78.                                                 </div>
  79.                                                 <!-- -->
  80.                                                 <div class="row no-gutters mb-2">
  81.                                                     <div class="/d-none col-auto overflow-hidden text-center" style="width:2em; color: #888888;"><i class="fa fa-light /faded fa-gear py-1" style="margin-left:-0.5em;"></i></div>
  82.                                                     <div class="col-auto text-left display-4" style="letter-spacing:1px; font-size:1.3em; color: #888888;">role</div>
  83.                                                     <div class="col px-2 pb-1">
  84.                                                         <div class="h-75 border-bottom border-dark" style="border-bottom:1px dotted #999;line-height:0px;">&nbsp;</div>
  85.                                                     </div>
  86.                                                     <div class="col-auto text-right">entry</div>
  87.                                                 </div>
  88.                                                 <!-- -->
  89.                                                 <div class="row no-gutters mb-2">
  90.                                                     <div class="/d-none col-auto overflow-hidden text-center" style="width:2em; color: #888888;"><i class="fa fa-light /faded fa-image py-1" style="margin-left:-0.5em;"></i></div>
  91.                                                     <div class="col-auto text-left display-4" style="letter-spacing:1px; font-size:1.3em; color: #888888;">aesthetic</div>
  92.                                                     <div class="col px-2 pb-1">
  93.                                                         <div class="h-75 border-bottom border-dark" style="border-bottom:1px dotted #999;line-height:0px;">&nbsp;</div>
  94.                                                     </div>
  95.                                                     <div class="col-auto text-right"><a href="#" id="" rel="noopener noreferrer" style="
  96. color: #999999;" target="_blank"><em>[ pinterest ]</em></a></div>
  97.                                                 </div>
  98.                                                 <!-- -->
  99.                                                 <div class="row no-gutters mb-0">
  100.                                                     <div class="/d-none col-auto overflow-hidden text-center" style="width:2em; color: #888888;"><i class="fa fa-light /faded fa-calendar-plus py-1" style="margin-left:-0.5em;"></i></div>
  101.                                                     <div class="col-auto text-left display-4" style="letter-spacing:1px; font-size:1.3em; color: #888888;">obtained</div>
  102.                                                     <div class="col px-2 pb-1">
  103.                                                         <div class="h-75 border-bottom border-dark" style="border-bottom:1px dotted #999;line-height:0px;">&nbsp;</div>
  104.                                                     </div>
  105.                                                     <div class="col-auto text-right"><a href="#" id="" rel="noopener noreferrer" style="
  106. color: #999999;" target="_blank"><em>[ 00/00/00 ]</em></a></div>
  107.                                                 </div>
  108.                                                 <!-- -->
  109.                                             </div>
  110.                                         </div>
  111.                                     </div>
  112.                                 </div>
  113.                             </div>
  114.                             <!-- HEADER ==================================================================================================== -->
  115.                             <div class="col-12 col-lg d-flex flex-column">
  116.                                 <div class="w-100 p-0 mb-3">
  117.                                     <!-- 2.1 - header image -->
  118.                                     <div class="rounded overflow-hidden" style="background-image:url('https://i.imgur.com/fvlYVab.png'); background-size:cover; background-position: center; min-height:6em;">&nbsp;</div>
  119.                                 </div>
  120.                                 <!-- CENTER ==================================================================================================== -->
  121.                                 <div class="row no-gutters flex-fill">
  122.                                     <div class="col-12 col-md mr-xl-3 row no-gutters flex-column">
  123.                                         <div class="/col mb-3">
  124.                                             <div class="card bg-faded flex-fill /border-0 p-3">
  125.                                                 <div class="row no-gutters text-center /faded" style="font-size:1.1em;">
  126.                                                     <div class="col-auto faded align-self-start align-items-start" style="color: #888888;"><i class="fal fa-light fa-quote-left"></i></div>
  127.                                                     <div class="col align-self-center px-2"><span class="display-4 faded" style="letter-spacing:1px; font-size:1.3em; /color: #888888;">Quote or lyric. This box will stretch vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin.</span><span class="d-block mt-1 faded" style="/letter-spacing:0.1px; color: #888888;">- Lorem Ipsum</span></div>
  128.                                                     <div class="col-auto faded align-self-end align-items-end" style="color: #888888;"><i class="fal fa-light fa-quote-right"></i></div>
  129.                                                 </div>
  130.                                             </div>
  131.                                         </div>
  132.                                         <div>
  133.                                             <div class="row no-gutters mr-n3">
  134.                                                 <!-- IMG 3.1 - palette swatches - remove "/" in front of "background-image" to make these hold tiny images. duplicate a "col" div to add more swatches -->
  135.                                                 <div class="col mr-3 mb-3">
  136.                                                     <!-- IMG 3.4 -->
  137.                                                     <div class="rounded overflow-hidden" style="background-color: #aaa; /background-image:url('https://i.imgur.com/fvlYVab.png'); background-size:cover; background-position: center; min-height:2em;">&nbsp;</div>
  138.                                                 </div>
  139.                                                 <div class="col mr-3 mb-3">
  140.                                                     <!-- IMG 3.3 -->
  141.                                                     <div class="rounded overflow-hidden" style="background-color: #bbb; /background-image:url('https://i.imgur.com/fvlYVab.png'); background-size:cover; background-position: center; min-height:2em;">&nbsp;</div>
  142.                                                 </div>
  143.                                                 <div class="col mr-3 mb-3">
  144.                                                     <!-- IMG 3.2 -->
  145.                                                     <div class="rounded overflow-hidden" style="background-color: #ccc; /background-image:url('https://i.imgur.com/fvlYVab.png'); background-size:cover; background-position: center; min-height:2em;">&nbsp;</div>
  146.                                                 </div>
  147.                                                 <div class="col mr-3 mb-3">
  148.                                                     <div class="rounded overflow-hidden" style="background-color: #ddd; /background-image:url('https://i.imgur.com/fvlYVab.png'); background-size:cover; background-position: center; min-height:2em;">&nbsp;</div>
  149.                                                 </div>
  150.                                             </div>
  151.                                         </div>
  152.                                         <!-- MAIN TEXT BOX ==================================================================================================== -->
  153.                                         <div class="col d-flex flex-fill mb-3" style="position: relative; flex: 1; min-height:25em;">
  154.                                             <div class="card bg-faded /border-0 flex-fill p-3" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow-y: auto;">
  155.                                                 <div class="px-2">
  156.                                                     <!-- -->
  157.                                                     <div class="mb-3">
  158.                                                         <div class="row no-gutters align-items-center">
  159.                                                             <div class="col-auto mr-2 display-4" style="letter-spacing:1px; font-size:1.3em; font-weight: 400; color: #888888;">
  160.                                                                 <!-- --><em>summary</em></div>
  161.                                                             <div class="col">
  162.                                                                 <hr>
  163.                                                             </div>
  164.                                                         </div>
  165.  
  166.                                                         <p>This whole box scrolls with text! Just duplicate a section header to add more categories. 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>
  167.                                                     </div>
  168.                                                     <!-- -->
  169.                                                     <div class="mb-3">
  170.                                                         <div class="row no-gutters align-items-center">
  171.                                                             <div class="col-auto mr-2 display-4" style="letter-spacing:1px; font-size:1.3em; font-weight: 400; color: #888888;">
  172.                                                                 <!-- --><em>appearance</em></div>
  173.                                                             <div class="col">
  174.                                                                 <hr>
  175.                                                             </div>
  176.                                                         </div>
  177.  
  178.                                                         <p>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>
  179.  
  180.                                                         <p>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.                                                     </div>
  182.                                                     <!-- -->
  183.                                                     <div class="mb-3">
  184.                                                         <div class="row no-gutters align-items-center">
  185.                                                             <div class="col-auto mr-2 display-4" style="letter-spacing:1px; font-size:1.3em; font-weight: 400; color: #888888;">
  186.                                                                 <!-- --><em>personality</em></div>
  187.                                                             <div class="col">
  188.                                                                 <hr>
  189.                                                             </div>
  190.                                                         </div>
  191.  
  192.                                                         <p>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>
  193.  
  194.                                                         <p>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>
  195.                                                     </div>
  196.                                                     <!-- -->
  197.                                                     <div class="mb-3">
  198.                                                         <div class="row no-gutters align-items-center">
  199.                                                             <div class="col-auto mr-2 display-4" style="letter-spacing:1px; font-size:1.3em; font-weight: 400; color: #888888;">
  200.                                                                 <!-- --><em>history</em></div>
  201.                                                             <div class="col">
  202.                                                                 <hr>
  203.                                                             </div>
  204.                                                         </div>
  205.  
  206.                                                         <p>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>
  207.  
  208.                                                         <p>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>
  209.                                                     </div>
  210.                                                     <!-- -->
  211.                                                     <div class="mb-2">
  212.                                                         <div class="row no-gutters align-items-center">
  213.                                                             <div class="col-auto mr-2 display-4" style="letter-spacing:1px; font-size:1.3em; font-weight: 400; color: #888888;">
  214.                                                                 <!-- --><em>trivia</em></div>
  215.                                                             <div class="col">
  216.                                                                 <hr>
  217.                                                             </div>
  218.                                                         </div>
  219.  
  220.                                                         <ul class="pl-4 m-0" style="list-style-type: circle;">
  221.                                                             <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  222.                                                             <li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
  223.                                                             <li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
  224.                                                             <li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
  225.                                                             <li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
  226.                                                         </ul>
  227.                                                     </div>
  228.                                                     <!-- -->
  229.                                                 </div>
  230.                                             </div>
  231.                                         </div>
  232.                                         <!-- main text section end -->
  233.                                     </div>
  234.                                     <!-- RIGHT-HAND IMAGES ==================================================================================================== -->
  235.                                     <div class="col-12 col-xl-3 mb-3">
  236.                                         <div class="row no-gutters flex-row flex-xl-column h-100 mr-n3">
  237.                                             <div class="col col-md-4 col-xl d-flex flex-fill mb-3 mb-md-0 mb-xl-3">
  238.                                                 <!-- IMG 4.1 -->
  239.                                                 <div class="flex-fill mr-3 rounded overflow-hidden" style="background-image:url('https://i.imgur.com/fvlYVab.png'); background-size:cover; background-position: center; min-height:10em; /padding-bottom:100%;">
  240.                                                     <div style="height:0px;">&nbsp;</div>
  241.                                                 </div>
  242.                                             </div>
  243.                                             <div class="col col-md-4 col-xl d-flex flex-fill mb-3 mb-md-0 mb-xl-3">
  244.                                                 <!-- IMG 4.2 -->
  245.                                                 <div class="flex-fill mr-3 rounded overflow-hidden" style="background-image:url('https://i.imgur.com/fvlYVab.png'); background-size:cover; background-position: center; min-height:10em; /padding-bottom:100%;">
  246.                                                     <div style="height:0px;">&nbsp;</div>
  247.                                                 </div>
  248.                                             </div>
  249.                                             <div class="col col-md-4 col-xl d-flex flex-fill /mb-xl-3">
  250.                                                 <!-- IMG 4.3 -->
  251.                                                 <div class="flex-fill mr-3 rounded overflow-hidden" style="background-image:url('https://i.imgur.com/fvlYVab.png'); background-size:cover; background-position: center; min-height:10em; /padding-bottom:100%;">
  252.                                                     <div style="height:0px;">&nbsp;</div>
  253.                                                 </div>
  254.                                             </div>
  255.                                         </div>
  256.                                     </div>
  257.                                 </div>
  258.                             </div>
  259.                             <!-- FOOTERS ==================================================================================================== -->
  260.                             <div class="col-12">
  261.                                 <div class="row no-gutters">
  262.                                     <div class="col d-flex mr-3">
  263.                                         <div class="card /border-0 bg-faded p-2 px-3 d-flex flex-fill">
  264.                                             <!-- music player from BakuCodes. tutorial here: https://toyhou.se/8682081.all-music-players-wip/8682087.tutorial // TL;DR - "IDGOESHERE" > "dQw4w9WgXcQ" and dont delete "?controls=1" or mess with the positioning
  265. ==================================================================================================== -->
  266.                                             <div class="row no-gutters flex-fill justify-content-center faded">
  267.                                                 <div class="col-auto my-auto /faded tooltipster" title="click to play music!">
  268.                                                     <a class="/btn /btn-outline-dark melody-embed d-flex overflow-hidden /h-100 /w-100" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;">
  269.                                                         <iframe style="opacity:.01;position:absolute;top:-115px;left:-25px;" src="https://www.youtube-nocookie.com/embed/IDGOESHERE?controls=1" frameborder="0"></iframe><i class="/faded /text-muted fa fa-fw fa-2x fa-light fa-fade fa-play-pause pt-1" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i></a>
  270.                                                 </div>
  271.                                                 <div class="col mx-3 my-auto /faded" style="/height:1.5em; /background-image: url('https://i.imgur.com/PfswojE.gif');background-repeat:repeat-x;background-position:center;background-size:8em;">
  272.                                                     <hr style="height:1px; background-color: #407071; border:none;" class="faded">
  273.                                                 </div>
  274.                                                 <div class="col-auto my-auto pr-2 display-4" style="letter-spacing:1px; font-size:1.3em; color: #407071;">
  275.                                                     <!-- --><i class="fa fa-fw fa-2xs fa-light fa-music mr-2 tooltipster" title="artist"></i>Artist ‐
  276.                                                     <!-- --><i class="d-none fa fa-fw fa-2xs fa-light fa-music mr-1 tooltipster" title="song"></i><em>Song</em></div>
  277.                                             </div>
  278.                                             <!--  end music player ==================================================================================================== -->
  279.                                         </div>
  280.                                     </div>
  281.                                     <div class="col-3 d-flex">
  282.                                         <div class="d-flex flex-fill">
  283.                                             <div class="card bg-faded /border-0 p-3 d-flex flex-fill justify-content-center align-items-center text-center">
  284.                                                 <div class="row no-gutters display-4 faded w-100" style="letter-spacing:1px; font-size: 0.9em; color: #888888;">
  285.                                                     <div class="col-12 col-lg-6 tooltipster mb-2 mb-lg-0" title="profile html coded by Apollyna"><i class="fa fa-light fa-fw fa-code-branch /mr-1"></i> @Apollyna</div>
  286.                                                     <div class="col-12 col-lg-6 tooltipster" title="profile layout drafted by Togo"><i class="fa fa-light fa-fw fa-code-compare /mr-1"></i> @Togo</div>
  287.                                                 </div>
  288.                                             </div>
  289.                                         </div>
  290.                                     </div>
  291.                                 </div>
  292.                             </div>
  293.                             <!-- ==================================================================================================== -->
  294.                         </div>
  295.                     </div>
  296.                 </div>
  297.             </div>
  298.         </div>
  299.         <!-- ====================================================================================================
  300.               F2U // Artifice profile html end
  301.          ==================================================================================================== -->
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!