API tools faq
paste
Advertisement
harreyeh

taezs: about #1

harreyeh
Nov 20th, 2020
1,327
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.89 KB | None | 0 0
raw download clone embed print report
  1. <!------
  2.  
  3. about page by taezs.tumblr.com, please do not remove credit.
  4.  
  5. message me if you have any issues!
  6.  
  7. ------>
  8.  
  9. <!DOCTYPE html>
  10. <head>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  13. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  14.  
  15.  
  16. <!-- browser page title ---->
  17. <title>Bio</title>
  18.  
  19. <style>
  20.  
  21. .image{
  22. height:calc(25.8px*6); /*change the 6 to another number if you want a different number of descriptors */
  23. width:calc(25.8px*6); /* change this 6 to the same number if you want to keep a square image */
  24. }
  25.  
  26. .one span, .one span.name{background:#eae5e0;color:black;}
  27. /*change the background color & text color of the descriptors. tip: if you want to match the color with the image, go to imagecolorpicker.com and upload the image link and it will suggest matching colours!*/
  28.  
  29. .one span.desc{background:#fafafa; color:black;}
  30. /*color and bg of the main body of text*/
  31.  
  32.  
  33.  
  34.  
  35. #s-m-t-tooltip {
  36. max-width:240px;
  37. padding:3px 10px;
  38. margin-left:20px;
  39. margin-right:15px;
  40. margin-top:-8px;
  41. z-index:99999999990;
  42. transition:.2s;
  43. line-height:15px;
  44. font-size:12px;
  45. background:#f7f7f7;
  46. color:#000}
  47.  
  48. .iframe-controls--desktop {
  49. position:fixed;
  50. top:0px;
  51. right:0px;
  52. filter:invert(100%);
  53. -webkit-filter:invert(100%);
  54. z-index:999999999999;
  55. -webkit-transform:scale(0.6,0.6);
  56. -webkit-transform-origin: 100% 0%;
  57. -ms-transform-origin:100% 0%;
  58. -ms-transform:scale(0.6,0.6);
  59. transform:scale(0.6,0.6);
  60. transform-origin:100% 0%;
  61. }
  62.  
  63.  
  64.  
  65. body {
  66. font-family: 'Lato', sans-serif;
  67. color:#333;
  68. font-size: 10px;
  69. background-color:#fff;
  70. letter-spacing:0.5px;
  71. -moz-osx-font-smoothing:grayscale;
  72. -webkit-font-smoothing:antialiased;
  73. font-smoothing:antialiased;
  74. }
  75.  
  76. a {
  77. color: #777;
  78. text-decoration: none;
  79. letter-spacing:0.5px;
  80. -webkit-transition: all 0.3s ease-in-out;
  81. -moz-transition: all 0.3s ease-in-out;
  82. -o-transition: all 0.3s ease-in-out;
  83. -ms-transition: all 0.3s ease-in-out;
  84. transition: all 0.3s ease-in-out;
  85. }
  86.  
  87. a:hover {
  88. color: #222;
  89. transition: 0.3s ease-in-out;
  90. }
  91. .taezs{
  92. position:fixed;
  93. bottom:20px;
  94. right:20px;
  95. width:200px;
  96. height:20px;
  97. }
  98.  
  99. .taezs a{
  100. display:inline-block;
  101. background:#fff;
  102. border:1px solid #eee;
  103. border-radius:3px;
  104. position:fixed;
  105. right:20px;
  106. padding:5px;
  107. bottom:20px;
  108. }
  109.  
  110. .taezs a:before{
  111. content:"theme by taezs";
  112. position:fixed;
  113. right:70px;
  114. opacity:0;
  115. bottom:25px;
  116. transition:.5s;
  117. }
  118.  
  119. .taezs a:hover:before{
  120. opacity:1;
  121. right:50px;
  122. transition:.5s;
  123. }
  124.  
  125. #topbar{
  126. position:fixed;
  127. top:0px;
  128. left:0px;
  129. width:100%;
  130. height:30px;
  131. line-height:30px;
  132. background:#fafafa;
  133. z-index:1;
  134. padding-left:20px;
  135. }
  136.  
  137. #topbar a{
  138. display:inline-block;
  139. text-transform:uppercase;
  140. font-family:'Space Grotesk', sans-serif;
  141. margin-right:30px;
  142. }
  143.  
  144. #container{
  145. position:absolute;
  146. width:500px;
  147. margin:120px 0;
  148. left:50%;
  149. background:#fafafa;
  150. margin-left:-250px;
  151. }
  152.  
  153.  
  154. ul.members{
  155. list-style:none;
  156. margin:0;padding:0;
  157. }
  158.  
  159. .one{
  160. display:inline-block;
  161. font-weight:400;
  162. text-transform:uppercase;
  163. text-align:left;
  164. border-bottom:5px solid #fafafa;
  165. -moz-transition-duration: 0.5s;
  166. -o-transition-duration: 0.5s;
  167. -webkit-transition-duration: 0.5s;
  168. transition-duration: 0.5s;
  169. }
  170.  
  171. .image{
  172. float:right;
  173. margin-left:10px;
  174. border-left:1px solid #fff;
  175. background-color: #cccccc; /* Used if the image is unavailable */
  176. background-position: center; /* Center the image */
  177. background-repeat: no-repeat; /* Do not repeat the image */
  178. background-size: cover;
  179. }
  180.  
  181. .one span{
  182. display:block;
  183. font-family:'Space Grotesk', sans-serif;
  184. border-bottom:1px solid white;
  185. padding:6px;
  186. font-size:10px;
  187. }
  188.  
  189. .one span:last-child{
  190. border-bottom:none;
  191. }
  192.  
  193. .one span.name{
  194. font-size:20px;
  195. padding:10px;
  196. display:block;
  197. color:#000;
  198. text-transform:none;
  199. }
  200.  
  201. .tit{
  202. background:#fafafa;
  203. text-align:left;
  204. height:34px;
  205. border-bottom:1px solid #fff;
  206. }
  207.  
  208. .tit h1{
  209. display:inline-block;
  210. padding:0;
  211. margin:0;
  212. line-height:34px;
  213. text-transform:uppercase;
  214. padding-left:10px;
  215. font-size:10px;
  216. font-weight:600;
  217. font-family:'Space Grotesk', sans-serif;
  218. }
  219.  
  220. .nav{
  221. float:right;
  222. }
  223.  
  224. .nav a{
  225. padding:11px 12px;
  226. display:inline-block;
  227. width:10px;
  228. margin:0;
  229. margin-left:-2.5px;
  230. color:black;
  231. background:#fafafa;
  232. border-left:1px solid #fff;
  233. font-family:'Space Grotesk', sans-serif;
  234. }
  235.  
  236. .nav a:hover{
  237. background:white;
  238. color:black;
  239. }
  240.  
  241.  
  242. .th{
  243. font-size:9px;
  244. font-weight:500;
  245. }
  246.  
  247. .th:before{
  248. display:block;
  249. margin-top:2px;
  250. margin-right:5px;
  251. width:15px;
  252. text-align:center;
  253. float:left;
  254. font-family:'honeybee';
  255. }
  256.  
  257. .one span.desc{
  258. padding:15px;
  259. padding-bottom:5px;
  260. padding-left:22px;
  261. text-transform:none;
  262. overflow:scroll;
  263. font-family: 'Lato', sans-serif;
  264. margin-top:1px;
  265. font-size:11px;
  266. line-height:200%;
  267. text-indent:20px;
  268. text-align:justify;
  269. overflow-x:hidden;
  270. }
  271.  
  272. .desc a{
  273. text-decoration:underline;
  274. }
  275.  
  276. ::-webkit-scrollbar{
  277. height:11px;
  278. width:11px;
  279. background:inherit;
  280. }
  281.  
  282. ::-webkit-scrollbar-thumb {background:black;}
  283.  
  284. ::-webkit-scrollbar-track {background:#fafafa;}
  285.  
  286. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid #fafafa;}
  287.  
  288.  
  289. .end{
  290. display:block;
  291. padding:10px;
  292. border-top:1px solid #fff;
  293. text-align:center;
  294. }
  295.  
  296. .end a{
  297. color:#333;
  298. font-weight:400;
  299. text-transform:uppercase;
  300. font-family:'Space Grotesk', sans-serif;
  301. letter-spacing:1px;
  302. display:inline-block;
  303. padding:2px 10px;
  304. }
  305.  
  306. .end a:hover{
  307. color:#aaa;
  308. }
  309.  
  310. </style></head>
  311.  
  312.  
  313.  
  314. <body>
  315.  
  316. <!--- top links, delete if you want ------>
  317. <div id="topbar">
  318. <a href="/">home</a>
  319. <a href="/ask">contact</a>
  320. <a href="https://taezs.tumblr.com">theme</a>
  321. </div>
  322. <!--- top links, delete if you want ------>
  323.  
  324.  
  325.  
  326.  
  327.  
  328. <div id="container"><ul class="members">
  329.  
  330. <!---- begin content --->
  331.  
  332. <!--- header of content --->
  333.  
  334. <div class="tit" style="background:#fafafa">
  335. <!--- change background here if you want--->
  336.  
  337. <h1>biography</h1>
  338.  
  339. <!--- links, delete if you want --->
  340. <span class="nav">
  341. <a href="/" title="home"><span class="th th-home"></span></a>
  342. <a href="/ask" title="contact"><span class="th th-envelope"></span></a>
  343. <a href="https://taezs.tumblr.com" title="theme by taezs"><span class="th th-paperclip"></span></a>
  344. </span>
  345. <!--- links, delete if you want --->
  346.  
  347. </div>
  348.  
  349.  
  350.  
  351.  
  352. <li class="one">
  353.  
  354. <!---- begin ----->
  355.  
  356. <span class="name">Keyleth of Zephrah</span>
  357. <!-- change your name here --->
  358.  
  359. <div class="image" style="background-image:url('https://i.pinimg.com/originals/40/98/75/409875c897aa503133e79ec58b716254.jpg');"></div>
  360. <!--- delete the entire image if you want. change the image by putting the image url over the placeholder here. Will automatically crop it into a square.---->
  361.  
  362.  
  363. <!-- begin descriptors. if you want to change the icons, head to https://honeybee.suiomi.com/, and scroll to the bottom that has the list of the icons. follow the instructions there to change them -->
  364. <span class="th th-moon"><b>aliases:</b>
  365. Kiki, Minxie, Majesty or Highness</span>
  366. <span class="th th-magic-wand"><b>class:</b>
  367. Druid (Circle of the Moon)</span>
  368. <span class="th th-stars"><b>title:</b>
  369. Voice of the Tempest</span>
  370. <span class="th th-flash"><b>race:</b>
  371. Half-elf</span>
  372. <span class="th th-map-1"><b>location:</b>
  373. zephrah, exandria</span>
  374. <span class="th th-constellation"><b>star sign:</b>
  375. virgo</span>
  376.  
  377. <!--- begin description. If you prefer that the about page does not go down further, simply add style="height:300px" (or however tall you want it) after "desc", and it will add a scrollbar. --->
  378.  
  379. <span class="desc">
  380.  
  381.  
  382. A first impression of <a href="/" title="this is a link">Keyleth</a> would leave you with little information on the half-elven druid. You might even think that her social awkwardness, due to her sheltered upbringing, is... kind of sweet. Of course, it would be unwise to underestimate her based on first impressions. Under that unintimidating petite frame is a vicious beast waiting to be unleashed, whose natural powers have made even the fiercest of champions pee their pants.<b> Literally</b>.
  383. <p>
  384. Born to the air tribe of the Ashari people, Keyleth was raised with a deep love of nature and the elemental magics. It is her people's inherent duty to protect the delicate areas in Tal'Dorei, where the four elemental planes begin to bleed with this realm. Since she was a little girl, she had quite a knack for air manipulation and beast shaping abilities; well, if you consider kittens and flying squirrels to be little beasts, which I do. <em>Anyways</em>, it wasn't long before the headmaster of the tribe, her father, Korrin, realized her true prodigious abilities and she was inveterated to succeed him as the next headmaster.
  385.  
  386.  
  387. </span>
  388.  
  389.  
  390. </li>
  391. <!--- end about --->
  392.  
  393. <!--- final links - delete if you want --->
  394.  
  395. <div class="end">
  396. <a href="/">instagram</a> / <a href="/">facebook</a> / <a href="/">sideblog</a>
  397. </div>
  398.  
  399.  
  400.  
  401.  
  402.  
  403.  
  404. <!----- END ---->
  405. </ul>
  406. </div>
  407.  
  408.  
  409.  
  410.  
  411. <!------ LEAVE CREDIT IN TACT ------------>
  412. <div class="taezs"><a href="https://taezs.tumblr.com"><span class="th th-paperclip"></span></a></div>
  413. <!------ LEAVE CREDIT IN TACT ------------>
  414.  
  415.  
  416. </body>
  417. </html>
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!