SUNFLOWER // code

[nobr]
[class name=scaled]
animation-name: {post_id}scaled;
animation-direction: normal;
animation-duration: 0.7s;
animation-delay: 0.2s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=scaled]
[keyframe=0]transform: scale(1.4); opacity: 0[/keyframe]
[keyframe=100]transform: scale(1); opacity: 1[/keyframe]
[/animation]

[class name=scalen]
animation-name: {post_id}scalen;
animation-direction: normal;
animation-duration: 0.5s;
animation-delay: 0s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=scalen]
[keyframe=0]transform: scale(1); opacity: 1[/keyframe]
[keyframe=100]transform: scale(1.4); opacity: 0[/keyframe]
[/animation]

[class name=ir]
animation-name: {post_id}ir;
animation-direction: normal;
animation-duration: 0.7s;
animation-delay: 0.1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=ir]
[keyframe=0]left: 0%; opacity: 0[/keyframe]
[keyframe=100]left: 70%; opacity: 1[/keyframe]
[/animation]

[class name=pi]
animation-name: {post_id}pi;
animation-direction: normal;
animation-duration: 0.7s;
animation-delay: 0.1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=pi]
[keyframe=0]left: 70%; opacity: 1[/keyframe]
[keyframe=100]left: 0%; opacity: 0[/keyframe]
[/animation]

[class name=ri]
animation-name: {post_id}ri;
animation-direction: normal;
animation-duration: 0.7s;
animation-delay: 0.1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=ri]
[keyframe=0]left: -5%[/keyframe]
[keyframe=100]left: 0%;[/keyframe]
[/animation]

[class name=le]
animation-name: {post_id}le;
animation-direction: normal;
animation-duration: 0.7s;
animation-delay: 0.2s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=le]
[keyframe=0]left: 0%; [/keyframe]
[keyframe=100]left: -5%;[/keyframe]
[/animation]

[script class=ff on=mouseenter]
addClass le ffor
removeClass ri ffor
addClass ir outs
removeClass pi outs
[/script]

[script class=ff on=mouseleave]
addClass ri ffor
removeClass le ffor
addClass "pi" "outs"
removeClass "ir" "outs"
[/script]

[script class=first on=click]
hide tabsContent2
hide tabsContent3
hide tabsContent4
fadeOut 600 tabsContent2
fadeOut 600 tabsContent3
fadeOut 600 tabsContent4
fadeOut 600 tabsContent1
fadeIn 800 tabsContent1[/script]

[script class=second on=click]
hide tabsContent1
hide tabsContent3
hide tabsContent4
fadeOut 600 tabsContent1
fadeOut 600 tabsContent3
fadeOut 600 tabsContent4
fadeOut 600 tabsContent2
fadeIn 800 tabsContent2[/script]

[script class=third on=click]
hide tabsContent2
hide tabsContent1
hide tabsContent4
fadeOut 600 tabsContent2
fadeOut 600 tabsContent1
fadeOut 600 tabsContent4
fadeOut 600 tabsContent3
fadeIn 800 tabsContent3[/script]

[script class=fourth on=click]
hide tabsContent2
hide tabsContent3
hide tabsContent1
fadeOut 600 tabsContent2
fadeOut 600 tabsContent3
fadeOut 600 tabsContent1
fadeOut 600 tabsContent4
fadeIn 800 tabsContent4[/script]

[class=c]width: 100%; text-align: center; opacity: 0; font-size: 10px;
[/class]

[class=container]height: 380px;
max-width: 530px;
padding: 1.5%;
background: var(--back);
margin: auto;
overflow: hidden;
cursor: url(https://i.imgur.com/fkP02Jr.png), auto;
--back: #CD8E89;
--font1: #f2f2f2;
--title: #fff;
--firstword: #cc5f5d;
--bor: #d16f6d
[/class]

[class=moon]width: 0px;
height: 0px;
border-top: 420px solid #c06a6e;
border-left: 570px solid transparent;
position: relative;
top: -20px;
left: -20px
[/class]

[class=pic]height: 380px;
width: 43%;
background-image: url(http://scontent-frx5-1.cdninstagram.com/vp/687593511eae2ab0fc68779620725ae9/5DC06D75/t51.2885-15/e35/p1080x1080/59039761_2311758102396873_4943257921529921011_n.jpg?_nc_ht=scontent-frx5-1.cdninstagram.com); background-size: cover; background-position: 40% 0%;
position: relative; top: -110%;
overflow: hidden;
[/class]

[class=text]height: 370px;
width: 85%;
margin: auto;
font-size: 20px;
font-family: 'Yesteryear';
position: relative;
top: 10px;
left: 0px;
text-align-last: justify;
line-height: 40px;
color: white;
overflow: hidden;
transition: 0.5s
[/class]

[class=cloak]opacity: 0
[/class]

[class=uncloak]transition-delay: 0.3s; opacity: 1
[/class]

[class=half]height: 100%; width: 100%; opacity: 0; background: pink; transition: 0.7s; position: relative; filter: blur(1%); top: -97.5%
[/class]

[class=halfu]height: 100%; width: 100%; opacity: 0.3
[/class]

[class=spryt]height: 360px;
width: 100%;
margin: auto;
font-size: 12px;
position: relative;
top: -200%;
left: 80%;
left: 0px;
color: white;
opacity: 0
[/class]

[class=ff]height: 100px; width: 100%;
position: relative;
top: 35px;
left: 25%;
transition: 0.5s
[/class]

[class=ffor]height: 87px;
width: 87px;
padding: 2%;
border-radius: 50%;
border: 1px solid var(--back);
position: relative;
transition: 0.5s
[/class]

[class=bor]height: 85px;
width: 85px;
border: 1px solid var(--back);
border-radius: 50%;
background-image: url(http://66.media.tumblr.com/acd3b4bdd0a5cdc4a533196af674b7c6/tumblr_pu6zzjromh1vua2zco4_1280.jpg); background-size: cover; background-position: 0% 40%;
position: relative;
[/class]

[class=title]height: 30%; width: 100%;
overflow: hidden;
font-size: 22px;
font-family: 'Yesteryear';
color: var(--title);
text-transform: lowercase;
text-align: center;
position: relative;
top: -20px;
left: -25%
[/class]

[class=stixt]height: 175px;
width: 70%;
font-size: 9px;
font-family: 'Inconsolata', monospace;
color: white;
overflow: hidden;
text-align: justify;
text-transform: lowercase;
position: relative; top: 15%; left: 14%;
[/class]

[script class=pic on=mouseenter version=2]
(addClass "cloak" "text")
(addClass "halfu" "half")
(removeClass "cloak" "half")
(removeClass "uncloak" "text")
(addClass "scaled" "spryt")
(removeClass "scalen" "spryt")
[/script]

[script class=pic on=mouseleave version=2]
(addClass "uncloak" "text")
(addClass "cloak" "half")
(removeClass "halfu" "half")
(removeClass "cloak" "text")
(addClass "scalen" "spryt")
(removeClass "scaled" "spryt")
[/script]

[class=outs]padding-top: 5px; height: 55px;
max-width: 60px;
font-size: 35px;
font-weight: 900;
line-height: 15px;
font-family: sans-serif;
position: relative;
top: -70px;
left: 50%;
opacity: 0;
transition: 0.5s
[/class]

[class=tabs]display: inline-block;
font-size: 17px;
cursor: pointer;
color: white;
font-size: 0.6em;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
position: relative
[/class]

[class=gade]height: 350px;
width: 53%;
padding: 25px 5px 5px 5px;
position: relative;
top: -800px;
left: 44%;
color: var(--font1);
overflow: hidden
[/class]

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

[class=big]height: 50px;
width: 100%;
overflow: hidden;
color: var(--title);
font-size: 30px;
text-transform: uppercase;
font-weight: 900;
position: relative;
left: 1%
[/class]

[class=o]height: 185px;
max-width: 260px;
font-size: 10px;
overflow: hidden;
position: relative;
margin: auto;
text-align: justify;
line-height: 17px
[/class]

[class=firstword]height: 10px;
max-width: 100px;
display: inline-block;
background: var(--firstword);
padding: 0px 5px 7px 5px;
color: var(--title);
font-weight: 700
[/class]

[class=columnhold]height: 75px;
width: 100%;
position: relative;
font-size: 19px;
color: transparent
[/class]

[class=image]display: inline-block;
height: 75px;
width: 28%;
background-image: url(http://cdn.shopify.com/s/files/1/1768/2029/products/Pretty-In-Pink-Kristen-M-Brown-Samba-to-the-Sea-The-Sunset-Shop-Sx600v_600x.jpg?v=1525028939);
background-size: cover;
position: relative;
filter: grayscale(50%) brightness(120%)
[/class]

[class=angle]width: 280px;
font-size: 33px;
text-align: center;
position: relative;
top: 10px
[/class]

[class=round]border: 5px solid var(--firstword);
border-radius: 50%;
height: 70px;
width: 70px;
background-image: url(http://66.media.tumblr.com/cb31a0bf190f85cc8ea2a0298d4daac7/tumblr_pu6zzjromh1vua2zco1_1280.jpg);
background-size: cover;
background-position: 30% 190%;
filter: contrast(110%) brightness(95%);
position: relative;
top: -40%;
left: 90%
[/class]

[class=bigtext]height: 70px; max-width:200px;
position: relative;
font-size: 15px;
text-transform: uppercase;
font-weight: 700;
[/class]

[div class=container][div class=moon][/div]

[div class=pic][div class=text][font=Yesteryear]
away from the oleander
[br][/br]away from the oleander
[br][/br]away from the oleander
[br][/br]away from the oleander
[br][/br]away from the oleander
[br][/br]away from the oleander
[br][/br]away from the oleander
[br][/br]away from the oleander
[br][/br]away from the oleander
[/font][/div]

[div class=half][/div][div class=spryt][div class=ff][div class=ffor][div class=bor][/div]
[div class=outs][div class="tabs first"][font=Montserrat]1.[/font][/div]

[div class="tabs second"][font=Montserrat]2.[/font][/div]

[div class="tabs third" style="top: 5px"][font=Montserrat]3.[/font][/div]

[div class="tabs fourth" style="top: 5px"][font=Montserrat]4.[/font][/div][/div][/div]
[div class=title][font=Yesteryear]beautiful but deadly[/font][/div][/div]
[div class=stixt]I've been having dreams,
Splashin' in a summer stream,
Trip and I fall in -
I wanted it to happen
My body turns to ice
Crushin' weight of paradise
Solid block of gold
Lying in the cold
I feel right at home
wait, if i'm on fire, how am i so deep in love when i dream of dying i've never felt so loved
[/div][/div][/div]

[div class=gade]
[div class="tabsContent tabsContent1"][div class=big][font=Reem Kufi]requisite[/font][/div]

[div class=o][div class=scroll]
[div class=firstword]full name[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]alias[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]age[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]birthday[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]gender[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]sexuality[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]height[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]weight[/div] lorem ipsum dolor sit amet
[br][/br][br][/br]
[div class=firstword]faceclaim[/div] lorem ipsum dolor sit amet


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

[div class="tabsContent tabsContent2" style="display: none"][div class=big][font=Reem Kufi]persona[/font][/div]

[div class=o][div class=scroll]
[div class=firstword]personality[/div]  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief,

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

[div class="tabsContent tabsContent3" style="display: none"][div class=big][font=Reem Kufi]biography[/font][/div]

[div class=o][div class=scroll]
[div class=firstword]biography[/div] What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief,

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

[div class="tabsContent tabsContent4" style="display: none"][div class=big][font=Reem Kufi]gallery[/font][/div]

[div class=o][div class=scroll]

[div class=columnhold][div class=image][/div] . [div class=image][/div] . [div class=image][/div][/div]
[br][/br]
[div class=columnhold][div class=image][/div] . [div class=image][/div] . [div class=image][/div][/div]

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

[div class=angle]▼▼▼▼▼▼▼
[div class=bigtext][font=Reem Kufi]name goes here[/font]
[div class=round][/div][/div][/div][/div][/div]
[div class=c]@undine[/div][/nobr]