View difference between Paste ID: <a href="/VMjj0MtW">VMjj0MtW</a> and <a href="/aeeXTTS8">aeeXTTS8</a>

[nobr]
1		[nobr]
2
3		[div class="aboutcontainer"]
4		[div class="abouttext"]
5		[url="https://pastebin.com/aeeXTTS8"][div class="abouttitle"][font="Lobster"]sideshow[/font][/div][/url]
6		[div class="abouttagscont"]
7		[div class="abouttags"]app template[/div]
8		[div class="abouttags"]mobile friendly[/div]
9		[div class="abouttags"]nobr[/div]
10		[/div]
11		[/div]
12
13		[/div]
14
15
16		[class name="aboutcontainer"]width:30%;padding:50px;min-width:200px;margin:auto;overflow:hidden;[/class][class name="abouttext"]padding:50px;background:#7C1B24;color:#fff!important;font-weight:bold;font-size:30px;border-radius:5px;transition:0.5s;margin-top:0%;width:calc(100% -50px);[/class][class name="abouttagscont"]min-width:200px;display:flex;flex-wrap:wrap;margin-top:-10px[/class][class name="abouttags"]color:#7C1B24;background:#fff;letter-spacing:1px;text-transform:uppercase;font-weight:100;font-size:10px;margin:2.5px;padding:5px;width:fit-content[/class][class name="abouttitle"]color:#fff!important;[/class]
17
18		[/nobr]
19	-	[nobr][comment]--------------------------------------------------- template code by lambikins, please do not claim for your own! ---------------------------------------------------[/comment]
19	+	[nobr][comment]--------------------------------------------------- template code by koschei, please do not claim for your own! ---------------------------------------------------[/comment]
20
21		[comment]--------------------------------------------------- accent classes ---------------------------------------------------[/comment]
22
23		[class name="majorContainer" minWidth="500px"]
24		width:500px;
25		background:#fff;
26		margin:auto;
27		border:1px solid #f1f1f1;
28		padding:50px;
29		--accent:#555
30		[/class]
31
32		[class name="majorContainer" maxWidth="499px"]
33		width:250px;
34		background:#fff;
35		margin:auto;
36		border:1px solid #f1f1f1;
37		padding:50px;
38		--accent:#555
39		[/class]
40
41		[class name="colorChange"]
42		--accent:#9D0F0D
43		[/class]
44
45		[comment]--------------------------------------------------- begin code ---------------------------------------------------[/comment]
46
47		[div class="majorContainer"]
48		[div class="titleText"][B]买椟还珠[/B]
49
50		[div class="quoteContainer"]
51		[div style="font-size:10px"]i believe in love but love won't believe in me[/div]
52		[/div]
53
54		[/div]
55
56
57		[div style="padding:10px;border:1px solid #f1f1f1"]
58
59		[div class="imageHover"]
60
61		[div class="goBack"]go[color=transparent]i[/color]back[/div]
62
63		[div class="flexright"]
64		[div class="infobox"]
65		[div class="pageContainers"]
66
67		[div class="tabContainers"]
68		[div class="tabStyle taba"]basics[/div]
69		[div class="tabStyle tabb"]character[/div]
70		[div class="tabStyle tabc"]extra[/div]
71		[div class="goBackMobile"]go[color=transparent]i[/color]back[/div]
72		[/div]
73
74
75		[div class="containerPages pageOne"]
76
77		[div class="basicInfo"]
78		[div class="basicInfoLabel"]name[/div]
79		[div class="basicInfoText"]william shakespeare[/div]
80		[/div]
81
82		[div class="basicInfo"]
83		[div class="basicInfoLabel"]n.name[/div]
84		[div class="basicInfoText"]bill[/div]
85		[/div]
86
87		[div class="basicInfo"]
88		[div class="basicInfoLabel"]age[/div]
89		[div class="basicInfoText"]centuries[/div]
90		[/div]
91
92		[div class="basicInfo"]
93		[div class="basicInfoLabel"]gender[/div]
94		[div class="basicInfoText"]male [/div]
95		[/div]
96
97		[div class="basicInfo"]
98		[div class="basicInfoLabel"]sexuality[/div]
99		[div class="basicInfoText"]dunno[/div]
100		[/div]
101
102		[div class="basicInfo"]
103		[div class="basicInfoLabel"]class[/div]
104		[div class="basicInfoText"]varies[/div]
105		[/div]
106
107		[div class="basicInfo"]
108		[div class="basicInfoLabel"]spare[/div]
109		[div class="basicInfoText"]other info[/div]
110		[/div]
111		[comment]------------------------------------------------------------------ you can add text between this comment and the next div if you rly felt like it ------------------------------------------------------------------[/comment]
112
113
114		[/div]
115
116
117
118		[div class="containerPages pageTwo"]
119
120		[div class="personContainer"]
121
122		[div style="padding:5px"]
123		[div class="basicInfoLabel"]likes[/div]
124		[/div]
125
126		[div class="personFlex"]
127		[div class="personWrap"]
128
129		[div class="likeDislike"]#likes[/div]
130		[div class="likeDislike"]here[/div]
131		[div class="likeDislike"]#at[/div]
132		[div class="likeDislike"]#least[/div]
133		[div class="likeDislike"]#five[/div]
134		[/div]
135		[/div]
136
137
138		[/div]
139
140		[div class="personContainer"]
141
142		[div style="padding:5px"]
143		[div class="basicInfoLabel"]dislikes[/div]
144		[/div]
145
146		[div class="personFlex"]
147		[div class="personWrap"]
148
149		[div class="likeDislike"]#dislikes[/div]
150		[div class="likeDislike"]here[/div]
151		[div class="likeDislike"]#at[/div]
152		[div class="likeDislike"]#least[/div]
153		[div class="likeDislike"]#five[/div]
154		[/div]
155		[/div]
156
157		[/div]
158
159		[div class="personContainer"]
160		[div class="traitLeftContainer"]
161		[div class="traitName"]outgoing[/div]
162		[div class="traitMeterOut"]
163
164		[div class="traitMeter" style="width:95%;"][/div]
165		[/div]
166
167		[div class="traitName"]enthusiastic[/div]
168		[div class="traitMeterOut"]
169		[div class="traitMeter" style="width:50%;"][/div]
170		[/div]
171
172		[div class="traitName"]dedicated[/div]
173		[div class="traitMeterOut"]
174		[div class="traitMeter" style="width:45%;"][/div]
175		[/div]
176
177		[div class="traitName"]truthful[/div]
178		[div class="traitMeterOut"]
179		[div class="traitMeter" style="width:95%;"][/div]
180		[/div]
181
182		[div class="traitName"]observant[/div]
183		[div class="traitMeterOut"]
184		[div class="traitMeter" style="width:5%;"][/div]
185		[/div]
186
187		[div class="traitName"]protective[/div]
188		[div class="traitMeterOut"]
189		[div class="traitMeter" style="width:35%;"][/div]
190		[/div]
191		[/div]
192
193		[div class="traitLeftContainer"]
194
195		[div class="traitName"]forgetful[/div]
196		[div class="traitMeterOut"]
197		[div class="traitMeter" style="width:35%;"][/div]
198		[/div]
199
200		[div class="traitName"]brash[/div]
201		[div class="traitMeterOut"]
202		[div class="traitMeter" style="width:85%;"][/div]
203		[/div]
204
205		[div class="traitName"]incautious[/div]
206		[div class="traitMeterOut"]
207		[div class="traitMeter" style="width:45%;"][/div]
208		[/div]
209
210		[div class="traitName"]manipulative[/div]
211		[div class="traitMeterOut"]
212		[div class="traitMeter" style="width:65%;"][/div]
213		[/div]
214
215		[div class="traitName"]vindictive[/div]
216		[div class="traitMeterOut"]
217		[div class="traitMeter" style="width:58%;"][/div]
218		[/div]
219
220		[div class="traitName"]impatient[/div]
221		[div class="traitMeterOut"]
222		[div class="traitMeter" style="width:75%;"][/div]
223		[/div]
224		[/div]
225
226		[/div]
227
228		[comment]------------------------------------------------------------------ you can add text between this comment and the next div if you rly felt like it ------------------------------------------------------------------[/comment]
229
230		[/div]
231
232		[div class="containerPages pageThree"]
233		[div class="imgContainers"]
234		[div class="imgBox"]
235		[img]https://images2.imgbox.com/33/25/4KGy2SuU_o.jpg[/img]
236		[/div]
237		[div class="imgBox"]
238		[img]https://images2.imgbox.com/8d/60/P0lUnEP7_o.jpg[/img]
239		[/div]
240		[div class="imgBox"]
241		[img]https://images2.imgbox.com/80/f4/GXvJUkTt_o.jpg[/img]
242		[/div]
243		[div class="imgBox"]
244		[img]https://images2.imgbox.com/8f/20/GiHS6BBT_o.png[/img]
245		[/div]
246		[/div]
247
248		[div class="oocBox"]
249		@ooc name
250		[/div]
251
252		[div class="oocInfo"]pronouns, gmt +etc, discord[/div]
253		[/div]
254		[/div]
255		[/div]
256		[/div]
257		[/div]
258		[/div]
259		[/div]
260
261	-	[div style="max-width:500px;margin:auto;width:100%;font-size:8px;text-transform:uppercase;opacity:0.6;text-align:right"]cheers, [url=https://www.rpnation.com/members/lambikins.60401/][color=#D91918]lamb[/color][/url][/div]
261	+	[div style="max-width:500px;margin:auto;width:100%;font-size:8px;text-transform:uppercase;opacity:0.6;text-align:right"]cheers, [url=https://www.rpnation.com/members/lambikins.60401/][color=#D91918]koschei[/color][/url][/div]
262
263
264
265		[comment]--------------------------------------------------- begin classes ---------------------------------------------------[/comment]
266
267		[class name="titleText" minWidth="500px"]
268		font-size:5em;
269		color:var(--accent);
270		transition:1s;
271		[/class]
272
273		[class name="titleText" maxWidth="499px"]
274		font-size:4em;
275		color:var(--accent);
276		transition:1s;
277		[/class]
278
279		[class name="quoteContainer" minWidth="500px"]
280		margin-top:-0.9em;
281		margin-left:3em;
282		background:#fff;
283		color:#555;
284		text-transform:uppercase;
285		position:absolute;
286		z-index:1;
287		letter-spacing:0.5px;
288		padding:5px;
289		[/class]
290
291		[class name="quoteContainer" maxWidth="499px"]
292		margin-top:-0.9em;
293		background:#fff;
294		color:#555;
295		text-transform:uppercase;
296		position:absolute;
297		z-index:1;
298		padding:5px;
299		[/class]
300
301
302		[comment]--------------------------------------------------- large image classes ---------------------------------------------------[/comment]
303
304		[class name="imageHover" minWidth="500px"]
305		width:100%;
306		height:300px;
307		background:url(https://images2.imgbox.com/13/f6/zWjpZqlS_o.jpg);
308		background-position:center;
309		background-size:150%;
310		transition:0.5s ease all;
311		filter:grayscale(100%);
312		overflow:hidden;
313		display:flex;
314		transition-duration:1s;
315		cursor:crosshair;
316		[/class]
317
318		[class name="imageHover" maxWidth="499px"]
319		width:100%;
320		height:300px;
321		background:url(https://images2.imgbox.com/13/f6/zWjpZqlS_o.jpg);
322		background-position:center;
323		background-size:cover;
324		transition:0.5s ease all;
325		filter:grayscale(100%);
326		overflow:hidden;
327		display:flex;
328		transition-duration:1s;
329		cursor:crosshair;
330		[/class]
331
332
333		[class name="goBack" minWidth="500px"]
334		margin-left:calc(50% - 50px);
335		color:#fff;
336		text-transform:uppercase;
337		font-size:10px;
338		margin-top:285px;
339		font-weight:bold;
340		transition:1s;
341		opacity:0;
342		[/class]
343
344		[class name="goBack" maxWidth="499px"]
345		display:none
346		[/class]
347
348		[class name="goBackMobile" minWidth="500px"]
349		display:none
350		[/class]
351
352		[class name="goBackMobile" maxWidth="499px"]
353		color:#555;
354		text-transform:uppercase;
355		font-size:10px;
356		font-weight:bold;
357		transition:1s;
358		opacity:1;
359		padding:5px;
360		cursor:pointer;
361		[/class]
362
363
364		[comment]--------------------------------------------------- text area classes ---------------------------------------------------[/comment]
365
366		[class name="flexright" minWidth="500px"]
367		width:250px;
368		height:100%;
369		transition-duration:1s;
370		margin-left:calc(50% + 10px);
371		[/class]
372
373		[class name="flexright" maxWidth="499px"]
374		width:250px;
375		height:100%;
376		transition-duration:1s;
377		margin-left:100%;
378		[/class]
379
380
381		[class="infobox"]
382		width:250px;
383		height:100%;
384		background:#fff;
385		overflow:hidden;
386		cursor:auto;
387		[/class]
388
389		[comment]--------------------------------------------------- tabbed pages classes ---------------------------------------------------[/comment]
390
391		[comment]---------------------- note: pagecontainer is major container, containerpages is page style ----------------------[/comment]
392
393		[class name="pageContainers"]
394		width:calc(100% - 25px);
395		padding:0px 0px 0px 10px;
396		height:100%;
397		overflow:hidden;
398		[/class]
399
400		[class name="containerPages"]
401		font-size:11px;
402		text-align:justify;
403		color:#555;
404		height:265px;
405		overflow:auto;
406		width:220px;
407		padding-right:17px;
408		padding-left:3px;
409		[/class]
410
411		[class name="tabContainers"]
412		display:flex;
413		margin-bottom:7px;
414		height:22px;
415		[/class]
416
417		[class name="tabStyle"]
418		font-size:10px;
419		text-transform:uppercase;
420		color:#555;
421		font-weight:bold;
422		padding:5px;
423		transition:0.1s;
424		cursor:pointer;
425		[/class]
426
427		[comment]--------------------------------------------------- info label classes ---------------------------------------------------[/comment]
428
429
430		[class name="basicInfo"]
431		padding:6px;
432		border:1px solid #f1f1f1;
433		display:flex;
434		justify-content:space-between;
435		margin-bottom:5px;
436		[/class]
437
438		[class name="basicInfoLabel"]
439		font-size:9.5px;
440		text-transform:uppercase;
441		color:#fff;
442		font-weight:bold;
443		padding:2px 5px 2px 5px;
444		background:var(--accent);
445		[/class]
446
447		[class name="basicInfoText"]
448		font-size:11px;
449		color:#555;
450		[/class]
451
452		[comment]---------------------------------------------- character personality classes ----------------------------------------------l[/comment]
453
454
455		[class name="personContainer"]
456		display:flex;
457		width:100%;
458		font-size:9.5px;
459		margin-top:5px;
460		[/class]
461
462		[class name="personFlex"]
463		width:100px;
464		flex-grow:1;
465		padding:5px;
466		[/class]
467
468		[class name="personWrap"]
469		display:flex;
470		flex-wrap:wrap;
471		width:100%;
472		[/class]
473
474		[class name="traitLeftContainer"]
475		width:calc(50% - 15px);
476		margin:5px;
477		[/class]
478
479		[class name="traitName"]
480		text-transform:uppercase;
481		font-weight:bold;
482		margin-bottom:-5px;
483		color:#000;
484		[/class]
485
486		[class name="traitMeterOut"]
487		border:1px solid var(--accent);
488		width:100%;
489		height:5px;
490		border-radius:5px;
491		padding:1px;
492		margin-bottom:5px;
493		[/class]
494
495		[class name="traitMeter"]
496		background:var(--accent);
497		height:5px;
498		[/class]
499
500		[class name="likeDislike"]
501		background-color:#eeeeee;
502		color:#555;
503		text-transform:uppercase;
504		width:fit-content;
505		padding:2px 5px 2px 5px;
506		border-radius:5px;
507		margin:1px;
508		[/class]
509
510		[comment]---------------------------------------------- extra classes ----------------------------------------------[/comment]
511
512		[class name="imgContainers"]
513		display:flex;
514		width:223px;
515		flex-wrap:wrap;
516		pointer-events:none;
517		justify-content:space-between;
518		[/class]
519
520		[class name="imgBox"]
521		border:5px solid #fff;
522		box-shadow:1px 1px #ddd;
523		width:100px;
524		height:100px;
525		filter:saturate(200%);
526		[/class]
527
528		[class name="oocBox"]
529		width:100%;
530		padding-right:10px;
531		border-top:3px solid var(--accent);
532		margin-top:3px;
533		text-align:right;
534		text-transform:uppercase;
535		color:#555;
536		font-size:15px;
537		font-weight:bold;
538		[/class]
539
540		[class name="oocInfo"]
541		width:100%;
542		text-align:right;
543		[/class]
544
545
546
547		[comment]---------------------------------------------- selection classes ----------------------------------------------[/comment]
548
549		[class name="animate" minWidth="500px"]
550		animation-name:{post_id}imageAnimate;
551		animation-duration: 2s;
552		animation-fill-mode: forwards;
553		[/class]
554
555		[class name="animate" maxWidth="499px"]
556		animation-name:{post_id}mobileAnimate;
557		animation-duration: 2s;
558		animation-fill-mode: forwards;
559		[/class]
560
561		[class name="backAnimate" minWidth="500px"]
562		animation-name:{post_id}postAnimate;
563		animation-duration: 2s;
564		animation-fill-mode: forwards;
565		[/class]
566
567		[class name="backAnimate" maxWidth="499px"]
568		animation-name:{post_id}postMobile;
569		animation-duration: 2s;
570		animation-fill-mode: forwards;
571		[/class]
572
573		[class name="movers" minWidth="500px"]
574		margin-left:calc(0% + 5px);
575		transition-delay:1s;
576		[/class]
577
578		[class name="movers" maxWidth="499px"]
579		margin-left:calc(0% - 10px);
580		transition-delay:1s;
581		[/class]
582
583		[class name="opacityChange"]
584		opacity:1;
585		transition-delay:2s;
586		cursor: pointer;
587		[/class]
588
589
590		[comment]---------------------------------------------- image scripts ----------------------------------------------[/comment]
591
592		[script class="imageHover" on="mouseenter"]
593		addClass animate imageHover
594		removeClass backAnimate imageHover
595		addClass movers flexright
596		addClass opacityChange goBack
597		addClass colorChange majorContainer
598		[/script]
599
600		[script class="goBack" on="click"]
601		removeClass animate imageHover
602		addClass backAnimate imageHover
603		removeClass movers flexright
604		removeClass opacityChange goBack
605		removeClass colorChange majorContainer
606		[/script]
607
608		[script class="goBackMobile" on="click"]
609		removeClass animate imageHover
610		addClass backAnimate imageHover
611		removeClass movers flexright
612		removeClass opacityChange goBack
613		removeClass colorChange majorContainer
614		[/script]
615
616		[comment]---------------------------------------------- tab page scripts ----------------------------------------------[/comment]
617
618		[script class="containerPages"]
619		hide containerPages
620		show pageOne
621		removeClass tabSelect tabStyle
622		addClass tabSelect taba
623		[/script]
624
625		[class name="tabSelect"]
626		border-bottom:2px solid var(--accent);
627		margin-left:0px;
628		[/class]
629
630		[script class="taba" on="click"]
631		hide containerPages
632		show pageOne
633		removeClass tabSelect tabStyle
634		addClass tabSelect taba
635		[/script]
636
637		[script class="tabb" on="click"]
638		hide containerPages
639		show pageTwo
640		removeClass tabSelect tabStyle
641		addClass tabSelect tabb
642		[/script]
643
644		[script class="tabc" on="click"]
645		hide containerPages
646		show pageThree
647		removeClass tabSelect tabStyle
648		addClass tabSelect tabc
649		[/script]
650
651		[comment]---------------------------------------------- animations ----------------------------------------------[/comment]
652
653		[animation=imageAnimate]
654		[keyframe=50]
655		background-size:130%;filter:grayscale(0%);background-position:center;
656		[/keyframe]
657
658		[keyframe=100]
659		background-size:130%;filter:grayscale(0%);background-position:center right;
660		[/keyframe]
661
662		[/animation]
663
664		[animation=postAnimate]
665		[keyframe=0]
666		background-size:130%;filter:grayscale(0%);background-position:center right;
667		[/keyframe]
668
669		[keyframe=50]
670		background-size:130%;filter:grayscale(0%);background-position:center;
671		[/keyframe]
672
673		[keyframe=100]
674		background-size:150%;filter:grayscale(100%);background-position:center;
675		[/keyframe]
676		[/animation]
677
678		[animation=mobileAnimate]
679		[keyframe=50]
680		filter:grayscale(0%);background-position:center;
681		[/keyframe]
682
683		[keyframe=100]
684		filter:grayscale(0%);background-position:center right;
685		[/keyframe]
686
687		[/animation]
688
689		[animation=postMobile]
690		[keyframe=0]
691		filter:grayscale(0%);background-position:center right;
692		[/keyframe]
693
694		[keyframe=50]
695		filter:grayscale(0%);background-position:center;
696		[/keyframe]
697
698		[keyframe=100]
699		filter:grayscale(100%);background-position:center;
700		[/keyframe]
701		[/animation]
702
703
704		[/nobr]