API tools faq
paste
Advertisement
mochiroll

Icedrop.Code

mochiroll
Dec 13th, 2024 (edited)
110
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 76.16 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [div=
  3. width: 100%;
  4. position: relative;
  5. overflow: hidden;
  6. font-size: initial;
  7. line-height: initial;]
  8. [comment]
  9. Designed and coded by [USER=20950]@Nano[/USER].
  10.  
  11. Please do not remove the credits or claim the code as your own work.
  12.  
  13. If you found this code outside of my public workshop, please don't use it.
  14. I'd greatly appreciate it if you used the version of the code in that thread.
  15.  
  16. [font=Poppins]sans-serif[/font]
  17. [font=Hind]serif[/font]
  18. [/comment]
  19. [div=
  20. /* <--------------------------------- general accents ---------------------------------> */
  21.  
  22. /* colors */
  23. --Color01: #f98e8d; /* this is the red in the original */
  24. --Color02: #bde6d6; /* this is the green in the original */
  25. --bgColor: #f7e6e7;
  26. --textColor: #777;
  27. --White: #fefefe;
  28. --Transparent: rgba(255, 255, 255, 0.3); /* must be rbga */
  29. --TransparentBorder: rgba(255, 255, 255, 0.4); /* rgba */
  30. --Blur: 4px;
  31.  
  32. /* fonts */
  33. --HeaderFont: 'Poppins', san-serif;
  34. --BodyFont: 'Hind', serif;
  35.  
  36. --LinkSize: .9em; /* font size of link text */
  37. --HeaderSize: 1.2em; /* font size of rp title */
  38. --SubheaderSize: .9em; /* font size of the section headers */
  39. --RoleSize: 3em; /* font size of the titles of each role within role images */
  40. --BodySize: .9em; /* font size of body text */
  41.  
  42. --BodyLineHeight: 140%;
  43.  
  44. /* <--------------------------------- images ---------------------------------> */
  45.  
  46. /* character */
  47. --mainIMG: url(https://i.imgur.com/7lbg1Cg.jpeg) left center/cover no-repeat;
  48. --BasicIcon: url(https://i.imgur.com/Oa6mZ5h.jpeg) center/cover no-repeat;
  49. --Extra01: url(https://i.imgur.com/UlaLVWB.jpeg) center/cover no-repeat;
  50. --Extra02: url(https://i.imgur.com/y2SB40u.jpeg) center/cover no-repeat;
  51.  
  52. /* roles */
  53. --RS01: url(https://i.imgur.com/KI9yjLX.jpeg) center/cover no-repeat;
  54. --RS02: url(https://i.imgur.com/KI9yjLX.jpeg) center/cover no-repeat;
  55. --RS03: url(https://i.imgur.com/KI9yjLX.jpeg) center/cover no-repeat;
  56.  
  57. /* <--------------------------------- shell (don't touch) ---------------------------------> */
  58.  
  59. padding: 100px 0 140px;
  60. width: 100%;
  61. min-width: 300px;
  62. background: var(--bgColor);]
  63. [div=/* code wrap */
  64. margin: 0 auto;
  65. max-width: 800px;
  66. width: 100%;
  67. position: relative;]
  68. [comment] --- start of role title --- [/comment]
  69. [div=/* wrapper */
  70. margin-left: 25px;
  71. width: calc(100% - 50px);
  72. overflow: hidden;]
  73. [div=/* song title */
  74. padding-left: 2px;
  75. width: fit-content;
  76. font-family: var(--HeaderFont);
  77. font-size: 100px;
  78. line-height: 100%;
  79. color: var(--bgColor);
  80. font-weight: 700;
  81. text-align: right;
  82. text-transform: uppercase;
  83. white-space: nowrap;
  84. text-shadow: -1px -1px 0 var(--White), 1px -1px 0 var(--White), -1px 1px 0 var(--White), 1px 1px 0 var(--White);
  85. position: relative;
  86. right: 5px;
  87. z-index: 2;]
  88. Rolename
  89. [/div]
  90. [/div]
  91. [comment] --- end of role title --- [/comment]
  92. [comment] --- start of main image box --- [/comment]
  93. [div=/* main screen */
  94. box-sizing: border-box;
  95. border-radius: 30px;
  96. border: 16px solid var(--Color01);
  97. width: 100%;
  98. height: 400px;
  99. background: var(--mainIMG);
  100. position: relative;
  101. top: -30px;
  102. z-index: 2;
  103. pointer-events: none;]
  104. [/div]
  105. [comment] --- end of main image box --- [/comment]
  106. [comment] --- start of tab covers --- [/comment]
  107. [div=/* tab cover base */
  108. box-sizing: border-box;
  109. border-radius: 50px;
  110. border: 5px solid var(--Color02);
  111. padding: 15px 0;
  112. width: 50px;
  113. background: var(--White);
  114. font-family: var(--BodyFont);
  115. font-size: 18px;
  116. line-height: 100%;
  117. color: var(--Color02);
  118. text-align: center;
  119. position: absolute;
  120. top: 115px;
  121. left: -17px;
  122. z-index: 3;
  123. pointer-events: none;]
  124. [div=/* tab cover icon 01 */
  125. margin-top: 0;]
  126. [fa]fas fa-home[/fa]
  127. [/div]
  128. [div=/* tab cover icon 02 */
  129. margin-top: 15px;]
  130. [fa]fas fa-pen-nib[/fa]
  131. [/div]
  132. [div=/* tab cover icon 03 */
  133. margin-top: 15px;]
  134. [fa]fas fa-heart[/fa]
  135. [/div]
  136. [div=/* tab cover icon 04 */
  137. margin-top: 15px;]
  138. [fa]fas fa-star[/fa]
  139. [/div]
  140. [/div]
  141. [div=/* junk */
  142. width: 200%;
  143. height: 200px;
  144. position: absolute;
  145. top: 100px;
  146. left: 25px;
  147. z-index: 1;]
  148. [/div]
  149. [div=/* junk */
  150. background: var(--bgColor);
  151. position: absolute;
  152. pointer-events: none;
  153. z-index: 1;
  154. inset: -100%;]
  155. [/div]
  156. [comment] --- end of tab covers --- [/comment]
  157. [comment] --- start of tabs --- [/comment]
  158. [div=/* tab cut off */
  159. width: 100%;
  160. height: 600px;
  161. position: absolute;
  162. top: -30px;
  163. left: 0;]
  164. [div=/* tab wrapper */
  165. width: 100%;
  166. line-height: 30px;
  167. position: relative;
  168. top: 160px;
  169. left: -20px;]
  170. [tabs]
  171.  
  172.  
  173.  
  174.  
  175.  
  176. [tab=0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101]
  177. [div=/* scrollbox - outer */
  178. width: calc(100% - 60px);
  179. height: 600px;
  180. overflow: hidden;
  181. position: absolute;
  182. top: -160px;
  183. left: 50px;
  184. z-index: 3;
  185. line-height: initial;]
  186. [div=/* scrollbox - inner */
  187. padding-right: 50px;
  188. width: 100%;
  189. height: 600px;
  190. overflow-y: scroll;
  191. overflow-x: hidden;]
  192. [comment] --- start of basic information section --- [/comment]
  193. [div=/* box wrapper */
  194. display: flex;
  195. justify-content: right;
  196. position: relative;]
  197. [div=/* box wrapper */
  198. width: 100%;
  199. max-width: 450px;
  200. position: relative;]
  201. [div=/* transparent border */
  202. box-sizing: border-box;
  203. padding: 10px;
  204. border-radius: 20px;
  205. border: 1px solid var(--TransparentBorder);
  206. -webkit-backdrop-filter: blur(var(--Blur));
  207. backdrop-filter: blur(var(--Blur));
  208. background: var(--Transparent);
  209. position: relative;]
  210. [div=/* inner box */
  211. box-sizing: border-box;
  212. padding: 15px;
  213. border-radius: 17px;
  214. width: 100%;
  215. background: var(--White);]
  216. [div=/* flexbox */
  217. display: flex;
  218. justify-content: center;
  219. flex-flow: row wrap;
  220. justify-content: center;
  221. width: calc(100% + 10px);
  222. margin-left: -10px;]
  223. [comment] --- start of profile icon --- [/comment]
  224. [div=/* flex LEFT */
  225. margin-left: 10px;
  226. flex: 1;
  227. width: 100%;
  228. min-width: 125px;]
  229. [div=/* profile icon */
  230. border-radius: 15px;
  231. padding-top: 100%;
  232. width: 100%;
  233. background: var(--BasicIcon);]
  234. [/div]
  235. [/div]
  236. [comment] --- end of profile icon --- [/comment]
  237. [comment] --- start of basic information --- [/comment]
  238. [div=/* flex RIGHT */
  239. margin-left: 10px;
  240. flex: 2;
  241. width: 100%;
  242. min-width: 200px;
  243. font-family: var(--BodyFont);
  244. font-size: var(--BodySize);
  245. color: var(--textColor);
  246. line-height: 100%;]
  247. [comment] --- start of question/answer --- [/comment]
  248. [div=/* Q/A wrapper */
  249. margin-top: 5px;
  250. width: 100%;]
  251. [div=/* Q */
  252. display: inline-block;
  253. box-sizing: border-box;
  254. border-radius: 5px;
  255. padding: 4px 5px 3px;
  256. background: var(--Color01);
  257. color: var(--White);
  258. text-transform: lowercase;]
  259. Name
  260. [/div]
  261. [div=/* Q */
  262. display: inline-block;
  263. box-sizing: border-box;
  264. padding: 4px 5px 3px;
  265. text-transform: lowercase;]
  266. First Surname
  267. [/div]
  268. [/div]
  269. [comment] --- end of question/answer --- [/comment]
  270. [comment] --- start of question/answer --- [/comment]
  271. [div=/* Q/A wrapper */
  272. margin-top: 5px;
  273. width: 100%;]
  274. [div=/* Q */
  275. display: inline-block;
  276. box-sizing: border-box;
  277. border-radius: 5px;
  278. padding: 4px 5px 3px;
  279. background: var(--Color01);
  280. color: var(--White);
  281. text-transform: lowercase;]
  282. Role
  283. [/div]
  284. [div=/* Q */
  285. display: inline-block;
  286. box-sizing: border-box;
  287. padding: 4px 5px 3px;
  288. text-transform: lowercase;]
  289. Role Title
  290. [/div]
  291. [/div]
  292. [comment] --- end of question/answer --- [/comment]
  293. [comment] --- start of question/answer --- [/comment]
  294. [div=/* Q/A wrapper */
  295. margin-top: 5px;
  296. width: 100%;]
  297. [div=/* Q */
  298. display: inline-block;
  299. box-sizing: border-box;
  300. border-radius: 5px;
  301. padding: 4px 5px 3px;
  302. background: var(--Color01);
  303. color: var(--White);
  304. text-transform: lowercase;]
  305. Gender
  306. [/div]
  307. [div=/* Q */
  308. display: inline-block;
  309. box-sizing: border-box;
  310. padding: 4px 5px 3px;
  311. text-transform: lowercase;]
  312. Gender
  313. [/div]
  314. [/div]
  315. [comment] --- end of question/answer --- [/comment]
  316. [comment] --- start of question/answer --- [/comment]
  317. [div=/* Q/A wrapper */
  318. margin-top: 5px;
  319. width: 100%;]
  320. [div=/* Q */
  321. display: inline-block;
  322. box-sizing: border-box;
  323. border-radius: 5px;
  324. padding: 4px 5px 3px;
  325. background: var(--Color01);
  326. color: var(--White);
  327. text-transform: lowercase;]
  328. Age
  329. [/div]
  330. [div=/* Q */
  331. display: inline-block;
  332. box-sizing: border-box;
  333. padding: 4px 5px 3px;
  334. text-transform: lowercase;]
  335. ##
  336. [/div]
  337. [/div]
  338. [comment] --- end of question/answer --- [/comment]
  339. [comment] --- start of question/answer --- [/comment]
  340. [div=/* Q/A wrapper */
  341. margin-top: 5px;
  342. width: 100%;]
  343. [div=/* Q */
  344. display: inline-block;
  345. box-sizing: border-box;
  346. border-radius: 5px;
  347. padding: 4px 5px 3px;
  348. background: var(--Color01);
  349. color: var(--White);
  350. text-transform: lowercase;]
  351. Birthday
  352. [/div]
  353. [div=/* Q */
  354. display: inline-block;
  355. box-sizing: border-box;
  356. padding: 4px 5px 3px;
  357. text-transform: lowercase;]
  358. Month Day
  359. [/div]
  360. [/div]
  361. [comment] --- end of question/answer --- [/comment]
  362. [comment] --- start of question/answer --- [/comment]
  363. [div=/* Q/A wrapper */
  364. margin-top: 5px;
  365. width: 100%;]
  366. [div=/* Q */
  367. display: inline-block;
  368. box-sizing: border-box;
  369. border-radius: 5px;
  370. padding: 4px 5px 3px;
  371. background: var(--Color01);
  372. color: var(--White);
  373. text-transform: lowercase;]
  374. Faceclaim
  375. [/div]
  376. [div=/* Q */
  377. display: inline-block;
  378. box-sizing: border-box;
  379. padding: 4px 5px 3px;
  380. text-transform: lowercase;]
  381. Name (Source)
  382. [/div]
  383. [/div]
  384. [comment] --- end of question/answer --- [/comment]
  385. [/div]
  386. [comment] --- end of basic information --- [/comment]
  387. [/div]
  388. [/div]
  389. [/div]
  390. [/div]
  391. [/div]
  392. [comment] --- end of basic information section --- [/comment]
  393. [comment] --- start of appearance tags --- [/comment]
  394. [div=/* wrapper */
  395. display: flex;
  396. justify-content: right;
  397. position: relative;]
  398. [div=/* wrapper */
  399. margin-top: 15px;
  400. margin-right: 15px;
  401. width: calc(100% - 15px);
  402. max-width: 400px;
  403. font-family: var(--BodyFont);
  404. font-size: var(--BodySize);
  405. line-height: 100%;
  406. font-weight: 700;
  407. color: var(--White);
  408. text-transform: lowercase;
  409. position: relative;]
  410. [comment] --- start of appearance tag --- [/comment]
  411. [div=/* appearance tag */
  412. position: relative;]
  413. [div=/* speech bubble main */
  414. box-sizing: border-box;
  415. border: 2px solid var(--White);
  416. border-radius: 5px;
  417. padding: 6px 12px;
  418. width: fit-content;
  419. background: var(--Color02);
  420. font-size: var(--BodySize);
  421. position: relative;
  422. float: right;]
  423. #hair color
  424. [/div]
  425. [div=/* speech bubble corner */
  426. margin-top: -2px;
  427. width: 15px;
  428. height: 12px;
  429. background: var(--White);
  430. clip-path: polygon(0 0, 0% 100%, 100% 0);
  431. position: relative;
  432. right: 10px;
  433. float: right;
  434. clear: right;]
  435. [div=/* speech bubble corner inner */
  436. width: 11px;
  437. height: 8px;
  438. background: var(--Color02);
  439. clip-path: polygon(0 0, 0% 100%, 100% 0);
  440. position: relative;
  441. left: 2px;]
  442. [/div]
  443. [/div]
  444. [/div]
  445. [comment] --- end of appearance tag --- [/comment]
  446. [div=/* divider */
  447. height: 7px;
  448. clear: right;]
  449. [/div]
  450. [comment] --- start of appearance tag --- [/comment]
  451. [div=/* appearance tag */
  452. position: relative;
  453. clear: right;]
  454. [div=/* speech bubble main */
  455. box-sizing: border-box;
  456. border: 2px solid var(--White);
  457. border-radius: 5px;
  458. padding: 6px 12px;
  459. width: fit-content;
  460. background: var(--Color02);
  461. font-size: var(--BodySize);
  462. position: relative;
  463. float: right;]
  464. #eye color
  465. [/div]
  466. [div=/* speech bubble corner */
  467. margin-top: -2px;
  468. width: 15px;
  469. height: 12px;
  470. background: var(--White);
  471. clip-path: polygon(0 0, 0% 100%, 100% 0);
  472. position: relative;
  473. right: 10px;
  474. float: right;
  475. clear: right;]
  476. [div=/* speech bubble corner inner */
  477. width: 11px;
  478. height: 8px;
  479. background: var(--Color02);
  480. clip-path: polygon(0 0, 0% 100%, 100% 0);
  481. position: relative;
  482. left: 2px;]
  483. [/div]
  484. [/div]
  485. [/div]
  486. [comment] --- end of appearance tag --- [/comment]
  487. [div=/* divider */
  488. height: 7px;
  489. clear: right;]
  490. [/div]
  491. [comment] --- start of appearance tag --- [/comment]
  492. [div=/* appearance tag */
  493. position: relative;
  494. clear: right;]
  495. [div=/* speech bubble main */
  496. box-sizing: border-box;
  497. border: 2px solid var(--White);
  498. border-radius: 5px;
  499. padding: 6px 12px;
  500. width: fit-content;
  501. background: var(--Color02);
  502. font-size: var(--BodySize);
  503. position: relative;
  504. float: right;]
  505. #height
  506. [/div]
  507. [div=/* speech bubble corner */
  508. margin-top: -2px;
  509. width: 15px;
  510. height: 12px;
  511. background: var(--White);
  512. clip-path: polygon(0 0, 0% 100%, 100% 0);
  513. position: relative;
  514. right: 10px;
  515. float: right;
  516. clear: right;]
  517. [div=/* speech bubble corner inner */
  518. width: 11px;
  519. height: 8px;
  520. background: var(--Color02);
  521. clip-path: polygon(0 0, 0% 100%, 100% 0);
  522. position: relative;
  523. left: 2px;]
  524. [/div]
  525. [/div]
  526. [/div]
  527. [comment] --- end of appearance tag --- [/comment]
  528. [/div]
  529. [/div]
  530. [comment] --- end of appearance tags --- [/comment]
  531. [comment] --- start of personality section --- [/comment]
  532. [div=/* box wrapper */
  533. margin-top: 50px;
  534. width: 100%;
  535. max-width: 550px;
  536. position: relative;]
  537. [div=/* transparent border */
  538. box-sizing: border-box;
  539. padding: 10px;
  540. border-radius: 20px;
  541. border: 1px solid var(--TransparentBorder);
  542. -webkit-backdrop-filter: blur(var(--Blur));
  543. backdrop-filter: blur(var(--Blur));
  544. background: var(--Transparent);
  545. position: relative;]
  546. [comment] --- start of section header speech bubble --- [/comment]
  547. [div=/* nameplate */
  548. position: absolute;
  549. top: -5px;
  550. right: 30px;
  551. font-size: var(--BodySize);]
  552. [div=/* speech bubble main */
  553. box-sizing: border-box;
  554. border: 2px solid var(--White);
  555. border-radius: 5px;
  556. padding: 6px 12px;
  557. width: fit-content;
  558. background: var(--Color02);
  559. font-family: var(--HeaderFont);
  560. font-size: var(--BodySize);
  561. line-height: 100%;
  562. color: var(--White);
  563. text-align: center;
  564. text-transform: capitalize;
  565. position: relative;
  566. float: right;]
  567. Personality
  568. [/div]
  569. [div=/* speech bubble corner */
  570. margin-top: -2px;
  571. width: 12px;
  572. height: 9px;
  573. background: var(--White);
  574. clip-path: polygon(0 0, 0% 100%, 100% 0);
  575. position: relative;
  576. right: 7px;
  577. float: right;
  578. clear: right;]
  579. [div=/* speech bubble corner inner */
  580. width: 8px;
  581. height: 5px;
  582. background: var(--Color02);
  583. clip-path: polygon(0 0, 0% 100%, 100% 0);
  584. position: relative;
  585. left: 2px;]
  586. [/div]
  587. [/div]
  588. [/div]
  589. [comment] --- end of section header speech bubble --- [/comment]
  590. [comment] --- start of content text --- [/comment]
  591. [div=/* text box */
  592. box-sizing: border-box;
  593. padding: 20px;
  594. border-radius: 17px;
  595. width: 100%;
  596. background: var(--White);
  597. font-family: var(--BodyFont);
  598. font-size: var(--BodySize);
  599. line-height: var(--BodyLineHeight);
  600. color: var(--textColor);
  601. text-align: justify;]
  602. [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, ex hendrerit blandit consectetur, nulla sapien rhoncus metus, in dictum lorem tellus at nulla. Vivamus id gravida mauris. Integer et interdum purus, ut pretium ligula. Nulla facilisi. Aenean vel dolor dolor. Aenean et dolor vel lacus eleifend convallis eu sed nulla. Curabitur volutpat risus sit amet nisi auctor sagittis ac vitae dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et odio id augue interdum suscipit id eu nibh. Aenean id viverra augue. Curabitur tortor lacus, egestas at orci at, faucibus fringilla orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin in accumsan dolor, mattis egestas quam. Vestibulum non nunc et dui ultricies blandit.
  603.  
  604. Nunc magna enim, fringilla et bibendum ut, congue vel mauris. Aliquam dapibus nulla nec ligula volutpat, in convallis augue blandit. In consequat, nisi quis elementum dignissim, mi dui tempus justo, a molestie ex sem vitae mauris. Nulla facilisi. Suspendisse suscipit blandit quam, id pretium lectus. Praesent id ipsum eget neque varius rhoncus. Proin quis odio turpis. Duis sodales sed est eget efficitur. Pellentesque eleifend nibh nec ullamcorper sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis quis blandit mauris. Nulla facilisi. Maecenas at libero ipsum.[/div]
  605. [/div]
  606. [comment] --- end of content text --- [/comment]
  607. [/div]
  608. [/div]
  609. [comment] --- end of personality section --- [/comment]
  610. [/div]
  611. [/div]
  612. [comment] --- start of tab cover --- [/comment]
  613. [div=/* wrapper */
  614. background: var(--White);
  615. font-family: var(--BodyFont);
  616. font-size: 18px;
  617. line-height: 100%;
  618. color: var(--Color01);
  619. position: absolute;
  620. top: 5px;
  621. left: 18px;
  622. z-index: 3;]
  623. [fa]fas fa-home[/fa]
  624. [/div]
  625. [comment] --- end of tab cover --- [/comment]
  626. [/tab]
  627.  
  628.  
  629.  
  630.  
  631.  
  632. [tab=0202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202]
  633. [div=/* scrollbox - outer */
  634. width: calc(100% - 60px);
  635. height: 600px;
  636. overflow: hidden;
  637. position: absolute;
  638. top: -160px;
  639. left: 50px;
  640. z-index: 3;]
  641. [div=/* scrollbox - inner */
  642. padding-right: 50px;
  643. width: 100%;
  644. height: 600px;
  645. overflow-y: scroll;
  646. overflow-x: hidden;]
  647. [comment] --- start of quote section --- [/comment]
  648. [div=/* wrapper */
  649. margin-top: 55px;
  650. max-width: 500px;
  651. width: calc(100% - 8px);
  652. position: relative;]
  653. [div=/* speech bubble main */
  654. box-sizing: border-box;
  655. border-radius: 15px;
  656. border: 1px solid var(--Color02);
  657. padding: 5px 10px;
  658. width: fit-content;
  659. background: var(--White);
  660. font-family: var(--BodyFont);
  661. font-size: var(--BodySize);
  662. line-height: var(--BodyLineHeight);
  663. color: var(--Color01);
  664. font-weight: 700;
  665. text-align: justify;
  666. filter: drop-shadow(8px 8px 0 var(--Color02));]
  667. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  668. [/div]
  669. [div=/* circle 1 */
  670. margin-top: 13px;
  671. margin-left: 25px;
  672. box-sizing: border-box;
  673. border-radius: 50%;
  674. border: 1px solid var(--Color02);
  675. width: 18px;
  676. height: 18px;
  677. background: var(--White);
  678. filter: drop-shadow(4px 4px 0 var(--Color02));]
  679. [/div]
  680. [div=/* circle 2 */
  681. margin-top: 13px;
  682. margin-left: 35px;
  683. box-sizing: border-box;
  684. border-radius: 50%;
  685. border: 1px solid var(--Color02);
  686. width: 12px;
  687. height: 12px;
  688. background: var(--White);
  689. filter: drop-shadow(4px 4px 0 var(--Color02));]
  690. [/div]
  691. [div=/* circle 3 */
  692. margin-top: 13px;
  693. margin-left: 55px;
  694. box-sizing: border-box;
  695. border-radius: 50%;
  696. border: 1px solid var(--Color02);
  697. width: 6px;
  698. height: 6px;
  699. background: var(--White);
  700. filter: drop-shadow(4px 4px 0 var(--Color02));]
  701. [/div]
  702. [/div]
  703. [comment] --- end of quote section --- [/comment]
  704. [comment] --- start of backstory section --- [/comment]
  705. [div=/* stick to right */
  706. margin-top: 150px;
  707. display: flex;
  708. justify-content: right;]
  709. [div=/* box wrapper */
  710. width: 100%;
  711. max-width: 600px;
  712. position: relative;]
  713. [div=/* transparent border */
  714. box-sizing: border-box;
  715. padding: 10px;
  716. border-radius: 20px;
  717. border: 1px solid var(--TransparentBorder);
  718. -webkit-backdrop-filter: blur(var(--Blur));
  719. backdrop-filter: blur(var(--Blur));
  720. background: var(--Transparent);
  721. position: relative;]
  722. [comment] --- start of section header speech bubble --- [/comment]
  723. [div=/* nameplate */
  724. position: absolute;
  725. top: -5px;
  726. right: 30px;
  727. font-size: var(--BodySize);]
  728. [div=/* speech bubble main */
  729. box-sizing: border-box;
  730. border: 2px solid var(--White);
  731. border-radius: 5px;
  732. padding: 6px 12px;
  733. width: fit-content;
  734. background: var(--Color02);
  735. font-family: var(--HeaderFont);
  736. font-size: var(--BodySize);
  737. line-height: 100%;
  738. color: var(--White);
  739. text-align: center;
  740. text-transform: capitalize;
  741. position: relative;
  742. float: right;]
  743. Backstory
  744. [/div]
  745. [div=/* speech bubble corner */
  746. margin-top: -2px;
  747. width: 12px;
  748. height: 9px;
  749. background: var(--White);
  750. clip-path: polygon(0 0, 0% 100%, 100% 0);
  751. position: relative;
  752. right: 7px;
  753. float: right;
  754. clear: right;]
  755. [div=/* speech bubble corner inner */
  756. width: 8px;
  757. height: 5px;
  758. background: var(--Color02);
  759. clip-path: polygon(0 0, 0% 100%, 100% 0);
  760. position: relative;
  761. left: 2px;]
  762. [/div]
  763. [/div]
  764. [/div]
  765. [comment] --- end of section header speech bubble --- [/comment]
  766. [comment] --- start of content text --- [/comment]
  767. [div=/* text box */
  768. box-sizing: border-box;
  769. padding: 20px;
  770. border-radius: 17px;
  771. width: 100%;
  772. background: var(--White);
  773. font-family: var(--BodyFont);
  774. font-size: var(--BodySize);
  775. line-height: var(--BodyLineHeight);
  776. color: var(--textColor);
  777. text-align: justify;]
  778. [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, ex hendrerit blandit consectetur, nulla sapien rhoncus metus, in dictum lorem tellus at nulla. Vivamus id gravida mauris. Integer et interdum purus, ut pretium ligula. Nulla facilisi. Aenean vel dolor dolor. Aenean et dolor vel lacus eleifend convallis eu sed nulla. Curabitur volutpat risus sit amet nisi auctor sagittis ac vitae dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et odio id augue interdum suscipit id eu nibh. Aenean id viverra augue. Curabitur tortor lacus, egestas at orci at, faucibus fringilla orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin in accumsan dolor, mattis egestas quam. Vestibulum non nunc et dui ultricies blandit.
  779.  
  780. Nunc magna enim, fringilla et bibendum ut, congue vel mauris. Aliquam dapibus nulla nec ligula volutpat, in convallis augue blandit. In consequat, nisi quis elementum dignissim, mi dui tempus justo, a molestie ex sem vitae mauris. Nulla facilisi. Suspendisse suscipit blandit quam, id pretium lectus. Praesent id ipsum eget neque varius rhoncus. Proin quis odio turpis. Duis sodales sed est eget efficitur. Pellentesque eleifend nibh nec ullamcorper sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis quis blandit mauris. Nulla facilisi. Maecenas at libero ipsum.[/div]
  781. [/div]
  782. [comment] --- end of content text --- [/comment]
  783. [/div]
  784. [/div]
  785. [/div]
  786. [comment] --- end of backstory section --- [/comment]
  787. [/div]
  788. [/div]
  789. [comment] --- start of tab cover --- [/comment]
  790. [div=/* wrapper */
  791. background: var(--White);
  792. font-family: var(--BodyFont);
  793. font-size: 18px;
  794. line-height: 100%;
  795. color: var(--Color01);
  796. position: absolute;
  797. top: 40px;
  798. left: 19px;
  799. z-index: 3;]
  800. [fa]fas fa-pen-nib[/fa]
  801. [/div]
  802. [comment] --- end of tab cover --- [/comment]
  803. [/tab]
  804.  
  805.  
  806.  
  807.  
  808.  
  809. [tab=0303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303].
  810. [div=/* scrollbox - outer */
  811. width: calc(100% - 60px);
  812. height: 600px;
  813. overflow: hidden;
  814. position: absolute;
  815. top: -160px;
  816. left: 50px;
  817. z-index: 3;]
  818. [div=/* scrollbox - inner */
  819. padding-right: 50px;
  820. width: 100%;
  821. height: 600px;
  822. overflow-y: scroll;
  823. overflow-x: hidden;]
  824. [comment] --- start of relationships section --- [/comment]
  825. [div=/* wrapper */
  826. display: flex;
  827. flex-direction: column;
  828. align-items: end;
  829. width: 100%;]
  830. [comment] --- start of relationship box --- [/comment]
  831. [div=/* wrapper */
  832. display: flex;
  833. flex-flow: row-reverse wrap;
  834. justify-content: center;
  835. margin-top: 25px;
  836. max-width: 600px;
  837. width: 100%;
  838. position: relative;]
  839. [div=/* flex RIGHT */
  840. display: flex;
  841. align-items: center;
  842. margin-left: -20px;
  843. flex: 2;
  844. width: 100%;
  845. min-width: 150px;
  846. position: relative;
  847. z-index: 5;]
  848. [div=/* proficon */
  849. box-sizing: border-box;
  850. border-radius: 20px;
  851. border: 10px solid var(--Color02);
  852. width: 100%;
  853. padding-top: calc(100% - 20px);
  854. background: var(--RS01);
  855. position: relative;]
  856. [comment] --- start of rs character name speech bubble --- [/comment]
  857. [div=/* nameplate */
  858. position: absolute;
  859. top: -20px;
  860. right: 3px;
  861. font-size: var(--BodySize);]
  862. [div=/* speech bubble main */
  863. box-sizing: border-box;
  864. border: 2px solid var(--White);
  865. border-radius: 5px;
  866. padding: 5px 10px;
  867. width: fit-content;
  868. background: var(--Color01);
  869. font-family: var(--HeaderFont);
  870. font-size: var(--BodySize);
  871. line-height: 100%;
  872. color: var(--White);
  873. text-align: center;
  874. text-transform: capitalize;
  875. position: relative;
  876. float: right;]
  877. Name
  878. [/div]
  879. [div=/* speech bubble corner */
  880. margin-top: -2px;
  881. width: 12px;
  882. height: 9px;
  883. background: var(--White);
  884. clip-path: polygon(0 0, 0% 100%, 100% 0);
  885. position: relative;
  886. right: 7px;
  887. float: right;
  888. clear: right;]
  889. [div=/* speech bubble corner inner */
  890. width: 8px;
  891. height: 5px;
  892. background: var(--Color01);
  893. clip-path: polygon(0 0, 0% 100%, 100% 0);
  894. position: relative;
  895. left: 2px;]
  896. [/div]
  897. [/div]
  898. [/div]
  899. [comment] --- end of rs character name speech bubble --- [/comment]
  900. [comment] --- start of rs symbol + cs link --- [/comment]
  901. [div=/* wrapper */
  902. display: flex;
  903. flex-flow: row nowrap;
  904. width: 100%;
  905. position: absolute;
  906. bottom: -19px;
  907. left: 3px;]
  908. [div=/* rs symbol */
  909. box-sizing: border-box;
  910. display: flex;
  911. align-items: center;
  912. justify-content: center;
  913. padding-top: 2px;
  914. border-radius: 50%;
  915. border: 2px solid var(--White);
  916. background: var(--Color01);
  917. line-height: 100%;
  918. width: 28px;
  919. height: 28px;
  920. font-family: var(--BodyFont);
  921. font-size: 12px;
  922. color: var(--White);
  923. font-weight: 700;]
  924. [fa]fas fa-heart[/fa]
  925. [/div]
  926. [div=/* cs link symbol */
  927. box-sizing: border-box;
  928. display: flex;
  929. align-items: center;
  930. justify-content: center;
  931. margin-left: 4px;
  932. padding-top: 2px;
  933. border-radius: 50%;
  934. border: 2px solid var(--White);
  935. background: var(--Color01);
  936. line-height: 100%;
  937. width: 28px;
  938. height: 28px;
  939. font-family: var(--BodyFont);
  940. font-size: 10px;
  941. color: var(--White);
  942. font-weight: 700;
  943. text-transform: uppercase;
  944. position: relative;]
  945. [div=position: absolute;]
  946. CS
  947. [/div]
  948. [URL=google.com][div=/* clicker */ position: absolute; inset: 0;][/div][/URL]
  949. [/div]
  950. [/div]
  951. [comment] --- end of rs symbol + cs link --- [/comment]
  952. [/div]
  953. [/div]
  954. [div=/* flex-LEFT - transparent border */
  955. box-sizing: border-box;
  956. padding: 10px;
  957. border-radius: 20px;
  958. border: 1px solid var(--TransparentBorder);
  959. -webkit-backdrop-filter: blur(var(--Blur));
  960. backdrop-filter: blur(var(--Blur));
  961. flex: 5;
  962. min-width: 200px;
  963. background: var(--Transparent);
  964. position: relative;]
  965. [comment] --- start of content text --- [/comment]
  966. [div=/* text box */
  967. box-sizing: border-box;
  968. padding: 20px;
  969. border-radius: 17px;
  970. width: 100%;
  971. height: 210px;
  972. background: var(--White);
  973. font-family: var(--BodyFont);
  974. font-size: var(--BodySize);
  975. line-height: var(--BodyLineHeight);
  976. color: var(--textColor);
  977. text-align: justify;
  978. overflow: hidden;]
  979. [div=
  980. box-sizing: content-box;
  981. padding-right: 50px;
  982. width: 100%;
  983. height: 170px;
  984. overflow-y: scroll;
  985. overflow-x: hidden;]
  986. [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, ex hendrerit blandit consectetur, nulla sapien rhoncus metus, in dictum lorem tellus at nulla. Vivamus id gravida mauris. Integer et interdum purus, ut pretium ligula. Nulla facilisi. Aenean vel dolor dolor. Aenean et dolor vel lacus eleifend convallis eu sed nulla. Curabitur volutpat risus sit amet nisi auctor sagittis ac vitae dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, ex hendrerit blandit consectetur, nulla sapien rhoncus metus, in dictum lorem tellus at nulla. Vivamus id gravida mauris. Integer et interdum purus, ut pretium ligula. Nulla facilisi. Aenean vel dolor dolor. Aenean et dolor vel lacus eleifend convallis eu sed nulla. Curabitur volutpat risus sit amet nisi auctor sagittis ac vitae dolor.[/div]
  987. [/div]
  988. [/div]
  989. [comment] --- end of content text --- [/comment]
  990. [/div]
  991. [/div]
  992. [comment] --- end of relationship box --- [/comment]
  993. [comment] --- start of relationship box --- [/comment]
  994. [div=/* wrapper */
  995. display: flex;
  996. flex-flow: row-reverse wrap;
  997. justify-content: center;
  998. margin-top: 25px;
  999. max-width: 600px;
  1000. width: 100%;
  1001. position: relative;]
  1002. [div=/* flex RIGHT */
  1003. display: flex;
  1004. align-items: center;
  1005. margin-left: -20px;
  1006. flex: 2;
  1007. width: 100%;
  1008. min-width: 150px;
  1009. position: relative;
  1010. z-index: 5;]
  1011. [div=/* proficon */
  1012. box-sizing: border-box;
  1013. border-radius: 20px;
  1014. border: 10px solid var(--Color02);
  1015. width: 100%;
  1016. padding-top: calc(100% - 20px);
  1017. background: var(--RS02);
  1018. position: relative;]
  1019. [comment] --- start of rs character name speech bubble --- [/comment]
  1020. [div=/* nameplate */
  1021. position: absolute;
  1022. top: -20px;
  1023. right: 3px;
  1024. font-size: var(--BodySize);]
  1025. [div=/* speech bubble main */
  1026. box-sizing: border-box;
  1027. border: 2px solid var(--White);
  1028. border-radius: 5px;
  1029. padding: 5px 10px;
  1030. width: fit-content;
  1031. background: var(--Color01);
  1032. font-family: var(--HeaderFont);
  1033. font-size: var(--BodySize);
  1034. line-height: 100%;
  1035. color: var(--White);
  1036. text-align: center;
  1037. text-transform: capitalize;
  1038. position: relative;
  1039. float: right;]
  1040. Name
  1041. [/div]
  1042. [div=/* speech bubble corner */
  1043. margin-top: -2px;
  1044. width: 12px;
  1045. height: 9px;
  1046. background: var(--White);
  1047. clip-path: polygon(0 0, 0% 100%, 100% 0);
  1048. position: relative;
  1049. right: 7px;
  1050. float: right;
  1051. clear: right;]
  1052. [div=/* speech bubble corner inner */
  1053. width: 8px;
  1054. height: 5px;
  1055. background: var(--Color01);
  1056. clip-path: polygon(0 0, 0% 100%, 100% 0);
  1057. position: relative;
  1058. left: 2px;]
  1059. [/div]
  1060. [/div]
  1061. [/div]
  1062. [comment] --- end of rs character name speech bubble --- [/comment]
  1063. [comment] --- start of rs symbol + cs link --- [/comment]
  1064. [div=/* wrapper */
  1065. display: flex;
  1066. flex-flow: row nowrap;
  1067. width: 100%;
  1068. position: absolute;
  1069. bottom: -19px;
  1070. left: 3px;]
  1071. [div=/* rs symbol */
  1072. box-sizing: border-box;
  1073. display: flex;
  1074. align-items: center;
  1075. justify-content: center;
  1076. padding-top: 2px;
  1077. border-radius: 50%;
  1078. border: 2px solid var(--White);
  1079. background: var(--Color01);
  1080. line-height: 100%;
  1081. width: 28px;
  1082. height: 28px;
  1083. font-family: var(--BodyFont);
  1084. font-size: 12px;
  1085. color: var(--White);
  1086. font-weight: 700;]
  1087. [fa]fas fa-heart[/fa]
  1088. [/div]
  1089. [div=/* cs link symbol */
  1090. box-sizing: border-box;
  1091. display: flex;
  1092. align-items: center;
  1093. justify-content: center;
  1094. margin-left: 4px;
  1095. padding-top: 2px;
  1096. border-radius: 50%;
  1097. border: 2px solid var(--White);
  1098. background: var(--Color01);
  1099. line-height: 100%;
  1100. width: 28px;
  1101. height: 28px;
  1102. font-family: var(--BodyFont);
  1103. font-size: 10px;
  1104. color: var(--White);
  1105. font-weight: 700;
  1106. text-transform: uppercase;
  1107. position: relative;]
  1108. [div=position: absolute;]
  1109. CS
  1110. [/div]
  1111. [URL=google.com][div=/* clicker */ position: absolute; inset: 0;][/div][/URL]
  1112. [/div]
  1113. [/div]
  1114. [comment] --- end of rs symbol + cs link --- [/comment]
  1115. [/div]
  1116. [/div]
  1117. [div=/* flex-LEFT - transparent border */
  1118. box-sizing: border-box;
  1119. padding: 10px;
  1120. border-radius: 20px;
  1121. border: 1px solid var(--TransparentBorder);
  1122. -webkit-backdrop-filter: blur(var(--Blur));
  1123. backdrop-filter: blur(var(--Blur));
  1124. flex: 5;
  1125. min-width: 200px;
  1126. background: var(--Transparent);
  1127. position: relative;]
  1128. [comment] --- start of content text --- [/comment]
  1129. [div=/* text box */
  1130. box-sizing: border-box;
  1131. padding: 20px;
  1132. border-radius: 17px;
  1133. width: 100%;
  1134. height: 210px;
  1135. background: var(--White);
  1136. font-family: var(--BodyFont);
  1137. font-size: var(--BodySize);
  1138. line-height: var(--BodyLineHeight);
  1139. color: var(--textColor);
  1140. text-align: justify;
  1141. overflow: hidden;]
  1142. [div=
  1143. box-sizing: content-box;
  1144. padding-right: 50px;
  1145. width: 100%;
  1146. height: 170px;
  1147. overflow-y: scroll;
  1148. overflow-x: hidden;]
  1149. [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, ex hendrerit blandit consectetur, nulla sapien rhoncus metus, in dictum lorem tellus at nulla. Vivamus id gravida mauris. Integer et interdum purus, ut pretium ligula. Nulla facilisi. Aenean vel dolor dolor. Aenean et dolor vel lacus eleifend convallis eu sed nulla. Curabitur volutpat risus sit amet nisi auctor sagittis ac vitae dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, ex hendrerit blandit consectetur, nulla sapien rhoncus metus, in dictum lorem tellus at nulla. Vivamus id gravida mauris. Integer et interdum purus, ut pretium ligula. Nulla facilisi. Aenean vel dolor dolor. Aenean et dolor vel lacus eleifend convallis eu sed nulla. Curabitur volutpat risus sit amet nisi auctor sagittis ac vitae dolor.[/div]
  1150. [/div]
  1151. [/div]
  1152. [comment] --- end of content text --- [/comment]
  1153. [/div]
  1154. [/div]
  1155. [comment] --- end of relationship box --- [/comment]
  1156. [comment] --- start of relationship box --- [/comment]
  1157. [div=/* wrapper */
  1158. display: flex;
  1159. flex-flow: row-reverse wrap;
  1160. justify-content: center;
  1161. margin-top: 25px;
  1162. max-width: 600px;
  1163. width: 100%;
  1164. position: relative;]
  1165. [div=/* flex RIGHT */
  1166. display: flex;
  1167. align-items: center;
  1168. margin-left: -20px;
  1169. flex: 2;
  1170. width: 100%;
  1171. min-width: 150px;
  1172. position: relative;
  1173. z-index: 5;]
  1174. [div=/* proficon */
  1175. box-sizing: border-box;
  1176. border-radius: 20px;
  1177. border: 10px solid var(--Color02);
  1178. width: 100%;
  1179. padding-top: calc(100% - 20px);
  1180. background: var(--RS03);
  1181. position: relative;]
  1182. [comment] --- start of rs character name speech bubble --- [/comment]
  1183. [div=/* nameplate */
  1184. position: absolute;
  1185. top: -20px;
  1186. right: 3px;
  1187. font-size: var(--BodySize);]
  1188. [div=/* speech bubble main */
  1189. box-sizing: border-box;
  1190. border: 2px solid var(--White);
  1191. border-radius: 5px;
  1192. padding: 5px 10px;
  1193. width: fit-content;
  1194. background: var(--Color01);
  1195. font-family: var(--HeaderFont);
  1196. font-size: var(--BodySize);
  1197. line-height: 100%;
  1198. color: var(--White);
  1199. text-align: center;
  1200. text-transform: capitalize;
  1201. position: relative;
  1202. float: right;]
  1203. Name
  1204. [/div]
  1205. [div=/* speech bubble corner */
  1206. margin-top: -2px;
  1207. width: 12px;
  1208. height: 9px;
  1209. background: var(--White);
  1210. clip-path: polygon(0 0, 0% 100%, 100% 0);
  1211. position: relative;
  1212. right: 7px;
  1213. float: right;
  1214. clear: right;]
  1215. [div=/* speech bubble corner inner */
  1216. width: 8px;
  1217. height: 5px;
  1218. background: var(--Color01);
  1219. clip-path: polygon(0 0, 0% 100%, 100% 0);
  1220. position: relative;
  1221. left: 2px;]
  1222. [/div]
  1223. [/div]
  1224. [/div]
  1225. [comment] --- end of rs character name speech bubble --- [/comment]
  1226. [comment] --- start of rs symbol + cs link --- [/comment]
  1227. [div=/* wrapper */
  1228. display: flex;
  1229. flex-flow: row nowrap;
  1230. width: 100%;
  1231. position: absolute;
  1232. bottom: -19px;
  1233. left: 3px;]
  1234. [div=/* rs symbol */
  1235. box-sizing: border-box;
  1236. display: flex;
  1237. align-items: center;
  1238. justify-content: center;
  1239. padding-top: 2px;
  1240. border-radius: 50%;
  1241. border: 2px solid var(--White);
  1242. background: var(--Color01);
  1243. line-height: 100%;
  1244. width: 28px;
  1245. height: 28px;
  1246. font-family: var(--BodyFont);
  1247. font-size: 12px;
  1248. color: var(--White);
  1249. font-weight: 700;]
  1250. [fa]fas fa-heart[/fa]
  1251. [/div]
  1252. [div=/* cs link symbol */
  1253. box-sizing: border-box;
  1254. display: flex;
  1255. align-items: center;
  1256. justify-content: center;
  1257. margin-left: 4px;
  1258. padding-top: 2px;
  1259. border-radius: 50%;
  1260. border: 2px solid var(--White);
  1261. background: var(--Color01);
  1262. line-height: 100%;
  1263. width: 28px;
  1264. height: 28px;
  1265. font-family: var(--BodyFont);
  1266. font-size: 10px;
  1267. color: var(--White);
  1268. font-weight: 700;
  1269. text-transform: uppercase;
  1270. position: relative;]
  1271. [div=position: absolute;]
  1272. CS
  1273. [/div]
  1274. [URL=google.com][div=/* clicker */ position: absolute; inset: 0;][/div][/URL]
  1275. [/div]
  1276. [/div]
  1277. [comment] --- end of rs symbol + cs link --- [/comment]
  1278. [/div]
  1279. [/div]
  1280. [div=/* flex-LEFT - transparent border */
  1281. box-sizing: border-box;
  1282. padding: 10px;
  1283. border-radius: 20px;
  1284. border: 1px solid var(--TransparentBorder);
  1285. -webkit-backdrop-filter: blur(var(--Blur));
  1286. backdrop-filter: blur(var(--Blur));
  1287. flex: 5;
  1288. min-width: 200px;
  1289. background: var(--Transparent);
  1290. position: relative;]
  1291. [comment] --- start of content text --- [/comment]
  1292. [div=/* text box */
  1293. box-sizing: border-box;
  1294. padding: 20px;
  1295. border-radius: 17px;
  1296. width: 100%;
  1297. height: 210px;
  1298. background: var(--White);
  1299. font-family: var(--BodyFont);
  1300. font-size: var(--BodySize);
  1301. line-height: var(--BodyLineHeight);
  1302. color: var(--textColor);
  1303. text-align: justify;
  1304. overflow: hidden;]
  1305. [div=
  1306. box-sizing: content-box;
  1307. padding-right: 50px;
  1308. width: 100%;
  1309. height: 170px;
  1310. overflow-y: scroll;
  1311. overflow-x: hidden;]
  1312. [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, ex hendrerit blandit consectetur, nulla sapien rhoncus metus, in dictum lorem tellus at nulla. Vivamus id gravida mauris. Integer et interdum purus, ut pretium ligula. Nulla facilisi. Aenean vel dolor dolor. Aenean et dolor vel lacus eleifend convallis eu sed nulla. Curabitur volutpat risus sit amet nisi auctor sagittis ac vitae dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, ex hendrerit blandit consectetur, nulla sapien rhoncus metus, in dictum lorem tellus at nulla. Vivamus id gravida mauris. Integer et interdum purus, ut pretium ligula. Nulla facilisi. Aenean vel dolor dolor. Aenean et dolor vel lacus eleifend convallis eu sed nulla. Curabitur volutpat risus sit amet nisi auctor sagittis ac vitae dolor.[/div]
  1313. [/div]
  1314. [/div]
  1315. [comment] --- end of content text --- [/comment]
  1316. [/div]
  1317. [/div]
  1318. [comment] --- end of relationship box --- [/comment]
  1319. [/div]
  1320. [comment] --- end of relationships section --- [/comment]
  1321. [/div]
  1322. [/div]
  1323. [comment] --- start of tab cover --- [/comment]
  1324. [div=/* wrapper */
  1325. background: var(--White);
  1326. font-family: var(--BodyFont);
  1327. font-size: 18px;
  1328. line-height: 100%;
  1329. color: var(--Color01);
  1330. position: absolute;
  1331. top: 76px;
  1332. left: 19px;
  1333. z-index: 3;]
  1334. [fa]fas fa-heart[/fa]
  1335. [/div]
  1336. [comment] --- end of tab cover --- [/comment]
  1337. [/tab]
  1338.  
  1339.  
  1340.  
  1341.  
  1342.  
  1343. [tab=0404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404].
  1344. [div=/* scrollbox - outer */
  1345. width: calc(100% - 60px);
  1346. height: 600px;
  1347. overflow: hidden;
  1348. position: absolute;
  1349. top: -160px;
  1350. left: 50px;
  1351. z-index: 3;]
  1352. [div=/* scrollbox - inner */
  1353. padding-right: 50px;
  1354. width: 100%;
  1355. height: 600px;
  1356. overflow-y: scroll;
  1357. overflow-x: hidden;]
  1358. [comment] --- start of image gallery --- [/comment]
  1359. [div=/* wrapper */
  1360. box-sizing: border-box;
  1361. display: flex;
  1362. justify-content: end;
  1363. width: 100%;]
  1364. [div=/* for spacing purposes - also affects size of images */
  1365. max-width: 200px;
  1366. width: 60%;
  1367. min-width: 150px;
  1368. position: relative;]
  1369. [div=/* transparent border */
  1370. box-sizing: border-box;
  1371. margin-bottom: 20%;
  1372. padding: 10px;
  1373. border-radius: 20px;
  1374. border: 1px solid var(--TransparentBorder);
  1375. width: 100%;
  1376. -webkit-backdrop-filter: blur(var(--Blur));
  1377. backdrop-filter: blur(var(--Blur));
  1378. background: var(--Transparent);
  1379. position: relative;]
  1380. [div=/* image 1 */
  1381. border-radius: 15px;
  1382. width: 100%;
  1383. padding-top: calc(100%*(2/3));
  1384. background: var(--Extra01);]
  1385. [div=/* transparent border */
  1386. box-sizing: border-box;
  1387. padding: 10px;
  1388. border-radius: 20px;
  1389. border: 1px solid var(--TransparentBorder);
  1390. width: 100%;
  1391. -webkit-backdrop-filter: blur(var(--Blur));
  1392. backdrop-filter: blur(var(--Blur));
  1393. background: var(--Transparent);
  1394. position: absolute;
  1395. top: 50%;
  1396. left: -50%;]
  1397. [div=/* image 2 */
  1398. border-radius: 15px;
  1399. width: 100%;
  1400. padding-top: calc(100%*(2/3));
  1401. background: var(--Extra02);]
  1402. [/div]
  1403. [/div]
  1404. [/div]
  1405. [/div]
  1406. [/div]
  1407. [/div]
  1408. [comment] --- end of image gallery --- [/comment]
  1409. [comment] --- start of quote section --- [/comment]
  1410. [div=/* wrapper */
  1411. display: flex;
  1412. flex-direction: column;
  1413. align-items: end;
  1414. margin-right: 8px;
  1415. width: calc(100% - 8px);
  1416. position: relative;]
  1417. [div=/* circle 1 */
  1418. margin-bottom: 13px;
  1419. margin-right: 55px;
  1420. box-sizing: border-box;
  1421. border-radius: 50%;
  1422. border: 1px solid var(--Color02);
  1423. width: 6px;
  1424. height: 6px;
  1425. background: var(--White);
  1426. filter: drop-shadow(4px 4px 0 var(--Color02));]
  1427. [/div]
  1428. [div=/* circle 2 */
  1429. margin-bottom: 13px;
  1430. margin-right: 35px;
  1431. box-sizing: border-box;
  1432. border-radius: 50%;
  1433. border: 1px solid var(--Color02);
  1434. width: 12px;
  1435. height: 12px;
  1436. background: var(--White);
  1437. filter: drop-shadow(4px 4px 0 var(--Color02));]
  1438. [/div]
  1439. [div=/* circle 3 */
  1440. margin-bottom: 13px;
  1441. margin-right: 25px;
  1442. box-sizing: border-box;
  1443. border-radius: 50%;
  1444. border: 1px solid var(--Color02);
  1445. width: 18px;
  1446. height: 18px;
  1447. background: var(--White);
  1448. filter: drop-shadow(4px 4px 0 var(--Color02));]
  1449. [/div]
  1450. [div=/* speech bubble main */
  1451. box-sizing: border-box;
  1452. border-radius: 15px;
  1453. border: 1px solid var(--Color02);
  1454. padding: 5px 10px;
  1455. max-width: 500px;
  1456. width: fit-content;
  1457. background: var(--White);
  1458. font-family: var(--BodyFont);
  1459. font-size: var(--BodySize);
  1460. line-height: var(--BodyLineHeight);
  1461. color: var(--Color01);
  1462. font-weight: 700;
  1463. text-align: justify;
  1464. filter: drop-shadow(8px 8px 0 var(--Color02));]
  1465. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1466. [/div]
  1467. [/div]
  1468. [comment] --- end of quote section --- [/comment]
  1469. [comment] --- start of notes section --- [/comment]
  1470. [div=/* box wrapper */
  1471. margin-top: 100px;
  1472. width: 100%;
  1473. max-width: 550px;
  1474. position: relative;]
  1475. [div=/* transparent border */
  1476. box-sizing: border-box;
  1477. padding: 10px;
  1478. border-radius: 20px;
  1479. border: 1px solid var(--TransparentBorder);
  1480. -webkit-backdrop-filter: blur(var(--Blur));
  1481. backdrop-filter: blur(var(--Blur));
  1482. background: var(--Transparent);
  1483. position: relative;]
  1484. [comment] --- start of section header speech bubble --- [/comment]
  1485. [div=/* nameplate */
  1486. position: absolute;
  1487. top: -5px;
  1488. right: 30px;
  1489. font-size: var(--BodySize);]
  1490. [div=/* speech bubble main */
  1491. box-sizing: border-box;
  1492. border: 2px solid var(--White);
  1493. border-radius: 5px;
  1494. padding: 6px 12px;
  1495. width: fit-content;
  1496. background: var(--Color02);
  1497. font-family: var(--HeaderFont);
  1498. font-size: var(--BodySize);
  1499. line-height: 100%;
  1500. color: var(--White);
  1501. text-align: center;
  1502. text-transform: capitalize;
  1503. position: relative;
  1504. float: right;]
  1505. Notes
  1506. [/div]
  1507. [div=/* speech bubble corner */
  1508. margin-top: -2px;
  1509. width: 12px;
  1510. height: 9px;
  1511. background: var(--White);
  1512. clip-path: polygon(0 0, 0% 100%, 100% 0);
  1513. position: relative;
  1514. right: 7px;
  1515. float: right;
  1516. clear: right;]
  1517. [div=/* speech bubble corner inner */
  1518. width: 8px;
  1519. height: 5px;
  1520. background: var(--Color02);
  1521. clip-path: polygon(0 0, 0% 100%, 100% 0);
  1522. position: relative;
  1523. left: 2px;]
  1524. [/div]
  1525. [/div]
  1526. [/div]
  1527. [comment] --- end of section header speech bubble --- [/comment]
  1528. [comment] --- start of content text --- [/comment]
  1529. [div=/* text box */
  1530. box-sizing: border-box;
  1531. padding: 20px 20px 20px 0;
  1532. border-radius: 17px;
  1533. width: 100%;
  1534. background: var(--White);
  1535. font-family: var(--BodyFont);
  1536. font-size: var(--BodySize);
  1537. line-height: var(--BodyLineHeight);
  1538. color: var(--textColor);
  1539. text-align: justify;]
  1540. [div=/* list position */
  1541. width: calc(100% + 5px);
  1542. position: relative;
  1543. left: -5px;]
  1544. [LIST=1]
  1545. [*] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum, ex hendrerit blandit consectetur, nulla sapien rhoncus metus, in dictum lorem tellus at nulla. Vivamus id gravida mauris.
  1546. [*] Integer et interdum purus, ut pretium ligula. Nulla facilisi. Aenean vel dolor dolor. Aenean et dolor vel lacus eleifend convallis eu sed nulla. Curabitur volutpat risus sit amet nisi auctor sagittis ac vitae dolor.
  1547. [*] Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et odio id augue interdum suscipit id eu nibh. Aenean id viverra augue. Curabitur tortor lacus, egestas at orci at, faucibus fringilla orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin in accumsan dolor, mattis egestas quam. Vestibulum non nunc et dui ultricies blandit.
  1548. [*] Nunc magna enim, fringilla et bibendum ut, congue vel mauris. Aliquam dapibus nulla nec ligula volutpat, in convallis augue blandit. In consequat, nisi quis elementum dignissim, mi dui tempus justo, a molestie ex sem vitae mauris. Nulla facilisi. Suspendisse suscipit blandit quam, id pretium lectus. Praesent id ipsum eget neque varius rhoncus. Proin quis odio turpis. Duis sodales sed est eget efficitur.
  1549. [*] Pellentesque eleifend nibh nec ullamcorper sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis quis blandit mauris. Nulla facilisi. Maecenas at libero ipsum.
  1550. [/LIST]
  1551. [/div]
  1552. [/div]
  1553. [comment] --- end of content text --- [/comment]
  1554. [/div]
  1555. [/div]
  1556. [comment] --- end of notes section --- [/comment]
  1557. [/div]
  1558. [/div]
  1559. [comment] --- start of tab cover --- [/comment]
  1560. [div=/* wrapper */
  1561. background: var(--White);
  1562. font-family: var(--BodyFont);
  1563. font-size: 18px;
  1564. line-height: 100%;
  1565. color: var(--Color01);
  1566. position: absolute;
  1567. top: 111px;
  1568. left: 18px;
  1569. z-index: 3;]
  1570. [fa]fas fa-star[/fa]
  1571. [/div]
  1572. [comment] --- end of tab cover --- [/comment]
  1573. [/tab]
  1574.  
  1575.  
  1576.  
  1577.  
  1578.  
  1579. [/tabs]
  1580. [/div]
  1581. [/div]
  1582. [comment] --- end of tabs --- [/comment]
  1583. [/div]
  1584. [/div]
  1585. [/div]
  1586. [div=margin-top: 5px; width: 100%; font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[/div]
  1587. [/nobr]
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!