CARNATIONS // code

[nobr]
[class name=big]
animation-name: {post_id}big;
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=big]
[keyframe=0]height: 0px;[/keyframe]
[keyframe=100]height: 130px[/keyframe]
[/animation]

[class name=back]
animation-name: {post_id}back;
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=back]
[keyframe=0]height: 130px;[/keyframe]
[keyframe=100]height: 0px[/keyframe]
[/animation]

[script class=second on=mouseenter]
addClass big list
removeClass back list
[/script]

[script class=image on=click]
addClass back list
removeClass big list
[/script]

[class=container]height: 330px;
width: 480px;
padding: 10px;
background: #a2a297;
margin: auto;
cursor: url(https://i.imgur.com/fkP02Jr.png), auto
[/class]

[class=bigname]height: 60px;
width: 350px;
padding: 0px 10px 0px 10px;
font-size: 53px;
color: #8D5C3C;
text-transform: uppercase;
text-align: left;
letter-spacing: 1px;
transform: rotate(90deg);
position: relative;
top: 155px;
left: -150px
[/class]

[class=image]height: 310px;
width: 210px;
background-image: url(https://contributormagazine.com/wp-content/uploads/2017/11/ROBERTA_HOLLIS_01.jpg);
background-size: 320%;
background-position: 15% 50%;
position: relative;
top: -50px;
left: 50px
[/class]

[class=little]height: 310px;
width: 215px;
position: relative;
top: -360px;
left: 260px
[/class]

[class=second]height: 130px;
width: 190px;
padding: 10px;
background-image: url(https://66.media.tumblr.com/00cfadbb9e9d0c4357fdd277afd12d6a/tumblr_p0e5krQBzQ1wc23v6o2_400.jpg);
background-size: 100%;
background-position: 35% 50%;
filter: grayscale(50%) brightness(90%);
position: relative;
line-height: 18px
[/class]

[class=list]height: 0px;
width: 190px;
transition: 0.5s;
overflow: hidden
[/class]

[class=code]display: inline-block;
height: 30px;
padding: 14px 5px 1px 5px;
width: 180px;
background: #91705B;
border-radius: 3px;
[/class]

[class=bignum]display: inline-block;
font-size: 25px;
color: white
[/class]

[class=codename]line-height: 11px;
font-weight: 700;
font-size: 11px;
color: white;
letter-spacing: 0.3px;
text-transform: uppercase;
position: relative; top: -25px; left: 25px
[/class]

[class=desc]font-size: 8px;
font-weight: 300;
display: inline-block;
[/class]

[class=text]height: 150px;
width: 200px;
color: #f1f1f1;
font-size: 9px;
text-transform: uppercase;
overflow: hidden;
position: relative;
letter-spacing: 0.3px;
top: 10px;
left: 10px;
text-align: justify
[/class]

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

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

[div class=container]
[div class=bigname][font=Rozha One]carnations[/font][/div]
[div class=image][/div]

[div class=little][div class=second][div class=list][div class=scroll]

[div class=code][div class=bignum][font=Abril Fatface]1.[/font][/div]
[div class=codename][font=Arimo]code name
[br][/br][div class=desc][code description][/div][/font][/div][/div]

[br][/br]
[div class=code][div class=bignum][font=Abril Fatface]2.[/font][/div]
[div class=codename][font=Arimo]code name
[br][/br][div class=desc][code description][/div][/font][/div][/div]

[br][/br]
[div class=code][div class=bignum][font=Abril Fatface]3.[/font][/div]
[div class=codename][font=Arimo]code name
[br][/br][div class=desc][code description][/div][/font][/div][/div][/div][/div][/div]
[div class=text][div class=scroll]

[font=Work Sans]hey, it's jack and i'm at it again with the freebies. this is my third code dump so far - you can find my first one here and my second one here! yes, these are freebies, so they are free to use as long as you keep the credit. hover over the picture above to find the list of codes in this thread. click the big image to close it. this code can be found here.[/font][/div][/div][/div][/div]

[div class=c]@undine[/div][/nobr]