[QUOTE=two scores,Jan 15 2023, 08:21 AM][dohtml]<div class="qsmoon0"><img src="https://img.nickpic.host/ChHx4c.png" class="qsmoon1"><div class="qsmoon2"><div class="qsmoon2a"></div><div class="qsmoon2b"></div><div class="qsmoon2c"></div><div class="qsmoon2d"></div></div>

<div class="qsmoon3"><div class="qsmoon3a"><a href="/index.php?showtopic=50&view=getlastpost"><i class="fa-regular fa-planet-ringed" title="coding tester"></i></a></div><div class="qsmoon3b"><a href="/index.php?showtopic=116&view=findpost&p=277"><i class="fa-regular fa-moon-stars" title="nyr scratchpad"></i></a></div><div class="qsmoon3c"><a href="https://www.deviantart.com/mrs-que"><i class="fa-regular fa-stars" title="deviantart"></i></a></div><div class="qsmoon3d"><a href="https://qcodes.tumblr.com"><i class="fa-regular fa-galaxy" title="coding tumblr"></i></a></div><div class="qsmoon3e"><a href="https://ko-fi.com/mrsque"><i class="fa-regular fa-comet" title="ko-fi"></i></a></div></div>

<div class="qsmoon4">jen<span>head of challanges</span></div>


</div><style>
.qsmoon0 {
width: 500px; height: 200px; margin: 20px auto; overflow: hidden; position: relative;

--white: 252, 252, 252;
--black: 13, 13, 13;
--col1: 89, 193, 115;
--col2: 161, 127, 224;
--font1: Poppins;
}
.qsmoon1 {
width: 500px; height: 200px; position: absolute; top: 0px; left: 0px; transition: .5s .3s;
}
.qsmoon0:hover .qsmoon1 {
filter: grayscale(70%); transition: .5s;
}

.qsmoon2 {
width: 500px; height: 200px; position: absolute; top: 0px; left: 0px; background: rgb(var(--black),.9); opacity: 0; transition: .5s;
}
.qsmoon0:hover .qsmoon2 {
opacity: 1; transition: .5s .3s;
}
.qsmoon2a, .qsmoon2b, .qsmoon2c, .qsmoon2d {
background: rgb(var(--white)); position: absolute; transition: .5s;
}
.qsmoon2a {
width: 0px; height: 1px; top: 15px; left: 15px; 
}
.qsmoon2b {
height: 0px; width: 1px; top: 15px; left: 15px; 
}
.qsmoon2c {
width: 0px; height: 1px; bottom: 15px; right: 15px; 
}
.qsmoon2d {
height: 0px; width: 1px; bottom: 15px; right: 15px; 
}
.qsmoon0:hover .qsmoon2a {
width: 470px; height: 1px; transition: .5s .5s;
}
.qsmoon0:hover .qsmoon2b {
height: 170px; width: 1px; transition: .5s .5s;
}
.qsmoon0:hover .qsmoon2c {
width: 470px; height: 1px; transition: .5s .5s;
}
.qsmoon0:hover .qsmoon2d {
height: 170px; width: 1px; transition: .5s .5s;
}

.qsmoon3 {
position: absolute; top: 15px; left: 50px; width: 200px; height: 100px; 
}
.qsmoon3 i {
font-size: 18px; border: 1px solid rgb(var(--white)); border-radius: 100%; padding: 7px;
}
.qsmoon3 a {
text-decoration: none; color: rgb(var(--col1));
}
.qsmoon3a, .qsmoon3b, .qsmoon3c, .qsmoon3d, .qsmoon3e {
width: 1px; background: rgb(var(--white)); position: absolute; top: 0px; 
}
.qsmoon3a {
height: 0px; left: 25px; transition: .1s;
}
.qsmoon0:hover .qsmoon3a {
height: 85px; transition: .5s .3s;
}
.qsmoon3a i {
position: absolute; top: 85px; left: -15px; opacity: 0;
}
.qsmoon0:hover .qsmoon3a i {
opacity: 1; transition: .5s .7s;
}
.qsmoon3b {
height: 0px; left: 55px; transition: .1s;
}
.qsmoon0:hover .qsmoon3b {
height: 45px; transition: .5s .6s;
}
.qsmoon3b i {
position: absolute; top: 45px; left: -15px; opacity: 0;
}
.qsmoon0:hover .qsmoon3b i {
opacity: 1; transition: .5s 1s;
}
.qsmoon3c {
height: 0px; left: 85px; transition: .1s;
}
.qsmoon0:hover .qsmoon3c {
height: 85px; transition: .5s .4s;
}
.qsmoon3c i {
position: absolute; top: 85px; left: -15px; opacity: 0;
}
.qsmoon0:hover .qsmoon3c i {
opacity: 1; transition: .5s .8s;
}
.qsmoon3d {
height: 0px; left: 115px; transition: .1s;
}
.qsmoon0:hover .qsmoon3d {
height: 45px; transition: .5s .7s;
}
.qsmoon3d i {
position: absolute; top: 45px; left: -15px; opacity: 0;
}
.qsmoon0:hover .qsmoon3d i {
opacity: 1; transition: .5s 1.1s;
}
.qsmoon3e {
height: 0px; left: 145px; transition: .1s;
}
.qsmoon0:hover .qsmoon3e {
height: 85px; transition: .5s .5s;
}
.qsmoon3e i {
position: absolute; top: 85px; left: -15px; opacity: 0;
}
.qsmoon0:hover .qsmoon3e i {
opacity: 1; transition: .5s .9s;
}


.qsmoon4 {
width: 125px; height: 100px; position: absolute; top: 50px; right: 55px; font: 700 italic 56px/100% var(--font1); background: linear-gradient(90deg, rgb(var(--col1)), rgb(var(--col2))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: lowercase; text-align: left; padding: 10px; opacity: 0;
}
.qsmoon0:hover .qsmoon4 {
opacity: 1; transition: .5s .9s;
}
.qsmoon4 span {
display: block; font: 900 10px/100% var(--font1); color: rgb(var(--col1)); text-transform: uppercase; letter-spacing: 4px; text-align: right;
}
</style><script src="https://kit.fontawesome.com/002ef6d6f9.js" crossorigin="anonymous"></script><link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">[/dohtml][/QUOTE]