mountainpost

hand-me-down | character form

Jun 26th, 2022 (edited)
47
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.48 KB | None
  1. [border=0;
  2.  
  3. /*index:
  4. CHARACTER PICTURE 1: sizing of the large, rectangular photo to the left. to edit source image, use variable char1.
  5. TAB 1: contents of the tab which begins with personality
  6. TAB 2: contents of the tab which begins with history
  7. TAB 3: contents of the tab which begins with etc
  8. ALBUM COVER: icon of the album the song comes from. change image source with variable album.
  9. SONG TITLE: tweak the border properties font-size and line-height to make the letters smaller and make the title fit.
  10. ARTIST NAME: tweak the border properties font-size and line-height to make the letters smaller and make the title fit.
  11. SOUNCLOUD: link to the soundcloud audio
  12. CHARACTER PICTURE 2: sizing of the square-ish photo to the right. to edit source image, use variable char2.
  13. BASIC INFO BOX: scrollable box under character picture 2
  14. CHARACTER SIGNATURE: handwriting-ish font with the character name overlayed character picture 1
  15. CHARACTER ROLE: character role, right under the character signature
  16.  
  17. ©mountainpost, with thanks to everyone in the discord, as always*/
  18.  
  19. /*theme colors*/
  20. --c1: #c9cebd;
  21. --c2: #b2bcaa;
  22. --c3: #838e83;
  23. --c4: #6c6061;
  24. --c5: #64403e;
  25.  
  26. /*character pictures*/
  27. --char1: url('http://2.bp.blogspot.com/-cQEVuDnIVww/UtO-YKUQf1I/AAAAAAAAJDU/SNX3BPpfAEs/s1600/001missoni-mens-beauty-autumn-fall-winter-2014-mfw8.jpg');
  28. --char2: url('https://i.postimg.cc/V6Y769wV/original.jpg');
  29.  
  30. /*music album cover*/
  31. --album: url('https://www.musicroom.com/product/image/medium/dam322821_0.jpg');
  32.  
  33. cursor: url(https://i.imgur.com/ZOrzC.png), auto!important;
  34.  
  35. max-width: 700px;
  36. height: 350px;
  37. margin: auto;
  38. display: flex;
  39. flex-direction: column;
  40. flex-wrap: wrap;
  41. flex-grow: 1;
  42. overflow: visible;
  43. padding: 0px;
  44. line-height: 0px;
  45. background-color: var(--c2);
  46. position: relative;
  47. "]
  48.  
  49. [comment]--- CHARACTER PICTURE 1 ---[/comment]
  50. [border=0;
  51. position: absolute;
  52. left: 0px;
  53. top: 0px;
  54. width: 240px;
  55. height: 350px;
  56. padding: 0;
  57. background: var(--char1) no-repeat;
  58. background-size: cover;
  59. overflow: hidden;
  60. z-index: 3;
  61. ]
  62. [border=0; /*IMAGE OVERLAY*/
  63. width: 100%;
  64. height: 100%;
  65. margin: 0;
  66. padding: 0;
  67. background-color: var(--c4);
  68. opacity: 50%;
  69. ]
  70. [/border]
  71. [/border]
  72.  
  73. [comment]--- TABS BEGIN ---[/comment]
  74. [border=0;
  75. height: 330px;
  76. width: 50px;
  77. padding: 0;
  78. line-height: 0;
  79. margin: auto;
  80. border: 1px solid black;
  81. position: relative;
  82. top: -5px;
  83. left: -70px;
  84. /*container border*/
  85. ]
  86. [border=0;
  87. height: 30px;
  88. width: 100%;
  89. padding: 0; /*border a*/
  90. ]
  91. [border=0;
  92. padding: 0;
  93. margin: 0 -10px 0 -30px; /*border b*/
  94. ]
  95.  
  96. [tabs]
  97. [comment]--- TAB 1 BEGINS ---[/comment]
  98. [tab=1]
  99. [border=0;
  100. height: 235px;
  101. width: 249px;
  102. padding: 0;
  103. background: var(--c1);
  104. position: absolute;
  105. top: 100px;
  106. right: -192px; /*tab contents border*/
  107. opacity: 100%;
  108. z-index: 3;
  109. ]
  110.  
  111. [border=0;
  112. height: 100%;
  113. width: 100%;
  114. box-sizing: border-box;
  115. overflow: hidden;
  116. ]
  117. [border=0;
  118. height: 90%;
  119. width: 200%;
  120. position: relative;
  121. left: -6%;
  122. overflow-y: scroll;
  123. ]
  124. [border=0;
  125. height: 200px;
  126. width: 55%;
  127. box-sizing: border-box;
  128. position: relative;
  129. top: -12%;
  130. line-height: 12px;
  131. font-size: 12px;
  132. color: var(--c5);
  133. ][font=Architects Daughter]
  134. [SIZE=4]PERSONALITY:[/SIZE][/font]
  135. [font=Roboto Condensed]
  136. Donec tincidunt nunc eu quam porttitor pellentesque. Vivamus quis tellus nisl. Etiam egestas dolor neque. Vivamus neque neque, eleifend dapibus sagittis vitae, suscipit sed ipsum. Mauris neque massa, iaculis ac metus sed, vestibulum blandit ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec dignissim lectus blandit felis dictum elementum. Fusce convallis cursus turpis, vitae sollicitudin turpis vestibulum a. Donec sapien tellus, viverra eget pharetra eu, dictum id ante. Nam euismod et erat at finibus.
  137.  
  138. Maecenas et ullamcorper lacus, vitae volutpat lectus. Donec laoreet orci sed viverra accumsan. Aenean volutpat gravida lectus. Nullam efficitur est a libero pretium, sed ornare nisl rhoncus. Curabitur non ornare quam. Curabitur eu viverra libero. Curabitur dui lectus, facilisis hendrerit leo eu, hendrerit interdum odio. Mauris purus velit, dapibus quis elit non, sollicitudin fermentum lorem. Suspendisse ipsum tellus, tempus eget mi ac, posuere cursus lectus. Nam tincidunt ultricies interdum. Pellentesque venenatis massa eget hendrerit mattis. Proin imperdiet lorem sem, sit amet molestie purus lacinia at. Maecenas auctor egestas sem eu mollis. Fusce blandit ut eros et blandit. Duis tortor lacus, viverra tincidunt massa quis, interdum posuere justo. Phasellus massa massa, eleifend in volutpat vel, scelerisque at sem.[/font]
  139. [/border]
  140. [/border]
  141. [/border]
  142.  
  143. [/border]
  144. [/tab]
  145. [comment]--- TAB 1 ENDS ---[/comment]
  146.  
  147. [comment]--- TAB 2 BEGINS ---[/comment]
  148. [tab=2]
  149. [border=0;
  150. height: 235px;
  151. width: 249px;
  152. padding: 0;
  153. background: var(--c1);
  154. position: absolute;
  155. top: 100px;
  156. right: -192px; /*tab contents border*/
  157. opacity: 100%;
  158. z-index: 3;
  159. ]
  160. [border=0;
  161. height: 100%;
  162. width: 100%;
  163. box-sizing: border-box;
  164. overflow: hidden;
  165. ]
  166. [border=0;
  167. height: 90%;
  168. width: 200%;
  169. position: relative;
  170. left: -6%;
  171. overflow-y: scroll;
  172. ]
  173. [border=0;
  174. height: 200px;
  175. width: 55%;
  176. box-sizing: border-box;
  177. position: relative;
  178. top: -12%;
  179. line-height: 12px;
  180. font-size: 12px;
  181. color: var(--c5);
  182. ][font=Architects Daughter]
  183. [SIZE=4]HISTORY:[/SIZE][/font]
  184. [font=Roboto Condensed]
  185. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nulla arcu, vulputate nec finibus at, sodales ac libero. Donec commodo, felis a dictum imperdiet, leo dui placerat dolor, ac tincidunt libero eros nec orci. Phasellus sed lorem turpis. Nunc ultricies, dolor nec aliquet tempor, ex lorem viverra purus, a pellentesque ex enim non urna. Nulla vel urna magna. Maecenas luctus tempus orci, ac cursus nulla lacinia ac. Aliquam aliquet elementum sapien, ac faucibus orci pharetra vel.
  186.  
  187. Donec in placerat urna. Pellentesque dapibus quam erat, quis gravida est accumsan condimentum. Ut lacinia posuere nisi, eu consequat eros lacinia quis. Donec dignissim nisl non elit semper, et cursus ligula consectetur. Duis pulvinar tincidunt massa nec mattis. Suspendisse sed finibus nisi. Morbi vitae tellus eget mauris tincidunt scelerisque ut sed est. Aliquam porta molestie rhoncus. Nunc mollis elementum libero. Curabitur vestibulum, dolor quis tempus pretium, eros enim ultrices nisl, vitae lobortis quam tellus non felis. Etiam non aliquet lorem.[/font]
  188. [/border]
  189. [/border]
  190. [/border]
  191. [/border]
  192. [/tab]
  193. [comment]--- TAB 2 ENDS ---[/comment]
  194.  
  195. [comment]--- TAB 3 BEGINS ---[/comment]
  196. [tab=3]
  197. [border=0;
  198. height: 235px;
  199. width: 249px;
  200. padding: 0;
  201. background: var(--c1);
  202. position: absolute;
  203. top: 100px;
  204. right: -192px; /*tab contents border*/
  205. opacity: 100%;
  206. z-index: 3;
  207. ]
  208. [border=0;
  209. height: 100%;
  210. width: 100%;
  211. box-sizing: border-box;
  212. overflow: hidden;
  213. ]
  214. [border=0;
  215. height: 90%;
  216. width: 200%;
  217. position: relative;
  218. left: -6%;
  219. overflow-y: scroll;
  220. ]
  221. [border=0;
  222. height: 200px;
  223. width: 55%;
  224. box-sizing: border-box;
  225. position: relative;
  226. top: -12%;
  227. line-height: 12px;
  228. font-size: 12px;
  229. color: var(--c5);
  230. ][font=Architects Daughter]
  231. [SIZE=4]ETC:[/SIZE][/font]
  232. [font=Roboto Condensed]
  233. Curabitur at scelerisque ipsum. Duis posuere, metus et scelerisque hendrerit, urna nulla iaculis neque, nec auctor purus urna eu sapien. Aliquam sollicitudin, lectus a rutrum pretium, nisi felis ornare elit, a euismod libero purus sit amet sem. Mauris in dolor vel dui sagittis finibus at at tellus. Etiam venenatis eleifend maximus. Vivamus turpis ex, elementum eu pulvinar non, posuere ac nibh. Integer ac fermentum augue. Duis dui ligula, iaculis eget mi ut, elementum mattis nibh.
  234.  
  235. Integer vulputate ex libero, interdum facilisis nisl convallis vitae. Donec id augue eget lorem luctus hendrerit vitae ut massa. Quisque tempor, mauris quis facilisis malesuada, nisl sapien commodo justo, at iaculis purus nibh at nulla. Aliquam nec dolor tempus, dictum lacus et, convallis lectus. Cras eget rutrum arcu. Vestibulum in lorem ac leo dignissim rutrum vitae ultricies lectus. In tellus ipsum, pellentesque at lorem porttitor, semper mattis nunc.
  236.  
  237. Nunc non libero massa. Proin ullamcorper justo ut orci scelerisque, a dignissim nisl molestie. Vivamus dictum justo leo, id sagittis nunc lacinia vel. Pellentesque sed est magna. Nullam mauris tellus, suscipit a ullamcorper id, volutpat dictum massa. Mauris porta in ex a pulvinar. Vestibulum elit ipsum, euismod malesuada nulla sed, laoreet efficitur tortor.
  238.  
  239. Mauris ullamcorper nisi quis justo imperdiet hendrerit. Duis porta erat odio. In hac habitasse platea dictumst. Aenean porttitor neque dolor, vitae tempus neque feugiat et. Mauris tellus sem, aliquam sed finibus eget, tempus at eros. Nunc placerat dolor lacinia sollicitudin fermentum. Sed in interdum velit.[/font]
  240. [/border]
  241. [/border]
  242. [/border]
  243. [/border]
  244. [/tab]
  245. [comment]--- TAB 3 ENDS ---[/comment]
  246. [/tabs]
  247.  
  248. [/border]
  249. [/border]
  250. [/border]
  251. [comment]--- TABS END ---[/comment]
  252.  
  253. [comment]--- TAB COVER ---[/comment]
  254. [border=0;
  255. width: 80px;
  256. height: 200px;
  257. position: absolute;
  258. top: 0px;
  259. left: 405px;
  260. background-color: var(--c2);
  261. padding: 0px;
  262. pointer-events: none;
  263. opacity: 100%;
  264. ]
  265. [/border]
  266.  
  267. [comment]--- BUTTON 1 ---[/comment]
  268. [border=0;
  269. width: 55px;
  270. height: 30px;
  271. position: absolute;
  272. left: 245px;
  273. padding: 0px;
  274. pointer-events: none;
  275. color: #ffffff;
  276. background-color: var(--c2);
  277. z-index: 5;
  278. ]
  279. [border=0; width: 30px; height: 30px; border-radius: 80px; position: relative; left: 10%; top: 10%; background-color: var(--c5); line-height: 30px; text-align: center; padding: 0px;][fa]far fa-user[/fa][/border]
  280. [/border]
  281.  
  282. [comment]--- BUTTON 2 ---[/comment]
  283. [border=0;
  284. width: 55px;
  285. height: 25px;
  286. position: absolute;
  287. left: 245px;
  288. top: 33px;
  289. padding: 0px;
  290. pointer-events: none;
  291. color: #ffffff;
  292. background-color: var(--c2);
  293. z-index: 5;
  294. ]
  295. [border=0; width: 30px; height: 30px; border-radius: 80px; position: relative; left: 10%; top: 10%; background-color: var(--c5); line-height: 30px; text-align: center; padding: 0px;][fa]far fa-book-heart[/fa][/border]
  296. [/border]
  297.  
  298. [comment]--- BUTTON 3 ---[/comment]
  299. [border=0;
  300. width: 55px;
  301. height: 25px;
  302. position: absolute;
  303. left: 245px;
  304. top: 66px;
  305. padding: 0px;
  306. pointer-events: none;
  307. color: #ffffff;
  308. background-color: var(--c2);
  309. z-index: 5;
  310. ]
  311. [border=0; width: 30px; height: 30px; border-radius: 80px; position: relative; left: 10%; top: 10%; background-color: var(--c5); line-height: 30px; text-align: center; padding: 0px;][fa]far fa-list[/fa][/border]
  312. [/border]
  313.  
  314. [comment]--- MUSIC INFO BOX BEGINS ---[/comment]
  315. [border=0;
  316. width: 185px;
  317. height: 65px;
  318. position: absolute;
  319. left: 291px;
  320. top: 10px;
  321. background-color: var(--c3);
  322. overflow: visible;
  323. pointer-events: none;
  324. z-index: 6;
  325. ]
  326. [comment]--- ALBUM COVER ---[/comment]
  327. [border=0;
  328. width: 65px;
  329. height: 65px;
  330. position: relative;
  331. left: 0px;
  332. top: 0px;
  333. padding: 0px;
  334. background: var(--album) no-repeat;
  335. background-size: 65px 65px;
  336. ]
  337. [/border]
  338. [comment]--- SONG TITLE ---[/comment]
  339. [border=0;
  340. width: 100px;
  341. height: 40px;
  342. padding: 0px;
  343. line-height: 20px;
  344. font-size: 20px;
  345. position: relative;
  346. right: -75px;
  347. top: -65px;
  348. text-align: center;
  349. color: #ffffff;
  350. ][font=Roboto Condensed]Ripple[/font]
  351. [/border]
  352. [comment]--- ARTIST NAME ---[/comment]
  353. [border=0;
  354. width: 100px;
  355. height: 40px;
  356. padding: 0px;
  357. line-height: 10px;
  358. font-size: 10px;
  359. position: relative;
  360. right: -75px;
  361. top: -83px;
  362. text-align: center;
  363. color: #ffffff;
  364. ][font=Roboto Condensed]The Grateful Dead[/font]
  365. [/border]
  366. [comment]--- PLAY/PAUSE BUTTON ---[/comment]
  367. [border=0;
  368. width: 100px;
  369. height: 40px;
  370. padding: 0px;
  371. line-height: 20px;
  372. font-size: 20px;
  373. position: relative;
  374. right: -75px;
  375. top: -105px;
  376. text-align: center;
  377. color: #ffffff;
  378. ][fa]far fa-play[/fa] [fa]far fa-pause[/fa]
  379. [/border]
  380. [/border]
  381. [comment]--- MUSIC INFO BOX ENDS ---[/comment]
  382.  
  383. [comment]--- SOUNDCLOUD ---[/comment]
  384. [border=0;
  385. width: 100px;
  386. height: 100px;
  387. position: absolute;
  388. opacity: 30%;
  389. overflow: hidden;
  390. right: 195px;
  391. top: 25px;
  392. ]
  393. [MEDIA=soundcloud]rv7bhw0o7td0/sets/grateful-dead-ripple#playlist_id=115194915;track_id=140579271[/MEDIA]
  394. [/border]
  395.  
  396. [comment]--- COVERING ---[/comment]
  397. [border=0;
  398. width: 300px;
  399. height: 200px;
  400. position: absolute;
  401. background-color: var(--c2);
  402. right: 200px;
  403. top: 0px;
  404. pointer-events: none;
  405. opacity: 100%;
  406. ]
  407. [/border]
  408.  
  409. [comment]--- CHARACTER PICTURE 2 ---[/comment]
  410. [border=0;
  411. width: 185px;
  412. height: 190px;
  413. position: absolute;
  414. right: 10px;
  415. top: 10px;
  416. background: var(--char2) no-repeat;
  417. background-size: cover;
  418. padding: 0px;
  419. ]
  420. [border=0; /*IMAGE OVERLAY*/
  421. width: 100%;
  422. height: 100%;
  423. margin: 0;
  424. padding: 0;
  425. background-color: var(--c4);
  426. opacity: 50%;
  427. ]
  428. [/border]
  429. [/border]
  430.  
  431. [comment]--- BASIC INFO BOX BEGINS ---[/comment]
  432. [border=0;
  433. width: 165px;
  434. height: 110px;
  435. position: absolute;
  436. right: 10px;
  437. top: 210px;
  438. background-color: var(--c4);
  439. ]
  440. [border=0;
  441. height: 100%;
  442. width: 100%;
  443. box-sizing: border-box;
  444. overflow: hidden;
  445. ]
  446. [border=0;
  447. height: 90%;
  448. width: 200%;
  449. position: relative;
  450. left: -15%;
  451. overflow-y: scroll;
  452. ]
  453. [border=0;
  454. height: 100px;
  455. width: 65%;
  456. box-sizing: border-box;
  457. position: relative;
  458. top: -18%;
  459. line-height: 12px;
  460. font-size: 12px;
  461. color: #ffffff;
  462. ][font=Architects Daughter][SIZE=4]NAME:[/SIZE][/font] [font=Roboto Condensed]Character Name[/font]
  463.  
  464. [font=Architects Daughter][SIZE=4]AGE:[/SIZE][/font] [font=Roboto Condensed]Character Age[/font]
  465.  
  466. [font=Architects Daughter][SIZE=4]GENDER:[/SIZE][/font] [font=Roboto Condensed]Character Gender[/font]
  467.  
  468. [font=Architects Daughter][SIZE=4]HOMETOWN:[/SIZE][/font] [font=Roboto Condensed]this scrolls[/font]
  469.  
  470. [font=Architects Daughter][SIZE=4]BIRTHDAY:[/SIZE][/font] [font=Roboto Condensed]04/20/1969[/font]
  471. [/border]
  472. [/border]
  473. [/border]
  474. [/border]
  475. [comment]--- BASIC INFO BOX ENDS ---[/comment]
  476.  
  477. [comment]--- CHARACTER SIGNATURE ---[/comment]
  478. [border=0;
  479. width: 240px;
  480. height: 40px;
  481. padding: 0px;
  482. position: absolute;
  483. left: 0px;
  484. top: 270px;
  485. z-index: 3;
  486. line-height: 30px;
  487. font-size: 30px;
  488. text-align: center;
  489. color: #ffffff;
  490. ][font=Architects Daughter]Character Name[/font]
  491. [/border]
  492.  
  493. [comment]--- CHARACTER ROLE ---[/comment]
  494. [border=0;
  495. width: 240px;
  496. height: 40px;
  497. padding: 0px;
  498. position: absolute;
  499. left: 0px;
  500. top: 300px;
  501. z-index: 3;
  502. line-height: 20px;
  503. font-size: 20px;
  504. text-align: center;
  505. color: #ffffff;
  506. ][font=Roboto Condensed]character role[/font]
  507. [/border]
  508. [/border][comment]--- SIGNATURE PLS DON'T REMOVE ---[/comment][border=0;
  509. max-width: 300px;
  510. max-height: 30px;
  511. margin: auto;
  512. display: flex;
  513. flex-direction: column;
  514. flex-wrap: wrap;
  515. flex-grow: 1;
  516. line-height: 10px;
  517. font-size: 10px;
  518. text-align: center;
  519. ]coded by mountainpost
  520. [/border]
RAW Paste Data Copied