lollyracket

binding v2 - char page

Feb 2nd, 2021
56
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.  
  3. <head>
  4. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  5. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  6.  
  7. <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;0,900;1,900&display=swap" rel="stylesheet">
  8. <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;700&display=swap" rel="stylesheet">
  9.  
  10.  
  11. <style type="text/css">
  12. /* -- credits
  13. code was made by lollyracketcodes. please do not copy or frankenstein.
  14.  
  15. honyebee icon font is credit to suiomi
  16.  
  17. --*/
  18.  
  19. #credit { position:fixed; right:20px; bottom:30px; padding:10px; font-size:9px; text-transform:uppercase; background-color:#f5f5f5; border:1px solid #ccc; }
  20. #credit icon { padding:5px; font-size:20px; }
  21. #credit:hover { transition-duration:1.2s; transition-timing-function:ease-in; font-weight:900; background-color:#a6dfb0; border:1px solid #a6dfb0; }
  22.  
  23.  
  24. body { font-family:lato; font-size:11px; background-color:#d8d8d8; }
  25. body a { text-decoration:none; color:#000; }
  26.  
  27. /* width */
  28. ::-webkit-scrollbar {
  29. width: 2px;
  30. }
  31.  
  32. /* Track */
  33. ::-webkit-scrollbar-track {
  34. background:transparent;
  35. }
  36.  
  37. /* Handle */
  38. ::-webkit-scrollbar-thumb {
  39. background: #888;
  40. }
  41.  
  42.  
  43.  
  44. /*-- fonts --*/
  45. @font-face { font-family: 'little birds'; src: url(https://files.jcink.net/uploads/hannahislame/fonts/Little_Birds.ttf); }
  46.  
  47. #bindingchar .bgstick { position:relative; width:650px; padding:5px; margin:40px auto 20px auto; background-color:#ebebeb; border:1px solid #b0b0b0; }
  48. #bindingchar .sidelink { position:absolute; top:0px; left:0px; bottom:0px; padding:10px; background-color:#fff; border-right:1px solid #ccc; font-family:rajdhani; font-size:14px; font-style:italic; }
  49. #bindingchar .sidelink ul { list-style-type:circle; margin-top:10px; color:#bf6db1; }
  50. #bindingchar .sidelink li { padding:5px; }
  51. #bindingchar .sidelink a:hover { color:#bf6db1; }
  52.  
  53. #bindingchar .pageimg { width:200px; height:200px; padding:5px; border:1px solid #000; margin-left:120px; margin-top:10px; background-color:#fff; border:1px solid #ccc; }
  54. #bindingchar .pageimg img { width:200px; height:200px; background-size:cover; }
  55. #bindingchar .pagename { padding:20px; width:270px; position:absolute; top:45px; right:10px; }
  56. #bindingchar .nametext { font-family:little birds; font-size:25px; text-align:left; margin-bottom:5px; }
  57. #bindingchar .locate { width:100px; background-color:#fff; border:1px solid #ccc; font-family:lato; font-size:10px; text-transform:uppercase; padding:5px; color:#6DB1BF; display:inline; }
  58. #bindingchar .locate span { padding:5px; }
  59.  
  60.  
  61. #bindingchar .listinfo { width:270px; padding:5px; margin-left:120px; margin-top:10px; background-color:#fff; border:1px solid #ccc; }
  62. #bindingchar .listinside { height:200px; padding:10px; overflow:auto; }
  63. #bindingchar .listyle { padding:0px; font-size:10px; }
  64. #bindingchar .listyle b { color:#6db1bf; font-family:rajdhani; text-transform:uppercase; }
  65. #bindingchar .divide { height:1px; background-color:#ccc; margin:10px; }
  66. #bindingchar .listinfo blockquote { padding:7px; background-color:#f2f2f2; border:1px solid #ccc; margin:8px; }
  67.  
  68. #bindingchar .biginfo { width:200px; padding:10px; background-color:#fff; border:1px solid #ccc; text-align:justify; font-size:10px; margin-top:10px; }
  69. #bindingchar .infoinside { height:200px; padding:5px; overflow:auto; }
  70. #bindingchar .biginfo b { text-decoration:underline; text-decoration-color:#6dbf7b; }
  71. #bindingchar .biginfo u { color:#bf6db1; text-decoration-color:#000; }
  72. #bindingchar .biginfo i { background-color:rgba(109,177,191,0.5); padding:1px; }
  73. #bindingchar .imagebottom { padding:5px; margin-left:120px; margin-top:5px; }
  74. #bindingchar .tableimg { width:80px; height:80px; padding:5px; background-color:#fff; border:1px solid #ccc; margin-right:5px; }
  75. #bindingchar .tableimg img { width:80px; height:80px; background-size:cover; }
  76. </style>
  77.  
  78.  
  79. </head>
  80.  
  81. <body>
  82. <div id="credit"><a href="https://lollyracketcodes.tumblr.com/"><icon><span class="th th-moon-o" title="page credit to lollyracketcodes"></span></icon></a></div>
  83.  
  84.  
  85. <div id="bindingchar"><div class="bgstick">
  86. <div class="sidelink">
  87. <ul>
  88. <li><a href="//">home</a></li>
  89. <li><a href="//">ask</a></li>
  90. <li><a href="//">archive</a></li>
  91. <li><a href="//">link</a></li>
  92. <li><a href="//">link</a></li>
  93. <li><a href="//">link</a></li>
  94. <li><a href="//">link</a></li>
  95. </ul>
  96. </div>
  97. <div class="pageimg"><img src="http://placehold.it/200"></div>
  98.  
  99. <div class="pagename"><div class="nametext">name</div>
  100. <div class="locate"><span class="th th-id-card-1-o"></span> pronouns</div> <div class="locate"><span class="th th-location-4-o"></span> timezone</div>
  101.  
  102. </div>
  103. <table>
  104. <td><div class="listinfo"><div class="listinside">
  105. <div class="listyle"><b>full name</b> here</div>
  106. <div class="listyle"><b>preferred name</b> here</div>
  107. <div class="listyle"><b>age</b> here</div>
  108. <div class="listyle"><b>pronouns</b> here</div>
  109. <div class="listyle"><b>gender</b> here</div>
  110. <div class="listyle"><b>birthdate</b> here</div>
  111. <div class="listyle"><b>zodiac</b> here</div>
  112.  
  113. <div class="divide"></div>
  114.  
  115. <div class="listyle"><b>hometown</b> here</div>
  116. <div class="listyle"><b>current location</b> here</div>
  117. <div class="listyle"><b>notable family</b>
  118. <blockquote>here</blockquote>
  119. </div>
  120. <div class="listyle"><b>relationship status</b> here</div>
  121. <div class="listyle"><b>significant other</b> here</div>
  122.  
  123. <div class="divide"></div>
  124.  
  125. <div class="listyle"><b>likes</b>
  126. <blockquote>here</blockquote>
  127. </div>
  128. <div class="listyle"><b>dislikes</b>
  129. <blockquote>here</blockquote>
  130. </div>
  131. <div class="listyle"><b>hobbies</b>
  132. <blockquote>here</blockquote>
  133. </div>
  134.  
  135. </div></div></td>
  136.  
  137. <td>
  138. <div class="biginfo"><div class="infoinside">info about you goes here this'll expand and <b>it'll scroll if it needs to</b> <u>so there's plenty of room</u> <i>for talking</i>
  139. </div></div></td></table>
  140.  
  141. <div class="imagebottom">
  142. <table><td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
  143. <td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
  144. <td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
  145. <td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
  146. <td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
  147. </div>
  148.  
  149.  
  150. </div>
  151.  
  152. </body>
  153.  
  154. </html>
RAW Paste Data