starlingpawn

[ F2U ] User Foggy (BS)

Feb 27th, 2021
1,581
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- ------------------------------------
  2.  
  3.  
  4.        FOGGY (code by jiko, layout by ArabicaBean)
  5.        
  6.        RULES
  7.            → Read this thoroughly please, and maybe leave a small comment saying that you've read it? :'3  thank youu
  8.            [ https://toyhou.se/~bulletins/127417.code-rules ]
  9.  
  10.        TIPPY TIPS
  11.            → insert your img links INSIDE the brackets or quotation marks!!
  12.  
  13.  
  14. ------------------------------------- -->
  15. <!-- [ don't like the lowercase aesthetic?  just remove text-lowercase <3 ] -->
  16. <div class="mx-auto mt-4 text-lowercase" style="font-size:11.5px; letter-spacing:0.3px; max-width:756px;">
  17. <div class="row no-gutters">
  18. <!-- ------------------------------------
  19.  
  20.                 BACKGROUND
  21.  
  22. ------------------------------------- -->
  23. <div class="card-block border-0 p-3" style="border-radius:15px;
  24.  /* BACKGROUND IMAGE HERE
  25.  ====================================== */;
  26.  background-image:url(https://images.unsplash.com/photo-1608806875874-b4837ec38f88?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1411&q=80);
  27.  
  28.  background-size: cover;
  29.  background-position: center;
  30.  background-attachment: scroll;
  31.  
  32.  /* FANCY BUT OPTIONAL FILTERS
  33.  ====================================== */;
  34.  background-color: #656b67;
  35.  background-blend-mode: luminosity;">
  36.    
  37.    
  38.     <!-- -- HEADER
  39.    ------------------------- -->
  40.     <!-- if the background image is bright, delete [ text-white ] -->
  41.     <div class="card-block p-2 text-white">
  42.     <div class="justify-content-between" style="font-size:17px;">
  43.        
  44.         <span><i class="far fa-star"></i></span>
  45.         <span style="letter-spacing:2px">(user)name</span>
  46.        
  47.     </div>
  48.     </div>
  49. <!-- ------------------------------------
  50.  
  51.  
  52.                 PROFILE CONTENT
  53.  
  54.  
  55. ------------------------------------- -->
  56. <div class="tab-content row no-gutters">
  57. <div class="col-lg-12 p-1 order-3">
  58. <ul class="nav nav-pills pull-right">
  59.  
  60.  
  61.     <!-- -- FRONT PAGE
  62.    ------------------------- -->
  63.     <li class="px-1">
  64.         <a class="btn bg-faded btn-outline-secondary active" style="font-size:11.5px; letter-spacing:1px;"
  65.        data-toggle="tab" href="#uno">
  66.  
  67.          profile
  68.  
  69.         </a>
  70.     </li>
  71.  
  72.  
  73.     <!-- -- PLAYLIST OF YOUR FAV MUSIC
  74.    ------------------------- -->
  75.     <li class="px-1">
  76.         <a class="btn bg-faded btn-outline-secondary" style="font-size:11.5px; letter-spacing:1px;"
  77.        data-toggle="tab" href="#dos">
  78.  
  79.          playlist
  80.  
  81.         </a>
  82.     </li>
  83.  
  84.  
  85.     <!-- -- FRIENDS OR IDOLS
  86.    ------------------------- -->
  87.     <li class="px-1">
  88.         <a class="btn bg-faded btn-outline-secondary" style="font-size:11.5px; letter-spacing:1px;"
  89.        data-toggle="tab" href="#tres">
  90.  
  91.          friends
  92.  
  93.         </a>
  94.     </li>
  95.  
  96.  
  97. </ul>
  98. </div>
  99. <!-- ------------------------------------
  100.  
  101.  
  102.              01 | USER CONTENT
  103.  
  104.  
  105. ------------------------------------- -->
  106. <div class="col-lg-4 p-2 order-lg-1">
  107. <div class="card bg-faded p-3 w-100 h-100">
  108.  
  109.  
  110.     <!--  IMAGE (squared images)  ------------------------------------- -->
  111.     <div class="text-center">
  112.    
  113.         <img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
  114.        class="rounded-circle img-thumbnail p-2 mb-2" style="max-width:150px; max-height:150px">
  115.    
  116.     </div>
  117.  
  118.  
  119.     <!--  WORDS TO DESCRIBE YOURSELF  ------------------------------------- -->
  120.     <div class="text-center p-1 text-muted" style="font-size:10px"><i>
  121.        
  122.         describe <i class="fas fa-angle-right fa-sm px-1"></i>
  123.         yourself <i class="fas fa-angle-right fa-sm px-1"></i>
  124.         here
  125.        
  126.     </i></div>
  127.     <hr class="my-3 w-100">
  128.  
  129.  
  130.     <!--  ARTIST STATS  ------------------------------------- -->  
  131.     <div class="justify-content-between py-1">
  132.         <span class="text-muted">requests</span>
  133.         <span>status</span>
  134.     </div>
  135.    
  136.     <div class="justify-content-between py-1">
  137.         <span class="text-muted">trades</span>
  138.         <span>status</span>
  139.     </div>
  140.    
  141.     <div class="justify-content-between py-1">
  142.         <span class="text-muted">commisions</span>
  143.         <span>status</span>
  144.     </div>
  145.  
  146.  
  147. </div>
  148. </div>
  149. <!-- ------------------------------------
  150.  
  151.  
  152.                 TAB CONTENT
  153.  
  154.  
  155. ------------------------------------- -->
  156. <div class="col-lg-8 p-2 order-lg-2">
  157. <div class="card table-responsive tab-content bg-faded" style="height:324px;">
  158. <!-- ------------------------------------
  159.  
  160.                 01 // PROFILE
  161.  
  162. ------------------------------------- -->
  163. <div class="tab-pane fade active show" id="uno">
  164. <div class="bg-faded p-3">
  165.  
  166.  
  167.     <!--  TITLE  ------------------------------------- -->
  168.     <div class="pb-2" style="font-size:15px; letter-spacing:2px">
  169.         <i class="fas fa-star fa-sm pr-3"></i>| profile
  170.     </div><hr class="my-2 pb-1">
  171.    
  172.    
  173.     <!--  SUMMARY OF YOURSELF + INTERESTS  ------------------------------------- -->
  174.     <div class="text-justify text-muted" style="height:140px; overflow:auto">
  175.        
  176.         <p>Hi there!  I'm (user)name, an artist based in Pogtopia.</p>
  177.        
  178.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  179.        
  180.         <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  181.    
  182.     </div><hr>
  183.    
  184.    
  185.     <!--  LINKS TO OTHER SOCIAL MEDIA ------------------------------------- -->
  186.     <!--  ( for more website icons, head over to fontawesome and have a look! )- -->
  187.     <div class="row no-gutters pt-3 text-center">
  188.        
  189.         <div class="col">
  190.             <a href="LINK TO MEDIA">
  191.                 <i class="fab fa-deviantart fa-2x"></i>
  192.             </a>
  193.         </div>
  194.        
  195.         <div class="col">
  196.             <a href="LINK TO MEDIA">
  197.                 <i class="fab fa-twitter fa-2x"></i>
  198.             </a>
  199.         </div>
  200.        
  201.         <div class="col">
  202.             <a href="LINK TO MEDIA">
  203.                 <i class="fab fa-trello fa-2x"></i>
  204.             </a>
  205.         </div>
  206.        
  207.         <div class="col">
  208.             <a class="text-primary tooltipster" title="NAME#0000">
  209.                 <i class="fab fa-discord fa-2x"></i>
  210.             </a>
  211.         </div>
  212.  
  213.     <!-- (add/delete above THIS line!) -->
  214.     </div>
  215. </div>
  216. </div>
  217. <!-- ------------------------------------
  218.  
  219.                 02 // PLAYLIST
  220.  
  221. ------------------------------------- -->
  222. <div class="tab-pane fade" id="dos">
  223. <div class="bg-faded p-3" style="min-height:310px; overflow:auto">
  224.  
  225.  
  226.     <!--  [ TITLE ]  ------------------------------------- -->
  227.     <div class="pb-2" style="font-size:15px; letter-spacing:2px">
  228.         <i class="fas fa-music fa-sm pr-3"></i>| my playlist
  229.     </div><hr class="my-2 pb-1">
  230.  
  231.  
  232.     <!--  [ PLAYLIST ]  ------------------------------------- -->
  233.     <div class="text-justify px-1" style="max-height:235px; overflow:auto">
  234.        
  235.         <!-- ----- [ SONG ONE ] ----- -->
  236.         <div class="justify-content-between">
  237.             <span class="my-auto">
  238.                 <a href="YOUTUBE LINK HERE">
  239.                     <i class="fas fa-play-circle"></i>
  240.                 </a>
  241.             </span>
  242.             <span>
  243.                 <i>Song Title</i><br>
  244.                 <span class="text-muted">Artist —</span>
  245.             </span>
  246.            
  247.         </div><hr class="my-2 mb-3">
  248.        
  249.         <!-- ----- [ SONG TWO ] ----- -->
  250.         <div class="justify-content-between">
  251.             <span class="my-auto">
  252.                 <a href="YOUTUBE LINK HERE">
  253.                     <i class="fas fa-play-circle"></i>
  254.                 </a>
  255.             </span>
  256.             <span>
  257.                 <i>Song Title</i><br>
  258.                 <span class="text-muted">Artist —</span>
  259.             </span>
  260.            
  261.         </div><hr class="my-2 mb-3">
  262.        
  263.         <!-- ----- [ SONG THREE ] ----- -->
  264.         <div class="justify-content-between">
  265.             <span class="my-auto">
  266.                 <a href="YOUTUBE LINK HERE">
  267.                     <i class="fas fa-play-circle"></i>
  268.                 </a>
  269.             </span>
  270.             <span>
  271.                 <i>Song Title</i><br>
  272.                 <span class="text-muted">Artist —</span>
  273.             </span>
  274.            
  275.         </div><hr class="my-2 mb-3">
  276.        
  277.         <!-- ----- [ SONG FOUR ] ----- -->
  278.         <div class="justify-content-between">
  279.             <span class="my-auto">
  280.                 <a href="YOUTUBE LINK HERE">
  281.                     <i class="fas fa-play-circle"></i>
  282.                 </a>
  283.             </span>
  284.             <span>
  285.                 <i>Song Title</i><br>
  286.                 <span class="text-muted">Artist —</span>
  287.             </span>
  288.            
  289.         </div><hr class="my-2 mb-3">
  290.        
  291.     <!-- (add/delete above THIS line!) -->
  292.     </div>
  293. </div>
  294. </div>
  295. <!-- ------------------------------------
  296.  
  297.                 03 // FRIENDS
  298.  
  299. ------------------------------------- -->
  300. <div class="tab-pane fade" id="tres">
  301. <div class="bg-faded p-3" style="min-height:310px; overflow:auto">
  302.  
  303.  
  304.     <!--  [ TITLE ]  ------------------------------------- -->
  305.     <div class="pb-2" style="font-size:15px; letter-spacing:2px">
  306.         <i class="fas fa-heart fa-sm pr-3"></i>| my friends
  307.     </div><hr class="my-2 pb-1">
  308.  
  309.  
  310.     <!--  [ FRIEND LIST ]  ------------------------------------- -->
  311.     <!-- best if the images are 200x200, and squared! -->
  312.    
  313.     <div class="row no-gutters text-justify px-1" style="max-height:235px; overflow:auto">
  314.        
  315.        
  316.         <!-- ----- [ FRIEND ONE ] ----- -->
  317.         <div class="col-4 text-center p-1 pb-3">
  318.             <img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
  319.            class="rounded-circle mb-2" style="width:100px; height:100px;">
  320.            
  321.             <div class="">
  322.                 <a href="LINK TO PROFILE">friend</a>
  323.             </div>
  324.         </div>
  325.        
  326.        
  327.         <!-- ----- [ FRIEND TWO ] ----- -->
  328.         <div class="col-4 text-center p-1 pb-3">
  329.             <img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
  330.            class="rounded-circle mb-2" style="width:100px; height:100px;">
  331.            
  332.             <div class="">
  333.                 <a href="LINK TO PROFILE">friend</a>
  334.             </div>
  335.         </div>
  336.        
  337.        
  338.         <!-- ----- [ FRIEND THREE ] ----- -->
  339.         <div class="col-4 text-center p-1 pb-3">
  340.             <img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
  341.            class="rounded-circle mb-2" style="width:100px; height:100px;">
  342.            
  343.             <div class="">
  344.                 <a href="LINK TO PROFILE">friend</a>
  345.             </div>
  346.         </div>
  347.        
  348.        
  349.         <!-- ----- [ FRIEND FOUR ] ----- -->
  350.         <div class="col-4 text-center p-1 pb-3">
  351.             <img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
  352.            class="rounded-circle mb-2" style="width:100px; height:100px;">
  353.            
  354.             <div class="">
  355.                 <a href="LINK TO PROFILE">friend</a>
  356.             </div>
  357.         </div>
  358.        
  359.     <!-- (add/delete above THIS line!) -->
  360.     </div>
  361. </div>
  362. </div>
  363. <!-- ------------------------------------
  364.  
  365.  
  366.                 CREDITS
  367.  
  368.  
  369. ------------------------------------- -->
  370. </div></div></div></div></div>
  371. <div class="text-right small py-2" style="letter-spacing:4px">
  372.  
  373.  
  374.     <a href="https://toyhou.se/9335534.-f2u-user-foggy"
  375.    data-toggle="tooltip" title="code by jiko" style="text-decoration:none !important">
  376.         <i class="far fa-code"></i>
  377.     </a> .
  378.    
  379.     <a href="https://toyhou.se/ArabicaBean"
  380.    data-toggle="tooltip" title="layout by ArabicaBean">
  381.         <i class="far fa-lightbulb"></i>
  382.     </a>
  383.  
  384. </div>
  385. </div>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×