daisy

[div class=container][div class=bgimg]
[div class=open][div class=opentext][fa]fa-pagelines[/fa][/div][/div][/div]

[div class=textbg][/div][div class=textbox]
[div=background:url('https://78.media.tumblr.com/tumblr_m15h98V5z01r99f4t.gif');background-size:250%;background-position:32% 0%;height:140px;width:140px;border:4px solid #fcb8bc;border-radius:50%;margin:auto;position:relative;][/div]
[font=IBM Plex Sans]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim convallis nunc, vitae placerat ipsum egestas ut. Suspendisse ornare, quam gravida feugiat hendrerit, dolor dui maximus tortor, sit amet commodo nisi erat a ipsum. Fusce in iaculis ipsum, in cursus ligula. Sed pulvinar justo vel risus dictum vulputate. Ut mollis sem eu suscipit dictum. Aliquam ac nulla sit amet est ullamcorper elementum eu eu nisi. Praesent pellentesque diam quis tellus faucibus, vitae dignissim justo aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas vestibulum sapien, vel ultricies lectus tincidunt sed. Sed convallis, turpis quis rhoncus tristique, nibh elit interdum ipsum, sit amet varius tortor enim sit amet nulla. Integer elementum rutrum sem. Mauris maximus tellus at euismod aliquam.

Integer lorem tellus, iaculis in iaculis vehicula, interdum eget nibh. Sed finibus eu ipsum eget eleifend. Duis laoreet erat mi, lacinia imperdiet ex feugiat ut. Integer est justo, posuere eget tincidunt vel, fermentum nec eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque id velit hendrerit nisi condimentum laoreet. Mauris tempor dapibus tellus quis consequat.

Nulla arcu lorem, pretium vitae bibendum ac, sollicitudin sit amet leo. Nunc faucibus non sem at accumsan. Sed vitae condimentum nibh. Fusce sit amet condimentum diam. Donec sit amet eros mollis, elementum sem sit amet, maximus mi. Integer lobortis sapien vel erat consectetur, non aliquam metus bibendum. Vivamus nec neque faucibus, mattis orci nec, fermentum neque. Curabitur sem mauris, dignissim tempus sollicitudin ut, tempus ut nibh. Vestibulum sed massa orci. Maecenas sollicitudin eu dolor et pharetra. Donec lacinia ipsum in ligula varius condimentum.
[/font][/div]
[/div]
[div=height:3px;width:100px;position:relative;margin:auto;top:-25px;][font=Open Sans][COLOR=#EFCC87][SIZE=10px]⠀♡coded by uxie♡[/SIZE][/COLOR][/font][/div]

[nobr]

[class=container]
height:400px;
width:320px;
margin:auto;
position:relative;
[/class]

[class=textbg]
height:400px;
width:320px;
background:url('https://data.whicdn.com/images/304709469/large.jpg');
background-size:130%;
opacity:0.3;
position:absolute;
top:0px;
left:-1px;
[/class]

[class=textbox]
height:390px;
width:310px;
position:absolute;
top:0px;
left:0px;
overflow-y:scroll;
padding:5px;
[/class]

[class name=textbox]
font-size:12px;
text-align:justify;
color:black;
[/class]

[class=bgimg]
height:400px;
width:320.5px;
position:absolute;
left:-0.5px;
background:url('https://78.media.tumblr.com/fb0fc803387c9eccd01a904f7787448f/tumblr_ov2f1hbQoD1w6n4tao1_500.jpg');
background-size:101%;
z-index:6;
[/class]

[class=open]
height:70px;
width:70px;
border:5px solid #fff0b7;
background-color:white;
border-radius:50%;
margin:auto;
position:relative;
top:140px;
opacity:0.95;
cursor:pointer;
z-index:6;
[/class]

[class=opentext]
font-size:30px;
color:#92dba5;
text-align:center;
position:relative;
top:12.5px;
z-index:6;
[/class]

[script class=open on=click]
addClass slideUp1 bgimg
addClass slideUp2 open
[/script]

[class=slideUp1]
animation-name: {post_id}slideUp;
animation-duration:1.7s;
animation-fill-mode:forwards;
[/class]

[class=slideUp2]
animation-name: {post_id}slideUp;
animation-duration:5.7s;
animation-fill-mode:forwards;
[/class]

[animation=slideUp]
[keyframe=0]
transform: translateY(0px);
[/keyframe]
[keyframe=99]
transform: translateY(-450px);
[/keyframe]
[keyframe=100]
transform: translateY(-450px);
visibility:hidden;
[/keyframe]
[/animation]

[/nobr]