API tools faq
paste
Advertisement
runewood

wipp

runewood
Jul 23rd, 2021 (edited)
35
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.01 KB | None | 0 0
raw download clone embed print report
  1. <p>
  2. <br>
  3. <br>
  4. <br>
  5. <br>
  6. <br><div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("https://cdn.discordapp.com/attachments/792099006217453609/868326250668769321/unknown.png") fixed; width: 100%; z-index: -1;'<br></div>
  7. <!-- ------------------------------
  8.  
  9.  
  10. FOGGY — Bootstrap version.
  11. (code by jiko, layout by ArabicaBean)
  12.  
  13.  
  14. RULES
  15. → Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
  16. thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
  17.  
  18. → turn OFF WYSIWYG
  19. → turn ON Code Editor
  20.  
  21.  
  22. TIPPY TIPS
  23. → insert your img links INSIDE or quotation marks!!
  24.  
  25. → looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
  26. → need more help with HTML? don't be afraid to PM me <3
  27.  
  28.  
  29. ACCENTS
  30. → set to -primary
  31. view other bootstrap colours if you're interested!
  32.  
  33.  
  34. ------------------------------- --><div class="mx-auto mt-3" style="font-size:85%; letter-spacing:0.2px; max-width:756px;"><div class="row no-gutters"><!-- ------------------------------
  35.  
  36.  
  37. BACKGROUND
  38. → change the background to whatever you want, the original request was for a foggy background so i left it as it is! ^^
  39.  
  40.  
  41. ------------------------------- --><div class="card-block border-0 p-3" style="border-radius:15px;
  42. 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);
  43. background-size: cover;
  44. background-position: center;
  45. background-attachment: scroll;
  46. background-color: #656b67;
  47. background-blend-mode: luminosity;"><!-- ------------------------------------
  48.  
  49. HEADER
  50.  
  51. ------------------------------------- -->
  52. <!--
  53. → if the background image is bright, delete [text-white]
  54. --><div class="card-block p-2 text-white"><div class="justify-content-between" style="font-size:17px;"><span><i class="far fa-moon fa-fw"></i></span>
  55. <span style="letter-spacing:2px;">vethir</span></div></div><div class="tab-content row no-gutters"><!-- ------------------------------
  56.  
  57.  
  58. TAB BUTTONS
  59.  
  60.  
  61. ------------------------------- --><div class="col-lg-12 p-1 order-3"><ul class="nav nav-pills pull-right"><li class="px-1"><a class="btn bg-faded btn-outline-secondary active" data-toggle="tab" href="#foggyone" style="font-size:95%; letter-spacing:1px;">profile</a></li><li class="px-1"><a class="btn bg-faded btn-outline-secondary" data-toggle="tab" href="#foggytwo" style="font-size:95%; letter-spacing:1px;">playlist</a></li><li class="px-1"><a class="btn bg-faded btn-outline-secondary" data-toggle="tab" href="#foggythree" style="font-size:95%; letter-spacing:1px;">som ocs</a></li></ul></div><!-- ------------------------------------
  62.  
  63.  
  64. LEFT SIDE, USER CONTENT
  65.  
  66.  
  67. ------------------------------------- --><div class="col-lg-4 p-2 order-lg-1"><div class="card bg-faded p-3 w-100 h-100"><!-- ------------------------------------
  68. IMAGE
  69. ------------------------------------- -->
  70. <!--
  71. → best if squared or 200x200
  72. → delete [fr-rounded] if you want a square icon
  73. --><div class="text-center"><img src="https://cdn.discordapp.com/attachments/483755956786692119/868304271282671686/argrgag2.png"
  74. class="fr-rounded img-thumbnail p-2 mb-2" style="max-width:150px; max-height:150px"></div><!-- ------------------------------------
  75. WORDS TO DESCRIBE YOURSELF
  76. ------------------------------------- -->
  77. <!--
  78. → play around with the [font-size:#% | #px] if it gets too long :]
  79. --><div class="text-center p-1 text-muted" style="font-size:88%;"><em>&nbsp;vethir <i class="fas fa-angle-right fa-sm px-1"></i> she/her <i class="fas fa-angle-right fa-sm px-1"></i> 23&nbsp;</em></div><hr class="my-3 w-100"><!-- ------------------------------------
  80. ARTIST STATS
  81. ------------------------------------- -->look &rarr; for pinglists &amp; uft/s</div></div><!-- ------------------------------------
  82.  
  83.  
  84. RIGHT SIDE, TAB CONTENT
  85.  
  86.  
  87. ------------------------------------- --><div class="col-lg-8 p-2 order-lg-2"><div class="card table-responsive tab-content bg-faded" style="height:330px;"><!-- ------------------------------------
  88.  
  89. 01 // PROFILE
  90.  
  91. ------------------------------------- --><div class="tab-pane fade active show" id="foggyone"><div class="bg-faded p-3"><!-- ------ TITLE ------------------------------ --><div class="pb-2" style="font-size:15px; letter-spacing:2px;"><i class="fas fa-moon fa-sm pr-3"></i>| profile</div><hr class="my-2 pb-1"><!-- ------ SUMMARY OF YOURSELF + INTERESTS ------------------------------ -->
  92. <!--
  93. → keep this somewhat short
  94. --><div class="text-justify text-muted" style="height:140px; overflow:auto;"><p>&middot; <a href="https://toyhou.se/vethir/characters/folder:1189014">sonas</a> &middot; <a href="https://toyhou.se/vethir/characters/folder:1189015">forever homed</a> &middot; <a href="https://toyhou.se/vethir/characters/folder:1189016">love</a> &middot; <a href="https://toyhou.se/vethir/characters/folder:1189037">wip</a> &middot; <a href="https://toyhou.se/~bulletins/157562.taking-art-trade-offers-on-some-characters" id="">ufs/t</a> &middot;<br><br>pinglists:<br><span style="color: rgb(153, 185, 205);"><a href="https://toyhou.se/~bulletins/256977.pinglist" id="">my characters</a><br><a href="https://www.deviantart.com/vethir/status-update/20738607" id="">pixels/chibis</a><br><a href="https://toyhou.se/~bulletins/328388.adopt-pinglist-remake-" id="">adopts/customs</a><br><br></span><u><a href="https://toyhou.se/~bulletins/157562.taking-art-trade-offers-on-some-characters" id=""><span style="color: rgb(153, 185, 205);">offerable characters can be found&nbsp;here</span></a></u></p></div><hr><!-- ------ LINKS TO OTHER SOCIAL MEDIA ------------------------------ -->
  95. <!--
  96. → for more website icons, head over to fontawesome and have a look!
  97. --><div class="row no-gutters pt-3 text-center"><div class="col"><a href="https://www.deviantart.com/vethir"><i class="fab fa-deviantart fa-2x"></i></a></div><div class="col"><a href="https://twitter.com/vethirlove"><i class="fab fa-twitter fa-2x"></i></a></div><div class="col"><a href="https://www.instagram.com/vethirlove/"><i class="fab fa-instagram fa-2x"></i></a></div><div class="col"><a class="text-primary tooltipster" title="ask"><i class="fab fa-discord fa-2x"></i></a></div><!-- (add/delete above THIS line!) --></div></div></div><!-- ------------------------------------
  98.  
  99. 02 // PLAYLIST
  100.  
  101. ------------------------------------- --><div class="tab-pane fade" id="foggytwo"><div class="bg-faded p-3" style="min-height:310px; overflow:auto;"><!-- ------ TITLE ------------------------------ --><div class="pb-2" style="font-size:15px; letter-spacing:2px;"><i class="fas fa-music fa-sm pr-3"></i>| my playlist</div><hr class="my-2 pb-1"><!-- ------ PLAYLIST ------------------------------ --><div class="text-justify px-1" style="max-height:245px; overflow:auto;"><!-- --- SONG ONE --- --><div class="justify-content-between"><span class="my-auto"><a href="https://youtu.be/F6Dgo8SZJr0"><i class="fas fa-play-circle"></i></a></span>
  102. <span><span class="font-italic pull-right">Arcade (Duncan Laurence cover)</span><br><span class="text-muted pull-right">Daði Freyr &mdash;</span></span></div><hr class="my-2 mb-3"><!-- --- SONG TWO --- --><div class="justify-content-between"><span class="my-auto"><a href="https://youtu.be/3euYLzKRjIk"><i class="fas fa-play-circle"></i></a></span>
  103. <span><span class="font-italic pull-right">Pasiduodu Sau</span><br><span class="text-muted pull-right">GJan &mdash;</span></span></div><hr class="my-2 mb-3"><!-- --- SONG THREE --- --><div class="justify-content-between"><span class="my-auto"><a href="https://youtu.be/MtOKcxH5Dos"><i class="fas fa-play-circle"></i></a></span>
  104. <span><span class="font-italic pull-right">Stay</span><br><span class="text-muted pull-right">Cradle of Filth &mdash;</span></span></div><hr class="my-2 mb-3"><!-- --- SONG FOUR --- --><div class="justify-content-between"><span class="my-auto"><a href="https://youtu.be/RWawep0fPso"><i class="fas fa-play-circle"></i></a></span>
  105. <span><span class="font-italic pull-right">I Knew And Will Forever Know</span><br><span class="text-muted pull-right">Lacrimas Profundere &mdash;</span></span></div><hr class="my-2 mb-3"><!-- (add/delete above THIS line!) --></div></div></div><!-- ------------------------------------
  106.  
  107. 03 // CHARACTER LIST
  108.  
  109. ------------------------------------- --><div class="tab-pane fade" id="foggythree"><div class="bg-faded p-3" style="min-height:310px; overflow:auto;"><!-- ------ TITLE ------------------------------ --><div class="pb-2" style="font-size:15px; letter-spacing:2px;"><i class="fas fa-heart fa-sm pr-3"></i>| some ocs</div><hr class="my-2 pb-1"><!-- ------ LIST ------------------------------ -->
  110. <!--
  111. → best if squared or 200x200
  112. → delete [fr-rounded] if you want a square icon
  113. --><div class="row no-gutters text-justify px-1" style="max-height:245px; overflow:auto;"><!-- --- FRIEND ONE --- --><div class="col-4 text-center p-1 pb-3"><img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/4406059_7AK_5235058.png?1572541319" class="fr-rounded mb-2 fr-fic fr-dii" width="100" height="100">
  114. <a href="https://toyhou.se/1193014.devery">devery</a></div><!-- --- FRIEND TWO --- --><div class="col-4 text-center p-1 pb-3"><img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/29436598_JTH_1603720.png?1608178868" class="fr-rounded mb-2 fr-fic fr-dii" width="100" height="100">
  115. <a href="https://toyhou.se/1603720.seraphina">seraphina</a></div><!-- --- FRIEND THREE --- --><div class="col-4 text-center p-1 pb-3"><img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/35855344_bXV_1324140.jpg?1623332636" class="fr-rounded mb-2 fr-fic fr-dii" width="100" height="100">
  116. <a href="https://toyhou.se/1324140.tuomas">tuomas</a></div><!-- --- FRIEND FOUR --- --><div class="col-4 text-center p-1 pb-3"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/6990202?1623067792" class="fr-rounded mb-2 fr-fic fr-dii" width="100" height="100">
  117. <a href="https://toyhou.se/6990202.ruduo">Ruduo</a></div><!--
  118. (add/delete above THIS line!) --></div></div></div></div></div><!-- don't touch the beloww --></div></div><!-- ------------------------------
  119.  
  120.  
  121. CREDIT
  122.  
  123.  
  124. ------------------------------- --><div class="col-12 text-right small py-2" style="letter-spacing:4px;"><a class="tooltipster" href="https://toyhou.se/9335534.-f2u-user-foggy" style="text-decoration:none !important;" title="code by jiko"><i class="far fa-code"></i></a> . <a class="tooltipster" href="https://toyhou.se/ArabicaBean" title="layout by ArabicaBean"><i class="far fa-lightbulb"></i></a></div></div></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!