athena

[nobr]
[class=variables]
	--color: #b7cfda;
	cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
[/class]

[class=container]
	width: 460px;
	height: 300px;
	display: flex;
	margin: auto;
[/class]

[class=left]
	background-color: var(--color);
	height: 300px;
	width: 220px;
	padding: 10px;
	box-sizing: border-box;
[/class]

[class name=left maxWidth=450px]
	width: 135px;
	padding: 5px;
	height: 290px;
[/class]

[class=img]
	height: 280px;
	width: 200px;
	background-image: url('https://pbs.twimg.com/media/CkJHc2TWsAEQRCe.jpg');
	filter: saturate(0%);
	background-size: cover;
	padding: 20px;
	box-sizing: border-box;
	background-position: 50% 50%;
[/class]

[class name=img maxWidth=450px]
	width: 125px;
[/class]

[class=brackets]
	height: 100%;
	width: 100%;
	background:
		linear-gradient(to right, white 2px, transparent 2px) 0 100%,
		linear-gradient(to left, white 2px, transparent 2px) 100% 0,
		linear-gradient(to bottom, white 2px, transparent 2px) 100% 0,
		linear-gradient(to top, white 2px, transparent 2px) 0 100%;
	background-repeat: no-repeat;
	background-size: 20px 20px;
[/class]

[class name=brackets maxWidth=450px]
	opacity: 0;
[/class]

[class=right]
	width: 240px;
	height: 300px;
	display: flex;
	flex-direction: column;
[/class]

[class=contentContainer]
	position: relative;
	width: 240px;
	height: 270px;
[/class]

[class name=contentContainer maxWidth=450px]
	left: -5px;
[/class]

[class=content]
	position: absolute;
	opacity: 0;
	transition: 0.5s;
	width: 240px;
	height: 270px;
	font-size: 12px;
	padding-left: 10px;
	box-sizing: border-box;
	overflow: hidden;
[/class]

[class=scroll]
	width: 100%;
	padding-right: 150px;
	height: 100%;
	overflow-y: scroll;
[/class]

[class=name]
	font-weight: 900;
	text-align: center;
	border-bottom: 4px solid var(--color);
	width: 120px;
	display: block;
	margin: 10% auto;
	font-size: 18px;
	position: relative;
[/class]

[class=textHome]
	font-size: 12px;
	text-align: center;
	text-transform: uppercase;
	width: 200px;
	margin: 0 6.5%;
[/class]

[class=title]
	text-align: center;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 900;
[/class]

[class=tag]
	display: inline-block;
	border-bottom: 1px solid var(--color);
	height: 15px;
	font-size: 10px;
	text-transform: uppercase;
[/class]

[class=imgSmallContainer]
	width: 80%;
	height: 70px;
	display: flex;
	justify-content: space-between;
	margin: 10px auto;
[/class]

[class=imgSmall]
	width: 70px;
	height: 70px;
	background-size: cover;
	background-position: 50% 50%;
	filter: saturate(70%);
[/class]

[class=tabs]
	display: flex;
	width: 150px;
	margin: 0 23%;
	justify-content: space-between;
[/class]

[class name=tabs maxWidth=450px]
	position: relative;
	left: -10px;
[/class]

[class=tab]
	border-radius: 50%;
	height: 20px;
	width: 20px;
	border: 1px solid black;
	transition: 0.5s;
[/class]

[class name=tab state=hover]
	cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
	border: 1px solid var(--color);
[/class]

[class=show]
	z-index: 1;
	opacity: 1;
[/class]

[class=click]
	border: 1px solid var(--color);
	background-color: var(--color);
[/class]

[script class=tab01 on=click]
	addClass click tab01
	removeClass click tab02
	removeClass click tab03
	removeClass click tab04

	addClass show content01
	removeClass show content02
	removeClass show content03
	removeClass show content04
	removeClass show contentHome
[/script]

[script class=tab02 on=click]
	addClass click tab02
	removeClass click tab01
	removeClass click tab03
	removeClass click tab04

	addClass show content02
	removeClass show content01
	removeClass show content03
	removeClass show content04
	removeClass show contentHome
[/script]

[script class=tab03 on=click]
	addClass click tab03
	removeClass click tab01
	removeClass click tab02
	removeClass click tab04

	addClass show content03
	removeClass show content01
	removeClass show content02
	removeClass show content04
	removeClass show contentHome
[/script]

[script class=tab04 on=click]
	addClass click tab04
	removeClass click tab01
	removeClass click tab02
	removeClass click tab03

	addClass show content04
	removeClass show content01
	removeClass show content02
	removeClass show content03
	removeClass show contentHome
[/script]

[div class=variables]

[div class=container]
	[div class=left]
		[div class=img]
			[div class=brackets][/div]
		[/div]
	[/div]

	[div class=right]

	[div class=contentContainer]
		[div class="show content contentHome"]
			[div class=name][font=Playfair Display SC]NAME HERE.[/font][/div]
			[div class=textHome][font=Work Sans]you can put some[br][/br][br][/br]words, quotes or lyrics here[br][/br][br][/br]idk go wild people (not too wild it'll look funky with too many words)[/font][/div]
		[/div]

		[div class="content content01"]
		[div class=scroll]
			[div class=title][font=Playfair Display SC]basics[/font][/div]
				[div class=tag][font=Work Sans]name[/font][/div] here
					[br][/br]
				[div class=tag][font=Work Sans]nicknames[/font][/div] here
					[br][/br]
				[div class=tag][font=Work Sans]age[/font][/div] here
					[br][/br]
				[div class=tag][font=Work Sans]gender[/font][/div] here
					[br][/br]
				[div class=imgSmallContainer]
				[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/5c6bdda06395918d539f1a74b461a4be/tumblr_inline_p2n1dpx7Gf1rbm3wd_500.gif');"][/div]
				[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/237ccb779ff20060aefc3c39dbc184f5/tumblr_inline_p2n1dxKhwx1rbm3wd_500.gif');"][/div]
				[/div]
			[div class=title][font=Playfair Display SC]appearance[/font][/div]
				[div class=tag][font=Work Sans]height[/font][/div] five foot, eight inches.
					[br][/br]
				[div class=tag][font=Work Sans]question[/font][/div] answer
					[br][/br]
		[/div]
		[/div]


		[div class="content content02"]
		[div class=scroll]
			[div class=title][font=Playfair Display SC]persona[/font][/div]
				[div class=tag][font=Work Sans]question[/font][/div]  answer
				[div class=imgSmallContainer]
				[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/68ded5bba4c841da1a78817d182c3fbf/tumblr_inline_p2n1dhnFmO1rbm3wd_500.gif');"][/div]
				[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/5132a61d29baef25ff3bad70a27ca89d/tumblr_inline_p2n1cqTnmk1rbm3wd_500.gif');"][/div]
				[/div]
				[div class=tag][font=Work Sans]input/question[/font][/div] output/answer
					[br][/br]
		[/div]
		[/div]


		[div class="content content03"]
		[div class=scroll]
			[div class=title][font=Playfair Display SC]special[/font][/div]
				[div class=imgSmallContainer]
				[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/958523d0131f3fab9de7b99c9dcfab4e/tumblr_inline_p2n1cxOyQW1rbm3wd_500.gif');"][/div]
				[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/125340aa07906c00b610fe3888e5936e/tumblr_inline_p2n1d8f6FE1rbm3wd_500.gif');"][/div]
				[/div]
				[div class=tag][font=Work Sans]input[/font][/div] output
					[br][/br]
				[div class=tag][font=Work Sans]input[/font][/div] output
					[br][/br]
		[/div]
		[/div]


		[div class="content content04"]
		[div class=scroll]
			[div class=title][font=Playfair Display SC]background[/font][/div]
				[div class=tag][font=Work Sans]input[/font][/div] output
				[div class=imgSmallContainer]
				[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/442a13a55bfbe3022553b68e25dadf73/tumblr_inline_p2n1feBvAr1rbm3wd_500.gif');"][/div]
				[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/acb1a84e37ba3c0b6526e617ed806627/tumblr_inline_p2n1fmKjhS1rbm3wd_500.gif');"][/div]
				[/div]
				[div class=tag][font=Work Sans]question[/font][/div]  answer
					[br][/br]
				[div class=tag][font=Work Sans]misc. facts[/font][/div]
					[br][/br]
[color=transparent]xx[/color] → can make a list of things like this, or whatever you want to do with arrows
					[br][/br]
[color=transparent]xx[/color] → etc.
		[/div]
		[/div]

	[/div]

		[div class=tabs]
			[div class="tab tab01"][/div]
			[div class="tab tab02"][/div]
			[div class="tab tab03"][/div]
			[div class="tab tab04"][/div]
		[/div]
	[/div]
[/div]
[/div]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by [user=26242]shady[/user].[/div]
[/nobr]