pharaoh leap, ninelie, and 1 more like this
claire
New Member
snowflakes flutter & the north wind blows.
[newclass=.mistpic]display: inline-block[/newclass][newclass=.mistpic img]width: inherit; height: inherit; max-width: inherit; max-height: inherit; min-width: inherit; min-height: inherit; border-radius: inherit;[/newclass][nospaces][googlefont=Noto+Sans+SC:900|Open+Sans:400,400italic] [newclass=".mistcontain"]width: 400px; height: 300px; background-color: #ddd; cursor: crosshair; display: table-cell; vertical-align: middle; text-align: center; position: relative; outline-offset: 10px; outline: 1px solid #C4D8E1;[/newclass] [newclass=".misttxt"]position: absolute; top: 0; left: 100px; width: 240px; height: 240px; padding: 30px; line-height: 1.6em; overflow: auto; font-size: 12px; color: #616161; font-family: 'open sans', sans-serif; text-align: justify; opacity: 0; transition: all 0.5s ease-out 0s;[/newclass] [newclass=".misttxt::-webkit-scrollbar"]width: 10px;[/newclass] [newclass=".misttxt::-webkit-scrollbar-thumb"]background: #ccc;[/newclass] [newclass=".misttxt::-webkit-scrollbar-track"]background: #616161;[/newclass] [newclass=".misttxt b"]color: #4d4d4d;[/newclass] [newclass="#mistcover"]width: 400px; height: 300px; background-image: url("https://img.nickpic.host/FEGod1.jpg"); background-size: cover; background-position: center center; display: table-cell; vertical-align: middle; text-align: center; transition: all 1.5s ease; z-index: 999;[/newclass] [newclass="#misth"]display: inline; font-family: 'noto sans sc', sans-serif; font-weight: 900; font-size: 60px; color: transparent; -webkit-text-stroke: 1px #fff; writing-mode: vertical-rl; text-orientation: upright; transition: all 1.5s ease 0.5s;[/newclass] [newclass=".mistpic"]position: absolute; top: 112px; left: 12px; width: 75px; height: 75px; opacity: 0; transition: all 0.5s ease-out 0s; border-radius: 50%;[/newclass] [newclass=".mistcontain:hover #misth"]opacity: 0;[/newclass] [newclass=".mistcontain:hover .mistpic"]opacity: 1; transition: all 1s ease-in 0.5s;[/newclass] [newclass=".mistcontain:hover #mistcover"]width: 100px; filter: grayscale(1) brightness(0.5); -webkit-filter: grayscale(1) brightness(0.5);[/newclass] [newclass=".mistcontain:hover .misttxt"]opacity: 1; transition: all 1s ease-in 0.5s;[/newclass] [attr="class","mistcontain"] [attr="id","mistcover"] [attr="id","misth"]凡心  [attr="class","mistpic"][attr="class","misttxt"] Hey, I'm Claire! I've been making templates and themes for forums for about 2 months. I am very bad at keeping things up-to-date, but hopefully this won't be the last time I see you all. If I ever post any free-to-use templates, this is where i'll make a masterlist for them all. [break] some of the qualities I like are ultra-minimalism (I've been trying to make things with only 2 colors), serif fonts, and css grid [break] I also make graphics, but I don't have any good examples right now (0u0) |
last edit on Aug 22, 2020 5:49:17 GMT by claire
