AnimeGenork
The Duck Overlord
[class=image]width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%;[/class] [class=number]width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s;[/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s;[/class] [class name=image state=hover]transition: 1s; filter: grayscale(100%);[/class] [class name=number state=hover]opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5);[/class] [class name=link state=hover]color: #5f53b5; transition: 1s;[/class][/div][/div][/div]constellation's code[div class=image][div class=number]09AnimeGenork ; your request has been complete, thank you for being patient with me! i hope i managed to include everything that you wanted. the main image is a hover box. i couldn't use the font avenir however, as it's not on google fonts but i went ahead and used something similar to it. feel free to change any colours or fonts that you don't like. if you have any questions about it, don't be afraid to private message me! i hope you like it
[class=container]position: relative; margin: auto; height: 430px; width: 430px; background-color: #ededed; padding: 10px;[/class] [class=border]border: 2px solid #ddb6c6; height: 426px; width: 426px;[/class] [class=title]position: absolute; width: 426px; top: 135px; z-index: 2; text-align: center; font-size: 25px; font-weight: 900; color: #ac8daf;[/class] [class=quote]position: absolute; width: 426px; top: 165px; text-align: center; font-size: 12px; color: #ac8daf; line-height: 15px; text-transform: uppercase;[/class] [class=info]position: absolute; top: 4px; left: 4px; height: 104px; width: 132px; background-color: #ac8daf; overflow: hidden; padding: 8px 0 8px 8px;[/class] [class=scroll2]width: calc(100% + 10px); height: 120px; overflow-y: scroll; padding-right: 15px; text-align: justify; font-size: 12px; line-height: 15px; color: #f1d4d4;[/class] [class=mainimage]position: absolute; height: 130px; width: 150px;[/class] [class=textbox]position: absolute; top: 185px; height: 210px; width: 421px; background-color: #ddb6c6; overflow: hidden; white-space: pre-line; padding: 5px 0 5px 5px;[/class] [class=scroll]width: calc(100% + 10px); height: 210px; overflow-y: scroll; padding-right: 15px; text-align: justify; font-size: 12px; line-height: 15px; color: #484c7f;[/class] [class=details]position: absolute; top: 405px; width: 421px; height: 23px; overflow: hidden; white-space: pre-line; padding: 5px 0 5px 5px; text-align: center; text-transform: uppercase;[/class] [class=scroll3]width: calc(100% + 10px); height: 23px; overflow-y: scroll; padding-right: 15px; font-size: 12px; line-height: 15px; color: #ac8daf;[/class] [script class=mainimage on=mouseenter] fadeIn 400 info [/script] [script class=mainimage on=mouseleave] fadeOut 400 info [/script] [div class=container][div class=border] [div class=mainimage][div class=info style="display: none";][div class=scroll2]tags and mentions come here. this will scroll.[/div][/div][/div] [div class=title]the name ; the role[/div] [div class=quote]โ Lorem ipsum dolor sit amet, consectetur adipiscing elit. โ[/div] [div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet justo in est feugiat sollicitudin. Etiam maximus sed mauris convallis vulputate. Mauris pulvinar diam nec lacus convallis condimentum. Curabitur eget accumsan neque, vel feugiat augue. Phasellus luctus, ex quis laoreet semper, augue urna fermentum est, nec aliquet tellus risus eget urna. Quisque aliquam eros vitae arcu dictum sodales. Fusce at quam semper nulla laoreet molestie. Aliquam erat volutpat. Pellentesque eget facilisis urna, semper faucibus nisl. Nam eu massa felis. Integer a egestas ante. Fusce porttitor blandit orci, at tempor lacus dictum ut. Donec euismod rhoncus purus vel congue. Maecenas quis tortor vel nulla accumsan ullamcorper ac sit amet nisi. Etiam vitae dui non nisl ullamcorper luctus a sed nulla. Maecenas et risus pretium, scelerisque sapien vitae, gravida enim. Integer dignissim felis eget scelerisque elementum. Morbi rhoncus justo ut erat aliquet accumsan. Pellentesque pharetra est ut massa blandit commodo. Donec eleifend accumsan ullamcorper. Vestibulum euismod magna eu mattis viverra. Vestibulum mi purus, dignissim non nisi id, euismod suscipit tortor. Proin et nunc enim.[/div][/div] [div class=details][div class=scroll3]mood ; here. outfit ; here. location ; here.[/div][/div][/div][/div]coded byconstellation.
I love it! It's amazing!!!!