thirteen
𝐯𝐢𝐥𝐥𝐚𝐢𝐧𝐞𝐬𝐬.
[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://media1.giphy.com/media/8L1qmRiCRNWw69eFmT/giphy.gif');
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]FRIENDS[/div]
[div class=textHome]"so no one told you
life was
gonna be this way."[/div] [/div] [div class="content content01"] [div class=scroll] [div class=title]basics[/div] [div class=tag]name!: [/div] here.
[div class=tag]nicknames!:[/div] here.
[div class=tag]sexuality:[/div]here.
[div class=tag]gender:[/div] here.
[div class=tag]age!:[/div] here.
[div class=tag]birthday:[/div] here.
[div class=tag]zodiac:[/div] here.
[div class=tag]ethnicity:[/div] here.
[div class=tag]occupation:[/div] here.
[div class=tag]role:[/div] here.
[div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://media.giphy.com/media/60s1EAwfw9223J3B5Y/giphy.gif');"][/div] [div class=imgSmall style="background-image: url('https://media.giphy.com/media/1wPACbts9IoY1m9OFN/giphy.gif');"][/div] [/div] [div class=title]appearance/persona on next tab[/div] [/div] [/div] [div class="content content02"] [div class=scroll] [div class=title]appearance/persona[/div]
[div class=tag] height:[/div] here.
[div class=tag]eyes:[/div] here.
[div class=tag] hair:[/div] here.
[div class=tag]faceclaim:[/div] here.
[div class=tag]likes:[/div]
[div class=tag]dislikes:[/div]
[div class=tag]vices:[/div]
[div class=tag]virtues:[/div]
[div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/7c61e06a2c43a162ddcb53c300036465/tumblr_o1lf90BsVh1trric7o3_250.gif');"][/div] [div class=imgSmall style="background-image: url('https://data.whicdn.com/images/58863001/original.gif');"][/div] [/div] [div class=tag]questions on next tab[/div]
[/div] [/div] [div class="content content03"] [div class=scroll] [div class=title]questions[/div] [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://media.giphy.com/media/Y2IsGLTYmTzRS/giphy.gif');"][/div] [div class=imgSmall style="background-image: url('https://data.whicdn.com/images/252556581/original.gif');"][/div] [/div] [div class=tag]answer the following in character![/div]
[div class=tag]question one.[/div] Glass half empty or half full?
[div class=tag]question two.[/div] Why did you decide to move in?
[div class=tag]question three.[/div] Favorite part of the city?
[div class=tag]question four.[/div] Do you believe in soulmates?
[div class=tag]question five.[/div] Celeb crush?
[div class=tag]biography on next tab.[/div] [/div] [/div] [div class="content content04"] [div class=scroll] [div class=title]biography[/div] [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://i.pinimg.com/originals/95/bf/c0/95bfc0bbc095478a4c9add96fc9fe639.gif');"][/div] [div class=imgSmall style="background-image: url('https://thumbs.gfycat.com/ElegantCompassionateAngwantibo-size_restricted.gif');"][/div] [/div] [div class=tag]history:[/div]here.
[/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]
life was
gonna be this way."[/div] [/div] [div class="content content01"] [div class=scroll] [div class=title]basics[/div] [div class=tag]name!: [/div] here.
[div class=tag]nicknames!:[/div] here.
[div class=tag]sexuality:[/div]here.
[div class=tag]gender:[/div] here.
[div class=tag]age!:[/div] here.
[div class=tag]birthday:[/div] here.
[div class=tag]zodiac:[/div] here.
[div class=tag]ethnicity:[/div] here.
[div class=tag]occupation:[/div] here.
[div class=tag]role:[/div] here.
[div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://media.giphy.com/media/60s1EAwfw9223J3B5Y/giphy.gif');"][/div] [div class=imgSmall style="background-image: url('https://media.giphy.com/media/1wPACbts9IoY1m9OFN/giphy.gif');"][/div] [/div] [div class=title]appearance/persona on next tab[/div] [/div] [/div] [div class="content content02"] [div class=scroll] [div class=title]appearance/persona[/div]
[div class=tag] height:[/div] here.
[div class=tag]eyes:[/div] here.
[div class=tag] hair:[/div] here.
[div class=tag]faceclaim:[/div] here.
[div class=tag]likes:[/div]
- here.
[div class=tag]dislikes:[/div]
- here.
[div class=tag]vices:[/div]
- +3
[div class=tag]virtues:[/div]
- +3
[div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/7c61e06a2c43a162ddcb53c300036465/tumblr_o1lf90BsVh1trric7o3_250.gif');"][/div] [div class=imgSmall style="background-image: url('https://data.whicdn.com/images/58863001/original.gif');"][/div] [/div] [div class=tag]questions on next tab[/div]
[/div] [/div] [div class="content content03"] [div class=scroll] [div class=title]questions[/div] [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://media.giphy.com/media/Y2IsGLTYmTzRS/giphy.gif');"][/div] [div class=imgSmall style="background-image: url('https://data.whicdn.com/images/252556581/original.gif');"][/div] [/div] [div class=tag]answer the following in character![/div]
[div class=tag]question one.[/div] Glass half empty or half full?
[div class=tag]question two.[/div] Why did you decide to move in?
[div class=tag]question three.[/div] Favorite part of the city?
[div class=tag]question four.[/div] Do you believe in soulmates?
[div class=tag]question five.[/div] Celeb crush?
[div class=tag]biography on next tab.[/div] [/div] [/div] [div class="content content04"] [div class=scroll] [div class=title]biography[/div] [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://i.pinimg.com/originals/95/bf/c0/95bfc0bbc095478a4c9add96fc9fe639.gif');"][/div] [div class=imgSmall style="background-image: url('https://thumbs.gfycat.com/ElegantCompassionateAngwantibo-size_restricted.gif');"][/div] [/div] [div class=tag]history:[/div]here.
[/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]
coded by shady.