Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- [comment]coded by uxie, heavily inspired by [url='https://www.pinterest.com/pin/175218241746919177/']this design[/url]
- [font=DM Serif Text]title[/font]
- [font=Lateef]header[/font]
- [font=Instrument Sans]body[/font]
- to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
- [/comment][div=
- /*big background image*/
- --bg-img: url('https://preview.redd.it/s2-spoilers-60-upscaled-and-native-screenshots-wallpapers-v0-r9b4ahqdqq2e1.png?width=3840&format=png&auto=webp&s=4266c834af7bd34a5e6508f262fd3f2e9d40b117') 50% 50%;
- --bg-o: 0.6; /*adjust this to reduce colour filter on image*/
- /*textbox background colour -- wouldn't advise using a crazy colour for this.*/
- --bg-color: #020202;
- /*border + accent lines colour*/
- --border: #605e5a;
- /*first accent colour*/
- --color-1: #1e8dc9;
- /*second accent colour*/
- --color-2: #bfa95b;
- /*text colour*/
- --t-color: #cdd3d3;
- /*fonts used*/
- --title: 'DM Serif Text', serif;
- --header: 'Lateef', serif;
- --body: 'Instrument Sans', sans-serif;
- /*left image*/
- --img-1: url('https://64.media.tumblr.com/873ead98115f378be38c92338d12a9e4/108d9fef017e2650-b5/s540x810/c63159bea339b90933d211595b5633ef5bd726f5.gifv') 50% 50%;
- --img-1-bo: 0.2; /*adjust this to reduce colour filter on image*/
- /*doodles! ignore all this!!!!*/
- --circle: url('data:image/svg+xml,%3Csvg width="300" height="200" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke-width="3" d="M190.2 32.7c-5.8 1.3-18.7 3.4-29.3 6.3a272.8 272.8 0 0 0-46.3 18c-15 7-28.5 15-47.5 26.5A98.3 98.3 0 0 0 37.8 109c-5 7.7-6.9 12.6-7.4 18-.5 4-.3 9.6 3 14.6 4 6 10.4 10 16.3 14 8.3 5.3 16 9.5 27.2 12.6a84 84 0 0 0 31.5 3.5c11-1 23-1.8 33.8-4.1 13.7-3 27.4-5.9 37.8-10 16-6.6 26.6-11 35.3-16.8 9.3-6.2 20-15.3 26-21.9a45.9 45.9 0 0 0 10.4-18.5 48.2 48.2 0 0 0-6.5-35.4c-4.4-7-9.3-12.8-13.8-16.6a44.7 44.7 0 0 0-17.1-8.6c-5.6-1.7-13-4-21.5-4.6a119 119 0 0 0-29.2 2 242.7 242.7 0 0 0-38.9 9.4 132 132 0 0 0-37.2 22.2A403 403 0 0 0 59 93.4a88.5 88.5 0 0 0-18.4 24.3c-4.2 8.4-5.6 15.6-6.8 20.9-1 4.3-.7 8.3.6 12.1 1.3 4 3.2 6.7 8.3 10.5a52 52 0 0 0 17.2 8.6 94.5 94.5 0 0 0 26.3 3.6c10-.3 20.6-3.8 33.5-6 11.8-2 22.9-3.9 36.7-9.9l37.5-16.1c14.9-6.6 28.8-14 40.5-21 10.1-5.9 17.2-10.7 26-17.7l5.2-4.2 3-4.7 1.4-3.4" stroke="%23000" fill="none"/%3E%3C/svg%3E');
- --scribble: url('data:image/svg+xml,%3Csvg width="300" height="50" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m3 44 3-3 12-4 31-6 46-8 65-10c22-3 39-6 55-7 12-2 26-2 32-2h-1c-5 0-10 2-16 4-7 1-11 3-17 5-4 1-12 2-15 4l-28 6-42 6-42 4c-15 1-25 3-37 6l-9 1 4 1 18-4 32-6c13-4 30-7 47-9 16-3 30-3 39-4l13-3h-5c-4 1-8 1-14 4l-17 6c-7 2-15 3-21 6-5 1-8 2-10 4-2 1-1 3 1 3l8-1 10-2 10-2 2-1-6 3-8 4c-1 1 0 1 2 1h9l16-1 15-4 16-2c8-2 16-3 27-3h69" stroke-width="3" stroke="%23000" fill="none"/%3E%3C/svg%3E');
- --arrows: url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="none" stroke="%23000" stroke-width="5" d="M16 19h3c3 0 7 0 11 2l12 5 10 2 6 3 4 1h4l2 1h3c1-1-1-1-2-2l-2-4-3-4-3-4-2-3h1l2 2 3 4 3 3 2 3 2 3 2 2v1l-3 1-5 1-6 1-4 1-3 1v1h-1M18 85l7-2 13-4 12-2 10-2 4-3 3-1 5-2 6-4h-1l-6-2-7-1-8-2h-5 28v3l-1 2c-1 3-3 4-4 5l-2 5-1 4-1 3v1"/%3E%3C/svg%3E');
- --asterisk: url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="%23000" d="M8 44c1-1 2-2 3-1l6 3 9 5c4 2 8 4 14 5l11 5 12 1 7 2c2-1 3 1 4 1 2 0 1-1-2-1l-8-3-12-3-12-5-11-3-8-3-5-4-5-3-4-2-1-2 3 1 7 5c2 1 4 4 8 5l11 4 14 4 13 4 9 2h6-5l-9-2-8-3-11-5-7-4-8-4c-2 0-4 0-6-2l-3-2-4-2-2-1-2-1c-2-1 0-3 1-2l6 3 11 4 12 5 11 5 11 5 7 4 5 2 5 2h2l-2 1h-3c-1 1-2-1-3-1h-3c-3-2-3 0-4-1l-4 1h-2 1l5 2c2 1 2 3 5 4l4 1 3 1c2 0 2 1 3 2l3-2c1-1 0-1-1-1l-4-2c-1-1-2-2-3-1s-1-1-3-1h1l3-2h5c1 1 0 1-1 2l-3 1-3 2-2-1-2-3-2-2-3-2-3-3-2-1-2-2-4-3-4-3-2-3h-7l-2-2-3 2c-2 0-1-2 0-2l2 2 3 1 2 5c0 1 2 1 3-1l3-5v-4c2-2 0-3 0-5l-2-6v-5l-2-3-1-4-2-6c-1-2 0-3 1-2v5l1 9-1 10-2 13-1 15-2 10v14l1-8 3-11 3-10 2-9V30l3-11 1-9V9l-3 2h-3v1c1 1 2-1 3-1h3l2 4v6l-1 3-1 4-2 2-1 4-1 4-1 6-1 5-1 5v16l-1 2-1 3-1 3v6l-1 1-3 1c-1 1 1 2 2 3l2 2 1-4c2-3 3-7 3-11l1-12 1-8v-7l-1-6v-7l1-7c0-3-1-4-2-5 0-1 2-1 1-3l2-2c2 1 2 3 2 6l-1 12v15l-2 16v22l-1 5c-1 1 0 0-1-1v-9l3-15c2-7 1-14 2-18l-1-12-1-9v-8l1-6c0-3-2-4-1-5h1l1 3c1 1-1 4-1 7l-1 12-2 10-1 12 1 8 1 6v4l-2 5v4l-2 4c-1-2 1-2 1-4l2-6-1-4v-8c1-2 2-2 2-5l-1-2 1-5v-6l-1-3-2 2-7 5-4 3-2 3-2 2-3 2-3 2-3 1-3 2-1 2-1 2c1 1 3-1 5-2l5-4 6-3 5-3 3-2 3-1c2-1 5-2 6-4l3-3 2-2c-1-2 1-2 2-3l4-2 2-3h1l-2 2c0 2-2 3-4 5l-5 6-7 8-2 4-3 2-4 2-4 2-3 2-3 2h-5v-2l7-6 6-5 5-4 4-6 6-4 9-7 9-5 4-2 3-2 3-2 3-2c-1-1-2 1-3 1l-5 5-7 7-5 5-5 4-3 4c-1 1-3 0-4 2 0 2-1 3-2 3l-4 2-2 3-3 2c-1 0-4 0-3 1 0 2 1-2 2-2l7-6 9-5c3-1 4-4 6-5 3-1 5-1 6-3l5-4 4-3 4-2 3-2 3-1 3-3c-1-1-3 2-4 2l-6 4-5 2-4 3-5 2-6 4-7 4-4 2-3 2-4 2-3 3-3 2c-1 0-2 0-3 2l-2 2-3 2 1-1 4-5 6-6 6-4 5-5 9-5 7-6 4-3 3-2h3l2 2 1 3-2 4-4 4-5 5-7 4-6 3-8 5-4 3-3 1-3 2-3 2-3 1-3 2-3 2-3 1c-1 1 1 1 4-2l9-7 9-7 5-4 2-4 3-2 5-4 5-5 5-2 3-2 1-1-1 1" stroke-width="4" fill="none"/%3E%3C/svg%3E');
- --star: url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="%23000" d="m26.5 53.6 5.4-5.4c1.3-1.4 4.7-4.5 6.7-6.8C41.8 37.8 44 36 48 32c2.7-2.8 7.3-4.2 9.5-9.5.5-1.3 2.7-4 4-5.4 1.4-1.4 1-3.4 2.7-4.1 1.2-.5 2.7 1.4 2.7 4v27.2c0 6.7.7 10.8 0 17.5-.7 6.9-1.4 10.9-1.4 16.3v8c0 1.4-.8 1.3-1.3 0-1.5-3.4-3.6-4.2-5.4-6.7-3.3-4.6-7-9.3-9.4-13.5-3-5.2-5.7-9.3-9.4-16.3-3-5.3-5.9-10.5-8.1-14.8-3.4-6.5-5.4-10.9-6.7-13.6-1.4-2.7-2-3.6-2.7-5.4-1-2.5-.4-3.1-1.4-4-1-1 .1-.6 1.4 0 3.5 1.4 6.7 4 10.7 6.7 4 2.7 9.3 7 14.8 9.5 6.7 3 12.4 4.9 16.2 6.8 4.4 2.1 9.7 2.5 13.5 4l5.3 2.7c1.8.8 2.7 1.4 4 1.4 1.4 0 1.8.4 2.8 1.3 1 1 1.3 1.4 0 1.4H83c-4 0-8.1-1-12 0a85.2 85.2 0 0 0-13.5 4c-6.6 3-10.9 3.9-16.2 5.5-4 1.2-6.8 2.4-10.8 4-2.7 1.2-5 3.3-6.7 4-2.5 1.1-4 1.4-5.4 1.4-2.7 0-2.8.9-4 1.4-1.8.7-4 0-4 1.3 0 1.4 1.3-1.3 2.6-2.7 4-4 6.4-5.7 9.5-9.4 3.6-4.5 7.7-7.2 12-10.9 3.8-3 12.2-9.3 14.9-10.8 6.9-3.8 10.8-8.1 12.1-9.5 2.7-2.7 3-4.4 4-5.4s.4-1.7 1.4-2.7c1-1 1.7-.4 2.7-1.3 1-1 1.3-1.4 1.3 0v9.4c0 4-.7 8.2-1.3 13.6-.7 5.5-1.4 10.8-1.4 14.9 0 5.4-1.3 9.4-1.3 13.5v10.8c0 2.7-1.4 4-1.4 6.8 0 1.3 1 3 0 4s-.9-1.6-2.6-4c-2.3-3.1-5.3-5.5-6.8-8.1-3.8-7-5.6-9.4-8-13.6-3-5.2-5.1-9.6-8.1-14.9-2.5-4.2-4.9-8.3-6.8-12.1-2.1-4.4-5.4-8.2-6.7-10.9-1.3-2.7-4.7-3.8-5.4-6.7-.3-1.4-1.3-1.7 0-1.4 3 .7 4.3 2.2 8 4 4.5 2.2 7 3.8 12.2 6.8 4.2 2.5 8 4.4 12.1 6.8 2.6 1.5 6.8 1.4 9.5 2.7 2.6 1.4 5.3 2.7 8 2.7 1.4 0 2.7 1.4 4 1.4 1.4 0 2.3.6 4.1 1.3 1.3.5 2.7 0 4 0 1.4 0 2.3 1.8 1.4 2.7-2 2-4 0-6.7 1.4a92.4 92.4 0 0 1-10.8 4c-4 1.4-8.2 1.2-10.8 2.8-4.2 2.4-7.2 3.9-10.8 5.4-2.4 1-5.3 1.3-8 2.7-2.7 1.3-5.7 1-8.1 2.7a17.2 17.2 0 0 1-8 2.7h-5.5c-1.3 0-1.7.4-2.7 1.3-1 1-2.7 0-4 0v1.4" stroke-width="4" fill="none"/%3E%3C/svg%3E');
- --exclamation: url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M17 14.5c1 0 1 1 2 2 2 2 4 5 6 9s3.3 6.9 5 11c1.2 3 3.1 7 4 10 1.2 4 3.5 6.8 4 9 .5 2 1 3 1 4s1 1 1 0 .4-2 0-3c-.5-1.3-.9-4.2-2-7-1-2.6-3-5-5-9-1-2-.9-4-2-6-1.8-3.1-2.5-5-3-7-.5-2.2-2-4-2-6a11.3 11.3 0 0 0-3-8c-.7-.7 0-1.6 1-2 1.3-.5 2-1 3-1s2-.4 3 0c1.3.5 2.3 3.8 3 5 1.7 2.7 1.5 5 2 8 .5 3.1 1.5 4.9 2 8 .3 2 0 4 0 7v11-1c0-1-.5-1.8-1-4-.7-3-1.1-5-2-8-1.2-4-.6-8-1-11-.5-4-1.5-6.9-2-10-.2-1 0-3 0-5 0-1-2-3-2-2s1 1 1 3c0 3 .1 6 1 8 1.2 3 .8 6 2 10 .9 3 1.5 7 2 11 .2 2 .5 5 1 7 .5 2.2.6 3.6 2 5 .7.7.3 1.3 1 2s1 1 1 2v3l1 1h1-1M69 13.5c0 1 .2 3 0 4-.5 2.2-1.5 3.8-2 6-.7 3-.6 6-1 9-.5 4-.5 8-1 13s-1.5 9-2 13c-.4 3 0 4 0 7v-29c0-3-1.1-4.2 0-7 .5-1.3 1-3 1-5v-3c0-1 0-2 1-2h6c1 0 1 .6 2 1 1.3.5 1.3 1.3 2 2s1 1 1 2-.5 2.8-1 5c-.5 2-.8 4-2 7l-3 7c-1.2 3-2 4.5-3 8l-2 5c-.8 1.8 0 3 0 4s-2 2-1 2-.2-2 0-3c.5-2.2 1.5-3.8 2-6 1-3.9 1.5-6.9 2-10 .5-3 .5-7 1-11 .4-3 1-7 1-10 0-2 .2-5.2 1-7 .5-1.3 2-3 1-3s0 2 0 4c0 3-.5 5-1 9-.4 3-1 7-1 10s-.6 6-1 9c-.5 4-2.5 5.9-3 9-.5 3-.5 4.8-1 7-.2 1 0 2 0 3v3c0 1-.3 2.7-1 2-.7-.7 0-2 0-3v-7c0-3 .5-4.9 1-8 .5-3 0-4 0-7 0-1 1-3 0-3s0 2 0 3v6c0 3-1.5 4.9-2 8-.5 3-.3 4-1 7-.5 2.2-1.5 4-2 6-.5 2.2-1 3-1 2v-2M40 73.5c-1 1-1 2-1 3s.3 1.3 1 2 1 1 1 0v-4c0-1-.5-2.3-1-1l-1 2c-.5 1.3-1 2 0 2 2 0 2.2-.7 4-2 1.1-.8 1-2 1-3h-1M59 84.5c-1 0-1 1-1 2v4c0 1 0 2 1 2s.3-1.3 1-2 1-1 1-2 1-3 0-3 .4 2 0 3c-.5 1.3-1 0-1-1s1-1 1-2-1.3-1.7-2-1-1 2-1 3v4c0 1 0 2 1 2s.3-1.3 1-2 1-1 1-2v-3c0-1-.3-2.7-1-2l-2 2v1h-1" stroke-width="4" stroke="%23000" fill="none"/%3E%3C/svg%3E');
- --tick: url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="%23000" d="m9 51 3 1 5 6 5 6c3 3 3 5 4 7l5 6 2 4 1 3h1l-1-3-3-5c-3-2-4-5-5-7l-4-8-3-8-3-4-1-3-2-1h3l4 4c1 1 3 2 4 6l4 4 4 5 2 4 3 1 1 2 2 1 2-1 2-1 4-5c2-1 4-2 6-6l5-7 6-7 4-6 6-7c1-3 4-4 5-6l2-4v2l-5 6-6 7-8 8c-2 4-5 6-7 8l-7 9-5 6-3 4c-1 3-3 3-4 3h-3l-2-1-2-3-3-2-1-2c0-2-1-2-2-3v3c2 2 2 4 2 5l4 5 1 4 3 1 2 1 2-1 5-5 4-6 5-7 6-7 7-7 6-5 4-6 3-4c1-2 1-5 3-5l1-3c0-1 0-3 1-2s0 2-1 5l-5 8-6 11-9 10-5 9-5 7-4 5c-3 1-3 3-4 4l-2 1c-2 1-1 0 0-1s2-4 5-6l7-6c4-2 5-6 7-9l7-7 7-8 5-8c1-1 3-2 4-5l2-4 2-4 2-2-1 1-1 3-1 2-3 2-3 4c-2 1-2 3-3 5l-2 3-3 5-2 3-3 4-2 4-3 3-1 4-2 1-2 2c-1 2-2 1-3 1l-3 4-2 1-2 1-1 2v1" stroke-width="4" fill="none"/%3E%3C/svg%3E');
- --cross: url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cg stroke="null" fill="none"%3E%3Cpath d="M18 30v1l5 5 6 5 9 6 8 8 8 6 6 4 6 4 6 3 3 1v-1l-6-6-10-5-10-5-7-6-6-7-7-6-6-6-3-4c-3 0-2-2-2-3h-1l4 1c3 2 7 3 10 6l13 7 11 7 8 6 5 3 3 3 3 2 2 2h1l-7-4-11-5-12-7-10-4-7-3-3-3-4-1-3-1c-1 0-2-2 0-1 1 0 2-1 4 1l8 7 11 6 9 8 8 5 6 4c2 2 5 2 7 3l3 2 2 3v-3l-6-4-9-6c-4-4-6-4-9-6l-6-6-3-2-3-2-3-1c-1-1 1-1 2-1l5 3 8 5 7 6 9 5c2 2 4 4 6 4l4 2 2 1 4 1c-1 1-3-1-5-3l-7-5-8-6-8-8-7-7-5-4-5-5-4-5-3-3-4-3-3-2-4-3-2-2h-3l-3-1 2 1 6 6 12 8 11 9 10 8 9 8c3 1 4 4 7 6l5 3 4 4 5 4 3 4 3 1-2 1-8-5-8-6-10-6-7-5-8-5c-1-1-3-4-6-5l-4-3-4-4-5-5-3-4-3-2-2-2-2-1h-1l4 1 6 5 9 8 8 9 9 9 5 6 6 6 6 4 4 4 3 2 3 1 4 1 2 2h-3l-4-1-6-2-5-4-5-4-4-2-3-3-3-1c-1-1-1-3-2-2-1 0-1 2 1 3l4 3 4 4 4 5 3 3 2 2 2 1h3c0-1 0-2-2-3l-5-5-6-7-7-6-3-4-4-2c-1-1-1-3-3-3l-4-4-3-3-3-3-4-2-2-2-4-3c-1-1 0-3-2-4l-2-4-1-2-2-1-2-1-2-2h-3l-1-2H8h3l2 1 4 1c0 1 1 2 3 2 1 1 1 2 3 2v1H13v1l2 1 4 3 3 3 2 2v1l-3-1-4-3-4-6-3-3c-1 0-3-1-2-2h3l6 2 4 4 5 6 3 3 3 2c1 0 2-1 4 1l2 1h3l3 1 2 1c2 2 1 2 1 3l1 3 1 4v3l3-1 3-5 3-6 3-8 2-9 1-4v-1l-2 4-6 8-8 8-5 7-4 6-2 5-3 4-5 5-3 5c-1 0-2-2 0-4a294 294 0 0 0 15-19l10-12 8-11 3-5 2-3 2-2c1-1 0-2 2-2v2l-5 6-8 11-8 11-8 11-12 9-9 11-4 5c-1 2-1 1 1 0l8-4 12-8c5-3 11-7 14-11l9-11 7-10c2-2 3-6 5-7l3-5h1l-3 5-7 7-8 9-9 10c-4 6-7 8-9 10l-8 10-2 5v-1c1-4 5-6 9-10l16-14 15-19 8-13 4-10 3-5v1l-1 3-6 8-8 10-12 11-10 12-7 9c-2 3-5 4-5 6l-4 6c0 1-1 0 0 0l6-6 12-10c5-4 10-8 13-13l11-12 4-8h1c0 3-3 3-5 7l-9 12-14 16-10 15-8 10-2 2 7-7 11-12c6-6 13-10 18-17l13-16 8-15 3-7 1-4v3l-5 7-9 11c-3 4-5 8-10 12L54 57 43 67l-8 11c-3 3-7 3-8 6 0 1 0 3-1 2-2-1 0-4 1-6l5-11 10-12 6-11 7-9 2-5 1-1-2 4-5 6c-3 2-4 6-7 9l-6 7-7 7c-1 2-4 2-4 4l2-2 5-6 6-7 7-9 11-11 8-11 5-5c1-1 2 0 1 1l-3 3-4 5-4 8-6 7-2 6c-1 2-4 4-2 4l2-4 4-7 6-8 6-8 2-2v-1" stroke="none"/%3E%3Cpath stroke="%23000" d="m7 15 2 3 5 7 11 12 17 17 15 13 8 9 9 6 5 3c1 1 3 1 2 2l-3-2-8-5-10-8a130 130 0 0 1-18-17L32 44 22 34l-8-9-4-6c-1-1-3-3-2-4h4c2 0 5 3 7 5l9 11 12 16 13 15 12 12 7 8 4 4 2 3c2 2 3 2 3 1l-1-2-3-4-4-7-7-9-10-11-13-13-7-7-8-5-5-6c-1-1-3-1-2-3l7 3 14 11 11 10 7 8c4 2 6 5 8 7 1 2 2 6 5 7l4 4 4 4 4 2h1v-1" stroke-width="5"/%3E%3Cpath stroke="%23000" d="M76 16c-1 0-2 0-3 2l-7 7-6 8-7 8c-4 3-5 8-9 12l-8 8-8 8-3 4h1l5-6 13-11 18-17 11-9 8-9c2-2 5-3 6-6l2-3c0-2 3-1 2 0l-3 3a53 53 0 0 1-13 12L64 37l-9 9-8 10-7 9-9 9-9 9-5 5c-2 1-2 0 0-2 1-2 2-5 6-9l8-12 9-8 6-7 7-7 6-6 6-5 4-5 2-4c0-1 0-2 2-3l1-3-2 2-8 7-8 8-9 8-10 10-8 8-4 5c-1 3-2 3-4 4l-4 5-6 5-3 4c-1 1-1 1 0 0l5-4 10-5 8-7 3-1 1-1" stroke-width="5"/%3E%3C/g%3E%3C/svg%3E');
- height:auto; width:100%; overflow-y:hidden; overflow-x:auto; padding:50px 0 70px 0; box-sizing:border-box; line-height:0; position:relative;]
- [comment]----main container----[/comment]
- [div=height:auto; width:100%; max-width:740px; margin:0 auto; position:relative; display:flex; flex-flow:row wrap; position:relative; z-index:2; --mc: 5px;]
- [comment]----left----[/comment]
- [div=height:540px; flex:44; min-width:230px; margin: var(--mc); display:flex; flex-flow:column nowrap; position:relative;]
- [comment]----image----[/comment]
- [div=height:200px; width:100%; flex-shrink:0;]
- [div=height:5px; width:95%; border-bottom:1px solid var(--border); box-sizing:border-box; margin-bottom:5px;][/div]
- [div=height:190px; width:100%; background: var(--img-1); background-size:cover; position:relative; z-index:2;][div=height:100%; width:100%; background: var(--bg-color); opacity: var(--img-1-bo);][/div][/div]
- [div=height:100%; width:0; border-right:1px solid var(--border); position:absolute; top:0; left:40px; z-index:1;][/div]
- [/div]
- [comment]----image end----[/comment]
- [comment]----left contents----[/comment]
- [div=height:90%; max-height:331px; width:100%; background: var(--bg-color); margin-top:10px; border-top:1px solid var(--border); padding:10px 0 20px 0; box-sizing:border-box; position:relative;][div=height:100%; width:100%; overflow-y:scroll; overflow-x:hidden; scrollbar-width:none;]
- [comment]----slide one----[/comment]
- [div=height:100%; width:100%; display:flex; flex-flow:row nowrap; padding:5px 0 0 0; box-sizing:border-box;]
- [comment]----sparkle decoration----[/comment]
- [div=height:40px; width:40px; position:sticky; top:5px; display:flex; justify-content:center; font-size:15px; flex-shrink:0; color: var(--color-2);][fa]fas fa-sparkle[/fa][/div]
- [comment]----slide contents----[/comment]
- [div=height:100%; flex:1; padding:0 20px 0 15px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; position:relative;][div=height:auto; width:auto; position:absolute; top:0; right:5px; color: var(--border); font-size:11px; opacity:0.8;][fa]fas fa-arrow-down[/fa][/div]
- [comment]----big text----[/comment]
- [div=height:auto; width:auto; margin-top:10px; font-family: var(--header); font-size:68px; line-height:60%; color: var(--color-1); letter-spacing:-0.05em; word-spacing:0.2em;][comment]
- ----* * * big text here----
- [/comment]hey, it's [br][/br]me again.[/div]
- [comment]----small description----[/comment]
- [div=height:auto; width:100%; text-align:left; color: var(--t-color); font-family: var(--body); font-size:12.5px; margin-top:20px; line-height:15px;][comment]
- ----* * * small description here----
- [/comment]welcome to my 1x1 search! i'm reaching out into the arcane in search of [b]2 partners[/b].
- scroll me, please.
- [/div]
- [comment]----small description end----[/comment]
- [comment]----tags (will cut off after two lines)----[/comment]
- [div=height:auto; max-height:50px; overflow:hidden; width:100%; display:flex; flex-flow:row wrap; --mt:5px 4px 0 0; margin:9px 0 0 -2px;]
- [comment]----copy this whole thing to get another tag----[/comment]
- [div=height:auto; width:auto; margin: var(--mt); border:2px solid var(--color-2); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--color-2); letter-spacing:1px;][comment]
- ----* * * tag contents here----
- [/comment]#mexyou[/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to get another tag----[/comment]
- [div=height:auto; width:auto; margin: var(--mt); border:2px solid var(--color-2); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--color-2); letter-spacing:1px;][comment]
- ----* * * tag contents here----
- [/comment]#fandom[/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to get another tag----[/comment]
- [div=height:auto; width:auto; margin: var(--mt); border:2px solid var(--color-2); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--color-2); letter-spacing:1px;][comment]
- ----* * * tag contents here----
- [/comment]#18-30[/div]
- [comment]----copy me too!----[/comment]
- [/div]
- [comment]----tags end----[/comment]
- [/div]
- [comment]----slide contents end----[/comment]
- [/div]
- [comment]----slide one end----[/comment]
- [comment]----slide two (about you)----[/comment]
- [div=height:auto; min-height:100%; margin-top:30px; display:flex; flex-flow:row nowrap; padding:5px 0; box-sizing:border-box;]
- [comment]----sparkle decoration----[/comment]
- [div=height:40px; width:40px; position:sticky; top:5px; display:flex; justify-content:center; font-size:15px; flex-shrink:0; color: var(--color-2);][fa]fas fa-sparkle[/fa][/div]
- [comment]----slide contents----[/comment]
- [div=height:100%; flex:1; padding:0 20px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; position:relative; --ms:12px; font-size:12px; font-family: var(--body); color: var(--t-color);]
- [comment]----slide title----[/comment]
- [div=height:auto; width:100%; text-align:right; position:sticky; top:0; background: var(--bg-color); padding:0 0 10px 0; box-sizing:border-box; color: var(--color-1); font-size:50px; line-height:100%; font-family: var(--header); letter-spacing:-0.05em; word-spacing:0.2em;][div=height:65px; width:140px; mask-image: var(--circle); background-color: var(--color-2); mask-size:contain; mask-repeat: no-repeat; position:absolute; top:-8px; right:-58px; pointer-events:none;][/div][comment]
- ----* * * slide title here----
- [/comment]about me.[/div]
- [div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
- [comment]----copy this whole thing to add another info section----[/comment]
- [div=height:auto; width:100%; margin-top: var(--ms); --mi: 6px;][div=height:0; width:100%; margin-bottom:calc(var(--mi) * -1);][/div]
- [comment]----copy this whole thing to add another info----[/comment]
- [div=height:auto; width:auto; color: var(--t-color); font-size:13px; font-family: var(--body); display:flex; flex-flow:row nowrap; justify-content:flex-end; margin-top: var(--mi);]
- [div=height:auto; width:auto; flex-shrink:0; font-family: var(--header); font-size:13.5px; align-self:flex-end; flex-shrink:0; line-height:80%; text-align:right; text-transform:uppercase; font-weight:bold; letter-spacing:0.5px;][comment]
- ----* * * info title here----
- [/comment]call me.[/div]
- [div=height:auto; width:auto; text-align:right; flex-shrink:0; line-height:15px; margin-left:8px;][comment]
- ----* * * info contents here----
- [/comment]powder[/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another info----[/comment]
- [div=height:auto; width:auto; color: var(--t-color); font-size:13px; font-family: var(--body); display:flex; flex-flow:row nowrap; justify-content:flex-end; margin-top: var(--mi);]
- [div=height:auto; width:auto; flex-shrink:0; font-family: var(--header); font-size:13.5px; align-self:flex-end; flex-shrink:0; line-height:80%; text-align:right; text-transform:uppercase; font-weight:bold; letter-spacing:0.5px;][comment]
- ----* * * info title here----
- [/comment]pronouns.[/div]
- [div=height:auto; width:auto; text-align:right; flex-shrink:0; line-height:15px; margin-left:8px;][comment]
- ----* * * info contents here----
- [/comment]she/her[/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another info----[/comment]
- [div=height:auto; width:auto; color: var(--t-color); font-size:13px; font-family: var(--body); display:flex; flex-flow:row nowrap; justify-content:flex-end; margin-top: var(--mi);]
- [div=height:auto; width:auto; flex-shrink:0; font-family: var(--header); font-size:13.5px; align-self:flex-end; flex-shrink:0; line-height:80%; text-align:right; text-transform:uppercase; font-weight:bold; letter-spacing:0.5px;][comment]
- ----* * * info title here----
- [/comment]age.[/div]
- [div=height:auto; width:auto; text-align:right; flex-shrink:0; line-height:15px; margin-left:8px;][comment]
- ----* * * info contents here----
- [/comment]eighteen[/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another info----[/comment]
- [div=height:auto; width:auto; color: var(--t-color); font-size:13px; font-family: var(--body); display:flex; flex-flow:row nowrap; justify-content:flex-end; margin-top: var(--mi);]
- [div=height:auto; width:auto; flex-shrink:0; font-family: var(--header); font-size:13.5px; align-self:flex-end; flex-shrink:0; line-height:80%; text-align:right; text-transform:uppercase; font-weight:bold; letter-spacing:0.5px;][comment]
- ----* * * info title here----
- [/comment]style.[/div]
- [div=height:auto; width:auto; text-align:right; flex-shrink:0; line-height:15px; margin-left:8px;][comment]
- ----* * * info contents here----
- [/comment]multi-para, 500+ words[/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [/div]
- [comment]----copy me too! (info section end)----[/comment]
- [comment]----copy this whole thing to add a text section----[/comment]
- [div=height:auto; width:100%; line-height:15px; text-align:justify; margin-top: var(--ms);][comment]
- ----* * * text starts here----
- [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat viverra risus sed vestibulum. Ut enim est, tempus eu diam sed, porta sollicitudin nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sed tellus tempus, ultrices eros a, luctus ante. Donec eu sollicitudin arcu. Nunc eget facilisis est, eu sagittis lectus. Curabitur tempus, ligula feugiat vehicula auctor, eros augue consectetur augue, in gravida sapien nisi nec enim.
- [/div]
- [comment]----copy me too! (text section end)----[/comment]
- [/div]
- [comment]----slide contents end----[/comment]
- [/div]
- [comment]----slide two end----[/comment]
- [comment]----music player----[/comment]
- [div=height:40px; width:40px; background: var(--bg-color); position:absolute; bottom:0; left:0; display:flex; align-items:center; justify-content:center;][div=height:auto; width:auto; color: var(--color-1); font-size:16px; position:relative; z-index:2; pointer-events:none; animation: fa-spin 5s linear infinite; ][fa]far fa-compact-disc[/fa][/div]
- [comment]----actual media player----[/comment]
- [div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:3; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][div=height:32px; width:32px; position:relative; pointer-events:auto;]
- [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
- [div=height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0; /*remove this to use me, and add it to the other*/ display:none;]
- [media=soundcloud]https://soundcloud.com/thesunsetboy/yukika-neon[/media]
- [/div]
- [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
- [div=height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px;]
- [media=googledrive]18_hisGgjsDz6D6EZBD7GNi1hXvMBers5[/MEDIA]
- [/div]
- [/div][/div]
- [comment]----actual media player end----[/comment]
- [/div]
- [comment]----music player end----[/comment]
- [/div][/div]
- [comment]----left contents end----[/comment]
- [/div]
- [comment]----left end----[/comment]
- [comment]----right----[/comment]
- [div=height:540px; flex:56; min-width:270px; margin: var(--mc);]
- [comment]----top container----[/comment]
- [div=height:180px; width:100%; background: var(--bg-color); border-right:1px solid var(--border); position:relative;]
- [comment]----main title----[/comment]
- [div=height:180px; width:100%; display:flex; align-items:center; justify-content:flex-end; overflow:hidden;
- /*adjust this value for the font size of the big word*/ --fs-b:105px;
- /*adjust this value for the font size of the small word*/ --fs-s: 50px;]
- [comment]----small words----[/comment]
- [div=height:auto; width:auto; font-family: var(--header); font-size: var(--fs-s); color: var(--t-color); line-height:100%; text-shadow:1px 1px var(--bg-color), 1px 1px var(--bg-color), -1px -1px var(--bg-color), 1px -1px var(--bg-color), -1px 1px var(--bg-color); position:absolute; top:43px; right:20px; font-style:italic; letter-spacing:-0.05em; word-spacing:0.2em;][comment]
- ----* * * small words here----
- [/comment]my best[/div]
- [comment]----big text----[/comment]
- [div=height:auto; width:auto; font-family: var(--title); font-size: var(--fs-b); color: var(--t-color); line-height:100%; text-align:right; margin-right:-10px; text-shadow:2px 2px var(--border);][comment]
- ----* * * big word here----
- [/comment]enemy[/div]
- [div=height:35px; width:220px; background: var(--color-1); mask-image: var(--scribble); mask-size: contain; mask-repeat: no-repeat; position:absolute; bottom:30px; right:12%; transform:rotate(2deg);][/div]
- [div=height:auto; width:auto; color: var(--color-2); font-size:15px; position:absolute; top:15px; left:15px;][fa]fas fa-sparkle[/fa][/div]
- [/div]
- [comment]----main title end----[/comment]
- [div=height:70px; width:0; border-left:1px solid var(--border); position:absolute; top:0px; left:60px; z-index:5;][/div]
- [div=height:0; width:120px; border-top:1px solid var(--border); position:absolute; top:40px; left:-40px; z-index:5;][/div]
- [/div]
- [comment]----top container end----[/comment]
- [comment]----tabs container----[/comment]
- [div=height:360px; width:100%; position:relative; display:flex; justify-content:center;]
- [comment]----tabs----[/comment]
- [div=height:25px; width:auto; overflow:hidden;][div=margin:0px 0 0 -20px; letter-spacing:30px;][tabs]
- [comment]----tab 1----[/comment]
- [tab=.][div=height:340px; width:100%; display:flex; flex-flow:column-reverse nowrap; letter-spacing:0; position:absolute; bottom:0; left:0; z-index:3; pointer-events:none;]
- [comment]----tab contents----[/comment]
- [div=height:290px; width:100%; background: var(--bg-color); margin-top:10px; position:relative; border-bottom:1px solid var(--border); display:flex; flex-flow:column-reverse nowrap; pointer-events:auto;][div=height:0; width:80%; position:absolute; top:0; right:0; border-top:1px solid var(--border);][/div][div=height:10px; width:0; border-right:1px solid var(--border); top:-10px; right:35px; position:absolute;][/div]
- [comment]----tab title----[/comment]
- [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:calc(100% - 47px); flex-shrink:0; padding:5px 15px 10px 15px; box-sizing:border-box; position:relative; margin-left:auto;]
- [div=height:auto; width:auto; color: var(--t-color); font-size:42px; font-family: var(--header); line-height:100%; letter-spacing:-0.05em; word-spacing:0.2em;][comment]
- ----* * * tab title here----
- [/comment]listen up.[/div]
- [div=height:47px; width:47px; background-color: var(--color-2); mask-image: var(--arrows); mask-size:contain; mask-repeat:no-repeat; position:absolute; top:5px; left:-38px;][/div]
- [/div]
- [comment]----tab title end----[/comment]
- [comment]----tab scrollbox----[/comment]
- [div=height:90%; width:calc(100% - 35px); margin-right:35px; border-right:1px solid var(--border); padding:22px 20px 0px 20px; box-sizing:border-box; overflow:hidden;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width:none; color: var(--t-color); font-size:12px; text-align:justify; font-family: var(--body); --ms:12px;][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
- [comment]----copy this whole thing to add another list section----[/comment]
- [div=height:auto; width:100%; margin-top: var(--ms); --mr: 7px;][div=height:0; width:100%; margin-bottom:calc(var(--mr) * -1);][/div]
- [comment]----copy this whole thing to add another list item----[/comment]
- [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--mr);]
- [div=height:15px; width:15px; background: var(--color-1); mask-image: var(--asterisk); mask-size:contain; mask-repeat:no-repeat; flex-shrink:0; margin:0 8px 0 1px;][/div]
- [div=height:auto; flex:1; line-height:15px;][comment]
- ----* * * list contents here----
- [/comment]this is a rule.
- [/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another list item----[/comment]
- [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--mr);]
- [div=height:15px; width:15px; background: var(--color-1); mask-image: var(--asterisk); mask-size:contain; mask-repeat:no-repeat; flex-shrink:0; margin:0 8px 0 1px;][/div]
- [div=height:auto; flex:1; line-height:15px;][comment]
- ----* * * list contents here----
- [/comment]this is a rule. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat viverra risus sed vestibulum. Ut enim est, tempus eu diam sed, porta sollicitudin nisl.
- [/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another list item----[/comment]
- [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--mr);]
- [div=height:15px; width:15px; background: var(--color-1); mask-image: var(--asterisk); mask-size:contain; mask-repeat:no-repeat; flex-shrink:0; margin:0 8px 0 1px;][/div]
- [div=height:auto; flex:1; line-height:15px;][comment]
- ----* * * list contents here----
- [/comment]this is a rule. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- [/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another list item----[/comment]
- [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--mr);]
- [div=height:15px; width:15px; background: var(--color-1); mask-image: var(--asterisk); mask-size:contain; mask-repeat:no-repeat; flex-shrink:0; margin:0 8px 0 1px;][/div]
- [div=height:auto; flex:1; line-height:15px;][comment]
- ----* * * list contents here----
- [/comment]this is a rule. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat viverra risus sed vestibulum. Ut enim est, tempus eu diam sed, porta sollicitudin nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sed tellus tempus, ultrices eros a, luctus ante. Morbi nisi purus, hendrerit sit amet convallis sagittis, porta in ex. Integer tincidunt aliquet orci. Aliquam tempus felis ut rutrum lacinia.
- [/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [/div]
- [comment]----copy me too! (list section end)----[/comment]
- [/div][/div]
- [comment]----tab scrollbox end----[/comment]
- [/div]
- [comment]----tab contents end----[/comment]
- [comment]----button select----[/comment]
- [div=height:60px; width:100%; position:absolute; top:-20px; left:0; padding:0 0 35px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;]
- [comment]----selected button----[/comment]
- [div=height:12px; width:12px; border:2px solid var(--border); box-sizing:border-box; border-radius:50%; flex-shrink:0; padding:1px; position:relative;][div=height:100%; width:100%; border-radius:50%; background: var(--color-2);][/div]
- [comment]----button title----[/comment]
- [div=height:auto; width:100%; position:absolute; top:0; left:0; display:flex; justify-content:center;][div=height:auto; width:auto; position:absolute; border:2px solid var(--border); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--border); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--border); letter-spacing:1px; margin-top:18px;][comment]
- ----* * * button title here----
- [/comment]rules[/div][/div]
- [/div]
- [comment]----selected button end----[/comment]
- [div=height:100%; width:25%; flex-shrink:0;][/div]
- [div=height:12px; width:12px; flex-shrink:0;][/div]
- [div=height:100%; width:25%; flex-shrink:0;][/div]
- [div=height:12px; width:12px; flex-shrink:0;][/div]
- [/div]
- [comment]----button select end----[/comment]
- [/div][/tab]
- [comment]----tab 1 end----[/comment]
- [comment]----tab 2----[/comment]
- [tab=.][div=height:340px; width:100%; display:flex; flex-flow:column-reverse nowrap; letter-spacing:0; position:absolute; bottom:0; left:0; z-index:3; pointer-events:none;]
- [comment]----tab contents----[/comment]
- [div=height:290px; width:100%; background: var(--bg-color); margin-top:10px; position:relative; border-bottom:1px solid var(--border); display:flex; flex-flow:column-reverse nowrap; pointer-events:auto;][div=height:0; width:80%; position:absolute; top:0; right:0; border-top:1px solid var(--border);][/div][div=height:10px; width:0; border-right:1px solid var(--border); top:-10px; right:35px; position:absolute;][/div]
- [comment]----tab title----[/comment]
- [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:calc(100% - 37px); flex-shrink:0; padding:5px 15px 10px 15px; box-sizing:border-box; position:relative; margin-left:auto;]
- [div=height:auto; width:auto; color: var(--t-color); font-size:42px; font-family: var(--header); line-height:100%; letter-spacing:-0.05em; word-spacing:0.2em;][comment]
- ----* * * tab title here----
- [/comment]pretty please![/div]
- [div=height:37px; width:37px; background-color: var(--color-2); mask-image: var(--star); mask-size:contain; mask-repeat:no-repeat; position:absolute; top:18px; left:-28px;][/div]
- [/div]
- [comment]----tab title end----[/comment]
- [comment]----tab scrollbox----[/comment]
- [div=height:90%; width:calc(100% - 35px); margin-right:35px; border-right:1px solid var(--border); padding:22px 20px 0px 20px; box-sizing:border-box; overflow:hidden;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width:none; color: var(--t-color); font-size:12px; font-family: var(--body); --ms:12px;][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
- [comment]----copy this whole thing to add a text section----[/comment]
- [div=height:auto; width:100%; line-height:15px; text-align:justify; margin-top: var(--ms);][comment]
- ----* * * text starts here----
- [/comment]i guess i'm looking for some fandoms! here they are, and the pairings i want:
- [/div]
- [comment]----copy me too! (text section end)----[/comment]
- [comment]----copy this whole thing to add another list section----[/comment]
- [div=height:auto; width:100%; margin-top: var(--ms); text-align:justify; --mr: 7px;][div=height:0; width:100%; margin-bottom:calc(var(--mr) * -1);][/div]
- [comment]----copy this whole thing to add another list item----[/comment]
- [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--mr);]
- [div=height:15px; width:15px; background: var(--color-1); mask-image: var(--asterisk); mask-size:contain; mask-repeat:no-repeat; flex-shrink:0; margin:0 8px 0 1px;][/div]
- [div=height:auto; flex:1; line-height:15px;][comment]
- ----* * * list contents here----
- [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- [/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another list item----[/comment]
- [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--mr);]
- [div=height:15px; width:15px; background: var(--color-1); mask-image: var(--asterisk); mask-size:contain; mask-repeat:no-repeat; flex-shrink:0; margin:0 8px 0 1px;][/div]
- [div=height:auto; flex:1; line-height:15px;][comment]
- ----* * * list contents here----
- [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- [/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another list item----[/comment]
- [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--mr);]
- [div=height:15px; width:15px; background: var(--color-1); mask-image: var(--asterisk); mask-size:contain; mask-repeat:no-repeat; flex-shrink:0; margin:0 8px 0 1px;][/div]
- [div=height:auto; flex:1; line-height:15px;][comment]
- ----* * * list contents here----
- [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- [/div]
- [/div]
- [comment]----copy me too!----[/comment]
- [/div]
- [comment]----copy me too! (list section end)----[/comment]
- [/div][/div]
- [comment]----tab scrollbox end----[/comment]
- [/div]
- [comment]----tab contents end----[/comment]
- [comment]----button select----[/comment]
- [div=height:60px; width:100%; position:absolute; top:-20px; left:0; padding:0 0 35px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;]
- [div=height:12px; width:12px; flex-shrink:0;][/div]
- [div=height:100%; width:25%; flex-shrink:0;][/div]
- [comment]----selected button----[/comment]
- [div=height:12px; width:12px; border:2px solid var(--border); box-sizing:border-box; border-radius:50%; flex-shrink:0; padding:1px; position:relative;][div=height:100%; width:100%; border-radius:50%; background: var(--color-2);][/div]
- [comment]----button title----[/comment]
- [div=height:auto; width:100%; position:absolute; top:0; left:0; display:flex; justify-content:center;][div=height:auto; width:auto; position:absolute; border:2px solid var(--border); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--border); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--border); letter-spacing:1px; margin-top:18px;][comment]
- ----* * * button title here----
- [/comment]fandoms[/div][/div]
- [/div]
- [comment]----selected button end----[/comment]
- [div=height:100%; width:25%; flex-shrink:0;][/div]
- [div=height:12px; width:12px; flex-shrink:0;][/div]
- [/div]
- [comment]----button select end----[/comment]
- [/div][/tab]
- [comment]----tab 2 end----[/comment]
- [comment]----tab 3----[/comment]
- [tab=.][div=height:340px; width:100%; display:flex; flex-flow:column-reverse nowrap; letter-spacing:0; position:absolute; bottom:0; left:0; z-index:3; pointer-events:none;]
- [comment]----tab contents----[/comment]
- [div=height:290px; width:100%; background: var(--bg-color); margin-top:10px; position:relative; border-bottom:1px solid var(--border); display:flex; flex-flow:column-reverse nowrap; pointer-events:auto;][div=height:0; width:80%; position:absolute; top:0; right:0; border-top:1px solid var(--border);][/div][div=height:10px; width:0; border-right:1px solid var(--border); top:-10px; right:35px; position:absolute;][/div]
- [comment]----tab title----[/comment]
- [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:calc(100% - 42px); flex-shrink:0; padding:5px 15px 10px 15px; box-sizing:border-box; position:relative; margin-left:auto;]
- [div=height:auto; width:auto; color: var(--t-color); font-size:42px; font-family: var(--header); line-height:100%; letter-spacing:-0.05em; word-spacing:0.2em;][comment]
- ----* * * tab title here----
- [/comment]how about...[/div]
- [div=height:42px; width:42px; background-color: var(--color-2); mask-image: var(--exclamation); mask-size:contain; mask-repeat:no-repeat; position:absolute; top:5px; left:-32px; transform:rotate(-20deg);][/div]
- [/div]
- [comment]----tab title end----[/comment]
- [comment]----tab scrollbox----[/comment]
- [div=height:90%; width:calc(100% - 35px); margin-right:35px; border-right:1px solid var(--border); padding:22px 20px 0px 20px; box-sizing:border-box; overflow:hidden;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width:none; color: var(--t-color); font-size:12px; font-family: var(--body); --ms:12px;][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
- [comment]----copy this whole thing to add a text section----[/comment]
- [div=height:auto; width:100%; line-height:15px; text-align:justify; margin-top: var(--ms);][comment]
- ----* * * text starts here----
- [/comment]and here are some original plots, if you'd like! a tick means it's available and a cross means it isn't!
- [/div]
- [comment]----copy me too! (text section end)----[/comment]
- [comment]----copy this whole thing to add a plot section----[/comment]
- [div=height:auto; width:100%; margin-top: var(--ms); --mp: 15px;][div=height:0; width:100%; margin-bottom:calc(var(--mp) * -1);][/div]
- [comment]----copy this whole thing to add another plot----[/comment]
- [div=height:auto; width:100%; margin-top: var(--mp);]
- [comment]----plot title----[/comment]
- [div=height:auto; width:100%; color: var(--t-color); font-family: var(--header); font-size:28px; line-height:80%; text-transform:uppercase; font-weight:bold; letter-spacing:-0.03em; word-spacing:0.3em;][div=
- /*add display:none; after this if you want to use a text status instead!*/
- /*change between --tick and --cross to show the status of the plot*/ mask-image: var(--tick);
- height:20px; width:20px; background: var(--color-1); mask-size:contain; mask-repeat:no-repeat; float:left; margin:1px 6px 0 0;][/div][div=
- /*remove display:none; after this if you want to use the text status instead!*/ display:none;
- height:auto; width:fit-content; width:-moz-fit-content; margin: var(--mt); border:1.5px solid var(--color-1); border-radius:10px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-family: var(--body); font-size:7px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--color-1); letter-spacing:1px; float:left; margin:4px 6px 0 0;][comment]
- ----* * * status here (not visible unless you change to text status!)----
- [/comment]open[/div][comment]
- ----* * * plot title here---
- [/comment]oil and water[/div]
- [comment]----plot tags (will cut off after two lines)----[/comment]
- [div=height:auto; max-height:50px; overflow:hidden; width:100%; display:flex; flex-flow:row wrap; --mt:5px 4px 0 0; margin-top:-2px; opacity:0.6;]
- [comment]----copy this whole thing to get another tag----[/comment]
- [div=height:auto; width:auto; margin: var(--mt); border:2px solid var(--t-color); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--t-color); letter-spacing:1px;][comment]
- ----* * * tag contents here----
- [/comment]#fxf[/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to get another tag----[/comment]
- [div=height:auto; width:auto; margin: var(--mt); border:2px solid var(--t-color); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--t-color); letter-spacing:1px;][comment]
- ----* * * tag contents here----
- [/comment]#angst[/div]
- [comment]----copy me too!----[/comment]
- [/div]
- [comment]----plot tags end----[/comment]
- [comment]----plot contents----[/comment]
- [div=height:auto; width:100%; text-align:justify; line-height:15px; margin-top:10px;][comment]
- ----* * * text starts here----
- [/comment][div=display:inline; color: var(--color-1); font-weight:bold;]muse a[/div] dolor sit amet, consectetur adipiscing elit. [b]muse b[/b] viverra risus sed vestibulum. Ut enim est, tempus eu diam sed, porta sollicitudin nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sed tellus tempus, ultrices eros a, luctus ante. Morbi nisi purus, hendrerit sit amet convallis sagittis, porta in ex. Integer tincidunt aliquet orci. Aliquam tempus felis ut rutrum lacinia. Proin ultricies urna ut metus tempus sodales. Duis eleifend euismod enim. Suspendisse pellentesque leo ac congue pretium. Donec leo lorem, auctor malesuada orci et, posuere rutrum magna. Proin et ex sit amet nisi pharetra tristique vitae vitae velit. Mauris porttitor et nisi ut accumsan.
- [/div]
- [comment]----plot contents end----[/comment]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another plot----[/comment]
- [div=height:auto; width:100%; margin-top: var(--mp);]
- [comment]----plot title----[/comment]
- [div=height:auto; width:100%; color: var(--t-color); font-family: var(--header); font-size:28px; line-height:80%; text-transform:uppercase; font-weight:bold; letter-spacing:-0.03em; word-spacing:0.3em;][div=
- /*add display:none; after this if you want to use a text status instead!*/
- /*change between --tick and --cross to show the status of the plot*/ mask-image: var(--tick);
- height:20px; width:20px; background: var(--color-1); mask-size:contain; mask-repeat:no-repeat; float:left; margin:1px 6px 0 0;][/div][div=
- /*remove display:none; after this if you want to use the text status instead!*/ display:none;
- height:auto; width:fit-content; width:-moz-fit-content; margin: var(--mt); border:1.5px solid var(--color-1); border-radius:10px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-family: var(--body); font-size:7px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--color-1); letter-spacing:1px; float:left; margin:4px 6px 0 0;][comment]
- ----* * * status here (not visible unless you change to text status!)----
- [/comment]open[/div][comment]
- ----* * * plot title here---
- [/comment]paint the town blue[/div]
- [comment]----plot tags (will cut off after two lines)----[/comment]
- [div=height:auto; max-height:50px; overflow:hidden; width:100%; display:flex; flex-flow:row wrap; --mt:5px 4px 0 0; margin-top:-2px; opacity:0.6;]
- [comment]----copy this whole thing to get another tag----[/comment]
- [div=height:auto; width:auto; margin: var(--mt); border:2px solid var(--t-color); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--t-color); letter-spacing:1px;][comment]
- ----* * * tag contents here----
- [/comment]#fxany[/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to get another tag----[/comment]
- [div=height:auto; width:auto; margin: var(--mt); border:2px solid var(--t-color); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--t-color); letter-spacing:1px;][comment]
- ----* * * tag contents here----
- [/comment]#found-family[/div]
- [comment]----copy me too!----[/comment]
- [/div]
- [comment]----plot tags end----[/comment]
- [comment]----plot contents----[/comment]
- [div=height:auto; width:100%; text-align:justify; line-height:15px; margin-top:10px;][comment]
- ----* * * text starts here----
- [/comment][div=display:inline; color: var(--color-1); font-weight:bold;]muse a[/div] dolor sit amet, consectetur adipiscing elit. [b]muse b[/b] viverra risus sed vestibulum. Ut enim est, tempus eu diam sed, porta sollicitudin nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sed tellus tempus, ultrices eros a, luctus ante. Morbi nisi purus, hendrerit sit amet convallis sagittis, porta in ex. Integer tincidunt aliquet orci. Aliquam tempus felis ut rutrum lacinia.
- [/div]
- [comment]----plot contents end----[/comment]
- [/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to add another plot----[/comment]
- [div=height:auto; width:100%; margin-top: var(--mp);]
- [comment]----plot title----[/comment]
- [div=height:auto; width:100%; color: var(--t-color); font-family: var(--header); font-size:28px; line-height:80%; text-transform:uppercase; font-weight:bold; letter-spacing:-0.03em; word-spacing:0.3em;][div=
- /*add display:none; after this if you want to use a text status instead!*/
- /*change between --tick and --cross to show the status of the plot*/ mask-image: var(--cross);
- height:20px; width:20px; background: var(--color-1); mask-size:contain; mask-repeat:no-repeat; float:left; margin:1px 6px 0 0;][/div][div=
- /*remove display:none; after this if you want to use the text status instead!*/ display:none;
- height:auto; width:fit-content; width:-moz-fit-content; margin: var(--mt); border:1.5px solid var(--color-1); border-radius:10px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-family: var(--body); font-size:7px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--color-1); letter-spacing:1px; float:left; margin:4px 6px 0 0;][comment]
- ----* * * status here (not visible unless you change to text status!)----
- [/comment]closed[/div][comment]
- ----* * * plot title here---
- [/comment]pretend like it's the first time[/div]
- [comment]----plot tags (will cut off after two lines)----[/comment]
- [div=height:auto; max-height:50px; overflow:hidden; width:100%; display:flex; flex-flow:row wrap; --mt:5px 4px 0 0; margin-top:-2px; opacity:0.6;]
- [comment]----copy this whole thing to get another tag----[/comment]
- [div=height:auto; width:auto; margin: var(--mt); border:2px solid var(--t-color); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--t-color); letter-spacing:1px;][comment]
- ----* * * tag contents here----
- [/comment]#mxf[/div]
- [comment]----copy me too!----[/comment]
- [comment]----copy this whole thing to get another tag----[/comment]
- [div=height:auto; width:auto; margin: var(--mt); border:2px solid var(--t-color); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--color-2); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--t-color); letter-spacing:1px;][comment]
- ----* * * tag contents here----
- [/comment]#time-travel[/div]
- [comment]----copy me too!----[/comment]
- [/div]
- [comment]----plot tags end----[/comment]
- [comment]----plot contents----[/comment]
- [div=height:auto; width:100%; text-align:justify; line-height:15px; margin-top:10px;][comment]
- ----* * * text starts here----
- [/comment][div=display:inline; color: var(--color-1); font-weight:bold;]muse a[/div] dolor sit amet, consectetur adipiscing elit. [b]muse b[/b] viverra risus sed vestibulum. Ut enim est, tempus eu diam sed, porta sollicitudin nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sed tellus tempus, ultrices eros a, luctus ante. Morbi nisi purus, hendrerit sit amet convallis sagittis, porta in ex. Integer tincidunt aliquet orci. Aliquam tempus felis ut rutrum lacinia.
- [/div]
- [comment]----plot contents end----[/comment]
- [/div]
- [comment]----copy me too!----[/comment]
- [/div]
- [comment]----copy me too! (plot section end)----[/comment]
- [/div][/div]
- [comment]----tab scrollbox end----[/comment]
- [/div]
- [comment]----tab contents end----[/comment]
- [comment]----button select----[/comment]
- [div=height:60px; width:100%; position:absolute; top:-20px; left:0; padding:0 0 35px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;]
- [div=height:12px; width:12px; flex-shrink:0;][/div]
- [div=height:100%; width:25%; flex-shrink:0;][/div]
- [div=height:12px; width:12px; flex-shrink:0;][/div]
- [div=height:100%; width:25%; flex-shrink:0;][/div]
- [comment]----selected button----[/comment]
- [div=height:12px; width:12px; border:2px solid var(--border); box-sizing:border-box; border-radius:50%; flex-shrink:0; padding:1px; position:relative;][div=height:100%; width:100%; border-radius:50%; background: var(--color-2);][/div]
- [comment]----button title----[/comment]
- [div=height:auto; width:100%; position:absolute; top:0; left:0; display:flex; justify-content:center;][div=height:auto; width:auto; position:absolute; border:2px solid var(--border); border-radius:10px; padding:4px 8px; box-sizing:border-box; color: var(--border); font-family: var(--body); font-size:8px; text-transform:uppercase; line-height:100%; font-weight:bold; -webkit-text-stroke:0.1px var(--border); letter-spacing:1px; margin-top:18px;][comment]
- ----* * * button title here----
- [/comment]plots[/div][/div]
- [/div]
- [comment]----selected button end----[/comment]
- [/div]
- [comment]----button select end----[/comment]
- [/div][/tab]
- [comment]----tab 3 end----[/comment]
- [/tabs][/div][/div]
- [comment]----tabs end----[/comment]
- [comment]----tabs cover----[/comment]
- [div=height:60px; width:100%; position:absolute; top:0; left:0; pointer-events:none; padding:0 0 35px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;][div=height:50%; width:0; position:absolute; right:0; top:0; border-right:1px solid var(--border);][/div][div=height:100%; flex:1; pointer-events:auto;][/div]
- [comment]----button----[/comment]
- [div=height:12px; width:12px; border:2px solid var(--border); box-sizing:border-box; border-radius:50%; flex-shrink:0;][/div]
- [comment]----line----[/comment]
- [div=height:100%; width:25%; pointer-events:auto; flex-shrink:0; display:flex; align-items:center;][div=height:0; width:100%; border-top:2px solid var(--border);][/div][/div]
- [comment]----button----[/comment]
- [div=height:12px; width:12px; border:2px solid var(--border); box-sizing:border-box; border-radius:50%; flex-shrink:0;][/div]
- [comment]----line----[/comment]
- [div=height:100%; width:25%; pointer-events:auto; flex-shrink:0; display:flex; align-items:center;][div=height:0; width:100%; border-top:2px solid var(--border);][/div][/div]
- [comment]----button----[/comment]
- [div=height:12px; width:12px; border:2px solid var(--border); box-sizing:border-box; border-radius:50%; flex-shrink:0;][/div]
- [div=height:100%; flex:1; pointer-events:auto;][/div][/div]
- [comment]----tabs cover end----[/comment]
- [/div]
- [comment]----tabs container end----[/comment]
- [/div]
- [comment]----right end----[/comment]
- [comment]----signature! *** do not remove!! ***----[/comment]
- [div=height:auto;width:fit-content; background: var(--bg-color); padding:2px 2px 2px 1px; position:absolute; z-index:6; color: var(--border); opacity:0.4; top:15px; left:5px; color: var(--border); font-size:9px;text-align:center; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/div]
- [/div]
- [comment]----main container end----[/comment]
- [comment]----large background----[/comment]
- [div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:1; background: var(--bg-img); background-size:cover;][div=height:100%; width:100%; background: var(--bg-color); opacity: var(--bg-o);][/div][/div]
- [/div]
Advertisement
Add Comment
Please, Sign In to add comment