Closed ► sox's laundry hamper [broken af lol] ◄

[sox]

Idky bu t im getting such superhero vibes from your stuff. Anyways they all so gorg imma gorge on em

brb crying like the lil b that i am ;-; ur so sweet

 

[constellation]

absolute love your codes and faceclaim choices ♡
keep doing you !

 

[sox]

absolute love your codes and faceclaim choices ♡
keep doing you !

we’re married now sry i don’t make the rules

 

[constellation]

we’re married now sry i don’t make the rules

i'm rly not complaining

i made room for u in my cage

 

[sox]

TRYHARD - MOBILE FRIENDLY

quick! someone stop her before she exclusively makes placeholder codes that are way too basic to ever use!!!! honestly these lil codes are a good stress reliever between the big heavy cs codes so its all good homie. please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=bkgd] position: relative; box-sizing: border-box; width: 280px; height: 230px; background-color: #A4A579; overflow: hidden; margin-right: auto; margin-left: auto; padding: 0; [/class] [class=title] position: absolute; overflow: visible; width: 229px; height: 20px; left: 45px; top: 6.598px; background-color: #D5C09E; color: #fff; font-size: 14px; line-height: 20px; text-align: right; [/class] [class=back] position: absolute; overflow: visible; width: 135.345px; height: 134.728px; left: 145.713px; top: 100px; transform: rotate(46deg); transform-origin: left; background-color: #10112C; [/class] [class=water] position: absolute; overflow: visible; width: 330px; height: 65px; left: 0px; top: 186px; background-color: #BBC3AE; [/class] [class=right] position: absolute; overflow: visible; width: 183.21px; height: 229.329px; left: 225.151px; top: 70.825px; transform: rotate(30deg); transform-origin: left; background-color: #A24F27; [/class] [class=left] position: absolute; overflow: visible; width: 140.185px; height: 279.577px; left: -90px; top: -8.733px; transform: rotate(-13deg); transform-origin: left; background-color: #3D544A; [/class] [class=moon] position: absolute; overflow: visible; width: 65px; height: 65px; left: 77.874px; top: 57.737px; border-radius: 80px; background-color: #ECDAC4; [/class] [class=moonshadow] position: absolute; overflow: visible; width: 61px; height: 61px; left: 82.737px; top: 56.702px; border-radius: 80px; background-color: #A4A579; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: 8px; text-align: center; font-style: normal; font-weight: normal; font-size: 6px; color: #A4A579; opacity: 0.3; [/class]
[div class=bkgd]
[div class=back][/div]
[div class=water][/div]
[div class=right][/div]
[div class=left][/div]
[div class=title]they call me try-hard.[/div]
[div class=moon][/div]
[div class=moonshadow][/div]
[/div][div class=credit]code by sox [/div]

Spoiler: code

[nobr]
	[class=bkgd]
		position: relative;
		box-sizing: border-box;
		width: 280px;
		height: 230px;
		background-color: #A4A579;
		overflow: hidden;
		margin-right: auto;
                margin-left: auto;
		padding: 0;
	[/class]
	[class=title]
		position: absolute;
		overflow: visible;
		width: 229px;
		height: 20px;
		left: 45px;
		top: 6.598px;
		background-color: #D5C09E;
                color: #fff;
                font-size: 14px;
                line-height: 20px;
                text-align: right;
	[/class]
	[class=back]
		position: absolute;
		overflow: visible;
		width: 135.345px;
		height: 134.728px;
		left: 145.713px;
		top: 100px;
		transform: rotate(46deg);
		transform-origin: left;
		background-color: #10112C;
	[/class]
	[class=water]
		position: absolute;
		overflow: visible;
		width: 330px;
		height: 65px;
		left: 0px;
		top: 186px;
		background-color: #BBC3AE;
	[/class]
	[class=right]
		position: absolute;
		overflow: visible;
		width: 183.21px;
		height: 229.329px;
		left: 225.151px;
		top: 70.825px;
		transform: rotate(30deg);
		transform-origin: left;
		background-color: #A24F27;
	[/class]
	[class=left]
		position: absolute;
		overflow: visible;
		width: 140.185px;
		height: 279.577px;
		left: -90px;
		top: -8.733px;
		transform: rotate(-13deg);
		transform-origin: left;
		background-color: #3D544A;
	[/class]
	[class=moon]
		position: absolute;
		overflow: visible;
		width: 65px;
		height: 65px;
		left: 77.874px;
		top: 57.737px;
		border-radius: 80px;
		background-color: #ECDAC4;
	[/class]
	[class=moonshadow]
		position: absolute;
		overflow: visible;
		width: 61px;
		height: 61px;
		left: 82.737px;
		top: 56.702px;
		border-radius: 80px;
		background-color: #A4A579;
	[/class]
    [class=credit]
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 8px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 6px;
        color: #A4A579;
        opacity: 0.3;
    [/class]
[/nobr]
	[div class=bkgd]
	[div class=back][/div]
	[div class=water][/div]
	[div class=right][/div]
	[div class=left][/div]
	[div class=title][font=Ubuntu Mono]they call me try-hard.[/font][/div]
	[div class=moon][/div]
	[div class=moonshadow][/div]
[/div][div class=credit]code by [USER=2383][COLOR=#A4A579]sox[/COLOR][/USER][/div]

 

[sox]

PARALLEL - MOBILE FRIENDLY

when she finally makes a mobile friendly cs and its UGLEE lmao here have this voter registration lookin code and go ham. i like it, but ive stared it long enough that i actually don't like it lolll please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=bkgd] position: relative; box-sizing: border-box; width: 400px; height: 435px; background-color: #0B1A2D; overflow: hidden; margin-right: auto; margin-left: auto; padding: 0; border: 2px solid #fff; [/class] [class=header] position: absolute; overflow: hidden; width: 400px; height: 160px; left: 0px; top: 0px; background: url(https://image.freepik.com/free-vector/colorful-tropical-flowers-leaves-background_52683-13862.jpg); background-size: 100%; [/class] [class=name] position: absolute; overflow: visible; width: 225px; height: 50px; left: 88px; top: 55px; background-color: #0B1A2D; border: 2px solid #fff; color: #fff; font-size: 12px; line-height: 50px; text-align: center; text-transform: uppercase; letter-spacing: 5px; [/class] [class=one] position: absolute; overflow: visible; width: 102px; height: 25px; left: -2px; top: 160px; background-color: #DD3A6F; border: 2px solid #fff; font-size: 11px; text-align: center; text-transform: uppercase; line-height: 25px; font-weight: 700; color: #fff; [/class] [class=two] position: absolute; overflow: visible; width: 100px; height: 25px; left: 100px; top: 160px; background-color: #00A2F1; border: 2px solid #fff; font-size: 11px; text-align: center; text-transform: uppercase; line-height: 25px; font-weight: 700; color: #fff; [/class] [class=three] position: absolute; overflow: visible; width: 100px; height: 25px; left: 200px; top: 160px; background-color: #FAB36B; border: 2px solid #fff; font-size: 11px; text-align: center; text-transform: uppercase; line-height: 25px; font-weight: 700; color: #fff; [/class] [class=four] position: absolute; overflow: visible; width: 100px; height: 25px; left: 300px; top: 160px; background-color: #000F70; border: 2px solid #fff; font-size: 11px; text-align: center; text-transform: uppercase; line-height: 25px; font-weight: 700; color: #fff; [/class] [class=pic1] position: absolute; overflow: visible; width: 124px; height: 200px; left: 251px; top: 210px; background: url(https://imgur.com/mNW4x6B.png); background-size: 120%; border: 2px solid #fff; [/class] [class=pic2] position: absolute; overflow: visible; width: 124px; height: 200px; left: 251px; top: 210px; background: url(https://i.pinimg.com/564x/d7/6a/57/d76a578ebdafa8a39bf5982084a924dc.jpg); background-size: 100%; border: 2px solid #fff; [/class] [class=pic3] position: absolute; overflow: visible; width: 124px; height: 200px; left: 251px; top: 210px; background: url(https://i.pinimg.com/564x/a2/af/21/a2af2160eafad56e8c5a14281b82baba.jpg); background-size: 120%; border: 2px solid #fff; [/class] [class=pic4] position: absolute; overflow: visible; width: 124px; height: 200px; left: 251px; top: 210px; background: url(https://imgur.com/65RVMM1.png); background-size: 120%; border: 2px solid #fff; [/class] [class=text] position: relative; overflow: auto; width: 210px; height: 185px; color: #fff; font-size: 10px; line-height: 12px; text-align: justify; padding: 5px 30px 5px 15px; background-color: #0B1A2D; text-transform: lowercase; [/class] [class=textcontainer] position: absolute; overflow: hidden; width: 250px; height: 200px; left: 15px; top: 210px; border: 2px solid #fff; [/class] [class=tag] position: relative; overflow: visible; display: inline; width: auto; height: auto; border: 1px solid #fff; font-size: 9px; text-align: center; margin-right: 3px; padding-left: 5px; padding-right: 5px; text-transform: uppercase; color: #fff; font-weight: 700; [/class] [class=pink] background-color: #DD3A6F; [/class] [class=cyan] background-color: #00A2F1; [/class] [class=yellow] background-color: #FAB36B; [/class] [class=navy] background-color: #000F70; [/class] [class=tab] position: absolute; overflow: visible; [/class] [class name=tab state=hover] background-color: #fff; color: #0B1A2D; transition-duration: 0.3s; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} basics) (fadeIn 600 tabsContentBasics) if (eq ${currentTab} persona) (fadeIn 600 tabsContentPersona) if (eq ${currentTab} background) (fadeIn 600 tabsContentBackground) if (eq ${currentTab} other) (fadeIn 600 tabsContentOther) [/script] [class=credit] position: relative; overflow: hidden; width: 100%; height: 10px; text-align: center; font-style: normal; font-weight: normal; font-size: 8px; color: #00A2F1; opacity: 0.3; [/class]
[div class=bkgd]
[div class=header][/div]
[div class=name]parallel[/div]
[div class="tab one"]basics[/div]
[div class="tab two"]persona[/div]
[div class="tab three"]background[/div]
[div class="tab four"]other[/div]
[div class="tabsContent tabsContentBasics"]
[div class=textcontainer][div class=text][div class="tag pink"]name[/div]it’s not unfamiliar

[div class="tag pink"]nickname[/div]your deep eyes

[div class="tag pink"]age[/div]this parallel feeling

[div class="tag pink"]gender[/div]can you see?

[div class="tag pink"]sexuality[/div]past the stairs of time

[div class="tag pink"]role[/div]i came to you like this

[div class="tag pink"]faceclaim[/div]it's the same but different

[div class="tag pink"]height[/div]jumping over the black wall

[div class="tag pink"]weight[/div]behind the curtains

[div class="tag pink"]hair color[/div]the movie is starting again

[div class="tag pink"]eye color[/div]with your hand in mine

[div class="tag pink"]unique marks[/div]i chose an ending that wasn't you

[div class="tag pink"]body mods[/div]you know what i mean
[/div][/div][div class=pic1][/div][/div]

[div class="tabsContent tabsContentPersona" style="display: none;"]
[div class=textcontainer][div class=text][div class="tag cyan"]vices[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. A condimentum vitae sapien pellentesque habitant morbi tristique. Sit amet justo donec enim. Eleifend mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Varius vel pharetra vel turpis nunc eget lorem. In massa tempor nec feugiat nisl pretium fusce id. Orci eu lobortis elementum nibh tellus molestie. In mollis nunc sed id semper risus in. Aliquam sem et tortor consequat id porta nibh venenatis. Facilisis gravida neque convallis a cras semper auctor neque vitae.

[div class="tag cyan"]virtues[/div]Fermentum leo vel orci porta non pulvinar neque laoreet. Facilisis sed odio morbi quis commodo. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Quis risus sed vulputate odio ut enim blandit volutpat. Urna nunc id cursus metus aliquam eleifend mi. Pellentesque adipiscing commodo elit at. Sagittis orci a scelerisque purus semper eget. Venenatis lectus magna fringilla urna porttitor. Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique. Ipsum dolor sit amet consectetur adipiscing elit ut. Mauris in aliquam sem fringilla ut morbi. Eget gravida cum sociis natoque penatibus. Ullamcorper sit amet risus nullam eget.

[div class="tag cyan"]strengths[/div]Quam quisque id diam vel quam elementum pulvinar etiam. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies. Nam libero justo laoreet sit amet cursus sit. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Mus mauris vitae ultricies leo integer malesuada nunc vel. Dignissim diam quis enim lobortis scelerisque fermentum. Eu sem integer vitae justo eget magna fermentum iaculis eu. Integer feugiat scelerisque varius morbi enim nunc faucibus. Consectetur lorem donec massa sapien faucibus et.

[div class="tag cyan"]weaknesses[/div]Ut porttitor leo a diam. Mauris in aliquam sem fringilla ut morbi tincidunt. Sollicitudin nibh sit amet commodo nulla. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Ac tortor dignissim convallis aenean et tortor at. Nec feugiat in fermentum posuere urna. Nibh nisl condimentum id venenatis a condimentum vitae. Scelerisque varius morbi enim nunc faucibus a pellentesque. Ligula ullamcorper malesuada proin libero. Vitae semper quis lectus nulla. Parturient montes nascetur ridiculus mus mauris vitae ultricies. Laoreet id donec ultrices tincidunt arcu. Suspendisse potenti nullam ac tortor. Massa vitae tortor condimentum lacinia quis vel eros donec. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Eget mi proin sed libero enim sed faucibus turpis in. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Etiam sit amet nisl purus in mollis nunc. Libero volutpat sed cras ornare arcu dui vivamus arcu.

[div class="tag cyan"]fears[/div]Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Phasellus egestas tellus rutrum tellus. Erat imperdiet sed euismod nisi porta lorem. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Bibendum enim facilisis gravida neque convallis a cras. Vulputate odio ut enim blandit volutpat maecenas volutpat. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Ac odio tempor orci dapibus ultrices in iaculis nunc. Nulla facilisi etiam dignissim diam quis enim.

[div class="tag cyan"]ambitions[/div]Duis at consectetur lorem donec. Elementum nisi quis eleifend quam adipiscing vitae proin. Facilisis sed odio morbi quis commodo odio aenean sed. Eget nullam non nisi est. Laoreet id donec ultrices tincidunt. Consequat semper viverra nam libero justo laoreet. Et tortor consequat id porta. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Morbi tristique senectus et netus et malesuada fames. Aenean et tortor at risus viverra adipiscing at in. At erat pellentesque adipiscing commodo elit. Venenatis tellus in metus vulputate eu scelerisque.

[div class="tag cyan"]habits[/div]Penatibus et magnis dis parturient montes nascetur ridiculus. Praesent tristique magna sit amet purus gravida quis blandit. Faucibus scelerisque eleifend donec pretium vulputate sapien. Lectus sit amet est placerat in egestas erat imperdiet. Eu non diam phasellus vestibulum lorem sed risus. Eu sem integer vitae justo eget. Elit ut aliquam purus sit amet luctus venenatis. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Ridiculus mus mauris vitae ultricies leo integer malesuada. Faucibus purus in massa tempor nec feugiat nisl pretium. Fermentum leo vel orci porta non pulvinar. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Tincidunt augue interdum velit euismod in pellentesque. Tellus pellentesque eu tincidunt tortor aliquam nulla. Ac turpis egestas maecenas pharetra convallis posuere. Lectus quam id leo in vitae turpis massa sed elementum. Volutpat est velit egestas dui id ornare arcu.

[div class="tag cyan"]quirks[/div]Id aliquet risus feugiat in. Nullam non nisi est sit amet facilisis magna etiam. Nisl pretium fusce id velit. At auctor urna nunc id cursus metus aliquam. Quisque non tellus orci ac auctor augue mauris augue. Elementum pulvinar etiam non quam lacus. Accumsan lacus vel facilisis volutpat. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id interdum velit laoreet id. Ultricies tristique nulla aliquet enim tortor at auctor urna. Blandit libero volutpat sed cras ornare. Sapien faucibus et molestie ac feugiat. Laoreet non curabitur gravida arcu ac. Id diam vel quam elementum pulvinar etiam.

[div class="tag cyan"]likes[/div]Non odio euismod lacinia at quis risus sed vulputate. Augue ut lectus arcu bibendum at varius vel. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Eget nullam non nisi est. Ullamcorper sit amet risus nullam eget. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec. Semper viverra nam libero justo laoreet. Non blandit massa enim nec dui nunc mattis enim. Semper eget duis at tellus at urna condimentum. Dictumst quisque sagittis purus sit amet volutpat consequat. Cursus sit amet dictum sit amet. Semper quis lectus nulla at volutpat diam ut venenatis. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Molestie at elementum eu facilisis. Pulvinar pellentesque habitant morbi tristique. Consequat id porta nibh venenatis cras sed felis. Lacus laoreet non curabitur gravida arcu ac tortor. Fermentum iaculis eu non diam phasellus.

[div class="tag cyan"]dislikes[/div]Sagittis orci a scelerisque purus semper eget duis. Velit sed ullamcorper morbi tincidunt. Netus et malesuada fames ac. Sed blandit libero volutpat sed cras ornare arcu dui. Vulputate enim nulla aliquet porttitor. Pellentesque id nibh tortor id aliquet lectus proin nibh. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Tempor orci dapibus ultrices in. Malesuada bibendum arcu vitae elementum. Sit amet mattis vulputate enim.
[/div][/div][div class=pic2][/div][/div]

[div class="tabsContent tabsContentBackground" style="display: none;"]
[div class=textcontainer][div class=text][div class="tag yellow"]family[/div]but still, it's you

[div class="tag yellow"]occupation[/div]i can't let you go

[div class="tag yellow"]education[/div]so i'm gonna travel through time and space

[div class="tag yellow"]residence[/div]so i can go to you again

[div class="tag yellow"]history[/div]Orci ac auctor augue mauris augue neque gravida in fermentum. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Suspendisse sed nisi lacus sed. Semper risus in hendrerit gravida rutrum quisque. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Egestas dui id ornare arcu. Maecenas sed enim ut sem viverra. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Quis vel eros donec ac odio tempor orci dapibus ultrices. Leo a diam sollicitudin tempor id eu. Scelerisque purus semper eget duis at tellus. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Non arcu risus quis varius.

Eros in cursus turpis massa tincidunt dui ut. Vitae turpis massa sed elementum tempus egestas sed. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Posuere morbi leo urna molestie. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Vel pretium lectus quam id leo in vitae turpis massa. Tellus cras adipiscing enim eu turpis egestas pretium aenean. Et tortor consequat id porta nibh venenatis. Pellentesque adipiscing commodo elit at imperdiet dui. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Adipiscing commodo elit at imperdiet dui accumsan sit. Enim ut tellus elementum sagittis vitae. Diam in arcu cursus euismod quis viverra nibh cras. Vulputate dignissim suspendisse in est ante in nibh mauris. Pellentesque elit eget gravida cum sociis natoque penatibus.
[/div][/div][div class=pic3][/div][/div]

[div class="tabsContent tabsContentOther" style="display: none;"][div class=pic4][/div]
[div class=textcontainer][div class=text][div class="tag navy"]theme song[/div]parallel by vixx

[div class="tag navy"]favorite food[/div]bang bang shrimp

[div class="tag navy"]favorite drink[/div]shirley temples

[div class="tag navy"]favorite book[/div]the art of racing in the rain

[div class="tag navy"]favorite movie[/div]avengers: endgame

[div class="tag navy"]favorite color[/div]neon blue

[div class="tag navy"]relationships[/div] - one
- two
- three
- four
- five
- six

[div class="tag navy"]gallery[/div]

[/div][/div][div class=pic4][/div][/div]
[/div][div class=credit]code by sox [/div]

Spoiler: code

[nobr]
	[class=bkgd]
		position: relative;
		box-sizing: border-box;
		width: 400px;
		height: 435px;
		background-color: #0B1A2D;
		overflow: hidden;
		margin-right: auto;
		margin-left: auto;
		padding: 0;
		border: 2px solid #fff;
	[/class]
	[class=header]
		position: absolute;
		overflow: hidden;
		width: 400px;
		height: 160px;
		left: 0px;
		top: 0px;
		background: url(https://image.freepik.com/free-vector/colorful-tropical-flowers-leaves-background_52683-13862.jpg);
		background-size: 100%;
	[/class]
	[class=name]
		position: absolute;
		overflow: visible;
		width: 225px;
		height: 50px;
		left: 88px;
		top: 55px;
		background-color: #0B1A2D;
		border: 2px solid #fff;
		color: #fff;
		font-size: 12px;
		line-height: 50px;
		text-align: center;
                text-transform: uppercase;
                letter-spacing: 5px;
	[/class]
	[class=one]
		position: absolute;
		overflow: visible;
		width: 102px;
		height: 25px;
		left: -2px;
		top: 160px;
		background-color: #DD3A6F;
		border: 2px solid #fff;
                font-size: 11px;
                text-align: center;
                text-transform: uppercase;
                line-height: 25px;
                font-weight: 700;
                color: #fff;
	[/class]
	[class=two]
		position: absolute;
		overflow: visible;
		width: 100px;
		height: 25px;
		left: 100px;
		top: 160px;
		background-color: #00A2F1;
		border: 2px solid #fff;
                font-size: 11px;
                text-align: center;
                text-transform: uppercase;
                line-height: 25px;
                font-weight: 700;
                color: #fff;
	[/class]
	[class=three]
		position: absolute;
		overflow: visible;
		width: 100px;
		height: 25px;
		left: 200px;
		top: 160px;
		background-color: #FAB36B;
		border: 2px solid #fff;
                font-size: 11px;
                text-align: center;
                text-transform: uppercase;
                line-height: 25px;
                font-weight: 700;
                color: #fff;
	[/class]
	[class=four]
		position: absolute;
		overflow: visible;
		width: 100px;
		height: 25px;
		left: 300px;
		top: 160px;
		background-color: #000F70;
		border: 2px solid #fff;
                font-size: 11px;
                text-align: center;
                text-transform: uppercase;
                line-height: 25px;
                font-weight: 700;
                color: #fff;
	[/class]
	[class=pic1]
		position: absolute;
		overflow: visible;
		width: 124px;
		height: 200px;
		left: 251px;
		top: 210px;
		background: url(https://imgur.com/mNW4x6B.png);
		background-size: 120%;
		border: 2px solid #fff;
	[/class]
	[class=pic2]
		position: absolute;
		overflow: visible;
		width: 124px;
		height: 200px;
		left: 251px;
		top: 210px;
		background: url(https://i.pinimg.com/564x/d7/6a/57/d76a578ebdafa8a39bf5982084a924dc.jpg);
		background-size: 100%;
		border: 2px solid #fff;
	[/class]
	[class=pic3]
		position: absolute;
		overflow: visible;
		width: 124px;
		height: 200px;
		left: 251px;
		top: 210px;
		background: url(https://i.pinimg.com/564x/a2/af/21/a2af2160eafad56e8c5a14281b82baba.jpg);
		background-size: 120%;
		border: 2px solid #fff;
	[/class]
	[class=pic4]
		position: absolute;
		overflow: visible;
		width: 124px;
		height: 200px;
		left: 251px;
		top: 210px;
		background: url(https://imgur.com/65RVMM1.png);
		background-size: 120%;
		border: 2px solid #fff;
	[/class]
	[class=text]
		position: relative;
		overflow: auto;
		width: 210px;
		height: 185px;
		color: #fff;
		font-size: 10px;
		line-height: 12px;
		text-align: justify;
		padding: 5px 30px 5px 15px;
                background-color: #0B1A2D;
                text-transform: lowercase;
	[/class]
	[class=textcontainer]
		position: absolute;
		overflow: hidden;
		width: 250px;
		height: 200px;
		left: 15px;
		top: 210px;
		border: 2px solid #fff;
	[/class]
	[class=tag]
                position: relative;
                overflow: visible;
                display: inline;
                width: auto;
                height: auto;
		border: 1px solid #fff;
		font-size: 9px;
		text-align: center;
		margin-right: 3px;
		padding-left: 5px;
		padding-right: 5px;
		text-transform: uppercase;
                color: #fff;
                font-weight: 700;
	[/class]
	[class=pink]
		background-color: #DD3A6F;
	[/class]
	[class=cyan]
		background-color: #00A2F1;
	[/class]
	[class=yellow]
		background-color: #FAB36B;
	[/class]
	[class=navy]
		background-color: #000F70;
	[/class]
    [class=tab]
        position: absolute;
        overflow: visible;
    [/class]
    [class name=tab state=hover]
        background-color: #fff;
        color: #0B1A2D;
        transition-duration: 0.3s;
    [/class]
    [script class=tab on=click]
                hide tabsContent
                set currentTab (getText)
                if (eq ${currentTab} basics) (fadeIn 600 tabsContentBasics)
                if (eq ${currentTab} persona) (fadeIn 600 tabsContentPersona)
                if (eq ${currentTab} background) (fadeIn 600 tabsContentBackground)
                if (eq ${currentTab} other) (fadeIn 600 tabsContentOther)
    [/script]
    [class=credit]
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 10px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 8px;
        color: #00A2F1;
        opacity: 0.3;
    [/class]
[/nobr]
	[div class=bkgd]
	[div class=header][/div]
	[div class=name]parallel[/div]
	[div class="tab one"]basics[/div]
	[div class="tab two"]persona[/div]
	[div class="tab three"]background[/div]
	[div class="tab four"]other[/div]
	[div class="tabsContent tabsContentBasics"]
	[div class=textcontainer][div class=text][div class="tag pink"]name[/div]it’s not unfamiliar

	[div class="tag pink"]nickname[/div]your deep eyes

	[div class="tag pink"]age[/div]this parallel feeling

	[div class="tag pink"]gender[/div]can you see?

	[div class="tag pink"]sexuality[/div]past the stairs of time

	[div class="tag pink"]role[/div]i came to you like this

	[div class="tag pink"]faceclaim[/div]it's the same but different

	[div class="tag pink"]height[/div]jumping over the black wall

	[div class="tag pink"]weight[/div]behind the curtains

	[div class="tag pink"]hair color[/div]the movie is starting again

	[div class="tag pink"]eye color[/div]with your hand in mine

	[div class="tag pink"]unique marks[/div]i chose an ending that wasn't you

	[div class="tag pink"]body mods[/div]you know what i mean
[/div][/div][div class=pic1][/div][/div]

	[div class="tabsContent tabsContentPersona" style="display: none;"]
	[div class=textcontainer][div class=text][div class="tag cyan"]vices[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. A condimentum vitae sapien pellentesque habitant morbi tristique. Sit amet justo donec enim. Eleifend mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Varius vel pharetra vel turpis nunc eget lorem. In massa tempor nec feugiat nisl pretium fusce id. Orci eu lobortis elementum nibh tellus molestie. In mollis nunc sed id semper risus in. Aliquam sem et tortor consequat id porta nibh venenatis. Facilisis gravida neque convallis a cras semper auctor neque vitae.

	[div class="tag cyan"]virtues[/div]Fermentum leo vel orci porta non pulvinar neque laoreet. Facilisis sed odio morbi quis commodo. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Quis risus sed vulputate odio ut enim blandit volutpat. Urna nunc id cursus metus aliquam eleifend mi. Pellentesque adipiscing commodo elit at. Sagittis orci a scelerisque purus semper eget. Venenatis lectus magna fringilla urna porttitor. Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique. Ipsum dolor sit amet consectetur adipiscing elit ut. Mauris in aliquam sem fringilla ut morbi. Eget gravida cum sociis natoque penatibus. Ullamcorper sit amet risus nullam eget.

	[div class="tag cyan"]strengths[/div]Quam quisque id diam vel quam elementum pulvinar etiam. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies. Nam libero justo laoreet sit amet cursus sit. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Mus mauris vitae ultricies leo integer malesuada nunc vel. Dignissim diam quis enim lobortis scelerisque fermentum. Eu sem integer vitae justo eget magna fermentum iaculis eu. Integer feugiat scelerisque varius morbi enim nunc faucibus. Consectetur lorem donec massa sapien faucibus et.

	[div class="tag cyan"]weaknesses[/div]Ut porttitor leo a diam. Mauris in aliquam sem fringilla ut morbi tincidunt. Sollicitudin nibh sit amet commodo nulla. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Ac tortor dignissim convallis aenean et tortor at. Nec feugiat in fermentum posuere urna. Nibh nisl condimentum id venenatis a condimentum vitae. Scelerisque varius morbi enim nunc faucibus a pellentesque. Ligula ullamcorper malesuada proin libero. Vitae semper quis lectus nulla. Parturient montes nascetur ridiculus mus mauris vitae ultricies. Laoreet id donec ultrices tincidunt arcu. Suspendisse potenti nullam ac tortor. Massa vitae tortor condimentum lacinia quis vel eros donec. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Eget mi proin sed libero enim sed faucibus turpis in. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Etiam sit amet nisl purus in mollis nunc. Libero volutpat sed cras ornare arcu dui vivamus arcu.

	[div class="tag cyan"]fears[/div]Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Phasellus egestas tellus rutrum tellus. Erat imperdiet sed euismod nisi porta lorem. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Bibendum enim facilisis gravida neque convallis a cras. Vulputate odio ut enim blandit volutpat maecenas volutpat. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Ac odio tempor orci dapibus ultrices in iaculis nunc. Nulla facilisi etiam dignissim diam quis enim.

	[div class="tag cyan"]ambitions[/div]Duis at consectetur lorem donec. Elementum nisi quis eleifend quam adipiscing vitae proin. Facilisis sed odio morbi quis commodo odio aenean sed. Eget nullam non nisi est. Laoreet id donec ultrices tincidunt. Consequat semper viverra nam libero justo laoreet. Et tortor consequat id porta. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Morbi tristique senectus et netus et malesuada fames. Aenean et tortor at risus viverra adipiscing at in. At erat pellentesque adipiscing commodo elit. Venenatis tellus in metus vulputate eu scelerisque.

	[div class="tag cyan"]habits[/div]Penatibus et magnis dis parturient montes nascetur ridiculus. Praesent tristique magna sit amet purus gravida quis blandit. Faucibus scelerisque eleifend donec pretium vulputate sapien. Lectus sit amet est placerat in egestas erat imperdiet. Eu non diam phasellus vestibulum lorem sed risus. Eu sem integer vitae justo eget. Elit ut aliquam purus sit amet luctus venenatis. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Ridiculus mus mauris vitae ultricies leo integer malesuada. Faucibus purus in massa tempor nec feugiat nisl pretium. Fermentum leo vel orci porta non pulvinar. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Tincidunt augue interdum velit euismod in pellentesque. Tellus pellentesque eu tincidunt tortor aliquam nulla. Ac turpis egestas maecenas pharetra convallis posuere. Lectus quam id leo in vitae turpis massa sed elementum. Volutpat est velit egestas dui id ornare arcu.

	[div class="tag cyan"]quirks[/div]Id aliquet risus feugiat in. Nullam non nisi est sit amet facilisis magna etiam. Nisl pretium fusce id velit. At auctor urna nunc id cursus metus aliquam. Quisque non tellus orci ac auctor augue mauris augue. Elementum pulvinar etiam non quam lacus. Accumsan lacus vel facilisis volutpat. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id interdum velit laoreet id. Ultricies tristique nulla aliquet enim tortor at auctor urna. Blandit libero volutpat sed cras ornare. Sapien faucibus et molestie ac feugiat. Laoreet non curabitur gravida arcu ac. Id diam vel quam elementum pulvinar etiam.

	[div class="tag cyan"]likes[/div]Non odio euismod lacinia at quis risus sed vulputate. Augue ut lectus arcu bibendum at varius vel. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Eget nullam non nisi est. Ullamcorper sit amet risus nullam eget. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec. Semper viverra nam libero justo laoreet. Non blandit massa enim nec dui nunc mattis enim. Semper eget duis at tellus at urna condimentum. Dictumst quisque sagittis purus sit amet volutpat consequat. Cursus sit amet dictum sit amet. Semper quis lectus nulla at volutpat diam ut venenatis. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Molestie at elementum eu facilisis. Pulvinar pellentesque habitant morbi tristique. Consequat id porta nibh venenatis cras sed felis. Lacus laoreet non curabitur gravida arcu ac tortor. Fermentum iaculis eu non diam phasellus.

	[div class="tag cyan"]dislikes[/div]Sagittis orci a scelerisque purus semper eget duis. Velit sed ullamcorper morbi tincidunt. Netus et malesuada fames ac. Sed blandit libero volutpat sed cras ornare arcu dui. Vulputate enim nulla aliquet porttitor. Pellentesque id nibh tortor id aliquet lectus proin nibh. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Tempor orci dapibus ultrices in. Malesuada bibendum arcu vitae elementum. Sit amet mattis vulputate enim.
[/div][/div][div class=pic2][/div][/div]

	[div class="tabsContent tabsContentBackground" style="display: none;"]
	[div class=textcontainer][div class=text][div class="tag yellow"]family[/div]but still, it's you

	[div class="tag yellow"]occupation[/div]i can't let you go

	[div class="tag yellow"]education[/div]so i'm gonna travel through time and space

	[div class="tag yellow"]residence[/div]so i can go to you again

	[div class="tag yellow"]history[/div]Orci ac auctor augue mauris augue neque gravida in fermentum. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Suspendisse sed nisi lacus sed. Semper risus in hendrerit gravida rutrum quisque. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Egestas dui id ornare arcu. Maecenas sed enim ut sem viverra. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Quis vel eros donec ac odio tempor orci dapibus ultrices. Leo a diam sollicitudin tempor id eu. Scelerisque purus semper eget duis at tellus. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Non arcu risus quis varius.

Eros in cursus turpis massa tincidunt dui ut. Vitae turpis massa sed elementum tempus egestas sed. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Posuere morbi leo urna molestie. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Vel pretium lectus quam id leo in vitae turpis massa. Tellus cras adipiscing enim eu turpis egestas pretium aenean. Et tortor consequat id porta nibh venenatis. Pellentesque adipiscing commodo elit at imperdiet dui. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Adipiscing commodo elit at imperdiet dui accumsan sit. Enim ut tellus elementum sagittis vitae. Diam in arcu cursus euismod quis viverra nibh cras. Vulputate dignissim suspendisse in est ante in nibh mauris. Pellentesque elit eget gravida cum sociis natoque penatibus.
[/div][/div][div class=pic3][/div][/div]

	[div class="tabsContent tabsContentOther" style="display: none;"][div class=pic4][/div]
	[div class=textcontainer][div class=text][div class="tag navy"]theme song[/div]parallel by vixx

        [div class="tag navy"]favorite food[/div]bang bang shrimp

        [div class="tag navy"]favorite drink[/div]shirley temples

        [div class="tag navy"]favorite book[/div]the art of racing in the rain

        [div class="tag navy"]favorite movie[/div]avengers: endgame

        [div class="tag navy"]favorite color[/div]neon blue

        [div class="tag navy"]relationships[/div] - one
- two
- three
- four
- five
- six 

	[div class="tag navy"]gallery[/div][IMG]https://i.pinimg.com/564x/8c/ae/ed/8caeed81c89ae42b1ed9d6a240973adc.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/46/d8/d0/46d8d03ee65a3a271f87eb6b8be1302a.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/b2/ac/b0/b2acb08bc3f7e016fca0bd2156668fa7.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/2a/72/68/2a726861dbb55f02b1e6a53197f8e46c.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/a5/d1/2e/a5d12ebc50c3ec62f0a129f9130c7088.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/5c/ec/92/5cec92fbcbda4f71e5d7cba0d5140c34.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/8b/18/e8/8b18e8ef402e3b43bb9275f4c3a163db.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/a4/1c/55/a41c550030e5ec0119e1cd46ba7ac625.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/e5/f7/e4/e5f7e424fab5156a638b2e9fe13248cd.jpg[/IMG]
[/div][/div][div class=pic4][/div][/div]
[/div][div class=credit]code by [USER=2383][COLOR=#00A2F1]sox[/COLOR][/USER][/div]

 

[nios]

They... They just keep getting better and better! I can't handle this much power!!!

 

[sox]

They... They just keep getting better and better! I can't handle this much power!!!

i will cry ON YOUR SHOES dude thank u so much

 

[Fanaa]

PARALLEL - MOBILE FRIENDLY

when she finally makes a mobile friendly cs and its UGLEE lmao here have this voter registration lookin code and go ham. i like it, but ive stared it long enough that i actually don't like it lolll please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=bkgd] position: relative; box-sizing: border-box; width: 400px; height: 435px; background-color: #0B1A2D; overflow: hidden; margin-right: auto; margin-left: auto; padding: 0; border: 2px solid #fff; [/class] [class=header] position: absolute; overflow: hidden; width: 400px; height: 160px; left: 0px; top: 0px; background: url(https://image.freepik.com/free-vector/colorful-tropical-flowers-leaves-background_52683-13862.jpg); background-size: 100%; [/class] [class=name] position: absolute; overflow: visible; width: 225px; height: 50px; left: 88px; top: 55px; background-color: #0B1A2D; border: 2px solid #fff; color: #fff; font-size: 12px; line-height: 50px; text-align: center; text-transform: uppercase; letter-spacing: 5px; [/class] [class=one] position: absolute; overflow: visible; width: 102px; height: 25px; left: -2px; top: 160px; background-color: #DD3A6F; border: 2px solid #fff; font-size: 11px; text-align: center; text-transform: uppercase; line-height: 25px; font-weight: 700; color: #fff; [/class] [class=two] position: absolute; overflow: visible; width: 100px; height: 25px; left: 100px; top: 160px; background-color: #00A2F1; border: 2px solid #fff; font-size: 11px; text-align: center; text-transform: uppercase; line-height: 25px; font-weight: 700; color: #fff; [/class] [class=three] position: absolute; overflow: visible; width: 100px; height: 25px; left: 200px; top: 160px; background-color: #FAB36B; border: 2px solid #fff; font-size: 11px; text-align: center; text-transform: uppercase; line-height: 25px; font-weight: 700; color: #fff; [/class] [class=four] position: absolute; overflow: visible; width: 100px; height: 25px; left: 300px; top: 160px; background-color: #000F70; border: 2px solid #fff; font-size: 11px; text-align: center; text-transform: uppercase; line-height: 25px; font-weight: 700; color: #fff; [/class] [class=pic1] position: absolute; overflow: visible; width: 124px; height: 200px; left: 251px; top: 210px; background: url(https://imgur.com/mNW4x6B.png); background-size: 120%; border: 2px solid #fff; [/class] [class=pic2] position: absolute; overflow: visible; width: 124px; height: 200px; left: 251px; top: 210px; background: url(https://i.pinimg.com/564x/d7/6a/57/d76a578ebdafa8a39bf5982084a924dc.jpg); background-size: 100%; border: 2px solid #fff; [/class] [class=pic3] position: absolute; overflow: visible; width: 124px; height: 200px; left: 251px; top: 210px; background: url(https://i.pinimg.com/564x/a2/af/21/a2af2160eafad56e8c5a14281b82baba.jpg); background-size: 120%; border: 2px solid #fff; [/class] [class=pic4] position: absolute; overflow: visible; width: 124px; height: 200px; left: 251px; top: 210px; background: url(https://imgur.com/65RVMM1.png); background-size: 120%; border: 2px solid #fff; [/class] [class=text] position: relative; overflow: auto; width: 210px; height: 185px; color: #fff; font-size: 10px; line-height: 12px; text-align: justify; padding: 5px 30px 5px 15px; background-color: #0B1A2D; text-transform: lowercase; [/class] [class=textcontainer] position: absolute; overflow: hidden; width: 250px; height: 200px; left: 15px; top: 210px; border: 2px solid #fff; [/class] [class=tag] position: relative; overflow: visible; display: inline; width: auto; height: auto; border: 1px solid #fff; font-size: 9px; text-align: center; margin-right: 3px; padding-left: 5px; padding-right: 5px; text-transform: uppercase; color: #fff; font-weight: 700; [/class] [class=pink] background-color: #DD3A6F; [/class] [class=cyan] background-color: #00A2F1; [/class] [class=yellow] background-color: #FAB36B; [/class] [class=navy] background-color: #000F70; [/class] [class=tab] position: absolute; overflow: visible; [/class] [class name=tab state=hover] background-color: #fff; color: #0B1A2D; transition-duration: 0.3s; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} basics) (fadeIn 600 tabsContentBasics) if (eq ${currentTab} persona) (fadeIn 600 tabsContentPersona) if (eq ${currentTab} background) (fadeIn 600 tabsContentBackground) if (eq ${currentTab} other) (fadeIn 600 tabsContentOther) [/script] [class=credit] position: relative; overflow: hidden; width: 100%; height: 10px; text-align: center; font-style: normal; font-weight: normal; font-size: 8px; color: #00A2F1; opacity: 0.3; [/class]
[div class=bkgd]
[div class=header][/div]
[div class=name]parallel[/div]
[div class="tab one"]basics[/div]
[div class="tab two"]persona[/div]
[div class="tab three"]background[/div]
[div class="tab four"]other[/div]
[div class="tabsContent tabsContentBasics"]
[div class=textcontainer][div class=text][div class="tag pink"]name[/div]it’s not unfamiliar

[div class="tag pink"]nickname[/div]your deep eyes

[div class="tag pink"]age[/div]this parallel feeling

[div class="tag pink"]gender[/div]can you see?

[div class="tag pink"]sexuality[/div]past the stairs of time

[div class="tag pink"]role[/div]i came to you like this

[div class="tag pink"]faceclaim[/div]it's the same but different

[div class="tag pink"]height[/div]jumping over the black wall

[div class="tag pink"]weight[/div]behind the curtains

[div class="tag pink"]hair color[/div]the movie is starting again

[div class="tag pink"]eye color[/div]with your hand in mine

[div class="tag pink"]unique marks[/div]i chose an ending that wasn't you

[div class="tag pink"]body mods[/div]you know what i mean
[/div][/div][div class=pic1][/div][/div]

[div class="tabsContent tabsContentPersona" style="display: none;"]
[div class=textcontainer][div class=text][div class="tag cyan"]vices[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. A condimentum vitae sapien pellentesque habitant morbi tristique. Sit amet justo donec enim. Eleifend mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Varius vel pharetra vel turpis nunc eget lorem. In massa tempor nec feugiat nisl pretium fusce id. Orci eu lobortis elementum nibh tellus molestie. In mollis nunc sed id semper risus in. Aliquam sem et tortor consequat id porta nibh venenatis. Facilisis gravida neque convallis a cras semper auctor neque vitae.

[div class="tag cyan"]virtues[/div]Fermentum leo vel orci porta non pulvinar neque laoreet. Facilisis sed odio morbi quis commodo. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Quis risus sed vulputate odio ut enim blandit volutpat. Urna nunc id cursus metus aliquam eleifend mi. Pellentesque adipiscing commodo elit at. Sagittis orci a scelerisque purus semper eget. Venenatis lectus magna fringilla urna porttitor. Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique. Ipsum dolor sit amet consectetur adipiscing elit ut. Mauris in aliquam sem fringilla ut morbi. Eget gravida cum sociis natoque penatibus. Ullamcorper sit amet risus nullam eget.

[div class="tag cyan"]strengths[/div]Quam quisque id diam vel quam elementum pulvinar etiam. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies. Nam libero justo laoreet sit amet cursus sit. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Mus mauris vitae ultricies leo integer malesuada nunc vel. Dignissim diam quis enim lobortis scelerisque fermentum. Eu sem integer vitae justo eget magna fermentum iaculis eu. Integer feugiat scelerisque varius morbi enim nunc faucibus. Consectetur lorem donec massa sapien faucibus et.

[div class="tag cyan"]weaknesses[/div]Ut porttitor leo a diam. Mauris in aliquam sem fringilla ut morbi tincidunt. Sollicitudin nibh sit amet commodo nulla. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Ac tortor dignissim convallis aenean et tortor at. Nec feugiat in fermentum posuere urna. Nibh nisl condimentum id venenatis a condimentum vitae. Scelerisque varius morbi enim nunc faucibus a pellentesque. Ligula ullamcorper malesuada proin libero. Vitae semper quis lectus nulla. Parturient montes nascetur ridiculus mus mauris vitae ultricies. Laoreet id donec ultrices tincidunt arcu. Suspendisse potenti nullam ac tortor. Massa vitae tortor condimentum lacinia quis vel eros donec. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Eget mi proin sed libero enim sed faucibus turpis in. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Etiam sit amet nisl purus in mollis nunc. Libero volutpat sed cras ornare arcu dui vivamus arcu.

[div class="tag cyan"]fears[/div]Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Phasellus egestas tellus rutrum tellus. Erat imperdiet sed euismod nisi porta lorem. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Bibendum enim facilisis gravida neque convallis a cras. Vulputate odio ut enim blandit volutpat maecenas volutpat. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Ac odio tempor orci dapibus ultrices in iaculis nunc. Nulla facilisi etiam dignissim diam quis enim.

[div class="tag cyan"]ambitions[/div]Duis at consectetur lorem donec. Elementum nisi quis eleifend quam adipiscing vitae proin. Facilisis sed odio morbi quis commodo odio aenean sed. Eget nullam non nisi est. Laoreet id donec ultrices tincidunt. Consequat semper viverra nam libero justo laoreet. Et tortor consequat id porta. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Morbi tristique senectus et netus et malesuada fames. Aenean et tortor at risus viverra adipiscing at in. At erat pellentesque adipiscing commodo elit. Venenatis tellus in metus vulputate eu scelerisque.

[div class="tag cyan"]habits[/div]Penatibus et magnis dis parturient montes nascetur ridiculus. Praesent tristique magna sit amet purus gravida quis blandit. Faucibus scelerisque eleifend donec pretium vulputate sapien. Lectus sit amet est placerat in egestas erat imperdiet. Eu non diam phasellus vestibulum lorem sed risus. Eu sem integer vitae justo eget. Elit ut aliquam purus sit amet luctus venenatis. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Ridiculus mus mauris vitae ultricies leo integer malesuada. Faucibus purus in massa tempor nec feugiat nisl pretium. Fermentum leo vel orci porta non pulvinar. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Tincidunt augue interdum velit euismod in pellentesque. Tellus pellentesque eu tincidunt tortor aliquam nulla. Ac turpis egestas maecenas pharetra convallis posuere. Lectus quam id leo in vitae turpis massa sed elementum. Volutpat est velit egestas dui id ornare arcu.

[div class="tag cyan"]quirks[/div]Id aliquet risus feugiat in. Nullam non nisi est sit amet facilisis magna etiam. Nisl pretium fusce id velit. At auctor urna nunc id cursus metus aliquam. Quisque non tellus orci ac auctor augue mauris augue. Elementum pulvinar etiam non quam lacus. Accumsan lacus vel facilisis volutpat. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id interdum velit laoreet id. Ultricies tristique nulla aliquet enim tortor at auctor urna. Blandit libero volutpat sed cras ornare. Sapien faucibus et molestie ac feugiat. Laoreet non curabitur gravida arcu ac. Id diam vel quam elementum pulvinar etiam.

[div class="tag cyan"]likes[/div]Non odio euismod lacinia at quis risus sed vulputate. Augue ut lectus arcu bibendum at varius vel. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Eget nullam non nisi est. Ullamcorper sit amet risus nullam eget. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec. Semper viverra nam libero justo laoreet. Non blandit massa enim nec dui nunc mattis enim. Semper eget duis at tellus at urna condimentum. Dictumst quisque sagittis purus sit amet volutpat consequat. Cursus sit amet dictum sit amet. Semper quis lectus nulla at volutpat diam ut venenatis. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Molestie at elementum eu facilisis. Pulvinar pellentesque habitant morbi tristique. Consequat id porta nibh venenatis cras sed felis. Lacus laoreet non curabitur gravida arcu ac tortor. Fermentum iaculis eu non diam phasellus.

[div class="tag cyan"]dislikes[/div]Sagittis orci a scelerisque purus semper eget duis. Velit sed ullamcorper morbi tincidunt. Netus et malesuada fames ac. Sed blandit libero volutpat sed cras ornare arcu dui. Vulputate enim nulla aliquet porttitor. Pellentesque id nibh tortor id aliquet lectus proin nibh. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Tempor orci dapibus ultrices in. Malesuada bibendum arcu vitae elementum. Sit amet mattis vulputate enim.
[/div][/div][div class=pic2][/div][/div]

[div class="tabsContent tabsContentBackground" style="display: none;"]
[div class=textcontainer][div class=text][div class="tag yellow"]family[/div]but still, it's you

[div class="tag yellow"]occupation[/div]i can't let you go

[div class="tag yellow"]education[/div]so i'm gonna travel through time and space

[div class="tag yellow"]residence[/div]so i can go to you again

[div class="tag yellow"]history[/div]Orci ac auctor augue mauris augue neque gravida in fermentum. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Suspendisse sed nisi lacus sed. Semper risus in hendrerit gravida rutrum quisque. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Egestas dui id ornare arcu. Maecenas sed enim ut sem viverra. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Quis vel eros donec ac odio tempor orci dapibus ultrices. Leo a diam sollicitudin tempor id eu. Scelerisque purus semper eget duis at tellus. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Non arcu risus quis varius.

Eros in cursus turpis massa tincidunt dui ut. Vitae turpis massa sed elementum tempus egestas sed. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Posuere morbi leo urna molestie. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Vel pretium lectus quam id leo in vitae turpis massa. Tellus cras adipiscing enim eu turpis egestas pretium aenean. Et tortor consequat id porta nibh venenatis. Pellentesque adipiscing commodo elit at imperdiet dui. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Adipiscing commodo elit at imperdiet dui accumsan sit. Enim ut tellus elementum sagittis vitae. Diam in arcu cursus euismod quis viverra nibh cras. Vulputate dignissim suspendisse in est ante in nibh mauris. Pellentesque elit eget gravida cum sociis natoque penatibus.
[/div][/div][div class=pic3][/div][/div]

[div class="tabsContent tabsContentOther" style="display: none;"][div class=pic4][/div]
[div class=textcontainer][div class=text][div class="tag navy"]theme song[/div]parallel by vixx

[div class="tag navy"]favorite food[/div]bang bang shrimp

[div class="tag navy"]favorite drink[/div]shirley temples

[div class="tag navy"]favorite book[/div]the art of racing in the rain

[div class="tag navy"]favorite movie[/div]avengers: endgame

[div class="tag navy"]favorite color[/div]neon blue

[div class="tag navy"]relationships[/div] - one
- two
- three
- four
- five
- six

[div class="tag navy"]gallery[/div]

[/div][/div][div class=pic4][/div][/div]
[/div][div class=credit]code by sox [/div]

Spoiler: code

[nobr]
    [class=bkgd]
        position: relative;
        box-sizing: border-box;
        width: 400px;
        height: 435px;
        background-color: #0B1A2D;
        overflow: hidden;
        margin-right: auto;
        margin-left: auto;
        padding: 0;
        border: 2px solid #fff;
    [/class]
    [class=header]
        position: absolute;
        overflow: hidden;
        width: 400px;
        height: 160px;
        left: 0px;
        top: 0px;
        background: url(https://image.freepik.com/free-vector/colorful-tropical-flowers-leaves-background_52683-13862.jpg);
        background-size: 100%;
    [/class]
    [class=name]
        position: absolute;
        overflow: visible;
        width: 225px;
        height: 50px;
        left: 88px;
        top: 55px;
        background-color: #0B1A2D;
        border: 2px solid #fff;
        color: #fff;
        font-size: 12px;
        line-height: 50px;
        text-align: center;
                text-transform: uppercase;
                letter-spacing: 5px;
    [/class]
    [class=one]
        position: absolute;
        overflow: visible;
        width: 102px;
        height: 25px;
        left: -2px;
        top: 160px;
        background-color: #DD3A6F;
        border: 2px solid #fff;
                font-size: 11px;
                text-align: center;
                text-transform: uppercase;
                line-height: 25px;
                font-weight: 700;
                color: #fff;
    [/class]
    [class=two]
        position: absolute;
        overflow: visible;
        width: 100px;
        height: 25px;
        left: 100px;
        top: 160px;
        background-color: #00A2F1;
        border: 2px solid #fff;
                font-size: 11px;
                text-align: center;
                text-transform: uppercase;
                line-height: 25px;
                font-weight: 700;
                color: #fff;
    [/class]
    [class=three]
        position: absolute;
        overflow: visible;
        width: 100px;
        height: 25px;
        left: 200px;
        top: 160px;
        background-color: #FAB36B;
        border: 2px solid #fff;
                font-size: 11px;
                text-align: center;
                text-transform: uppercase;
                line-height: 25px;
                font-weight: 700;
                color: #fff;
    [/class]
    [class=four]
        position: absolute;
        overflow: visible;
        width: 100px;
        height: 25px;
        left: 300px;
        top: 160px;
        background-color: #000F70;
        border: 2px solid #fff;
                font-size: 11px;
                text-align: center;
                text-transform: uppercase;
                line-height: 25px;
                font-weight: 700;
                color: #fff;
    [/class]
    [class=pic1]
        position: absolute;
        overflow: visible;
        width: 124px;
        height: 200px;
        left: 251px;
        top: 210px;
        background: url(https://imgur.com/mNW4x6B.png);
        background-size: 120%;
        border: 2px solid #fff;
    [/class]
    [class=pic2]
        position: absolute;
        overflow: visible;
        width: 124px;
        height: 200px;
        left: 251px;
        top: 210px;
        background: url(https://i.pinimg.com/564x/d7/6a/57/d76a578ebdafa8a39bf5982084a924dc.jpg);
        background-size: 100%;
        border: 2px solid #fff;
    [/class]
    [class=pic3]
        position: absolute;
        overflow: visible;
        width: 124px;
        height: 200px;
        left: 251px;
        top: 210px;
        background: url(https://i.pinimg.com/564x/a2/af/21/a2af2160eafad56e8c5a14281b82baba.jpg);
        background-size: 120%;
        border: 2px solid #fff;
    [/class]
    [class=pic4]
        position: absolute;
        overflow: visible;
        width: 124px;
        height: 200px;
        left: 251px;
        top: 210px;
        background: url(https://imgur.com/65RVMM1.png);
        background-size: 120%;
        border: 2px solid #fff;
    [/class]
    [class=text]
        position: relative;
        overflow: auto;
        width: 210px;
        height: 185px;
        color: #fff;
        font-size: 10px;
        line-height: 12px;
        text-align: justify;
        padding: 5px 30px 5px 15px;
                background-color: #0B1A2D;
                text-transform: lowercase;
    [/class]
    [class=textcontainer]
        position: absolute;
        overflow: hidden;
        width: 250px;
        height: 200px;
        left: 15px;
        top: 210px;
        border: 2px solid #fff;
    [/class]
    [class=tag]
                position: relative;
                overflow: visible;
                display: inline;
                width: auto;
                height: auto;
        border: 1px solid #fff;
        font-size: 9px;
        text-align: center;
        margin-right: 3px;
        padding-left: 5px;
        padding-right: 5px;
        text-transform: uppercase;
                color: #fff;
                font-weight: 700;
    [/class]
    [class=pink]
        background-color: #DD3A6F;
    [/class]
    [class=cyan]
        background-color: #00A2F1;
    [/class]
    [class=yellow]
        background-color: #FAB36B;
    [/class]
    [class=navy]
        background-color: #000F70;
    [/class]
    [class=tab]
        position: absolute;
        overflow: visible;
    [/class]
    [class name=tab state=hover]
        background-color: #fff;
        color: #0B1A2D;
        transition-duration: 0.3s;
    [/class]
    [script class=tab on=click]
                hide tabsContent
                set currentTab (getText)
                if (eq ${currentTab} basics) (fadeIn 600 tabsContentBasics)
                if (eq ${currentTab} persona) (fadeIn 600 tabsContentPersona)
                if (eq ${currentTab} background) (fadeIn 600 tabsContentBackground)
                if (eq ${currentTab} other) (fadeIn 600 tabsContentOther)
    [/script]
    [class=credit]
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 10px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 8px;
        color: #00A2F1;
        opacity: 0.3;
    [/class]
[/nobr]
    [div class=bkgd]
    [div class=header][/div]
    [div class=name]parallel[/div]
    [div class="tab one"]basics[/div]
    [div class="tab two"]persona[/div]
    [div class="tab three"]background[/div]
    [div class="tab four"]other[/div]
    [div class="tabsContent tabsContentBasics"]
    [div class=textcontainer][div class=text][div class="tag pink"]name[/div]it’s not unfamiliar

    [div class="tag pink"]nickname[/div]your deep eyes

    [div class="tag pink"]age[/div]this parallel feeling

    [div class="tag pink"]gender[/div]can you see?

    [div class="tag pink"]sexuality[/div]past the stairs of time

    [div class="tag pink"]role[/div]i came to you like this

    [div class="tag pink"]faceclaim[/div]it's the same but different

    [div class="tag pink"]height[/div]jumping over the black wall

    [div class="tag pink"]weight[/div]behind the curtains

    [div class="tag pink"]hair color[/div]the movie is starting again

    [div class="tag pink"]eye color[/div]with your hand in mine

    [div class="tag pink"]unique marks[/div]i chose an ending that wasn't you

    [div class="tag pink"]body mods[/div]you know what i mean
[/div][/div][div class=pic1][/div][/div]

    [div class="tabsContent tabsContentPersona" style="display: none;"]
    [div class=textcontainer][div class=text][div class="tag cyan"]vices[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. A condimentum vitae sapien pellentesque habitant morbi tristique. Sit amet justo donec enim. Eleifend mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Varius vel pharetra vel turpis nunc eget lorem. In massa tempor nec feugiat nisl pretium fusce id. Orci eu lobortis elementum nibh tellus molestie. In mollis nunc sed id semper risus in. Aliquam sem et tortor consequat id porta nibh venenatis. Facilisis gravida neque convallis a cras semper auctor neque vitae.

    [div class="tag cyan"]virtues[/div]Fermentum leo vel orci porta non pulvinar neque laoreet. Facilisis sed odio morbi quis commodo. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Quis risus sed vulputate odio ut enim blandit volutpat. Urna nunc id cursus metus aliquam eleifend mi. Pellentesque adipiscing commodo elit at. Sagittis orci a scelerisque purus semper eget. Venenatis lectus magna fringilla urna porttitor. Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique. Ipsum dolor sit amet consectetur adipiscing elit ut. Mauris in aliquam sem fringilla ut morbi. Eget gravida cum sociis natoque penatibus. Ullamcorper sit amet risus nullam eget.

    [div class="tag cyan"]strengths[/div]Quam quisque id diam vel quam elementum pulvinar etiam. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies. Nam libero justo laoreet sit amet cursus sit. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Mus mauris vitae ultricies leo integer malesuada nunc vel. Dignissim diam quis enim lobortis scelerisque fermentum. Eu sem integer vitae justo eget magna fermentum iaculis eu. Integer feugiat scelerisque varius morbi enim nunc faucibus. Consectetur lorem donec massa sapien faucibus et.

    [div class="tag cyan"]weaknesses[/div]Ut porttitor leo a diam. Mauris in aliquam sem fringilla ut morbi tincidunt. Sollicitudin nibh sit amet commodo nulla. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Ac tortor dignissim convallis aenean et tortor at. Nec feugiat in fermentum posuere urna. Nibh nisl condimentum id venenatis a condimentum vitae. Scelerisque varius morbi enim nunc faucibus a pellentesque. Ligula ullamcorper malesuada proin libero. Vitae semper quis lectus nulla. Parturient montes nascetur ridiculus mus mauris vitae ultricies. Laoreet id donec ultrices tincidunt arcu. Suspendisse potenti nullam ac tortor. Massa vitae tortor condimentum lacinia quis vel eros donec. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Eget mi proin sed libero enim sed faucibus turpis in. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Etiam sit amet nisl purus in mollis nunc. Libero volutpat sed cras ornare arcu dui vivamus arcu.

    [div class="tag cyan"]fears[/div]Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Phasellus egestas tellus rutrum tellus. Erat imperdiet sed euismod nisi porta lorem. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Bibendum enim facilisis gravida neque convallis a cras. Vulputate odio ut enim blandit volutpat maecenas volutpat. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Ac odio tempor orci dapibus ultrices in iaculis nunc. Nulla facilisi etiam dignissim diam quis enim.

    [div class="tag cyan"]ambitions[/div]Duis at consectetur lorem donec. Elementum nisi quis eleifend quam adipiscing vitae proin. Facilisis sed odio morbi quis commodo odio aenean sed. Eget nullam non nisi est. Laoreet id donec ultrices tincidunt. Consequat semper viverra nam libero justo laoreet. Et tortor consequat id porta. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Morbi tristique senectus et netus et malesuada fames. Aenean et tortor at risus viverra adipiscing at in. At erat pellentesque adipiscing commodo elit. Venenatis tellus in metus vulputate eu scelerisque.

    [div class="tag cyan"]habits[/div]Penatibus et magnis dis parturient montes nascetur ridiculus. Praesent tristique magna sit amet purus gravida quis blandit. Faucibus scelerisque eleifend donec pretium vulputate sapien. Lectus sit amet est placerat in egestas erat imperdiet. Eu non diam phasellus vestibulum lorem sed risus. Eu sem integer vitae justo eget. Elit ut aliquam purus sit amet luctus venenatis. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Ridiculus mus mauris vitae ultricies leo integer malesuada. Faucibus purus in massa tempor nec feugiat nisl pretium. Fermentum leo vel orci porta non pulvinar. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Tincidunt augue interdum velit euismod in pellentesque. Tellus pellentesque eu tincidunt tortor aliquam nulla. Ac turpis egestas maecenas pharetra convallis posuere. Lectus quam id leo in vitae turpis massa sed elementum. Volutpat est velit egestas dui id ornare arcu.

    [div class="tag cyan"]quirks[/div]Id aliquet risus feugiat in. Nullam non nisi est sit amet facilisis magna etiam. Nisl pretium fusce id velit. At auctor urna nunc id cursus metus aliquam. Quisque non tellus orci ac auctor augue mauris augue. Elementum pulvinar etiam non quam lacus. Accumsan lacus vel facilisis volutpat. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id interdum velit laoreet id. Ultricies tristique nulla aliquet enim tortor at auctor urna. Blandit libero volutpat sed cras ornare. Sapien faucibus et molestie ac feugiat. Laoreet non curabitur gravida arcu ac. Id diam vel quam elementum pulvinar etiam.

    [div class="tag cyan"]likes[/div]Non odio euismod lacinia at quis risus sed vulputate. Augue ut lectus arcu bibendum at varius vel. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Eget nullam non nisi est. Ullamcorper sit amet risus nullam eget. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec. Semper viverra nam libero justo laoreet. Non blandit massa enim nec dui nunc mattis enim. Semper eget duis at tellus at urna condimentum. Dictumst quisque sagittis purus sit amet volutpat consequat. Cursus sit amet dictum sit amet. Semper quis lectus nulla at volutpat diam ut venenatis. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Molestie at elementum eu facilisis. Pulvinar pellentesque habitant morbi tristique. Consequat id porta nibh venenatis cras sed felis. Lacus laoreet non curabitur gravida arcu ac tortor. Fermentum iaculis eu non diam phasellus.

    [div class="tag cyan"]dislikes[/div]Sagittis orci a scelerisque purus semper eget duis. Velit sed ullamcorper morbi tincidunt. Netus et malesuada fames ac. Sed blandit libero volutpat sed cras ornare arcu dui. Vulputate enim nulla aliquet porttitor. Pellentesque id nibh tortor id aliquet lectus proin nibh. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Tempor orci dapibus ultrices in. Malesuada bibendum arcu vitae elementum. Sit amet mattis vulputate enim.
[/div][/div][div class=pic2][/div][/div]

    [div class="tabsContent tabsContentBackground" style="display: none;"]
    [div class=textcontainer][div class=text][div class="tag yellow"]family[/div]but still, it's you

    [div class="tag yellow"]occupation[/div]i can't let you go

    [div class="tag yellow"]education[/div]so i'm gonna travel through time and space

    [div class="tag yellow"]residence[/div]so i can go to you again

    [div class="tag yellow"]history[/div]Orci ac auctor augue mauris augue neque gravida in fermentum. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Suspendisse sed nisi lacus sed. Semper risus in hendrerit gravida rutrum quisque. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Egestas dui id ornare arcu. Maecenas sed enim ut sem viverra. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Quis vel eros donec ac odio tempor orci dapibus ultrices. Leo a diam sollicitudin tempor id eu. Scelerisque purus semper eget duis at tellus. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Non arcu risus quis varius.

Eros in cursus turpis massa tincidunt dui ut. Vitae turpis massa sed elementum tempus egestas sed. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Posuere morbi leo urna molestie. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Vel pretium lectus quam id leo in vitae turpis massa. Tellus cras adipiscing enim eu turpis egestas pretium aenean. Et tortor consequat id porta nibh venenatis. Pellentesque adipiscing commodo elit at imperdiet dui. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Adipiscing commodo elit at imperdiet dui accumsan sit. Enim ut tellus elementum sagittis vitae. Diam in arcu cursus euismod quis viverra nibh cras. Vulputate dignissim suspendisse in est ante in nibh mauris. Pellentesque elit eget gravida cum sociis natoque penatibus.
[/div][/div][div class=pic3][/div][/div]

    [div class="tabsContent tabsContentOther" style="display: none;"][div class=pic4][/div]
    [div class=textcontainer][div class=text][div class="tag navy"]theme song[/div]parallel by vixx

        [div class="tag navy"]favorite food[/div]bang bang shrimp

        [div class="tag navy"]favorite drink[/div]shirley temples

        [div class="tag navy"]favorite book[/div]the art of racing in the rain

        [div class="tag navy"]favorite movie[/div]avengers: endgame

        [div class="tag navy"]favorite color[/div]neon blue

        [div class="tag navy"]relationships[/div] - one
- two
- three
- four
- five
- six

    [div class="tag navy"]gallery[/div][IMG]https://i.pinimg.com/564x/8c/ae/ed/8caeed81c89ae42b1ed9d6a240973adc.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/46/d8/d0/46d8d03ee65a3a271f87eb6b8be1302a.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/b2/ac/b0/b2acb08bc3f7e016fca0bd2156668fa7.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/2a/72/68/2a726861dbb55f02b1e6a53197f8e46c.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/a5/d1/2e/a5d12ebc50c3ec62f0a129f9130c7088.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/5c/ec/92/5cec92fbcbda4f71e5d7cba0d5140c34.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/8b/18/e8/8b18e8ef402e3b43bb9275f4c3a163db.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/a4/1c/55/a41c550030e5ec0119e1cd46ba7ac625.jpg[/IMG]
[IMG]https://i.pinimg.com/564x/e5/f7/e4/e5f7e424fab5156a638b2e9fe13248cd.jpg[/IMG]
[/div][/div][div class=pic4][/div][/div]
[/div][div class=credit]code by [USER=2383][COLOR=#00A2F1]sox[/COLOR][/USER][/div]

This code is so appealing! Hope you don't mind me using it for an interest check.

 

[sox]

This code is so appealing! Hope you don't mind me using it for an interest check.

all yours, friend!

 

[sox]

SINGULARITY - MOBILE FRIENDLY

interest check codes are my new phase apparently bc i keep getting too lazy to make full cs codes and turning them into interest checks instead rip. anyways here's a lil ex-machina inspired code for ur tiny font needs. each of the circles is a button and i've included all the hex codes bc if you wanna edit the background color, you're gonna need them lmao please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=bkgd] position: relative; box-sizing: border-box; width: 320px; height: 365px; background-color: #7D7D7D; overflow: hidden; margin-left: auto; margin-right: auto; cursor: url('https://img.icons8.com/small/16/000000/cursor.png'), auto; box-shadow: 3px 3px 0px #000; [/class] [class=pic] position: absolute; width: 158.86px; height: 300px; left: 17px; top: 31px; background: url(https://i.pinimg.com/564x/7a/34/0d/7a340dbf9ed93da9b195eef33c192a1e.jpg); background-size: 100%; overflow: hidden; margin-left: auto; margin-right: auto; [/class] [class=name] position: absolute; left: 180px; top: 78px; width: 120px; height: 360px; overflow: hidden; margin-left: auto; margin-right: auto; color: #CDDCEF; font-size: 14px; font-weight: 700; line-height: 15px; text-transform: lowercase; [/class] [class=description] position: relative; overflow: auto; width: 130px; height: 160px; color: #000; font-size: 7px; font-weight: 400; line-height: 7px; text-transform: lowercase; padding: 0px 30px 0px 0px; text-align: justify; [/class] [class=container] position: absolute; overflow: hidden; left: 180px; top: 120px; width: 150px; height: 160px; overflow: hidden; margin-left: auto; margin-right: auto; [/class] [class=picformat] position: relative; box-sizing: border-box; width: 300px; height: 365px; overflow: hidden; margin-left: auto; margin-right: auto; [/class] [class=tabbutton] position: absolute; width: 10px; height: 10px; overflow: visible; border-radius: 50px; background-color: #CDDCEF; [/class] [class=one] left:180px; top:290px; [/class] [class=two] left:195px; top:290px; [/class] [class=three] left:210px; top:290px; [/class] [class=four] left:225px; top:290px; [/class] [class name=tab state=hover] background-color: #FF3400; transition-duration: 0.2s; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} 1) (fadeIn 600 tabsContentOne) if (eq ${currentTab} 2) (fadeIn 600 tabsContentTwo) if (eq ${currentTab} 3) (fadeIn 600 tabsContentThree) if (eq ${currentTab} 4) (fadeIn 600 tabsContentFour) [/script] [class=credit] position: relative; overflow: hidden; width: 100%; height: 8px; text-align: center; font-style: normal; font-weight: normal; font-size: 6px; color: #FF3400; opacity: 0.3; [/class]
[div class=bkgd]

[div class=pic]

[div class="tabsContent tabsContentOne"]
[div class=name]our singularity.[/div]
[div class=container][div class=description]A sound of something breaking. I awake from sleep. A sound full of unfamiliarity. Try to cover my ears, but can’t go to sleep. The pain in my throat gets worse. Try to cover it. I don’t have a voice. Today I hear that sound again. it’s ringing again, that sound. a crack again on this frozen lake. I dumped myself into the lake. I buried my voice for you. Over the winter lake I was thrown, A thick ice has formed atop. A winter lake on which I was thrown away, A thick ice has formed in the dream I shortly went into. My agonizing phantom pain is still the samePlease don't say anything. Reach my hand out to cover the mouth. But in the end, spring will come someday. The ice will melt and flow away. Tell me if my voice isn't real, If I shouldn’t have thrown myself away. Tell me if even this pain isn’t real. What I was supposed to do back then?[/div][/div]
[/div]
[div class="tabsContent tabsContentTwo" style="display: none;"]
[div class=name]plot + summary.[/div]
[div class=container][div class=description]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere. Lacinia quis vel eros donec ac odio tempor orci. Dignissim diam quis enim lobortis scelerisque. Sit amet luctus venenatis lectus magna. Sagittis eu volutpat odio facilisis. Pretium viverra suspendisse potenti nullam. Urna et pharetra pharetra massa. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Duis ut diam quam nulla. Pharetra pharetra massa massa ultricies. Quis auctor elit sed vulputate mi sit. Mattis rhoncus urna neque viverra justo nec ultrices. Enim sed faucibus turpis in eu.

Laoreet non curabitur gravida arcu. Amet nisl purus in mollis nunc sed id. Sed arcu non odio euismod lacinia at quis risus sed. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Scelerisque viverra mauris in aliquam sem. In pellentesque massa placerat duis ultricies lacus. Viverra aliquet eget sit amet tellus cras adipiscing enim. Urna cursus eget nunc scelerisque. Felis imperdiet proin fermentum leo vel orci. Quam id leo in vitae turpis massa. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Mollis nunc sed id semper risus. Pharetra pharetra massa massa ultricies. Laoreet non curabitur gravida arcu ac tortor. Eget felis eget nunc lobortis. Felis eget velit aliquet sagittis id consectetur purus. Pretium quam vulputate dignissim suspendisse in est ante in. Orci dapibus ultrices in iaculis nunc sed augue.[/div][/div]
[/div]
[div class="tabsContent tabsContentThree" style="display: none;"]
[div class=name]roles + characters.[/div]
[div class=container][div class=description]

• Hades
• Persephone
• Hecate
• Alecto
• Megaera
• Tisiphone
• Hermes
• Charon
• Cerberus
• Hermes
• Thanatos
• Melinoë
• Nyx
• Achlys
• Styx
• Eurynomos
• Minos
• Rhadamanthus
• Aeacus
• Tartarus
• Orpheus
• Penthos
• Curae
• Nosoi
• Geras
• Phobos
• Limos
• Aporia
• Algea
• Hypnos
• Gaudia
• Polemos
• Eris
• Dido

[/div][/div]
[/div]
[div class="tabsContent tabsContentFour" style="display: none;"]
[div class=name]rules + guidelines.[/div]
[div class=container][div class=description]Volutpat lacus laoreet non curabitur gravida. Blandit turpis cursus in hac habitasse platea dictumst quisque. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Phasellus egestas tellus rutrum tellus pellentesque. Egestas fringilla phasellus faucibus scelerisque. A erat nam at lectus urna. Nisl vel pretium lectus quam id leo in vitae turpis. Consequat id porta nibh venenatis. Amet commodo nulla facilisi nullam. Egestas erat imperdiet sed euismod nisi porta lorem. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Lectus mauris ultrices eros in cursus turpis massa. Mi proin sed libero enim sed. Euismod elementum nisi quis eleifend quam adipiscing vitae. Pellentesque habitant morbi tristique senectus et netus. Varius quam quisque id diam vel quam. Quam adipiscing vitae proin sagittis nisl rhoncus mattis. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus.

Ut morbi tincidunt augue interdum velit euismod in pellentesque. Ac orci phasellus egestas tellus. Urna molestie at elementum eu facilisis. Eros in cursus turpis massa tincidunt dui ut ornare lectus. Amet massa vitae tortor condimentum lacinia quis vel. Aliquam purus sit amet luctus venenatis lectus magna fringilla. Quis auctor elit sed vulputate mi sit amet mauris commodo. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Pellentesque adipiscing commodo elit at imperdiet. Tristique et egestas quis ipsum suspendisse ultrices. Egestas maecenas pharetra convallis posuere morbi. Sed nisi lacus sed viverra tellus in hac habitasse platea. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus.[/div][/div]
[/div]
[div class="tabbutton one tab"]

1

[/div]
[div class="tabbutton two tab"]

2

[/div]
[div class="tabbutton three tab"]

3

[/div]
[div class="tabbutton four tab"]

4

[/div]
[/div][/div][div class=credit]code by sox [/div]

Spoiler: code

[nobr]
            [comment]COLOR HEX CODES FOR YOUR CONVENIENCE TO EDIT AS PLEASED: 
                BLACK: #000
                WHITE: #fff
                GRAY: #7D7D7D
                ORANGE: #FF3400
                PALE BLUE: #CDDCEF
            [/comment]
    [class=bkgd]
        position: relative;
        box-sizing: border-box;
        width: 320px;
        height: 360px;
        background-color: #7D7D7D;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        cursor: url('https://img.icons8.com/small/16/000000/cursor.png'), auto;
        box-shadow: 3px 3px 0px #000;
    [/class]
    [class=pic]
        position: absolute;
        width: 158.86px;
        height: 300px;
        left: 17px;
        top: 31px;
        background: url(https://i.pinimg.com/564x/7a/34/0d/7a340dbf9ed93da9b195eef33c192a1e.jpg);
        background-size: 100%;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    [/class]
    [class=name]
        position: absolute;
        left: 180px;
        top: 78px;
        width: 120px;
        height: 365px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        color: #CDDCEF;
        font-size: 14px;
        font-weight: 700;
        line-height: 15px;
        text-transform: lowercase;
    [/class]
    [class=description]
        position: relative;
        overflow: auto;
        width: 130px;
        height: 160px;
        color: #000;
        font-size: 7px;
        font-weight: 400;
        line-height: 7px;
        text-transform: lowercase;
        padding: 0px 30px 0px 0px;
        text-align: justify;
    [/class]
    [class=container]
        position: absolute;
        overflow: hidden;
        left: 180px;
        top: 120px;
        width: 150px;
        height: 160px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    [/class]
    [class=picformat]
        position: relative;
        box-sizing: border-box;
        width: 300px;
        height: 365px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    [/class]
    [class=tabbutton]
        position: absolute;
        width: 10px;
        height: 10px;
        overflow: visible;
        border-radius: 50px;
        background-color: #CDDCEF;
    [/class]
    [class=one]
        left:180px;
        top:290px;
    [/class]
    [class=two]
        left:195px;
        top:290px;
    [/class]
    [class=three]
        left:210px;
        top:290px;
    [/class]
    [class=four]
        left:225px;
        top:290px;
    [/class]
    [class name=tab state=hover]
        background-color: #FF3400;
        transition-duration: 0.2s;
    [/class]
    [script class=tab on=click]
                hide tabsContent
                set currentTab (getText)
                if (eq ${currentTab} 1) (fadeIn 600 tabsContentOne)
                if (eq ${currentTab} 2) (fadeIn 600 tabsContentTwo)
                if (eq ${currentTab} 3) (fadeIn 600 tabsContentThree)
                if (eq ${currentTab} 4) (fadeIn 600 tabsContentFour)
    [/script]
    [class=credit]
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 8px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 6px;
        color: #FF3400;
        opacity: 0.3;
    [/class]
[/nobr]
[div class=bkgd][div=width:100%;height:100%;position:absolute;left:0px;top:0px;]
   [div class=pic][/div]
   [div=background-color:#FF3400;position:absolute;width:74px;height:130px;left:17px;top:31px;opacity:0.3;][/div]
   [div=background-color:#FF3400;position:absolute;width:73px;height:90px;left:103px;top:241px;opacity:0.3;][/div]
   [div=background-color:#7D7D7D;position:absolute;width:93px;height:29px;left:101px;top:29px;][/div]
   [div=background-color:#7D7D7D;position:absolute;width:83px;height:20px;left:15px;top:161px;][/div]
   [div=background-color:#7D7D7D;position:absolute;width:93px;height:20px;left:98px;top:221px;][/div]
   [div=background-color:#7D7D7D;position:absolute;width:93px;height:26px;left:0px;top:310px;][/div]
   [div=background-color:#7D7D7D;position:absolute;width:12px;height:307px;left:91px;top:29px;][/div]
   [div=background-color:#7D7D7D;position:absolute;width:4px;height:300px;left:109px;top:31px;][/div]
   [div=background-color:#000;position:absolute;width:95px;height:1px;left:14px;top:166px;][/div]
   [div=background-color:#000;position:absolute;width:85px;height:1px;left:91px;top:245px;][/div]
   [div=background-color:#000;position:absolute;width:2px;height:300px;left:96px;top:31px;][/div]
   [div=background-color:#000;position:absolute;width:10px;height:165px;left:157px;top:166px;][/div]
   [div=background-color:#000;position:absolute;width:7px;height:249px;left:10px;top:31px;][/div]

   [div class="tabsContent tabsContentOne"]
   [div class=name][font=Overpass Mono]our singularity.[/font][/div]
   [div class=container][div class=description][font=Overpass Mono]A sound of something breaking. I awake from sleep. A sound full of unfamiliarity. Try to cover my ears, but can’t go to sleep. The pain in my throat gets worse. Try to cover it. I don’t have a voice. Today I hear that sound again. it’s ringing again, that sound. a crack again on this frozen lake. I dumped myself into the lake. I buried my voice for you. Over the winter lake I was thrown, A thick ice has formed atop. A winter lake on which I was thrown away, A thick ice has formed in the dream I shortly went into. My agonizing phantom pain is still the samePlease don't say anything. Reach my hand out to cover the mouth. But in the end, spring will come someday. The ice will melt and flow away. Tell me if my voice isn't real, If I shouldn’t have thrown myself away. Tell me if even this pain isn’t real. What I was supposed to do back then?[/font][/div][/div]
   [/div]
   [div class="tabsContent tabsContentTwo" style="display: none;"]
   [div class=name][font=Overpass Mono]plot + summary.[/font][/div]
   [div class=container][div class=description][font=Overpass Mono]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere. Lacinia quis vel eros donec ac odio tempor orci. Dignissim diam quis enim lobortis scelerisque. Sit amet luctus venenatis lectus magna. Sagittis eu volutpat odio facilisis. Pretium viverra suspendisse potenti nullam. Urna et pharetra pharetra massa. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Duis ut diam quam nulla. Pharetra pharetra massa massa ultricies. Quis auctor elit sed vulputate mi sit. Mattis rhoncus urna neque viverra justo nec ultrices. Enim sed faucibus turpis in eu.

Laoreet non curabitur gravida arcu. Amet nisl purus in mollis nunc sed id. Sed arcu non odio euismod lacinia at quis risus sed. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Scelerisque viverra mauris in aliquam sem. In pellentesque massa placerat duis ultricies lacus. Viverra aliquet eget sit amet tellus cras adipiscing enim. Urna cursus eget nunc scelerisque. Felis imperdiet proin fermentum leo vel orci. Quam id leo in vitae turpis massa. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Mollis nunc sed id semper risus. Pharetra pharetra massa massa ultricies. Laoreet non curabitur gravida arcu ac tortor. Eget felis eget nunc lobortis. Felis eget velit aliquet sagittis id consectetur purus. Pretium quam vulputate dignissim suspendisse in est ante in. Orci dapibus ultrices in iaculis nunc sed augue.[/font][/div][/div]
   [/div]
   [div class="tabsContent tabsContentThree" style="display: none;"]
   [div class=name][font=Overpass Mono]roles + characters.[/font][/div]
   [div class=container][div class=description][font=Overpass Mono][LIST]
[*]Hades
[*]Persephone
[*]Hecate
[*]Alecto
[*]Megaera
[*]Tisiphone
[*]Hermes
[*]Charon
[*]Cerberus
[*]Hermes
[*]Thanatos
[*]Melinoë
[*]Nyx
[*]Achlys
[*]Styx
[*]Eurynomos
[*]Minos
[*]Rhadamanthus
[*]Aeacus 
[*]Tartarus
[*]Orpheus
[*]Penthos
[*]Curae
[*]Nosoi
[*]Geras
[*]Phobos
[*]Limos
[*]Aporia
[*]Algea
[*]Hypnos
[*]Gaudia
[*]Polemos
[*]Eris
[*]Dido
[/LIST][/font][/div][/div]
   [/div]
   [div class="tabsContent tabsContentFour" style="display: none;"]
   [div class=name][font=Overpass Mono]rules + guidelines.[/font][/div]
   [div class=container][div class=description][font=Overpass Mono]Volutpat lacus laoreet non curabitur gravida. Blandit turpis cursus in hac habitasse platea dictumst quisque. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Phasellus egestas tellus rutrum tellus pellentesque. Egestas fringilla phasellus faucibus scelerisque. A erat nam at lectus urna. Nisl vel pretium lectus quam id leo in vitae turpis. Consequat id porta nibh venenatis. Amet commodo nulla facilisi nullam. Egestas erat imperdiet sed euismod nisi porta lorem. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Lectus mauris ultrices eros in cursus turpis massa. Mi proin sed libero enim sed. Euismod elementum nisi quis eleifend quam adipiscing vitae. Pellentesque habitant morbi tristique senectus et netus. Varius quam quisque id diam vel quam. Quam adipiscing vitae proin sagittis nisl rhoncus mattis. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus.

Ut morbi tincidunt augue interdum velit euismod in pellentesque. Ac orci phasellus egestas tellus. Urna molestie at elementum eu facilisis. Eros in cursus turpis massa tincidunt dui ut ornare lectus. Amet massa vitae tortor condimentum lacinia quis vel. Aliquam purus sit amet luctus venenatis lectus magna fringilla. Quis auctor elit sed vulputate mi sit amet mauris commodo. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Pellentesque adipiscing commodo elit at imperdiet. Tristique et egestas quis ipsum suspendisse ultrices. Egestas maecenas pharetra convallis posuere morbi. Sed nisi lacus sed viverra tellus in hac habitasse platea. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus.[/font][/div][/div]
   [/div]
   [div class="tabbutton one tab"][div=opacity:0]1[/div][/div] 
   [div class="tabbutton two tab"][div=opacity:0]2[/div][/div] 
   [div class="tabbutton three tab"][div=opacity:0]3[/div][/div] 
   [div class="tabbutton four tab"][div=opacity:0]4[/div][/div] 
[/div][/div][div class=credit]code by [USER=2383][COLOR=#FF3400]sox[/COLOR][/USER][/div]

 

[sox]

ICE CREAM - MOBILE FRIENDLY

it's a mobile friendly cs!! woot woot!! this code is a little fickle and not too easy to read, but i like how it turned out! for readability purposes, i made all the text boxes expand when you hover over them, but you can easily disable that by deleting the hover classes. please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=bkgd] position: relative; box-sizing: border-box; width: 300px; height: 500px; background-color: #EDD0E5; overflow: visible; margin-left: auto; margin-right: auto; padding: 0; border: 2px solid #fff; [/class] [class=name] position: absolute; top: -2px; overflow: hidden; width: 100%; height: auto; text-align: center; font-style: normal; font-weight: normal; font-size: 30px; color: #fff; text-shadow: 2px 2px 0px #A17093; text-transform: uppercase; [/class] [class=role] position: absolute; top: 35px; overflow: hidden; width: 100%; height: auto; text-align: center; font-style: normal; font-weight: normal; font-size: 15px; color: #fff; text-transform: uppercase; [/class] [class=secpanel] position: absolute; overflow: visible; width: 300px; height: 434px; left: 0px; top: 66px; [/class] [class=sec1] position: absolute; overflow: visible; width: 296px; height: 110px; left: 0px; top: 66px; background-color: #EBDFB9; border-top: 1px solid #fff; [/class] [class=sec2] position: absolute; overflow: visible; width: 296px; height: 110px; left: 0px; top: 174px; background-color: #C2E4DE; border-top: 1px solid #fff; [/class] [class=sec3] position: absolute; overflow: visible; width: 296px; height: 110px; left: 0px; top: 283px; background-color: #DBE4C2; border-top: 1px solid #fff; [/class] [class=sec4] position: absolute; overflow: visible; width: 296px; height: 106px; left: 0px; top: 390px; background-color: #FCD4C2; border-top: 1px solid #fff; [/class] [class=sub1] position: absolute; top: 66px; overflow: visible; width: 285px; height: auto; text-align: right; font-style: normal; font-weight: normal; font-size: 20px; text-transform: uppercase; padding-right: 15px; color: #fff; text-shadow: 2px 2px 0px #928460; [/class] [class=sub2] position: absolute; top: 175px; overflow: visible; width: 100%; height: auto; text-align: left; font-style: normal; font-weight: normal; font-size: 20px; text-transform: uppercase; padding-left: 10px; color: #fff; text-shadow: 2px 2px 0px #739298; [/class] [class=sub3] position: absolute; top: 283px; overflow: visible; width: 285px; height: auto; text-align: right; font-style: normal; font-weight: normal; font-size: 20px; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0px #77905E; [/class] [class=sub4] position: absolute; top: 390px; overflow: visible; width: 100%; height: auto; text-align: left; font-style: normal; font-weight: normal; font-size: 20px; text-transform: uppercase; padding-left: 10px; color: #fff; text-shadow: 2px 2px 0px #987860; [/class] [class=pic1] position: absolute; overflow: visible; width: 75px; height: 75px; left: 10px; top: 72px; background: url(https://i.pinimg.com/originals/7e/d3/05/7ed30574f5640af834aeed6a09c470fa.gif); background-size: 100%; border-radius: 150px; border: 10px solid #F7F0DA; box-shadow: 2px 2px 0px #9B9B69; [/class] [class=pic2] position: absolute; overflow: visible; width: 75px; height: 75px; left: 193px; top: 180px; background: url(https://i.pinimg.com/originals/ed/71/d7/ed71d7fdc5be4e5d7fb827aeca16888c.gif); background-size: 200%; background-position: 30% 0%; border-radius: 150px; border: 10px solid #E2F5F2; box-shadow: 2px 2px 0px #69949B; [/class] [class=pic3] position: absolute; overflow: visible; width: 75px; height: 75px; left: 10px; top: 289px; background: url(https://i.pinimg.com/originals/60/f2/8d/60f28d8e27b57f64a5d7de819edf31cd.gif); background-size: 100%; background-position: 40% 0%; border-radius: 150px; border: 10px solid #F2F8E2; box-shadow: 2px 2px 0px #7D9B69; [/class] [class=pic4] position: absolute; overflow: visible; width: 75px; height: 75px; left: 193px; top: 396px; background: url(https://66.media.tumblr.com/007b9772940052c7f45ae69712b9cc38/tumblr_pjs8kv5EnP1urpxgko2_400.gif); background-size: 100%; border-radius: 150px; border: 10px solid #FFECE5; box-shadow: 2px 2px 0px #987860; [/class] [class=text1] position: relative; overflow: auto; width: 155px; height: 80px; padding: 5px 20px 5px 12px; font-size: 8px; line-height: 8px; text-align: justify; text-transform: lowercase; color: #9B9B69; [/class] [class=text1cont] position: absolute; overflow: hidden; width: 168px; height: 68px; left: 118px; top: 95px; background-color: #F7F0DA; border: 1px solid #fff; [/class] [class name=text1cont state=hover] transform: scale(1.4); height: 90px; transition-duration: 0.2s; [/class] [class=text2] position: relative; overflow: auto; width: 155px; height: 80px; padding: 5px 20px 5px 12px; font-size: 8px; line-height: 8px; text-align: justify; text-transform: lowercase; color: #69949B; [/class] [class=text2cont] position: absolute; overflow: hidden; width: 168px; height: 68px; left: 10px; top: 204px; background-color: #E2F5F2; border: 1px solid #fff; [/class] [class name=text2cont state=hover] transform: scale(1.4); height: 90px; transition-duration: 0.2s; [/class] [class=text3] position: relative; overflow: auto; width: 155px; height: 80px; padding: 5px 20px 5px 12px; font-size: 8px; line-height: 8px; text-align: justify; text-transform: lowercase; color: #7D9B69; [/class] [class=text3cont] position: absolute; overflow: hidden; width: 168px; height: 68px; left: 118px; top: 312px; background-color: #F2F8E2; border: 1px solid #fff; [/class] [class name=text3cont state=hover] transform: scale(1.4); height: 90px; transition-duration: 0.2s; [/class] [class=text4] position: relative; overflow: auto; width: 155px; height: 80px; padding: 5px 20px 5px 12px; font-size: 8px; line-height: 8px; text-align: justify; text-transform: lowercase; color: #987860; [/class] [class=text4cont] position: absolute; overflow: hidden; width: 168px; height: 68px; left: 10px; top: 419px; background-color: #FFECE5; border: 1px solid #fff; [/class] [class name=text4cont state=hover] transform: scale(1.4); height: 90px; transition-duration: 0.2s; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: 8px; text-align: center; font-style: normal; font-weight: normal; font-size: 6px; color: #EDD0E5; opacity: 0.2; [/class]
[div class=bkgd]
[div class=name]felix lee[/div]
[div class=role]ice cream[/div]
[div class=secpanel][/div]
[div class=sec1][/div]
[div class=sec2][/div]
[div class=sec3][/div]
[div class=sec4][/div]
[div class=sub1]basics[/div]
[div class=sub2]persona[/div]
[div class=sub3]history[/div]
[div class=sub4]misc[/div]
[div class=pic1][/div]
[div class=pic2][/div]
[div class=pic3][/div]
[div class=pic4][/div]
[div class=text1cont][div class=text1]name: felix lee

age: 19

gender: male

sexuality: heterosexual

occupation: rapper

ethnicity: korean

nationality: australian

hair color: dyed blonde

eye color: dark brown

body type: ectomorph

height: 5' 8"
[/div][/div]
[div class=text2cont][div class=text2]vices: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Sit amet venenatis urna cursus eget.

virtues: Ipsum nunc aliquet bibendum enim facilisis. In dictum non consectetur a erat. Cursus sit amet dictum sit amet justo. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel.

strengths: Duis ut diam quam nulla porttitor massa id neque. Ut etiam sit amet nisl purus in mollis nunc. Duis at consectetur lorem donec massa sapien. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Nibh praesent tristique magna sit amet. Est sit amet facilisis magna etiam tempor orci eu lobortis. Ante metus dictum at tempor commodo ullamcorper a. Urna neque viverra justo nec ultrices dui sapien eget.

weaknesses: Maecenas ultricies mi eget mauris pharetra et ultrices neque. Risus in hendrerit gravida rutrum quisque non tellus. Praesent tristique magna sit amet purus gravida quis. Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

fears: Odio morbi quis commodo odio. Odio facilisis mauris sit amet. Nec nam aliquam sem et. Semper quis lectus nulla at. Ipsum suspendisse ultrices gravida dictum fusce ut placerat. Varius quam quisque id diam. Sit amet facilisis magna etiam tempor orci eu. Lorem dolor sed viverra ipsum nunc. Nunc scelerisque viverra mauris in. Commodo quis imperdiet massa tincidunt. Ante in nibh mauris cursus mattis molestie a iaculis.

ambitions: Sagittis vitae et leo duis ut diam quam nulla. Orci eu lobortis elementum nibh tellus molestie. Diam donec adipiscing tristique risus nec feugiat. Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Interdum velit euismod in pellentesque massa placerat duis. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Malesuada nunc vel risus commodo viverra. Neque egestas congue quisque egestas diam in. Imperdiet proin fermentum leo vel.

habits/quirks: Ac turpis egestas integer eget. Varius sit amet mattis vulputate. Massa massa ultricies mi quis hendrerit. Tellus in metus vulputate eu scelerisque. Amet dictum sit amet justo donec enim diam. Dictum fusce ut placerat orci nulla. Et malesuada fames ac turpis egestas sed. Nisl tincidunt eget nullam non nisi. Dignissim convallis aenean et tortor at risus viverra adipiscing. Mauris cursus mattis molestie a. Morbi quis commodo odio aenean sed adipiscing diam.

likes: Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

dislikes: Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Nibh praesent tristique magna sit amet. Est sit amet facilisis magna etiam tempor orci eu lobortis. Ante metus dictum at tempor commodo ullamcorper a. Urna neque viverra justo nec ultrices dui sapien eget. Maecenas ultricies mi eget mauris pharetra et ultrices neque.
[/div][/div]
[div class=text3cont][div class=text3]family: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Sit amet venenatis urna cursus eget.

residence: Ipsum nunc aliquet bibendum enim facilisis. In dictum non consectetur a erat. Cursus sit amet dictum sit amet justo. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel.

past romances: Duis ut diam quam nulla porttitor massa id neque. Ut etiam sit amet nisl purus in mollis nunc. Duis at consectetur lorem donec massa sapien. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Nibh praesent tristique magna sit amet. Est sit amet facilisis magna etiam tempor orci eu lobortis. Ante metus dictum at tempor commodo ullamcorper a. Urna neque viverra justo nec ultrices dui sapien eget. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Risus in hendrerit gravida rutrum quisque non tellus. Praesent tristique magna sit amet purus gravida quis. Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

history: Odio morbi quis commodo odio. Odio facilisis mauris sit amet. Nec nam aliquam sem et. Semper quis lectus nulla at. Ipsum suspendisse ultrices gravida dictum fusce ut placerat. Varius quam quisque id diam. Sit amet facilisis magna etiam tempor orci eu. Lorem dolor sed viverra ipsum nunc. Nunc scelerisque viverra mauris in. Commodo quis imperdiet massa tincidunt. Ante in nibh mauris cursus mattis molestie a iaculis. Sagittis vitae et leo duis ut diam quam nulla. Orci eu lobortis elementum nibh tellus molestie. Diam donec adipiscing tristique risus nec feugiat. Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Interdum velit euismod in pellentesque massa placerat duis. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Malesuada nunc vel risus commodo viverra. Neque egestas congue quisque egestas diam in. Imperdiet proin fermentum leo vel.

education: Ac turpis egestas integer eget. Varius sit amet mattis vulputate. Massa massa ultricies mi quis hendrerit. Tellus in metus vulputate eu scelerisque. Amet dictum sit amet justo donec enim diam. Dictum fusce ut placerat orci nulla. Et malesuada fames ac turpis egestas sed. Nisl tincidunt eget nullam non nisi. Dignissim convallis aenean et tortor at risus viverra adipiscing. Mauris cursus mattis molestie a. Morbi quis commodo odio aenean sed adipiscing diam. Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.
[/div][/div]
[div class=text4cont][div class=text4]theme song: side effects by stray kids

favorite food: tteokbokki

favorite drink: milk

other: Maecenas ultricies mi eget mauris pharetra et ultrices neque. Risus in hendrerit gravida rutrum quisque non tellus. Praesent tristique magna sit amet purus gravida quis. Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

relationships: Odio morbi quis commodo odio. Odio facilisis mauris sit amet. Nec nam aliquam sem et. Semper quis lectus nulla at. Ipsum suspendisse ultrices gravida dictum fusce ut placerat. Varius quam quisque id diam. Sit amet facilisis magna etiam tempor orci eu. Lorem dolor sed viverra ipsum nunc. Nunc scelerisque viverra mauris in. Commodo quis imperdiet massa tincidunt. Ante in nibh mauris cursus mattis molestie a iaculis.

Sagittis vitae et leo duis ut diam quam nulla. Orci eu lobortis elementum nibh tellus molestie. Diam donec adipiscing tristique risus nec feugiat. Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Interdum velit euismod in pellentesque massa placerat duis. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Malesuada nunc vel risus commodo viverra. Neque egestas congue quisque egestas diam in. Imperdiet proin fermentum leo vel.

Ac turpis egestas integer eget. Varius sit amet mattis vulputate. Massa massa ultricies mi quis hendrerit. Tellus in metus vulputate eu scelerisque. Amet dictum sit amet justo donec enim diam. Dictum fusce ut placerat orci nulla. Et malesuada fames ac turpis egestas sed. Nisl tincidunt eget nullam non nisi. Dignissim convallis aenean et tortor at risus viverra adipiscing. Mauris cursus mattis molestie a. Morbi quis commodo odio aenean sed adipiscing diam.

Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Nibh praesent tristique magna sit amet. Est sit amet facilisis magna etiam tempor orci eu lobortis. Ante metus dictum at tempor commodo ullamcorper a. Urna neque viverra justo nec ultrices dui sapien eget. Maecenas ultricies mi eget mauris pharetra et ultrices neque.
[/div][/div]
[/div][div class=credit]code by sox [/div]

Spoiler: code

[nobr]
	[class=bkgd]
		position: relative;
		box-sizing: border-box;
		width: 300px;
		height: 500px;
		background-color: #EDD0E5;
		overflow: visible;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
                border: 2px solid #fff;
	[/class]
	[class=name]
		position: absolute;
		top: -2px;
		overflow: hidden;
		width: 100%;
		height: auto;
		text-align: center;
		font-style: normal;
		font-weight: normal;
		font-size: 30px;
		color: #fff;
		text-shadow: 2px 2px 0px #A17093;
		text-transform: uppercase;
	[/class]
	[class=role]
		position: absolute;
		top: 35px;
		overflow: hidden;
		width: 100%;
		height: auto;
		text-align: center;
		font-style: normal;
		font-weight: normal;
		font-size: 15px;
		color: #fff;
		text-transform: uppercase;
	[/class]
	[class=secpanel]
		position: absolute;
		overflow: visible;
		width: 300px;
		height: 434px;
		left: 0px;
		top: 66px;
	[/class]
	[class=sec1]
		position: absolute;
		overflow: visible;
		width: 296px;
		height: 110px;
		left: 0px;
		top: 66px;
		background-color: #EBDFB9;
		border-top: 1px solid #fff;
	[/class]
	[class=sec2]
		position: absolute;
		overflow: visible;
		width: 296px;
		height: 110px;
		left: 0px;
		top: 174px;
		background-color: #C2E4DE;
		border-top: 1px solid #fff;
	[/class]
	[class=sec3]
		position: absolute;
		overflow: visible;
		width: 296px;
		height: 110px;
		left: 0px;
		top: 283px;
		background-color: #DBE4C2;
		border-top: 1px solid #fff;
	[/class]
	[class=sec4]
		position: absolute;
		overflow: visible;
		width: 296px;
		height: 106px;
		left: 0px;
		top: 390px;
		background-color: #FCD4C2;
		border-top: 1px solid #fff;
	[/class]
	[class=sub1]
		position: absolute;
		top: 66px;
		overflow: visible;
		width: 285px;
		height: auto;
		text-align: right;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		text-transform: uppercase;
		padding-right: 15px;
		color: #fff;
		text-shadow: 2px 2px 0px #928460;
	[/class]
	[class=sub2]
		position: absolute;
		top: 175px;
		overflow: visible;
		width: 100%;
		height: auto;
		text-align: left;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		text-transform: uppercase;
		padding-left: 10px;
		color: #fff;
		text-shadow: 2px 2px 0px #739298;
	[/class]
	[class=sub3]
		position: absolute;
		top: 283px;
		overflow: visible;
		width: 285px;
		height: auto;
		text-align: right;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		text-transform: uppercase;
		color: #fff;
		text-shadow: 2px 2px 0px #77905E;
	[/class]
	[class=sub4]
		position: absolute;
		top: 390px;
		overflow: visible;
		width: 100%;
		height: auto;
		text-align: left;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		text-transform: uppercase;
		padding-left: 10px;
		color: #fff;
		text-shadow: 2px 2px 0px #987860;
	[/class]
	[class=pic1]
		position: absolute;
		overflow: visible;
		width: 75px;
		height: 75px;
		left: 10px;
		top: 72px;
		background: url(https://i.pinimg.com/originals/7e/d3/05/7ed30574f5640af834aeed6a09c470fa.gif);
		background-size: 100%;
		border-radius: 150px;
		border: 10px solid #F7F0DA;
		box-shadow: 2px 2px 0px #9B9B69;
	[/class]
	[class=pic2]
		position: absolute;
		overflow: visible;
		width: 75px;
		height: 75px;
		left: 193px;
		top: 180px;
		background: url(https://i.pinimg.com/originals/ed/71/d7/ed71d7fdc5be4e5d7fb827aeca16888c.gif);
		background-size: 200%;
                background-position: 30% 0%;
		border-radius: 150px;
		border: 10px solid #E2F5F2;
		box-shadow: 2px 2px 0px #69949B;
	[/class]
	[class=pic3]
		position: absolute;
		overflow: visible;
		width: 75px;
		height: 75px;
		left: 10px;
		top: 289px;
		background: url(https://i.pinimg.com/originals/60/f2/8d/60f28d8e27b57f64a5d7de819edf31cd.gif);
		background-size: 100%;
                background-position: 40% 0%;
		border-radius: 150px;
		border: 10px solid #F2F8E2;
		box-shadow: 2px 2px 0px #7D9B69;
	[/class]
	[class=pic4]
		position: absolute;
		overflow: visible;
		width: 75px;
		height: 75px;
		left: 193px;
		top: 396px;
		background: url(https://66.media.tumblr.com/007b9772940052c7f45ae69712b9cc38/tumblr_pjs8kv5EnP1urpxgko2_400.gif);
		background-size: 100%;
		border-radius: 150px;
		border: 10px solid #FFECE5;
		box-shadow: 2px 2px 0px #987860;
	[/class]
	[class=text1]
		position: relative;
		overflow: auto;
		width: 155px;
		height: 80px;
		padding: 5px 20px 5px 12px;
		font-size: 8px;
		line-height: 8px;
		text-align: justify;
		text-transform: lowercase;
		color: #9B9B69;
	[/class]
	[class=text1cont]
		position: absolute;
		overflow: hidden;
		width: 168px;
		height: 68px;
		left: 118px;
		top: 95px;
		background-color: #F7F0DA;
		border: 1px solid #fff;
	[/class]
        [class name=text1cont state=hover]
                transform: scale(1.4);
                height: 90px;
                transition-duration: 0.2s;
        [/class]
	[class=text2]
		position: relative;
		overflow: auto;
		width: 155px;
		height: 80px;
		padding: 5px 20px 5px 12px;
		font-size: 8px;
		line-height: 8px;
		text-align: justify;
		text-transform: lowercase;
		color: #69949B;
	[/class]
	[class=text2cont]
		position: absolute;
		overflow: hidden;
		width: 168px;
		height: 68px;
		left: 10px;
		top: 204px;
		background-color: #E2F5F2;
		border: 1px solid #fff;
	[/class]
        [class name=text2cont state=hover]
                transform: scale(1.4);
                height: 90px;
                transition-duration: 0.2s;
        [/class]
	[class=text3]
		position: relative;
		overflow: auto;
		width: 155px;
		height: 80px;
		padding: 5px 20px 5px 12px;
		font-size: 8px;
		line-height: 8px;
		text-align: justify;
		text-transform: lowercase;
		color: #7D9B69;
	[/class]
	[class=text3cont]
		position: absolute;
		overflow: hidden;
		width: 168px;
		height: 68px;
		left: 118px;
		top: 312px;
		background-color: #F2F8E2;
		border: 1px solid #fff;
	[/class]
        [class name=text3cont state=hover]
                transform: scale(1.4);
                height: 90px;
                transition-duration: 0.2s;
        [/class]
	[class=text4]
		position: relative;
		overflow: auto;
		width: 155px;
		height: 80px;
		padding: 5px 20px 5px 12px;
		font-size: 8px;
		line-height: 8px;
		text-align: justify;
		text-transform: lowercase;
		color: #987860;
	[/class]
	[class=text4cont]
		position: absolute;
		overflow: hidden;
		width: 168px;
		height: 68px;
		left: 10px;
		top: 419px;
		background-color: #FFECE5;
		border: 1px solid #fff;
	[/class]
        [class name=text4cont state=hover]
                transform: scale(1.4);
                height: 90px;
                transition-duration: 0.2s;
        [/class]
    [class=credit]
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 8px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 6px;
        color: #EDD0E5;
        opacity: 0.2;
    [/class]
[/nobr]
	[div class=bkgd]
	[div class=name][font=Acme]felix lee[/font][/div]
	[div class=role][font=Acme]ice cream[/font][/div]
	[div class=secpanel][/div]
	[div class=sec1][/div]
	[div class=sec2][/div]
	[div class=sec3][/div]
	[div class=sec4][/div]
	[div class=sub1][font=Acme]basics[/font][/div]
	[div class=sub2][font=Acme]persona[/font][/div]
	[div class=sub3][font=Acme]history[/font][/div]
	[div class=sub4][font=Acme]misc[/font][/div]
	[div class=pic1][/div]
	[div class=pic2][/div]
	[div class=pic3][/div]
	[div class=pic4][/div]
	[div class=text1cont][div class=text1][font=Raleway][b]name:[/b] felix lee

[b]age:[/b] 19

[b]gender:[/b] male

[b]sexuality:[/b] heterosexual

[b]occupation:[/b] rapper

[b]ethnicity:[/b] korean

[b]nationality:[/b] australian

[b]hair color:[/b] dyed blonde

[b]eye color:[/b] dark brown

[b]body type:[/b] ectomorph

[b]height:[/b] 5' 8"
[/font][/div][/div]
	[div class=text2cont][div class=text2][font=Raleway][b]vices:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Sit amet venenatis urna cursus eget.

[b]virtues:[/b] Ipsum nunc aliquet bibendum enim facilisis. In dictum non consectetur a erat. Cursus sit amet dictum sit amet justo. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel.

[b]strengths:[/b] Duis ut diam quam nulla porttitor massa id neque. Ut etiam sit amet nisl purus in mollis nunc. Duis at consectetur lorem donec massa sapien. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Nibh praesent tristique magna sit amet. Est sit amet facilisis magna etiam tempor orci eu lobortis. Ante metus dictum at tempor commodo ullamcorper a. Urna neque viverra justo nec ultrices dui sapien eget.

[b]weaknesses:[/b] Maecenas ultricies mi eget mauris pharetra et ultrices neque. Risus in hendrerit gravida rutrum quisque non tellus. Praesent tristique magna sit amet purus gravida quis. Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

[b]fears:[/b] Odio morbi quis commodo odio. Odio facilisis mauris sit amet. Nec nam aliquam sem et. Semper quis lectus nulla at. Ipsum suspendisse ultrices gravida dictum fusce ut placerat. Varius quam quisque id diam. Sit amet facilisis magna etiam tempor orci eu. Lorem dolor sed viverra ipsum nunc. Nunc scelerisque viverra mauris in. Commodo quis imperdiet massa tincidunt. Ante in nibh mauris cursus mattis molestie a iaculis.

[b]ambitions:[/b] Sagittis vitae et leo duis ut diam quam nulla. Orci eu lobortis elementum nibh tellus molestie. Diam donec adipiscing tristique risus nec feugiat. Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Interdum velit euismod in pellentesque massa placerat duis. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Malesuada nunc vel risus commodo viverra. Neque egestas congue quisque egestas diam in. Imperdiet proin fermentum leo vel.

[b]habits/quirks:[/b] Ac turpis egestas integer eget. Varius sit amet mattis vulputate. Massa massa ultricies mi quis hendrerit. Tellus in metus vulputate eu scelerisque. Amet dictum sit amet justo donec enim diam. Dictum fusce ut placerat orci nulla. Et malesuada fames ac turpis egestas sed. Nisl tincidunt eget nullam non nisi. Dignissim convallis aenean et tortor at risus viverra adipiscing. Mauris cursus mattis molestie a. Morbi quis commodo odio aenean sed adipiscing diam.

[b]likes:[/b] Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

[b]dislikes:[/b] Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Nibh praesent tristique magna sit amet. Est sit amet facilisis magna etiam tempor orci eu lobortis. Ante metus dictum at tempor commodo ullamcorper a. Urna neque viverra justo nec ultrices dui sapien eget. Maecenas ultricies mi eget mauris pharetra et ultrices neque.
[/font][/div][/div]
	[div class=text3cont][div class=text3][font=Raleway][b]family:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Sit amet venenatis urna cursus eget.

[b]residence:[/b] Ipsum nunc aliquet bibendum enim facilisis. In dictum non consectetur a erat. Cursus sit amet dictum sit amet justo. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel.

[b]past romances:[/b] Duis ut diam quam nulla porttitor massa id neque. Ut etiam sit amet nisl purus in mollis nunc. Duis at consectetur lorem donec massa sapien. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Nibh praesent tristique magna sit amet. Est sit amet facilisis magna etiam tempor orci eu lobortis. Ante metus dictum at tempor commodo ullamcorper a. Urna neque viverra justo nec ultrices dui sapien eget. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Risus in hendrerit gravida rutrum quisque non tellus. Praesent tristique magna sit amet purus gravida quis. Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

[b]history:[/b] Odio morbi quis commodo odio. Odio facilisis mauris sit amet. Nec nam aliquam sem et. Semper quis lectus nulla at. Ipsum suspendisse ultrices gravida dictum fusce ut placerat. Varius quam quisque id diam. Sit amet facilisis magna etiam tempor orci eu. Lorem dolor sed viverra ipsum nunc. Nunc scelerisque viverra mauris in. Commodo quis imperdiet massa tincidunt. Ante in nibh mauris cursus mattis molestie a iaculis. Sagittis vitae et leo duis ut diam quam nulla. Orci eu lobortis elementum nibh tellus molestie. Diam donec adipiscing tristique risus nec feugiat. Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Interdum velit euismod in pellentesque massa placerat duis. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Malesuada nunc vel risus commodo viverra. Neque egestas congue quisque egestas diam in. Imperdiet proin fermentum leo vel.

[b]education:[/b] Ac turpis egestas integer eget. Varius sit amet mattis vulputate. Massa massa ultricies mi quis hendrerit. Tellus in metus vulputate eu scelerisque. Amet dictum sit amet justo donec enim diam. Dictum fusce ut placerat orci nulla. Et malesuada fames ac turpis egestas sed. Nisl tincidunt eget nullam non nisi. Dignissim convallis aenean et tortor at risus viverra adipiscing. Mauris cursus mattis molestie a. Morbi quis commodo odio aenean sed adipiscing diam. Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.
[/font][/div][/div]
	[div class=text4cont][div class=text4][font=Raleway][b]theme song:[/b] side effects by stray kids

[b]favorite food:[/b] tteokbokki

[b]favorite drink:[/b] milk

[b]other:[/b] Maecenas ultricies mi eget mauris pharetra et ultrices neque. Risus in hendrerit gravida rutrum quisque non tellus. Praesent tristique magna sit amet purus gravida quis. Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

[b]relationships:[/b] Odio morbi quis commodo odio. Odio facilisis mauris sit amet. Nec nam aliquam sem et. Semper quis lectus nulla at. Ipsum suspendisse ultrices gravida dictum fusce ut placerat. Varius quam quisque id diam. Sit amet facilisis magna etiam tempor orci eu. Lorem dolor sed viverra ipsum nunc. Nunc scelerisque viverra mauris in. Commodo quis imperdiet massa tincidunt. Ante in nibh mauris cursus mattis molestie a iaculis.

Sagittis vitae et leo duis ut diam quam nulla. Orci eu lobortis elementum nibh tellus molestie. Diam donec adipiscing tristique risus nec feugiat. Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Interdum velit euismod in pellentesque massa placerat duis. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Malesuada nunc vel risus commodo viverra. Neque egestas congue quisque egestas diam in. Imperdiet proin fermentum leo vel.

Ac turpis egestas integer eget. Varius sit amet mattis vulputate. Massa massa ultricies mi quis hendrerit. Tellus in metus vulputate eu scelerisque. Amet dictum sit amet justo donec enim diam. Dictum fusce ut placerat orci nulla. Et malesuada fames ac turpis egestas sed. Nisl tincidunt eget nullam non nisi. Dignissim convallis aenean et tortor at risus viverra adipiscing. Mauris cursus mattis molestie a. Morbi quis commodo odio aenean sed adipiscing diam.

Fusce ut placerat orci nulla pellentesque dignissim enim. Mi eget mauris pharetra et ultrices neque ornare. Condimentum vitae sapien pellentesque habitant morbi. Semper auctor neque vitae tempus quam pellentesque. Consectetur libero id faucibus nisl tincidunt eget nullam.

Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Nibh praesent tristique magna sit amet. Est sit amet facilisis magna etiam tempor orci eu lobortis. Ante metus dictum at tempor commodo ullamcorper a. Urna neque viverra justo nec ultrices dui sapien eget. Maecenas ultricies mi eget mauris pharetra et ultrices neque.
[/font][/div][/div]
[/div][div class=credit]code by [USER=2383][COLOR=#EDD0E5]sox[/COLOR][/USER][/div]

 

[sox]

ESPRESSO - NOT MOBILE FRIENDLY

it's been a hot minute c: this is the code that i built in my dreamweaver tutorial, but i went ahead and added the buttons and tabs off camera bc im 2 lazy 2 film rn oopsieeee i'll put up a buttons/tabs/hovers/transitions tutorial soon! for now, though, enjoy this cs c: the text boxes scroll, and that is it lol the coffee pictures on the right are vectors including the backgrounds, so if you wanna change out those images, you'll have to add border: 5px solid {insert color hexes} to each of them if you wanna keep the color theme there. please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=bkgd] position: relative; box-sizing: border-box; width: 600px; height: 400px; overflow: hidden; margin-right: auto; margin-left: auto; padding: 0; [/class] [class=title] position: absolute; overflow: visible; width: 458px; height: 27px; left: 124px; top: 10px; background-color: #6C7744; color: #fff; text-align: left; font-weight: 700; line-height: 25px; font-size: 20px; padding: 5px; text-transform: lowercase; text-shadow: 2px 2px 0px #2C1609; [/class] [class=pane] position: absolute; overflow: visible; width: 110px; height: 400px; left: 0px; top: 0px; background-color: #2C1609; border-right: 3px solid #712D28; [/class] [class=pic1] position: absolute; overflow: visible; width: 70px; height: 70px; left: 10px; top: 12px; background: url(https://i.pinimg.com/474x/88/03/e8/8803e8d602625df33ad4a3e2f0b49195.jpg); background-size: 100%; border-radius: 200px; border: 10px solid #886237; box-shadow: 3px 3px 0px #712D28; [/class] [class=pic2] position: absolute; overflow: visible; width: 70px; height: 70px; left: 10px; top: 107px; background: url(https://i.pinimg.com/564x/d0/17/06/d017068ff961540424c1a45facf628f6.jpg); background-size: 180%; background-position: 100% 0%; border-radius: 200px; border: 10px solid #6C7744; box-shadow: 3px 3px 0px #712D28; [/class] [class=pic3] position: absolute; overflow: visible; width: 70px; height: 70px; left: 10px; top: 203px; background: url(https://i.pinimg.com/474x/22/42/e4/2242e45bbd4f91b88d62975e840fd971.jpg); background-size: 100%; background-position: 0% 0%; border-radius: 200px; border: 10px solid #886237; box-shadow: 3px 3px 0px #712D28; [/class] [class=pic4] position: absolute; overflow: visible; width: 70px; height: 70px; left: 10px; top: 298px; background: url(https://i.pinimg.com/474x/60/4a/2d/604a2d03cac2f1dd1bc2d56986c7d89c.jpg); background-size: 100%; border-radius: 200px; border: 10px solid #6C7744; box-shadow: 3px 3px 0px #712D28; [/class] [class=ic1] position: absolute; overflow: visible; width: 130px; height: 130px; left: 390px; top: 75px; background: url(https://imgur.com/RBPIUpd.png); background-size: 100%; border-radius: 200px; box-shadow: 3px 3px 0px #2C1609; [/class] [class=ic2] position: absolute; overflow: visible; width: 130px; height: 130px; left: 456px; top: 167px; background: url(https://imgur.com/BOEU0r7.png); background-size: 100%; border-radius: 200px; box-shadow: 3px 3px 0px #2C1609; [/class] [class=ic3] position: absolute; overflow: visible; width: 130px; height: 130px; left: 390px; top: 260px; background: url(https://imgur.com/z9WhS2Z.png); background-size: 100%; border-radius: 200px; box-shadow: 3px 3px 0px #2C1609; [/class] [class=one] left: 440px; top: 230px; [/class] [class=two] left: 481px; top: 241px; [/class] [class=three] left: 510px; top: 271.51px; [/class] [class=four] left: 520px; top: 310px; [/class] [class=tab] position: absolute; overflow: visible; width: 30px; height: 30px; transform-origin: left; background-color: #6C7744; border-radius: 200px; box-shadow: 2px 2px 0px #2C1609; font-size: 15px; text-align: center; line-height: 30px; color: #fff; [/class] [class name=tab state=hover] background-color: #fff; transition-duration: 0.2s; color: #2C1609; [/class] [class=sub] position: absolute; overflow: visible; width: 465px; height: 15px; left: 124px; top: 48px; color: #fff; text-align: right; font-weight: 400; line-height: 18px; font-size: 15px; text-transform: lowercase; [/class] [class=subbar] position: absolute; overflow: visible; width: 458px; height: 15px; left: 124px; top: 44px; background-color: #712D28; padding: 5px; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} 1) (fadeIn 600 tabsContent1) if (eq ${currentTab} 2) (fadeIn 600 tabsContent2) if (eq ${currentTab} 3) (fadeIn 600 tabsContent3) if (eq ${currentTab} 4) (fadeIn 600 tabsContent4) [/script] [class=text] position: relative; overflow: auto; width: 250px; height: 275px; color: #fff; text-align: justify; font-weight: 400; line-height: 12px; font-size: 11px; padding: 10px 15px 5px 5px; text-transform: lowercase; [/class] [class=textcontainer] position: absolute; overflow: hidden; width: 250px; height: 305px; left: 124px; top: 80px; background-color: #2C1609; [/class] [class=tag] position: relative; overflow: hidden; display: inline; width: auto; height: auto; border: 1px solid #fff; padding: 0px 5px 0px 5px; margin-right: 5px; margin-bottom: 3px; text-transform: lowercase; text-align: center; font-size: 11px; font-weight: 700; line-height: 14px; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: 8px; text-align: center; font-style: normal; font-weight: normal; font-size: 6px; color: #712D28; opacity: 0.5; [/class]
[div class=bkgd]
[div class=title]espresso.[/div]
[div class=pane][/div]
[div class=pic1][/div]
[div class=pic2][/div]
[div class=pic3][/div]
[div class=pic4][/div]
[div class=ic1][/div]
[div class=ic2][/div]
[div class="one tab"]1[/div]
[div class="two tab"]2[/div]
[div class=ic3][/div]
[div class="three tab"]3[/div]
[div class="four tab"]4[/div]
[div class=subbar][/div]
[div class="sub tabsContent tabsContent1"]basics.[/div]
[div class="sub tabsContent tabsContent2" style="display:none;"]persona.[/div]
[div class="sub tabsContent tabsContent3" style="display:none;"]background.[/div]
[div class="sub tabsContent tabsContent4" style="display:none;"]gallery.[/div]
[div class="tabsContent tabsContent1"][div class=textcontainer][div class=text][div class=tag]name[/div]Jaejoon Levesque

[div class=tag]nickname[/div]june

[div class=tag]age[/div]21

[div class=tag]gender[/div]male

[div class=tag]sexuality[/div]heterosexual

[div class=tag]role[/div]blood manipulation

[div class=tag]occupation[/div]bartender + barista

[div class=tag]hair color[/div]black

[div class=tag]eye color[/div]dark brown

[div class=tag]height[/div]6' 1"

[div class=tag]weight[/div]193 lbs

[div class=tag]body type[/div]mesomorph

[div class=tag]body mods[/div]Pulvinar elementum integer enim neque. Amet justo donec enim diam.

[div class=tag]notable features[/div]Pharetra convallis posuere morbi leo urna molestie at elementum eu. Sed turpis tincidunt id aliquet risus feugiat in ante metus.
[/div][/div][/div]
[div class="tabsContent tabsContent2" style="display: none;"][div class=textcontainer][div class=text][div class=tag]vices[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Id semper risus in hendrerit. Diam donec adipiscing tristique risus nec. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Arcu bibendum at varius vel pharetra vel. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin.

[div class=tag]virtues[/div]Pellentesque habitant morbi tristique senectus et netus et malesuada. Nec ullamcorper sit amet risus. Viverra adipiscing at in tellus integer feugiat scelerisque. Amet cursus sit amet dictum sit amet justo donec enim. Mattis vulputate enim nulla aliquet porttitor lacus luctus. Sed turpis tincidunt id aliquet risus feugiat in. Consequat id porta nibh venenatis cras sed. At tellus at urna condimentum mattis pellentesque id nibh tortor. Nunc pulvinar sapien et ligula.

[div class=tag]likes[/div]Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Sem et tortor consequat id porta nibh. Blandit cursus risus at ultrices mi tempus imperdiet nulla. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Euismod in pellentesque massa placerat duis ultricies lacus sed.

[div class=tag]dislikes[/div]Tincidunt arcu non sodales neque sodales ut. Quam id leo in vitae turpis massa sed elementum tempus. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Laoreet sit amet cursus sit amet. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eu volutpat odio facilisis mauris sit amet massa vitae tortor.

[div class=tag]strengths[/div]Orci sagittis eu volutpat odio facilisis mauris sit. Cursus vitae congue mauris rhoncus. Ante metus dictum at tempor. Eu turpis egestas pretium aenean pharetra magna ac placerat. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Fusce ut placerat orci nulla. Nec nam aliquam sem et tortor. Convallis a cras semper auctor neque vitae tempus. Mi sit amet mauris commodo. Tristique sollicitudin nibh sit amet commodo nulla. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Sed vulputate odio ut enim blandit volutpat maecenas. Congue nisi vitae suscipit tellus mauris.

[div class=tag]weaknesses[/div]Sed adipiscing diam donec adipiscing tristique risus nec. Suspendisse ultrices gravida dictum fusce ut placerat. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Amet porttitor eget dolor morbi non arcu risus quis. Praesent elementum facilisis leo vel fringilla est ullamcorper. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Neque aliquam vestibulum morbi blandit cursus risus at. Mollis nunc sed id semper risus in hendrerit. In nibh mauris cursus mattis. Molestie ac feugiat sed lectus vestibulum. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas pharetra convallis posuere morbi.

[div class=tag]fears/motivations[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Id semper risus in hendrerit. Diam donec adipiscing tristique risus nec. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis.

[div class=tag]habits/quirks[/div]Pellentesque habitant morbi tristique senectus et netus et malesuada. Nec ullamcorper sit amet risus. Viverra adipiscing at in tellus integer feugiat scelerisque. Amet cursus sit amet dictum sit amet justo donec enim. Mattis vulputate enim nulla aliquet porttitor lacus luctus.
[/div][/div][/div]

[div class="tabsContent tabsContent3" style="display: none;"][div class=textcontainer][div class=text][div class=tag]residence[/div]Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Interdum varius sit amet mattis vulputate enim.

[div class=tag]family[/div]Felis eget velit aliquet sagittis id consectetur. Odio eu feugiat pretium nibh ipsum consequat. Ornare massa eget egestas purus viverra. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Commodo ullamcorper a lacus vestibulum sed arcu. Aenean euismod elementum nisi quis eleifend.

[div class=tag]past romances[/div]Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. In massa tempor nec feugiat nisl. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Interdum varius sit amet mattis vulputate enim. Odio eu feugiat pretium nibh ipsum consequat. Ornare massa eget egestas purus viverra.

[div class=tag]biography[/div]Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. Urna cursus eget nunc scelerisque viverra. Pharetra massa massa ultricies mi quis. Et sollicitudin ac orci phasellus egestas tellus. Auctor augue mauris augue neque gravida in. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Neque gravida in fermentum et. Sit amet facilisis magna etiam tempor. Libero volutpat sed cras ornare. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Mattis pellentesque id nibh tortor id aliquet. Nibh tellus molestie nunc non blandit massa enim. Congue eu consequat ac felis donec et odio.

Vestibulum lorem sed risus ultricies tristique. Urna id volutpat lacus laoreet non. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Lacus viverra vitae congue eu consequat ac. Pulvinar elementum integer enim neque volutpat ac tincidunt. Sed egestas egestas fringilla phasellus faucibus. Non blandit massa enim nec dui nunc mattis. Malesuada proin libero nunc consequat. Proin sed libero enim sed faucibus turpis. Duis ultricies lacus sed turpis. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Dignissim enim sit amet venenatis urna cursus eget nunc. Nisl purus in mollis nunc. Purus gravida quis blandit turpis cursus in hac habitasse platea. Phasellus vestibulum lorem sed risus. Posuere morbi leo urna molestie at elementum eu facilisis sed. Urna neque viverra justo nec ultrices dui sapien eget. Mattis pellentesque id nibh tortor id aliquet lectus. Risus ultricies tristique nulla aliquet enim tortor at auctor.

[div class=tag]miscellaneous[/div]Ac turpis egestas integer eget aliquet nibh praesent tristique. Ornare quam viverra orci sagittis eu. Tortor id aliquet lectus proin. Tortor id aliquet lectus proin nibh nisl condimentum id. Diam quam nulla porttitor massa id. Consequat id porta nibh venenatis.

[div class=tag]theme song[/div]instagram by DEAN

[div class=tag]relationships[/div]

• follower
• rival
• best friend
• stranger
• crush

[/div][/div][/div]

[div class="tabsContent tabsContent4" style="display: none;"][div class=textcontainer][div class=text][div class=tag]gallery[/div]

[div class=tag]attire[/div]

[/div][/div][/div]
[/div][div class=credit]code by sox [/div]

Spoiler: code

[nobr]
    [class=bkgd]
        position: relative;
        box-sizing: border-box;
        width: 600px;
        height: 400px;
        overflow: hidden;
        margin-right: auto;
        margin-left: auto;
        padding: 0;
    [/class]
    [class=title]
        position: absolute;
        overflow: visible;
        width: 458px;
        height: 27px;
        left: 124px;
        top: 10px;
        background-color: #6C7744;
        color: #fff;
        text-align: left;
        font-weight: 700;
        line-height: 25px;
        font-size: 20px;
        padding: 5px;
        text-transform: lowercase;
        text-shadow: 2px 2px 0px #2C1609;
    [/class]
    [class=pane]
        position: absolute;
        overflow: visible;
        width: 110px;
        height: 400px;
        left: 0px;
        top: 0px;
        background-color: #2C1609;
        border-right: 3px solid #712D28;
    [/class]
    [class=pic1]
        position: absolute;
        overflow: visible;
        width: 70px;
        height: 70px;
        left: 10px;
        top: 12px;
        background: url(https://i.pinimg.com/474x/88/03/e8/8803e8d602625df33ad4a3e2f0b49195.jpg);
        background-size: 100%;
        border-radius: 200px;
        border: 10px solid #886237;
        box-shadow: 3px 3px 0px #712D28;
    [/class]
    [class=pic2]
        position: absolute;
        overflow: visible;
        width: 70px;
        height: 70px;
        left: 10px;
        top: 107px;
        background: url(https://i.pinimg.com/564x/d0/17/06/d017068ff961540424c1a45facf628f6.jpg);
        background-size: 180%;
        background-position: 100% 0%;
        border-radius: 200px;
        border: 10px solid #6C7744;
        box-shadow: 3px 3px 0px #712D28;
    [/class]
    [class=pic3]
        position: absolute;
        overflow: visible;
        width: 70px;
        height: 70px;
        left: 10px;
        top: 203px;
        background: url(https://i.pinimg.com/474x/22/42/e4/2242e45bbd4f91b88d62975e840fd971.jpg);
        background-size: 100%;
        background-position: 0% 0%;
        border-radius: 200px;
        border: 10px solid #886237;
        box-shadow: 3px 3px 0px #712D28;
    [/class]
    [class=pic4]
        position: absolute;
        overflow: visible;
        width: 70px;
        height: 70px;
        left: 10px;
        top: 298px;
        background: url(https://i.pinimg.com/474x/60/4a/2d/604a2d03cac2f1dd1bc2d56986c7d89c.jpg);
        background-size: 100%;
        border-radius: 200px;
        border: 10px solid #6C7744;
        box-shadow: 3px 3px 0px #712D28;
    [/class]
    [comment]vector images created by Vecteezy[/comment]
    [class=ic1]
        position: absolute;
        overflow: visible;
        width: 130px;
        height: 130px;
        left: 390px;
        top: 75px;
        background: url(https://imgur.com/RBPIUpd.png);
        background-size: 100%;
        border-radius: 200px;
        box-shadow: 3px 3px 0px #2C1609;
    [/class]
    [class=ic2]
        position: absolute;
        overflow: visible;
        width: 130px;
        height: 130px;
        left: 456px;
        top: 167px;
        background: url(https://imgur.com/BOEU0r7.png);
        background-size: 100%;
        border-radius: 200px;
        box-shadow: 3px 3px 0px #2C1609;
    [/class]
    [class=ic3]
        position: absolute;
        overflow: visible;
        width: 130px;
        height: 130px;
        left: 390px;
        top: 260px;
        background: url(https://imgur.com/z9WhS2Z.png);
        background-size: 100%;
        border-radius: 200px;
        box-shadow: 3px 3px 0px #2C1609;
    [/class]
    [class=one]
        left: 440px;
        top: 230px;
    [/class]
    [class=two]
        left: 481px;
        top: 241px;
    [/class]
    [class=three]
        left: 510px;
        top: 271.51px;
    [/class]
    [class=four]
        left: 520px;
        top: 310px;
    [/class]
    [class=tab]
        position: absolute;
        overflow: visible;
        width: 30px;
        height: 30px;
        transform-origin: left;
        background-color: #6C7744;
        border-radius: 200px;
        box-shadow: 2px 2px 0px #2C1609;
        font-size: 15px;
        text-align: center;
        line-height: 30px;
        color: #fff;
    [/class]
    [class name=tab state=hover]
       background-color: #fff;
       transition-duration: 0.2s;
        color: #2C1609;
    [/class]
    [class=sub]
        position: absolute;
        overflow: visible;
        width: 465px;
        height: 15px;
        left: 124px;
        top: 48px;
        color: #fff;
        text-align: right;
        font-weight: 400;
        line-height: 18px;
        font-size: 15px;
        text-transform: lowercase;
    [/class]
    [class=subbar]
        position: absolute;
        overflow: visible;
        width: 458px;
        height: 15px;
        left: 124px;
        top: 44px;
        background-color: #712D28;
        padding: 5px;
    [/class]
    [script class=tab on=click]
                hide tabsContent
                set currentTab (getText)
                if (eq ${currentTab} 1) (fadeIn 600 tabsContent1)
                if (eq ${currentTab} 2) (fadeIn 600 tabsContent2)
                if (eq ${currentTab} 3) (fadeIn 600 tabsContent3)
                if (eq ${currentTab} 4) (fadeIn 600 tabsContent4)
    [/script]
    [class=text]
        position: relative;
        overflow: auto;
        width: 250px;
        height: 275px;
        color: #fff;
        text-align: justify;
        font-weight: 400;
        line-height: 12px;
        font-size: 11px;
        padding: 10px 15px 5px 5px;
        text-transform: lowercase;
    [/class]
    [class=textcontainer]
        position: absolute;
        overflow: hidden;
        width: 250px;
        height: 305px;
        left: 124px;
        top: 80px;
        background-color: #2C1609;
    [/class]
    [class=tag]
        position: relative;
        overflow: hidden;
        display: inline;
        width: auto;
        height: auto;
        border: 1px solid #fff;
        padding: 0px 5px 0px 5px;
        margin-right: 5px;
        margin-bottom: 3px;
        text-transform: lowercase;
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        line-height: 14px;
    [/class]
    [class=credit]
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 8px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 6px;
        color: #712D28;
        opacity: 0.5;
    [/class]
[/nobr]
    [div class=bkgd]
    [div class=title][font=Ubuntu Mono]espresso.[/font][/div]
    [div class=pane][/div]
    [div class=pic1][/div]
    [div class=pic2][/div]
    [div class=pic3][/div]
    [div class=pic4][/div]
    [div class=ic1][/div]
    [div class=ic2][/div]
    [div class="one tab"][font=Ubuntu Mono]1[/font][/div]
    [div class="two tab"][font=Ubuntu Mono]2[/font][/div]
    [div class=ic3][/div]
    [div class="three tab"][font=Ubuntu Mono]3[/font][/div]
    [div class="four tab"][font=Ubuntu Mono]4[/font][/div]
    [div class=subbar][/div]
    [div class="sub tabsContent tabsContent1"][font=Ubuntu Mono]basics.[/font][/div]
    [div class="sub tabsContent tabsContent2" style="display:none;"][font=Ubuntu Mono]persona.[/font][/div]
    [div class="sub tabsContent tabsContent3" style="display:none;"][font=Ubuntu Mono]background.[/font][/div]
    [div class="sub tabsContent tabsContent4" style="display:none;"][font=Ubuntu Mono]gallery.[/font][/div]
    [div class="tabsContent tabsContent1"][div class=textcontainer][div class=text][font=Karla][div class=tag][font=Ubuntu Mono]name[/font][/div]Jaejoon Levesque

[div class=tag][font=Ubuntu Mono]nickname[/font][/div]june

[div class=tag][font=Ubuntu Mono]age[/font][/div]21

[div class=tag][font=Ubuntu Mono]gender[/font][/div]male

[div class=tag][font=Ubuntu Mono]sexuality[/font][/div]heterosexual

[div class=tag][font=Ubuntu Mono]role[/font][/div]blood manipulation

[div class=tag][font=Ubuntu Mono]occupation[/font][/div]bartender + barista

[div class=tag][font=Ubuntu Mono]hair color[/font][/div]black

[div class=tag][font=Ubuntu Mono]eye color[/font][/div]dark brown

[div class=tag][font=Ubuntu Mono]height[/font][/div]6' 1"

[div class=tag][font=Ubuntu Mono]weight[/font][/div]193 lbs

[div class=tag][font=Ubuntu Mono]body type[/font][/div]mesomorph

[div class=tag][font=Ubuntu Mono]body mods[/font][/div]Pulvinar elementum integer enim neque. Amet justo donec enim diam. 

[div class=tag][font=Ubuntu Mono]notable features[/font][/div]Pharetra convallis posuere morbi leo urna molestie at elementum eu. Sed turpis tincidunt id aliquet risus feugiat in ante metus.
[/font][/div][/div][/div]
    [div class="tabsContent tabsContent2" style="display: none;"][div class=textcontainer][div class=text][font=Karla][div class=tag][font=Ubuntu Mono]vices[/font][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Id semper risus in hendrerit. Diam donec adipiscing tristique risus nec. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Arcu bibendum at varius vel pharetra vel. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin.

[div class=tag][font=Ubuntu Mono]virtues[/font][/div]Pellentesque habitant morbi tristique senectus et netus et malesuada. Nec ullamcorper sit amet risus. Viverra adipiscing at in tellus integer feugiat scelerisque. Amet cursus sit amet dictum sit amet justo donec enim. Mattis vulputate enim nulla aliquet porttitor lacus luctus. Sed turpis tincidunt id aliquet risus feugiat in. Consequat id porta nibh venenatis cras sed. At tellus at urna condimentum mattis pellentesque id nibh tortor. Nunc pulvinar sapien et ligula. 

[div class=tag][font=Ubuntu Mono]likes[/font][/div]Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Sem et tortor consequat id porta nibh. Blandit cursus risus at ultrices mi tempus imperdiet nulla. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Euismod in pellentesque massa placerat duis ultricies lacus sed. 

[div class=tag][font=Ubuntu Mono]dislikes[/font][/div]Tincidunt arcu non sodales neque sodales ut. Quam id leo in vitae turpis massa sed elementum tempus. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Laoreet sit amet cursus sit amet. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. 

[div class=tag][font=Ubuntu Mono]strengths[/font][/div]Orci sagittis eu volutpat odio facilisis mauris sit. Cursus vitae congue mauris rhoncus. Ante metus dictum at tempor. Eu turpis egestas pretium aenean pharetra magna ac placerat. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Fusce ut placerat orci nulla. Nec nam aliquam sem et tortor. Convallis a cras semper auctor neque vitae tempus. Mi sit amet mauris commodo. Tristique sollicitudin nibh sit amet commodo nulla. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Sed vulputate odio ut enim blandit volutpat maecenas. Congue nisi vitae suscipit tellus mauris.

[div class=tag][font=Ubuntu Mono]weaknesses[/font][/div]Sed adipiscing diam donec adipiscing tristique risus nec. Suspendisse ultrices gravida dictum fusce ut placerat. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Amet porttitor eget dolor morbi non arcu risus quis. Praesent elementum facilisis leo vel fringilla est ullamcorper. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Neque aliquam vestibulum morbi blandit cursus risus at. Mollis nunc sed id semper risus in hendrerit. In nibh mauris cursus mattis. Molestie ac feugiat sed lectus vestibulum. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas pharetra convallis posuere morbi.

[div class=tag][font=Ubuntu Mono]fears/motivations[/font][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Id semper risus in hendrerit. Diam donec adipiscing tristique risus nec. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. 

[div class=tag][font=Ubuntu Mono]habits/quirks[/font][/div]Pellentesque habitant morbi tristique senectus et netus et malesuada. Nec ullamcorper sit amet risus. Viverra adipiscing at in tellus integer feugiat scelerisque. Amet cursus sit amet dictum sit amet justo donec enim. Mattis vulputate enim nulla aliquet porttitor lacus luctus.
[/font][/div][/div][/div]

    [div class="tabsContent tabsContent3" style="display: none;"][div class=textcontainer][div class=text][font=Karla][div class=tag][font=Ubuntu Mono]residence[/font][/div]Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Interdum varius sit amet mattis vulputate enim. 

[div class=tag][font=Ubuntu Mono]family[/font][/div]Felis eget velit aliquet sagittis id consectetur. Odio eu feugiat pretium nibh ipsum consequat. Ornare massa eget egestas purus viverra. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Commodo ullamcorper a lacus vestibulum sed arcu. Aenean euismod elementum nisi quis eleifend. 

[div class=tag][font=Ubuntu Mono]past romances[/font][/div]Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. In massa tempor nec feugiat nisl. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Interdum varius sit amet mattis vulputate enim. Odio eu feugiat pretium nibh ipsum consequat. Ornare massa eget egestas purus viverra.

[div class=tag][font=Ubuntu Mono]biography[/font][/div]Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. Urna cursus eget nunc scelerisque viverra. Pharetra massa massa ultricies mi quis. Et sollicitudin ac orci phasellus egestas tellus. Auctor augue mauris augue neque gravida in. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Neque gravida in fermentum et. Sit amet facilisis magna etiam tempor. Libero volutpat sed cras ornare. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Mattis pellentesque id nibh tortor id aliquet. Nibh tellus molestie nunc non blandit massa enim. Congue eu consequat ac felis donec et odio.

Vestibulum lorem sed risus ultricies tristique. Urna id volutpat lacus laoreet non. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Lacus viverra vitae congue eu consequat ac. Pulvinar elementum integer enim neque volutpat ac tincidunt. Sed egestas egestas fringilla phasellus faucibus. Non blandit massa enim nec dui nunc mattis. Malesuada proin libero nunc consequat. Proin sed libero enim sed faucibus turpis. Duis ultricies lacus sed turpis. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Dignissim enim sit amet venenatis urna cursus eget nunc. Nisl purus in mollis nunc. Purus gravida quis blandit turpis cursus in hac habitasse platea. Phasellus vestibulum lorem sed risus. Posuere morbi leo urna molestie at elementum eu facilisis sed. Urna neque viverra justo nec ultrices dui sapien eget. Mattis pellentesque id nibh tortor id aliquet lectus. Risus ultricies tristique nulla aliquet enim tortor at auctor.

[div class=tag][font=Ubuntu Mono]miscellaneous[/font][/div]Ac turpis egestas integer eget aliquet nibh praesent tristique. Ornare quam viverra orci sagittis eu. Tortor id aliquet lectus proin. Tortor id aliquet lectus proin nibh nisl condimentum id. Diam quam nulla porttitor massa id. Consequat id porta nibh venenatis.

[div class=tag][font=Ubuntu Mono]theme song[/font][/div][URL='https://www.youtube.com/watch?v=wKyMIrBClYw'][I][U][COLOR=#fff]instagram by DEAN[/COLOR][/U][/I][/URL]

[div class=tag][font=Ubuntu Mono]relationships[/font][/div][list][*]follower
[*]rival
[*]best friend
[*]stranger
[*]crush
[/list]
[/font][/div][/div][/div]

    [div class="tabsContent tabsContent4" style="display: none;"][div class=textcontainer][div class=text][font=Karla][div class=tag][font=Ubuntu Mono]gallery[/font][/div][img]https://i.pinimg.com/474x/33/31/73/3331739a7f0ee28db11b4a371c94dacc.jpg[/img]
[img]https://cdn.discordapp.com/attachments/611863260270034949/613466546890735631/image0.jpg[/img]
[img]https://i.pinimg.com/originals/d7/60/eb/d760eb80848fde614d3f5069e25f20c9.gif[/img]
[img]https://i.pinimg.com/564x/5a/43/ea/5a43ea62e20649772455db2063ebf27a.jpg[/img]
[img]https://i.pinimg.com/474x/47/9a/d3/479ad3599ac2f0cc3e047948d0733f77.jpg[/img]
[img]https://i.pinimg.com/474x/5b/2c/ac/5b2caca3e0e4f138f4ac7b38e295f787.jpg[/img]
[img]https://i.pinimg.com/originals/95/8a/3c/958a3c9e849e9ffee59bbba002c8459f.gif[/img]
[img]https://i.pinimg.com/474x/05/7a/7d/057a7d38141b100e1d229150e55fe89b.jpg[/img]
[img]https://i.pinimg.com/474x/29/15/4d/29154db4472298d637b17f0ed1a3cec4.jpg[/img]
[img]https://i.pinimg.com/474x/ca/b4/3b/cab43b338d7191ad29c0b2f9c2a5d7f2.jpg[/img]
[img]https://i.pinimg.com/564x/93/cb/3f/93cb3f01e3b5b432869798a1dba001cc.jpg[/img]

[div class=tag][font=Ubuntu Mono]attire[/font][/div][img]https://i.pinimg.com/474x/e7/4f/e8/e74fe8c7e7ad51f701f3e2df95e37026.jpg[/img]
[img]https://i.pinimg.com/564x/d7/3b/33/d73b331e39f2316730b7c3776978a7fd.jpg[/img]
[img]https://i.pinimg.com/474x/5a/f1/11/5af1111d80ae557813c02135f3409c04.jpg[/img]
[img]https://i.pinimg.com/564x/77/5a/85/775a85dc9df2602fb63a41205b455841.jpg[/img]
[img]https://i.pinimg.com/474x/26/e4/b2/26e4b22e957c7452efd6ded96478e9ea.jpg[/img]
[/font][/div][/div][/div]
[/div][div class=credit]code by [USER=2383][COLOR=#712D28]sox[/COLOR][/USER][/div]

 

[thirteen]

ESPRESSO - NOT MOBILE FRIENDLY

it's been a hot minute c: this is the code that i built in my dreamweaver tutorial, but i went ahead and added the buttons and tabs off camera bc im 2 lazy 2 film rn oopsieeee i'll put up a buttons/tabs/hovers/transitions tutorial soon! for now, though, enjoy this cs c: the text boxes scroll, and that is it lol the coffee pictures on the right are vectors including the backgrounds, so if you wanna change out those images, you'll have to add border: 5px solid {insert color hexes} to each of them if you wanna keep the color theme there. please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=bkgd] position: relative; box-sizing: border-box; width: 600px; height: 400px; overflow: hidden; margin-right: auto; margin-left: auto; padding: 0; [/class] [class=title] position: absolute; overflow: visible; width: 458px; height: 27px; left: 124px; top: 10px; background-color: #6C7744; color: #fff; text-align: left; font-weight: 700; line-height: 25px; font-size: 20px; padding: 5px; text-transform: lowercase; text-shadow: 2px 2px 0px #2C1609; [/class] [class=pane] position: absolute; overflow: visible; width: 110px; height: 400px; left: 0px; top: 0px; background-color: #2C1609; border-right: 3px solid #712D28; [/class] [class=pic1] position: absolute; overflow: visible; width: 70px; height: 70px; left: 10px; top: 12px; background: url(https://i.pinimg.com/474x/88/03/e8/8803e8d602625df33ad4a3e2f0b49195.jpg); background-size: 100%; border-radius: 200px; border: 10px solid #886237; box-shadow: 3px 3px 0px #712D28; [/class] [class=pic2] position: absolute; overflow: visible; width: 70px; height: 70px; left: 10px; top: 107px; background: url(https://i.pinimg.com/564x/d0/17/06/d017068ff961540424c1a45facf628f6.jpg); background-size: 180%; background-position: 100% 0%; border-radius: 200px; border: 10px solid #6C7744; box-shadow: 3px 3px 0px #712D28; [/class] [class=pic3] position: absolute; overflow: visible; width: 70px; height: 70px; left: 10px; top: 203px; background: url(https://i.pinimg.com/474x/22/42/e4/2242e45bbd4f91b88d62975e840fd971.jpg); background-size: 100%; background-position: 0% 0%; border-radius: 200px; border: 10px solid #886237; box-shadow: 3px 3px 0px #712D28; [/class] [class=pic4] position: absolute; overflow: visible; width: 70px; height: 70px; left: 10px; top: 298px; background: url(https://i.pinimg.com/474x/60/4a/2d/604a2d03cac2f1dd1bc2d56986c7d89c.jpg); background-size: 100%; border-radius: 200px; border: 10px solid #6C7744; box-shadow: 3px 3px 0px #712D28; [/class] [class=ic1] position: absolute; overflow: visible; width: 130px; height: 130px; left: 390px; top: 75px; background: url(https://imgur.com/RBPIUpd.png); background-size: 100%; border-radius: 200px; box-shadow: 3px 3px 0px #2C1609; [/class] [class=ic2] position: absolute; overflow: visible; width: 130px; height: 130px; left: 456px; top: 167px; background: url(https://imgur.com/BOEU0r7.png); background-size: 100%; border-radius: 200px; box-shadow: 3px 3px 0px #2C1609; [/class] [class=ic3] position: absolute; overflow: visible; width: 130px; height: 130px; left: 390px; top: 260px; background: url(https://imgur.com/z9WhS2Z.png); background-size: 100%; border-radius: 200px; box-shadow: 3px 3px 0px #2C1609; [/class] [class=one] left: 440px; top: 230px; [/class] [class=two] left: 481px; top: 241px; [/class] [class=three] left: 510px; top: 271.51px; [/class] [class=four] left: 520px; top: 310px; [/class] [class=tab] position: absolute; overflow: visible; width: 30px; height: 30px; transform-origin: left; background-color: #6C7744; border-radius: 200px; box-shadow: 2px 2px 0px #2C1609; font-size: 15px; text-align: center; line-height: 30px; color: #fff; [/class] [class name=tab state=hover] background-color: #fff; transition-duration: 0.2s; color: #2C1609; [/class] [class=sub] position: absolute; overflow: visible; width: 465px; height: 15px; left: 124px; top: 48px; color: #fff; text-align: right; font-weight: 400; line-height: 18px; font-size: 15px; text-transform: lowercase; [/class] [class=subbar] position: absolute; overflow: visible; width: 458px; height: 15px; left: 124px; top: 44px; background-color: #712D28; padding: 5px; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} 1) (fadeIn 600 tabsContent1) if (eq ${currentTab} 2) (fadeIn 600 tabsContent2) if (eq ${currentTab} 3) (fadeIn 600 tabsContent3) if (eq ${currentTab} 4) (fadeIn 600 tabsContent4) [/script] [class=text] position: relative; overflow: auto; width: 250px; height: 275px; color: #fff; text-align: justify; font-weight: 400; line-height: 12px; font-size: 11px; padding: 10px 15px 5px 5px; text-transform: lowercase; [/class] [class=textcontainer] position: absolute; overflow: hidden; width: 250px; height: 305px; left: 124px; top: 80px; background-color: #2C1609; [/class] [class=tag] position: relative; overflow: hidden; display: inline; width: auto; height: auto; border: 1px solid #fff; padding: 0px 5px 0px 5px; margin-right: 5px; margin-bottom: 3px; text-transform: lowercase; text-align: center; font-size: 11px; font-weight: 700; line-height: 14px; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: 8px; text-align: center; font-style: normal; font-weight: normal; font-size: 6px; color: #712D28; opacity: 0.5; [/class]
[div class=bkgd]
[div class=title]espresso.[/div]
[div class=pane][/div]
[div class=pic1][/div]
[div class=pic2][/div]
[div class=pic3][/div]
[div class=pic4][/div]
[div class=ic1][/div]
[div class=ic2][/div]
[div class="one tab"]1[/div]
[div class="two tab"]2[/div]
[div class=ic3][/div]
[div class="three tab"]3[/div]
[div class="four tab"]4[/div]
[div class=subbar][/div]
[div class="sub tabsContent tabsContent1"]basics.[/div]
[div class="sub tabsContent tabsContent2" style="display:none;"]persona.[/div]
[div class="sub tabsContent tabsContent3" style="display:none;"]background.[/div]
[div class="sub tabsContent tabsContent4" style="display:none;"]gallery.[/div]
[div class="tabsContent tabsContent1"][div class=textcontainer][div class=text][div class=tag]name[/div]Jaejoon Levesque

[div class=tag]nickname[/div]june

[div class=tag]age[/div]21

[div class=tag]gender[/div]male

[div class=tag]sexuality[/div]heterosexual

[div class=tag]role[/div]blood manipulation

[div class=tag]occupation[/div]bartender + barista

[div class=tag]hair color[/div]black

[div class=tag]eye color[/div]dark brown

[div class=tag]height[/div]6' 1"

[div class=tag]weight[/div]193 lbs

[div class=tag]body type[/div]mesomorph

[div class=tag]body mods[/div]Pulvinar elementum integer enim neque. Amet justo donec enim diam.

[div class=tag]notable features[/div]Pharetra convallis posuere morbi leo urna molestie at elementum eu. Sed turpis tincidunt id aliquet risus feugiat in ante metus.
[/div][/div][/div]
[div class="tabsContent tabsContent2" style="display: none;"][div class=textcontainer][div class=text][div class=tag]vices[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Id semper risus in hendrerit. Diam donec adipiscing tristique risus nec. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Arcu bibendum at varius vel pharetra vel. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin.

[div class=tag]virtues[/div]Pellentesque habitant morbi tristique senectus et netus et malesuada. Nec ullamcorper sit amet risus. Viverra adipiscing at in tellus integer feugiat scelerisque. Amet cursus sit amet dictum sit amet justo donec enim. Mattis vulputate enim nulla aliquet porttitor lacus luctus. Sed turpis tincidunt id aliquet risus feugiat in. Consequat id porta nibh venenatis cras sed. At tellus at urna condimentum mattis pellentesque id nibh tortor. Nunc pulvinar sapien et ligula.

[div class=tag]likes[/div]Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Sem et tortor consequat id porta nibh. Blandit cursus risus at ultrices mi tempus imperdiet nulla. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Euismod in pellentesque massa placerat duis ultricies lacus sed.

[div class=tag]dislikes[/div]Tincidunt arcu non sodales neque sodales ut. Quam id leo in vitae turpis massa sed elementum tempus. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Laoreet sit amet cursus sit amet. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eu volutpat odio facilisis mauris sit amet massa vitae tortor.

[div class=tag]strengths[/div]Orci sagittis eu volutpat odio facilisis mauris sit. Cursus vitae congue mauris rhoncus. Ante metus dictum at tempor. Eu turpis egestas pretium aenean pharetra magna ac placerat. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Fusce ut placerat orci nulla. Nec nam aliquam sem et tortor. Convallis a cras semper auctor neque vitae tempus. Mi sit amet mauris commodo. Tristique sollicitudin nibh sit amet commodo nulla. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Sed vulputate odio ut enim blandit volutpat maecenas. Congue nisi vitae suscipit tellus mauris.

[div class=tag]weaknesses[/div]Sed adipiscing diam donec adipiscing tristique risus nec. Suspendisse ultrices gravida dictum fusce ut placerat. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Amet porttitor eget dolor morbi non arcu risus quis. Praesent elementum facilisis leo vel fringilla est ullamcorper. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Neque aliquam vestibulum morbi blandit cursus risus at. Mollis nunc sed id semper risus in hendrerit. In nibh mauris cursus mattis. Molestie ac feugiat sed lectus vestibulum. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas pharetra convallis posuere morbi.

[div class=tag]fears/motivations[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Id semper risus in hendrerit. Diam donec adipiscing tristique risus nec. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis.

[div class=tag]habits/quirks[/div]Pellentesque habitant morbi tristique senectus et netus et malesuada. Nec ullamcorper sit amet risus. Viverra adipiscing at in tellus integer feugiat scelerisque. Amet cursus sit amet dictum sit amet justo donec enim. Mattis vulputate enim nulla aliquet porttitor lacus luctus.
[/div][/div][/div]

[div class="tabsContent tabsContent3" style="display: none;"][div class=textcontainer][div class=text][div class=tag]residence[/div]Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Interdum varius sit amet mattis vulputate enim.

[div class=tag]family[/div]Felis eget velit aliquet sagittis id consectetur. Odio eu feugiat pretium nibh ipsum consequat. Ornare massa eget egestas purus viverra. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Commodo ullamcorper a lacus vestibulum sed arcu. Aenean euismod elementum nisi quis eleifend.

[div class=tag]past romances[/div]Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. In massa tempor nec feugiat nisl. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Interdum varius sit amet mattis vulputate enim. Odio eu feugiat pretium nibh ipsum consequat. Ornare massa eget egestas purus viverra.

[div class=tag]biography[/div]Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. Urna cursus eget nunc scelerisque viverra. Pharetra massa massa ultricies mi quis. Et sollicitudin ac orci phasellus egestas tellus. Auctor augue mauris augue neque gravida in. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Neque gravida in fermentum et. Sit amet facilisis magna etiam tempor. Libero volutpat sed cras ornare. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Mattis pellentesque id nibh tortor id aliquet. Nibh tellus molestie nunc non blandit massa enim. Congue eu consequat ac felis donec et odio.

Vestibulum lorem sed risus ultricies tristique. Urna id volutpat lacus laoreet non. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Lacus viverra vitae congue eu consequat ac. Pulvinar elementum integer enim neque volutpat ac tincidunt. Sed egestas egestas fringilla phasellus faucibus. Non blandit massa enim nec dui nunc mattis. Malesuada proin libero nunc consequat. Proin sed libero enim sed faucibus turpis. Duis ultricies lacus sed turpis. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Dignissim enim sit amet venenatis urna cursus eget nunc. Nisl purus in mollis nunc. Purus gravida quis blandit turpis cursus in hac habitasse platea. Phasellus vestibulum lorem sed risus. Posuere morbi leo urna molestie at elementum eu facilisis sed. Urna neque viverra justo nec ultrices dui sapien eget. Mattis pellentesque id nibh tortor id aliquet lectus. Risus ultricies tristique nulla aliquet enim tortor at auctor.

[div class=tag]miscellaneous[/div]Ac turpis egestas integer eget aliquet nibh praesent tristique. Ornare quam viverra orci sagittis eu. Tortor id aliquet lectus proin. Tortor id aliquet lectus proin nibh nisl condimentum id. Diam quam nulla porttitor massa id. Consequat id porta nibh venenatis.

[div class=tag]theme song[/div]instagram by DEAN

[div class=tag]relationships[/div]

• follower
• rival
• best friend
• stranger
• crush

[/div][/div][/div]

[div class="tabsContent tabsContent4" style="display: none;"][div class=textcontainer][div class=text][div class=tag]gallery[/div]

[div class=tag]attire[/div]

[/div][/div][/div]
[/div][div class=credit]code by sox [/div]

Spoiler: code

[nobr]
    [class=bkgd]
        position: relative;
        box-sizing: border-box;
        width: 600px;
        height: 400px;
        overflow: hidden;
        margin-right: auto;
        margin-left: auto;
        padding: 0;
    [/class]
    [class=title]
        position: absolute;
        overflow: visible;
        width: 458px;
        height: 27px;
        left: 124px;
        top: 10px;
        background-color: #6C7744;
        color: #fff;
        text-align: left;
        font-weight: 700;
        line-height: 25px;
        font-size: 20px;
        padding: 5px;
        text-transform: lowercase;
        text-shadow: 2px 2px 0px #2C1609;
    [/class]
    [class=pane]
        position: absolute;
        overflow: visible;
        width: 110px;
        height: 400px;
        left: 0px;
        top: 0px;
        background-color: #2C1609;
        border-right: 3px solid #712D28;
    [/class]
    [class=pic1]
        position: absolute;
        overflow: visible;
        width: 70px;
        height: 70px;
        left: 10px;
        top: 12px;
        background: url(https://i.pinimg.com/474x/88/03/e8/8803e8d602625df33ad4a3e2f0b49195.jpg);
        background-size: 100%;
        border-radius: 200px;
        border: 10px solid #886237;
        box-shadow: 3px 3px 0px #712D28;
    [/class]
    [class=pic2]
        position: absolute;
        overflow: visible;
        width: 70px;
        height: 70px;
        left: 10px;
        top: 107px;
        background: url(https://i.pinimg.com/564x/d0/17/06/d017068ff961540424c1a45facf628f6.jpg);
        background-size: 180%;
        background-position: 100% 0%;
        border-radius: 200px;
        border: 10px solid #6C7744;
        box-shadow: 3px 3px 0px #712D28;
    [/class]
    [class=pic3]
        position: absolute;
        overflow: visible;
        width: 70px;
        height: 70px;
        left: 10px;
        top: 203px;
        background: url(https://i.pinimg.com/474x/22/42/e4/2242e45bbd4f91b88d62975e840fd971.jpg);
        background-size: 100%;
        background-position: 0% 0%;
        border-radius: 200px;
        border: 10px solid #886237;
        box-shadow: 3px 3px 0px #712D28;
    [/class]
    [class=pic4]
        position: absolute;
        overflow: visible;
        width: 70px;
        height: 70px;
        left: 10px;
        top: 298px;
        background: url(https://i.pinimg.com/474x/60/4a/2d/604a2d03cac2f1dd1bc2d56986c7d89c.jpg);
        background-size: 100%;
        border-radius: 200px;
        border: 10px solid #6C7744;
        box-shadow: 3px 3px 0px #712D28;
    [/class]
    [comment]vector images created by Vecteezy[/comment]
    [class=ic1]
        position: absolute;
        overflow: visible;
        width: 130px;
        height: 130px;
        left: 390px;
        top: 75px;
        background: url(https://imgur.com/RBPIUpd.png);
        background-size: 100%;
        border-radius: 200px;
        box-shadow: 3px 3px 0px #2C1609;
    [/class]
    [class=ic2]
        position: absolute;
        overflow: visible;
        width: 130px;
        height: 130px;
        left: 456px;
        top: 167px;
        background: url(https://imgur.com/BOEU0r7.png);
        background-size: 100%;
        border-radius: 200px;
        box-shadow: 3px 3px 0px #2C1609;
    [/class]
    [class=ic3]
        position: absolute;
        overflow: visible;
        width: 130px;
        height: 130px;
        left: 390px;
        top: 260px;
        background: url(https://imgur.com/z9WhS2Z.png);
        background-size: 100%;
        border-radius: 200px;
        box-shadow: 3px 3px 0px #2C1609;
    [/class]
    [class=one]
        left: 440px;
        top: 230px;
    [/class]
    [class=two]
        left: 481px;
        top: 241px;
    [/class]
    [class=three]
        left: 510px;
        top: 271.51px;
    [/class]
    [class=four]
        left: 520px;
        top: 310px;
    [/class]
    [class=tab]
        position: absolute;
        overflow: visible;
        width: 30px;
        height: 30px;
        transform-origin: left;
        background-color: #6C7744;
        border-radius: 200px;
        box-shadow: 2px 2px 0px #2C1609;
        font-size: 15px;
        text-align: center;
        line-height: 30px;
        color: #fff;
    [/class]
    [class name=tab state=hover]
       background-color: #fff;
       transition-duration: 0.2s;
        color: #2C1609;
    [/class]
    [class=sub]
        position: absolute;
        overflow: visible;
        width: 465px;
        height: 15px;
        left: 124px;
        top: 48px;
        color: #fff;
        text-align: right;
        font-weight: 400;
        line-height: 18px;
        font-size: 15px;
        text-transform: lowercase;
    [/class]
    [class=subbar]
        position: absolute;
        overflow: visible;
        width: 458px;
        height: 15px;
        left: 124px;
        top: 44px;
        background-color: #712D28;
        padding: 5px;
    [/class]
    [script class=tab on=click]
                hide tabsContent
                set currentTab (getText)
                if (eq ${currentTab} 1) (fadeIn 600 tabsContent1)
                if (eq ${currentTab} 2) (fadeIn 600 tabsContent2)
                if (eq ${currentTab} 3) (fadeIn 600 tabsContent3)
                if (eq ${currentTab} 4) (fadeIn 600 tabsContent4)
    [/script]
    [class=text]
        position: relative;
        overflow: auto;
        width: 250px;
        height: 275px;
        color: #fff;
        text-align: justify;
        font-weight: 400;
        line-height: 12px;
        font-size: 11px;
        padding: 10px 15px 5px 5px;
        text-transform: lowercase;
    [/class]
    [class=textcontainer]
        position: absolute;
        overflow: hidden;
        width: 250px;
        height: 305px;
        left: 124px;
        top: 80px;
        background-color: #2C1609;
    [/class]
    [class=tag]
        position: relative;
        overflow: hidden;
        display: inline;
        width: auto;
        height: auto;
        border: 1px solid #fff;
        padding: 0px 5px 0px 5px;
        margin-right: 5px;
        margin-bottom: 3px;
        text-transform: lowercase;
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        line-height: 14px;
    [/class]
    [class=credit]
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 8px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 6px;
        color: #712D28;
        opacity: 0.5;
    [/class]
[/nobr]
    [div class=bkgd]
    [div class=title][font=Ubuntu Mono]espresso.[/font][/div]
    [div class=pane][/div]
    [div class=pic1][/div]
    [div class=pic2][/div]
    [div class=pic3][/div]
    [div class=pic4][/div]
    [div class=ic1][/div]
    [div class=ic2][/div]
    [div class="one tab"][font=Ubuntu Mono]1[/font][/div]
    [div class="two tab"][font=Ubuntu Mono]2[/font][/div]
    [div class=ic3][/div]
    [div class="three tab"][font=Ubuntu Mono]3[/font][/div]
    [div class="four tab"][font=Ubuntu Mono]4[/font][/div]
    [div class=subbar][/div]
    [div class="sub tabsContent tabsContent1"][font=Ubuntu Mono]basics.[/font][/div]
    [div class="sub tabsContent tabsContent2" style="display:none;"][font=Ubuntu Mono]persona.[/font][/div]
    [div class="sub tabsContent tabsContent3" style="display:none;"][font=Ubuntu Mono]background.[/font][/div]
    [div class="sub tabsContent tabsContent4" style="display:none;"][font=Ubuntu Mono]gallery.[/font][/div]
    [div class="tabsContent tabsContent1"][div class=textcontainer][div class=text][font=Karla][div class=tag][font=Ubuntu Mono]name[/font][/div]Jaejoon Levesque

[div class=tag][font=Ubuntu Mono]nickname[/font][/div]june

[div class=tag][font=Ubuntu Mono]age[/font][/div]21

[div class=tag][font=Ubuntu Mono]gender[/font][/div]male

[div class=tag][font=Ubuntu Mono]sexuality[/font][/div]heterosexual

[div class=tag][font=Ubuntu Mono]role[/font][/div]blood manipulation

[div class=tag][font=Ubuntu Mono]occupation[/font][/div]bartender + barista

[div class=tag][font=Ubuntu Mono]hair color[/font][/div]black

[div class=tag][font=Ubuntu Mono]eye color[/font][/div]dark brown

[div class=tag][font=Ubuntu Mono]height[/font][/div]6' 1"

[div class=tag][font=Ubuntu Mono]weight[/font][/div]193 lbs

[div class=tag][font=Ubuntu Mono]body type[/font][/div]mesomorph

[div class=tag][font=Ubuntu Mono]body mods[/font][/div]Pulvinar elementum integer enim neque. Amet justo donec enim diam.

[div class=tag][font=Ubuntu Mono]notable features[/font][/div]Pharetra convallis posuere morbi leo urna molestie at elementum eu. Sed turpis tincidunt id aliquet risus feugiat in ante metus.
[/font][/div][/div][/div]
    [div class="tabsContent tabsContent2" style="display: none;"][div class=textcontainer][div class=text][font=Karla][div class=tag][font=Ubuntu Mono]vices[/font][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Id semper risus in hendrerit. Diam donec adipiscing tristique risus nec. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Arcu bibendum at varius vel pharetra vel. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin.

[div class=tag][font=Ubuntu Mono]virtues[/font][/div]Pellentesque habitant morbi tristique senectus et netus et malesuada. Nec ullamcorper sit amet risus. Viverra adipiscing at in tellus integer feugiat scelerisque. Amet cursus sit amet dictum sit amet justo donec enim. Mattis vulputate enim nulla aliquet porttitor lacus luctus. Sed turpis tincidunt id aliquet risus feugiat in. Consequat id porta nibh venenatis cras sed. At tellus at urna condimentum mattis pellentesque id nibh tortor. Nunc pulvinar sapien et ligula.

[div class=tag][font=Ubuntu Mono]likes[/font][/div]Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Sem et tortor consequat id porta nibh. Blandit cursus risus at ultrices mi tempus imperdiet nulla. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Euismod in pellentesque massa placerat duis ultricies lacus sed.

[div class=tag][font=Ubuntu Mono]dislikes[/font][/div]Tincidunt arcu non sodales neque sodales ut. Quam id leo in vitae turpis massa sed elementum tempus. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Laoreet sit amet cursus sit amet. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eu volutpat odio facilisis mauris sit amet massa vitae tortor.

[div class=tag][font=Ubuntu Mono]strengths[/font][/div]Orci sagittis eu volutpat odio facilisis mauris sit. Cursus vitae congue mauris rhoncus. Ante metus dictum at tempor. Eu turpis egestas pretium aenean pharetra magna ac placerat. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Fusce ut placerat orci nulla. Nec nam aliquam sem et tortor. Convallis a cras semper auctor neque vitae tempus. Mi sit amet mauris commodo. Tristique sollicitudin nibh sit amet commodo nulla. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Sed vulputate odio ut enim blandit volutpat maecenas. Congue nisi vitae suscipit tellus mauris.

[div class=tag][font=Ubuntu Mono]weaknesses[/font][/div]Sed adipiscing diam donec adipiscing tristique risus nec. Suspendisse ultrices gravida dictum fusce ut placerat. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Amet porttitor eget dolor morbi non arcu risus quis. Praesent elementum facilisis leo vel fringilla est ullamcorper. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Neque aliquam vestibulum morbi blandit cursus risus at. Mollis nunc sed id semper risus in hendrerit. In nibh mauris cursus mattis. Molestie ac feugiat sed lectus vestibulum. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas pharetra convallis posuere morbi.

[div class=tag][font=Ubuntu Mono]fears/motivations[/font][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Id semper risus in hendrerit. Diam donec adipiscing tristique risus nec. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis.

[div class=tag][font=Ubuntu Mono]habits/quirks[/font][/div]Pellentesque habitant morbi tristique senectus et netus et malesuada. Nec ullamcorper sit amet risus. Viverra adipiscing at in tellus integer feugiat scelerisque. Amet cursus sit amet dictum sit amet justo donec enim. Mattis vulputate enim nulla aliquet porttitor lacus luctus.
[/font][/div][/div][/div]

    [div class="tabsContent tabsContent3" style="display: none;"][div class=textcontainer][div class=text][font=Karla][div class=tag][font=Ubuntu Mono]residence[/font][/div]Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Interdum varius sit amet mattis vulputate enim.

[div class=tag][font=Ubuntu Mono]family[/font][/div]Felis eget velit aliquet sagittis id consectetur. Odio eu feugiat pretium nibh ipsum consequat. Ornare massa eget egestas purus viverra. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Commodo ullamcorper a lacus vestibulum sed arcu. Aenean euismod elementum nisi quis eleifend.

[div class=tag][font=Ubuntu Mono]past romances[/font][/div]Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. In massa tempor nec feugiat nisl. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Interdum varius sit amet mattis vulputate enim. Odio eu feugiat pretium nibh ipsum consequat. Ornare massa eget egestas purus viverra.

[div class=tag][font=Ubuntu Mono]biography[/font][/div]Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. Urna cursus eget nunc scelerisque viverra. Pharetra massa massa ultricies mi quis. Et sollicitudin ac orci phasellus egestas tellus. Auctor augue mauris augue neque gravida in. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Neque gravida in fermentum et. Sit amet facilisis magna etiam tempor. Libero volutpat sed cras ornare. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Mattis pellentesque id nibh tortor id aliquet. Nibh tellus molestie nunc non blandit massa enim. Congue eu consequat ac felis donec et odio.

Vestibulum lorem sed risus ultricies tristique. Urna id volutpat lacus laoreet non. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Lacus viverra vitae congue eu consequat ac. Pulvinar elementum integer enim neque volutpat ac tincidunt. Sed egestas egestas fringilla phasellus faucibus. Non blandit massa enim nec dui nunc mattis. Malesuada proin libero nunc consequat. Proin sed libero enim sed faucibus turpis. Duis ultricies lacus sed turpis. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Dignissim enim sit amet venenatis urna cursus eget nunc. Nisl purus in mollis nunc. Purus gravida quis blandit turpis cursus in hac habitasse platea. Phasellus vestibulum lorem sed risus. Posuere morbi leo urna molestie at elementum eu facilisis sed. Urna neque viverra justo nec ultrices dui sapien eget. Mattis pellentesque id nibh tortor id aliquet lectus. Risus ultricies tristique nulla aliquet enim tortor at auctor.

[div class=tag][font=Ubuntu Mono]miscellaneous[/font][/div]Ac turpis egestas integer eget aliquet nibh praesent tristique. Ornare quam viverra orci sagittis eu. Tortor id aliquet lectus proin. Tortor id aliquet lectus proin nibh nisl condimentum id. Diam quam nulla porttitor massa id. Consequat id porta nibh venenatis.

[div class=tag][font=Ubuntu Mono]theme song[/font][/div][URL='https://www.youtube.com/watch?v=wKyMIrBClYw'][I][U][COLOR=#fff]instagram by DEAN[/COLOR][/U][/I][/URL]

[div class=tag][font=Ubuntu Mono]relationships[/font][/div][list][*]follower
[*]rival
[*]best friend
[*]stranger
[*]crush
[/list]
[/font][/div][/div][/div]

    [div class="tabsContent tabsContent4" style="display: none;"][div class=textcontainer][div class=text][font=Karla][div class=tag][font=Ubuntu Mono]gallery[/font][/div][img]https://i.pinimg.com/474x/33/31/73/3331739a7f0ee28db11b4a371c94dacc.jpg[/img]
[img]https://cdn.discordapp.com/attachments/611863260270034949/613466546890735631/image0.jpg[/img]
[img]https://i.pinimg.com/originals/d7/60/eb/d760eb80848fde614d3f5069e25f20c9.gif[/img]
[img]https://i.pinimg.com/564x/5a/43/ea/5a43ea62e20649772455db2063ebf27a.jpg[/img]
[img]https://i.pinimg.com/474x/47/9a/d3/479ad3599ac2f0cc3e047948d0733f77.jpg[/img]
[img]https://i.pinimg.com/474x/5b/2c/ac/5b2caca3e0e4f138f4ac7b38e295f787.jpg[/img]
[img]https://i.pinimg.com/originals/95/8a/3c/958a3c9e849e9ffee59bbba002c8459f.gif[/img]
[img]https://i.pinimg.com/474x/05/7a/7d/057a7d38141b100e1d229150e55fe89b.jpg[/img]
[img]https://i.pinimg.com/474x/29/15/4d/29154db4472298d637b17f0ed1a3cec4.jpg[/img]
[img]https://i.pinimg.com/474x/ca/b4/3b/cab43b338d7191ad29c0b2f9c2a5d7f2.jpg[/img]
[img]https://i.pinimg.com/564x/93/cb/3f/93cb3f01e3b5b432869798a1dba001cc.jpg[/img]

[div class=tag][font=Ubuntu Mono]attire[/font][/div][img]https://i.pinimg.com/474x/e7/4f/e8/e74fe8c7e7ad51f701f3e2df95e37026.jpg[/img]
[img]https://i.pinimg.com/564x/d7/3b/33/d73b331e39f2316730b7c3776978a7fd.jpg[/img]
[img]https://i.pinimg.com/474x/5a/f1/11/5af1111d80ae557813c02135f3409c04.jpg[/img]
[img]https://i.pinimg.com/564x/77/5a/85/775a85dc9df2602fb63a41205b455841.jpg[/img]
[img]https://i.pinimg.com/474x/26/e4/b2/26e4b22e957c7452efd6ded96478e9ea.jpg[/img]
[/font][/div][/div][/div]
[/div][div class=credit]code by [USER=2383][COLOR=#712D28]sox[/COLOR][/USER][/div]

sluuuuuuuuuuuuuuuuuuuuuurp i stan a man

 

[sox]

sluuuuuuuuuuuuuuuuuuuuuurp i stan a man

you are [checks watch] not old enough ma'am

 

[thirteen]

you are [checks watch] not old enough ma'am

please let me hoe around i don't have much time left

 

[sox]

please let me hoe around i don't have much time left

permission granted for one hour only. thirst away young one

 

[sox]

INNOVATOR - MOBILE FRIENDLY

o look it's another lil placeholder code that took half an hour at most haha sox is such a hard worker haha what a role model!! all jokes but i am actually working on a much bigger cs code!! i've been at it for a couple weeks now and it's got a bunch of cute lil things all over it so i hope y'all like it ~ in the meantime, enjoy this lil guy who is very simple but gets the job done lol please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=bkgd] position: relative; overflow: hidden; margin-right: auto; margin-left: auto; background-color: #eeffd9; width: 20em; height: 9em; border-radius: 0.5em; [/class] [class=name] position: relative; margin-right: auto; margin-left: auto; top: 10%; color: #335024; width: 100%; height: auto; text-align: center; font-size: 2em; line-height: 1em; text-transform: uppercase; [/class] [class=role] position: relative; margin-right: auto; margin-left: auto; top: 11%; color: #B3D670; width: 100%; height: auto; text-align: center; font-size: 1.2em; line-height: 1em; text-transform: uppercase; [/class] [class=fc] position: relative; margin-right: auto; margin-left: auto; top: 13%; color: #D5E59E; width: 100%; height: auto; text-align: center; font-size: 0.8em; line-height: 1em; text-transform: uppercase; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: auto; top: 35%; text-align: center; font-size: .5em; color: #D5E59E; opacity: 0.5; [/class] [class=progressouter] position: relative; overflow: hidden; margin-right: auto; margin-left: auto; top: 30%; background-color: #335024; width: 85%; height: 1em; border-radius: 10em; [/class] [class=progressinner] position: absolute; background-color: #89C541; width: 0em; height: 100%; border-radius: 10em; animation: {post_id}loading 15s linear infinite; [/class] [animation=loading] [keyframe=100]width: 100%;[/keyframe] [/animation]
[div class=bkgd][div class=name]mr. innovator[/div][div class=role]main dancer[/div][div class=fc]fc: felix lee[/div][div class=progressouter][div class=progressinner][/div][/div][div class=credit]code by sox [/div][/div]

Spoiler: code

[nobr]
[class=bkgd]
   position: relative;
   overflow: hidden;
   margin-right: auto;
   margin-left: auto;
   background-color: #eeffd9;
   width: 20em;
   height: 9em;
   border-radius: 0.5em;
[/class]
[class=name]
   position: relative;
   margin-right: auto;
   margin-left: auto;
   top: 10%;
   color: #335024;
   width: 100%;
   height: auto;
   text-align: center;
   font-size: 2em;
   line-height: 1em;
   text-transform: uppercase;
[/class]
[class=role]
   position: relative;
   margin-right: auto;
   margin-left: auto;
   top: 11%;
   color: #B3D670;
   width: 100%;
   height: auto;
   text-align: center;
   font-size: 1.2em;
   line-height: 1em;
   text-transform: uppercase;
[/class]
[class=fc]
   position: relative;
   margin-right: auto;
   margin-left: auto;
   top: 13%;
   color: #D5E59E;
   width: 100%;
   height: auto;
   text-align: center;
   font-size: 0.8em;
   line-height: 1em;
   text-transform: uppercase;
[/class]
[class=credit]
   position: relative;
   overflow: hidden;
   width: 100%;
   height: auto;
   top: 35%;
   text-align: center;
   font-size: .5em;
   color: #D5E59E;
   opacity: 0.5;
[/class]
[class=progressouter]
   position: relative;
   overflow: hidden;
   margin-right: auto;
   margin-left: auto;
   top: 30%;
   background-color: #335024;
   width: 85%;
   height: 1em;
   border-radius: 10em;
[/class]
[class=progressinner]
   position: absolute;
   background-color: #89C541;
   width: 0em;
   height: 100%;
   border-radius: 10em;
   animation: {post_id}loading 15s linear infinite;
[/class]
[animation=loading]
   [keyframe=100]width: 100%;[/keyframe]
[/animation]
[/nobr]
[div class=bkgd][div class=name][font=Righteous]mr. innovator[/font][/div][div class=role][font=Righteous]main dancer[/font][/div][div class=fc][font=Righteous]fc: felix lee[/font][/div][div class=progressouter][div class=progressinner][/div][/div][div class=credit]code by [USER=2383][color=#D5E59E]sox[/color][/USER][/div][/div]

 

[sox]

REFRESHER - MOBILE FRIENDLY

alas!! it is the code that i've spent far too many hours on!! i rly like how cute this turned out and i hope you guys like it too c: you click the little wiggling melon to get to the main sheet, and then everything scrolls, including all the green tag boxes and each text box. huge thanks to the coding legend deer for debugging this for my unskilled butt i love her ;-; please do not remove the credit! enjoy peeps and lmk if u have any requests! c:

[class=splash] position: relative; box-sizing: border-box; background: #E5E5E5; width: 20em; height: 400px; background-color: #EE3462; padding: 0; border-radius: 1em; margin-top: -400px; margin-bottom: auto; margin-left: auto; margin-right: auto; [/class] [class=box] position: relative; width: 17.35em; height: 360px; left: 0.65em; top: 0.6em; background-color: #241117; border-radius: 1em; border: 0.675em solid #8CC63F; [/class] [class=intro] position: absolute; top: 5.75em; overflow: hidden; width: 100%; height: auto; text-align: center; font-style: normal; font-weight: normal; font-size: 1.4em; color: #E0DDCA; text-transform: lowercase; animation:{post_id}throb 10s linear infinite; [/class] [animation=shake] [keyframe=0]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=10]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=20]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=30]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=40]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=50]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=60]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=70]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=80]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=90]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=100]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [/animation] [animation=throb] [keyframe=0]transform: scale(1.02);[/keyframe] [keyframe=10]transform: scale(0.98);[/keyframe] [keyframe=20]transform: scale(1.02);[/keyframe] [keyframe=30]transform: scale(0.98);[/keyframe] [keyframe=40]transform: scale(1.02);[/keyframe] [keyframe=50]transform: scale(0.98);[/keyframe] [keyframe=60]transform: scale(1.02);[/keyframe] [keyframe=70]transform: scale(0.98);[/keyframe] [keyframe=80]transform: scale(1.02);[/keyframe] [keyframe=90]transform: scale(0.98);[/keyframe] [keyframe=100]transform: scale(1.02);[/keyframe] [/animation] [class=melonslice] position: relative; overflow: visible; width: 5em; height: 5em; top: 10.25em; margin-left: auto; margin-right: auto; background: url(https://imgur.com/8nMcuCy.png); background-size: 100%; animation:{post_id}shake 5s linear infinite; [/class] [class name=melonslice state=hover] background: url(https://i.imgur.com/tPxQ0R3.png); animation:{post_id}shake 5s linear infinite; background-size: 100%; transition-duration: 0s; top: 10.6em; [/class] [script class=melonslice on=click] addClass slideup splash [/script] [class=slideup] animation-name: {post_id}slup; animation-duration:1.7s; animation-fill-mode:forwards; [/class] [class=slidedown] animation-name: {post_id}slown; animation-duration:1.7s; animation-fill-mode:forwards; [/class] [class=bkgd] left: 0em; position: relative; overflow-x: hidden; width: 20em; padding: 0px; background-color: #241117; margin: auto; border-radius: 1em; [/class] [class=bkgdcont] cursor: url('https://i.imgur.com/fTiQP63.png'), auto; position: relative; box-sizing: border-box; width: 21.5em; overflow-y: scroll; overflow-x: hidden; height: 400px; background-color: #241117; border-radius: 1em; padding-right: 150px; [/class] [animation=slup] [keyframe=0]transform: translateY(0%);[/keyframe] [keyframe=100]transform: translateY(-100%);visibility:hidden;[/keyframe] [/animation] [animation=slown] [keyframe=0]transform: translateY(-100%);[/keyframe] [keyframe=100]transform: translateY(0%);[/keyframe] [/animation] [class=title] position: absolute; left: 4%; top: 2%; overflow: hidden; width: 45%; height: 10em; text-align: left; font-style: normal; font-weight: normal; text-transform: lowercase; font-size: 1.8em; line-height: .8em; color: #E9EEA7; [/class] [class=pop] position: absolute; overflow: visible; width: 2em; height: 2em; background: url(https://imgur.com/vfmkddx.png); background-size: 100%; [/class] [class=pop2] position: absolute; overflow: visible; width: 2em; height: 2em; background: url(https://imgur.com/nLZgon7.png); background-size: 100%; [/class] [class=pic1] position: absolute; overflow: visible; width: 5.5em; height: 5.5em; left: 62%; top: 3.4em; background: url(https://i.pinimg.com/564x/b5/f3/0b/b5f30b80156779273d1d3d7fa84fc60f.jpg); background-size: 100%; border-radius: 1em; animation:{post_id}throb 10s linear infinite; [/class] [class=melon2] position: absolute; overflow: visible; width: 5.5em; height: 5.5em; left: 5%; top: 24em; background: url(https://imgur.com/izMrBJP.png); background-size: 100%; animation:{post_id}shake 5s linear infinite; [/class] [class=pic2] position: absolute; overflow: visible; width: 5.5em; height: 5.5em; left: 5%; top: 31em; background: url(https://i.pinimg.com/564x/d9/34/0b/d9340b51a132326ba16f65a988f61cf6.jpg); background-size: 130%; background-position: 30% 0%;; border-radius: 1em; animation:{post_id}throb 10s linear infinite; [/class] [class=tagbox] position: absolute; overflow: hidden; padding: 0em; line-height: 1em; word-wrap: normal; [/class] [class=tag] position: relative; overflow: visible; width: auto; height: auto; display: inline-block; background-color: #8CC63F; border-radius: .2em; font-size: .8em; line-height: 1em; color: #fff; padding: 0.1em 0.5em 0.1em 0.5em; text-transform: lowercase; margin-right: 0.2em; text-shadow: 1px 1px 0px #241117; [/class] [class=ptag] position: relative; overflow: visible; width: auto; height: auto; display: inline-block; border-radius: .2em; font-size: 1.2em; line-height: 1em; color: #EE3462; margin-right: 0.5em; text-transform: lowercase; border-bottom: 1px solid #EE3462; text-shadow: 1px 1px 0px #000; [/class] [class=sidehead] position: absolute; overflow: visible; width: auto; height: auto; text-align: left; font-style: normal; font-weight: normal; font-size: .8em; color: #EE3462; [/class] [class=subhead] position: absolute; overflow: hidden; width: auto; height: auto; text-align: left; font-style: normal; font-weight: normal; font-size: 0.9em; color: #fff; animation:{post_id}throb 5s linear infinite; [/class] [class=text1] position: relative; overflow: auto; width: 90%; height: 20em; line-height: 1.2em; text-align: justify; font-style: normal; font-weight: normal; font-size: 0.6em; color: #fff; padding-right: 5em; [/class] [class=cont1] position: absolute; left: 4%; top: 10em; overflow: hidden; width: 55%; height: 20em; margin-top: 0.1em; [/class] [class=text2] position: relative; overflow: auto; width: 78%; height: 20em; line-height: 1.2em; text-align: justify; font-style: normal; font-weight: normal; font-size: 0.6em; color: #fff; padding-right: 10em; [/class] [class=cont2] position: absolute; left: 35%; top: 24.6em; overflow: hidden; width: 70%; height: 13em; margin-top: 0.1em; [/class] [class=text3] position: relative; overflow: auto; width: 70%; height: 24em; line-height: 1.2em; text-align: justify; font-style: normal; font-weight: normal; font-size: 0.6em; color: #fff; padding-right: 10em; [/class] [class=cont3] position: absolute; left: 5%; top: 48em; overflow: hidden; width: 120%; height: 24em; margin-top: 0.1em; [/class] [class=gallery] position: absolute; left: 0%; top: 66em; overflow: hidden; width: 95%; height: 27em; display: flex; flex-direction: row; justify-content: space-evenly; [/class] [class=column] width: 45%; height: 9em; margin-left: 0.5em; [/class] [class=galpic] width: 90%; height: 90%; background-position: 0% 0%; margin-bottom: 0.5em; border-radius: 1em; [/class] [class name=galpic state=hover] animation:{post_id}throb 5s linear infinite; transition-duration: 0.2s; border: 1px solid #EE3462; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: auto; text-align: center; font-style: normal; font-weight: normal; font-size: .5em; color: #EE3462; opacity: 0.3; [/class] [div class=bkgd][div class=bkgdcont] [div class=title]the refresher[/div] [div class=pop style="left: 50%; top: 2%; animation:{post_id}shake 15s linear infinite;"][/div] [div class=pop2 style="left: 60%; top: 2%; animation:{post_id}shake 5s linear infinite;"][/div] [div class=pop style="left: 70%; top: 2%; animation:{post_id}shake 10s linear infinite;"][/div] [div class=pop2 style="left: 80%; top: 2%; animation:{post_id}shake 20s linear infinite;"][/div] [div class=pic1][/div] [div class=melon2][/div] [div class=pic2][/div] [div style="position: absolute; overflow: hidden; width: 55%; height: 3.8em; left: 4%; top: 4.1em;"][div class=tagbox style="overflow: auto; width:105%; height: 3.8em; padding-right: 1em;"][div class=tag]male[/div][div class=tag]22[/div][div class=tag]heterosexual[/div][div class=tag]virgo[/div][div class=tag]6' 0"[/div][div class=tag]singer[/div][div class=tag]chaotic good[/div][div class=tag]the maknae[/div][div class=tag]ciao[/div][div class=tag]shalom[/div][/div][/div] [div class=sidehead style="left: 62%; top: 11.9em;"]♡ likes[/div] [div class=tagbox style="width: 10em; height: 4.7em; overflow: auto; left: 62%; top: 10.6em;"][div class=tag]overwatch[/div]
[div class=tag]bulgogi[/div]
[div class=tag]dancing[/div]
[div class=tag]filming[/div]
[div class=tag]singing[/div]
[div class=tag]horror movies[/div][/div] [div class=sidehead style="left: 62%; top: 19.5em;"]♡ dislikes[/div] [div class=tagbox style="width: 10em; height: 4.7em; overflow: auto; left: 62%; top: 16.7em;"][div class=tag]math[/div]
[div class=tag]failure[/div]
[div class=tag]arrogance[/div]
[div class=tag]studying[/div]
[div class=tag]yelling[/div]
[div class=tag]roller skating[/div][/div] [div class=subhead style="left: 4%; top: 9.5em;"]♡ basics[/div] [div class=cont1][div class=text1][div class=ptag]name[/div]jeon jungkook

[div class=ptag]nickname[/div]kookie, jk, ggukie

[div class=ptag]age[/div]22

[div class=ptag]gender[/div]male

[div class=ptag]sexuality[/div]heterosexual

[div class=ptag]birthday[/div]september 1

[div class=ptag]role[/div]maknae

[div class=ptag]faceclaim[/div]jeon jungkook

[div class=ptag]hair color[/div]brown

[div class=ptag]eye color[/div]brown

[div class=ptag]height[/div]5' 11"

[div class=ptag]weight[/div]210 lbs

[div class=ptag]body type[/div]ectomorph

[div class=ptag]unique marks[/div]mole on his neck

[div class=ptag]body mods[/div]sleeve of tattoos and several ear piercings

[div class=ptag]attire[/div]x x x

[div class=ptag]misc[/div]can drive, can't math [/div][/div] [div class=cont2][div class=text2][div class=ptag]vices[/div]Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Tincidunt ornare massa eget egestas. Mauris a diam maecenas sed enim ut sem viverra aliquet. Ultrices gravida dictum fusce ut placerat. Sapien et ligula ullamcorper malesuada proin libero nunc.

[div class=ptag]virtues[/div]Amet cursus sit amet dictum sit amet justo. Consequat id porta nibh venenatis cras sed. Tincidunt eget nullam non nisi est sit amet. Est ultricies integer quis auctor elit sed vulputate mi sit. Vel pharetra vel turpis nunc. Nascetur ridiculus mus mauris vitae ultricies.

[div class=ptag]strengths[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl vel pretium lectus quam id. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis.

[div class=ptag]weaknesses[/div] Curabitur gravida arcu ac tortor dignissim convallis aenean et. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.

[div class=ptag]likes[/div] Sit amet nisl purus in mollis nunc sed id. Nibh praesent tristique magna sit amet purus gravida quis blandit. At consectetur lorem donec massa. Tincidunt vitae semper quis lectus nulla at volutpat diam. Aliquam vestibulum morbi blandit cursus risus.

[div class=ptag]dislikes[/div]Habitant morbi tristique senectus et. Libero justo laoreet sit amet cursus. Maecenas accumsan lacus vel facilisis volutpat est velit. Fermentum iaculis eu non diam phasellus vestibulum. Scelerisque eu ultrices vitae auctor eu augue ut lectus arcu. Accumsan in nisl nisi scelerisque eu ultrices vitae. In nibh mauris cursus mattis molestie a iaculis.

[div class=ptag]habits[/div]Proin libero nunc consequat interdum varius. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. Iaculis nunc sed augue lacus viverra. Sociis natoque penatibus et magnis dis parturient. Elit pellentesque habitant morbi tristique senectus et netus et. Lectus quam id leo in vitae turpis massa sed. Nunc consequat interdum varius sit amet mattis vulputate enim. Enim nec dui nunc mattis. Augue ut lectus arcu bibendum.

[div class=ptag]quirks[/div]Sed augue lacus viverra vitae congue eu consequat ac. In vitae turpis massa sed elementum tempus egestas. Sed euismod nisi porta lorem mollis.

[div class=ptag]fears[/div]Rhoncus urna neque viverra justo nec ultrices dui. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Risus ultricies tristique nulla aliquet enim tortor at. Sit amet facilisis magna etiam tempor orci eu lobortis. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Curabitur vitae nunc sed velit dignissim sodales ut.

[div class=ptag]motivations[/div]Vitae auctor eu augue ut lectus arcu bibendum at varius. Justo laoreet sit amet cursus sit amet dictum sit amet. In nibh mauris cursus mattis molestie a iaculis at. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Arcu cursus euismod quis viverra nibh cras pulvinar. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. [/div][/div] [div class=subhead style="left: 35%; top: 25.8em;"]♡ persona[/div] [div class=cont3][div class=text3] [div class=ptag]occupation[/div]Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus.

[div class=ptag]education[/div]Amet cursus sit amet dictum sit amet justo. Consequat id porta nibh venenatis cras sed. Tincidunt eget nullam non nisi est sit amet. Est ultricies integer quis auctor elit sed vulputate mi sit. Vel pharetra vel turpis nunc. Nascetur ridiculus mus mauris vitae ultricies.

[div class=ptag]residence[/div]Lorem ipsum dolor sit amet.

[div class=ptag]history[/div] Nisi scelerisque eu ultrices vitae auctor eu augue. Arcu ac tortor dignissim convallis. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Porttitor rhoncus dolor purus non enim praesent elementum facilisis leo. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Convallis posuere morbi leo urna molestie. Sit amet purus gravida quis blandit. Ut etiam sit amet nisl. Mollis aliquam ut porttitor leo a diam sollicitudin tempor id. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Imperdiet sed euismod nisi porta lorem. Sed euismod nisi porta lorem mollis. Justo laoreet sit amet cursus sit amet dictum. Augue ut lectus arcu bibendum at varius vel. Malesuada fames ac turpis egestas maecenas. Id donec ultrices tincidunt arcu non sodales neque sodales ut.

At elementum eu facilisis sed. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Nullam non nisi est sit amet facilisis. Dui id ornare arcu odio ut sem nulla. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Magna eget est lorem ipsum dolor. Ac tortor dignissim convallis aenean et tortor. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Proin libero nunc consequat interdum varius sit amet mattis. Imperdiet sed euismod nisi porta lorem. Rutrum tellus pellentesque eu tincidunt. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Vel eros donec ac odio tempor. Eu lobortis elementum nibh tellus molestie nunc. In ornare quam viverra orci sagittis eu. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed. Tellus elementum sagittis vitae et leo duis ut. Amet risus nullam eget felis.

[div class=ptag]relationships[/div]

• Nisi scelerisque eu ultrices vitae auctor eu augue. Arcu ac tortor dignissim convallis. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.
• Porttitor rhoncus dolor purus non enim praesent elementum facilisis leo. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Convallis posuere morbi leo urna molestie.
• Sit amet purus gravida quis blandit. Ut etiam sit amet nisl. Mollis aliquam ut porttitor leo a diam sollicitudin tempor id. Mattis molestie a iaculis at erat pellentesque adipiscing commodo.
• Imperdiet sed euismod nisi porta lorem. Sed euismod nisi porta lorem mollis. Justo laoreet sit amet cursus sit amet dictum. Augue ut lectus arcu bibendum at varius vel.
• Malesuada fames ac turpis egestas maecenas. Id donec ultrices tincidunt arcu non sodales neque sodales ut.

[/div][/div] [div class=subhead style="width: 90%; text-align: center; top: 42.5em;"]♡ background[/div] [div class=sidehead style="left: 4%; top: 49.9em"]♡ family[/div] [div style="position: absolute; overflow: hidden; width: 8em; height: 7em; left: 4%; top: 41em;"][div class=tagbox style="overflow: auto; width: 9.5em; height: 6em;"][div class=tag]father[/div]
[div class=tag]mother[/div]
[div class=tag]sister[/div]
[div class=tag]kitten[/div]
[div class=tag]two hamsters[/div]
[div class=tag]betta fish[/div]
[div class=tag]bang sihyuk[/div][/div][/div] [div class=sidehead style="left: 50%; top: 49.9em"]♡ hobbies[/div] [div style="position: absolute; overflow: hidden; width: 8em; height: 7em; left: 50%; top: 41em;"][div class=tagbox style="overflow: auto; width: 9.5em; height: 6em;"][div class=tag]swimming[/div]
[div class=tag]boxing[/div]
[div class=tag]eating everything[/div]
[div class=tag]gaming[/div]
[div class=tag]hiphop dancing[/div]
[div class=tag]video-editing[/div][/div][/div] [div class=subhead style="width: 90%; text-align: center; top: 70.8em"]♡ gallery[/div] [div class=gallery] [div class=column] [div class=galpic style="background: url(https://i.pinimg.com/originals/e7/aa/d8/e7aad80e6ba12730db82d82a33c40e92.gif); background-size: 100%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/564x/c5/9c/9b/c59c9b5dc033ec7c3ea9fd67716aa0df.jpg); background-size: 110%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/originals/cd/a3/45/cda345a8fa7c6d2ce37a59aa59419b4f.gif); background-size: 100%;"][/div] [/div] [div class=column] [div class=galpic style="background: url(https://i.pinimg.com/474x/11/c1/97/11c1973ad99b69d2568401f5f617141c.jpg); background-size: 110%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/originals/9e/5a/fe/9e5afebba3aa366c6db280bedf8784b9.gif); background-size: 120%; background-position: 50% 0%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/474x/e5/80/0c/e5800c67dd05a84a35408c72da9550ef.jpg); background-size: 110%;"][/div] [/div] [/div] [/div] [div class=splash][div class=box][div class=melonslice][/div][div class=intro]take a bite![/div][/div][/div][/div][div class=credit]code by sox [/div]

pastebin: xxx​

 

[VALEN T.]

oh my fuck what is this
i was literally planning on making a watermelon-inspired code

and i had smth in mind that was similar to your innovator too dskajdhs
:cries:
chezmoi how are you so s l i c k

 

[sox]

oh my fuck what is this
i was literally planning on making a watermelon-inspired code

and i had smth in mind that was similar to your innovator too dskajdhs
:cries:
chezmoi how are you so s l i c k

make them anyways!!!! i'm sure your codes will be 10x better than mine pls make them!!!
pfft i'm about as slick as sand

 

[VALEN T.]

i'm sure your codes will be 10x better than mine pls make them!!!

uhm no i dissent ???
your codes are amazing and i love them <3
please do continue making more !

 

[sox]

uhm no i dissent ???
your codes are amazing and i love them <3
please do continue making more !

too sweet to me ;-; mmmmm only if u do
u heard it here folks the day that fudgecakez stops making codes is the day that sox stops making codes

 

[VALEN T.]

fuck yes senpai validate me
I literally love you

 

[leviathan.]

omg your codes look like they taste good...like ok im in awe of ur bbcoding prowess