Quote from: lightlord on April 16, 2019, 03:41:27 PM

Quote from: poptok1 on April 12, 2019, 07:01:43 PM

This gonna be my second entry and probably last. This thing is exhausting Roll Eyes

Bit more complicated, with effects. Preview -> https://codepen.io/anon/pen/QPMWqa

Both the same and also broken.

I think I got it fixed, hard to predict fonts for all OSes.
Here is another entry https://codepen.io/anon/pen/LvegWZ
edit: thanks to roslinpl tip, I managed to keep this one under 50Kb and pictures under 5Kb

HTML

Code:

CSS

Code:

.bit-inl-rel {
position: relative;
display: inline-block;
}

.bit-ad {
width: 900px;
max-width: 900px;
min-width: 900px;
height: 42px;
max-height: 42px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
border-radius: 4px;
background: #3D4161;
background: linear-gradient(to right, #000055 0%,#333399 13%,#666699 60%,#000055 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#361b4e', endColorstr='#2d1644',GradientType=1 );
}

.bit-ad-box {
width: 100%;
z-index: 1000;
}

.bit-link {
position: absolute;
width: 100%;
height: 42px;
left: 0;
top: 0;
z-index: 10;
}

.bit-logo-box {
height: 38px;
width: 144px;
text-align: center;
top: 2px;
position: absolute;
z-index: 2;
float: left;
left: 236px;
transition: left 0.2s ease-out;
-o-transition: left 0.2s ease-out;
-moz-transition: left 0.2s ease-out;
-webkit-transition: left 0.2s ease-out;
}

.bitvest-logo {
background: url('data:image/png;base64,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');
height: 38px;
width: 144px;
background-size: 144px;
transition: transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -o-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -moz-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -webkit-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2);
-o-transition: transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -o-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -moz-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -webkit-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2);
-moz-transition: transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -o-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -moz-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -webkit-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2);
-webkit-transition: transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -o-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -moz-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2), -webkit-transform 0.2s cubic-bezier(0, 1.76, 0.87, 2.2);
transform: scale(0.6, 0.6);
-o-transform: scale(0.6, 0.6);
-moz-transform: scale(0.6, 0.6);
-webkit-transform: scale(0.6, 0.6);
}

.bit-ad-box:hover .bit-logo {
transform: scale(0.70, 0.70);
-o-transform: scale(0.70, 0.70);
-moz-transform: scale(0.70, 0.70);
-webkit-transform: scale(0.70, 0.70);
}

.bit-ad-box:hover .bit-logo-box {
left: 344px;
}

.bit-eth {
height: 30px;
width: 30px;
background-size: 30px;
transition: transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -o-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -moz-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -webkit-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), opacity 0.2s ease-in-out;
-o-transition: transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -o-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -moz-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -webkit-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), opacity 0.2s ease-in-out;
-moz-transition: transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -o-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -moz-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -webkit-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), opacity 0.2s ease-in-out;
-webkit-transition: transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -o-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -moz-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), -webkit-transform 0.5s cubic-bezier(0, 3.86, 1,-2.57), opacity 0.2s ease-in-out;
transform: scale(0.7, 0.7) rotate(0deg);
-o-transform: scale(0.7, 0.7) rotate(0deg);
-moz-transform: scale(0.7, 0.7) rotate(0deg);
-webkit-transform: scale(0.7, 0.7) rotate(0deg);
display: inline-block;
position: relative;
}

.bit-eth-1 {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABNVBMVEVHcEyHiIkyMzOEhYZBQkI3ODhwcHGDhIVDQ0M1NjZnaGiVlpdGR0dFRkaFhodHSEg7PDzV1taMjY41NjaMjY5GRkY7PDzAwcGDhIWVlZYyMjIvLy+HiIlwcHFqampnaGmCg4SWl5eOj5AmJiZMTU1BQkI2NzcWFhY9Pj6HiIk7PDyKioutr6+LjI1RUVKFhodCQ0M7PDyEhYZiY2OKi4w/Pz85Ojo1NjY1NjYfHx+Ki4yDhIVUVVU2NjYwMTE8PT07PDxJSkoqKioyMzOGh4iCg4QxMjKDhIWOj5CDhIVAQUGNjo9rbG05OTmDhIU6OztWVlYaGho7OzuFhocyMzMvMDCCg4QTExM0NTVnaGgpKSkpKipVVldlZmYdHR11dncXFxcnKChERUVvcHEaGhpNTk5mZ2h2LKduAAAAVXRSTlMAaPfMCrVS71Dg/hQiSp0IfwE03DkmhQLRF/mfbmIJifEGOnxIbu/1Ul9sVQIdFpwrnMcICx2xu/2pNNkV0faNRzVB53r9+u4yvyoVjEL6yRPTjpvpgkes0QAAAMtJREFUKM/V0sW6wjAQBWCuck1wd3d3d1dJ2uL+/o9A6MeuSdeQ7b/IzJkjEDzMe+dVydcvj4pfGOk/mZ8gA0RE/RYifv4h8R9EDN4IKoMsgw+sKlWIV4g/X3Gsg3CzXKwXACgwqjYdTjQ9p6jjTiPnsnFP0yxT1FbLZbPdcWOn1cBlizsQTl05HXfZMJ8HI5nycD6udJIJ3OSxbH3a7Y8mjWoOu3hrAIW9GQAlQmw1NrUiKXNfG3E+SjyZv8kUQjx98J49vG3S30/tL3gkKZfmCnXAAAAAAElFTkSuQmCC');
}

.bit-ad-box:hover .bit-eth {
transform: scale(1.2, 1.2) rotate(360deg);
-o-transform: scale(1.2, 1.2) rotate(360deg);
-moz-transform: scale(1.2, 1.2) rotate(360deg);
-webkit-transform: scale(1.2, 1.2) rotate(360deg);
}

.bit-slogan-box {
z-index: 1;
height: 42px;
line-height: 42px;
float: left;
display: flex;
align-items: center;
}

.bit-slogan-box-small {
z-index: 1;
height: 42px;
line-height: 42px;
display: flex;
align-items: center;
transition: min-width 0.2s ease-out;
-o-transition: min-width 0.2s ease-out;
-moz-transition: min-width 0.2s ease-out;
-webkit-transition: min-width 0.2s ease-out;
}

.bit-slogan {
color: #EEEEFF;
transition: opacity 0.2s ease-in-out, font-size 0.1s ease-in-out;
-o-transition: opacity 0.2s ease-in-out, font-size 0.1s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out, font-size 0.1s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out, font-size 0.1s ease-in-out;
text-transform: uppercase;
text-shadow: 0 2px 1px #2d1f3e, -1px -1px 1px #2d1f3e;
font-weight: 600;
}

.bit-slogan-small {
font-size: 11px;
}

.bit-ad-box:hover .bit-slogan-small {
font-size: 0px;
}

.bit-slogan-small-2 {
font-size: 0px;
}

.bit-ad-box:hover .bit-slogan-small-2 {
font-size: 11px;
}

.bit-slogan-1 {
font-size: 14px;
opacity: 1;
}

.bit-ad-box:hover .bit-slogan-1 {
font-size: 0px;
opacity: 0;
}

.bit-slogan-2 {
font-size: 0px;
opacity: 0;
}

.bit-ad-box:hover .bit-slogan-2 {
font-size: 14px;
opacity: 1;
}

.bit-action-button {
z-index: 1;
}

.bit-color-orange {
color: #FF9933 ;
}

.bit-fr {
float: right;
}

.bit-mr-5 {
margin-right: 15px;
}

.bit-mrl-20 {
margin-right: 20px;
margin-left: 10px;
}

.bit-hor-line {
height: 12px;
margin-right: 0px;
border: solid;
border-width: 0 2px 0 0;
border-color: #fff;
margin-left: 15px;

}
.bit-dice {
height: 30px;
width: 30px;
background-size: 30px;
transition: transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -o-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -moz-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -webkit-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), left 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), top 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96);
-o-transition: transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -o-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -moz-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -webkit-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), left 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), top 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96);
-moz-transition: transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -o-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -moz-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -webkit-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), left 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), top 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96);
-webkit-transition: transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -o-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -moz-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), -webkit-transform 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), left 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96), top 1.0s cubic-bezier(0.16, 0.56, 0.55, 0.96);
transform: scale(0.6, 0.6) rotate(0deg);
-o-transform: scale(0.6, 0.6) rotate(0deg);
-moz-transform: scale(0.6, 0.6) rotate(0deg);
-webkit-transform: scale(0.6, 0.6) rotate(0deg);
box-shadow: 0px 0px 1px 1px #c6b6f4,;
display: inline-block;
position: absolute;
}

.bit-coin-1 {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABUFBMVEVHcEz3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr3kxr////3kxr5sn795Nb5t4n3lCH++PT6xKH6w6H828j/+fb///77yq370bj+7+f++fX+7+b83s3//v395tn959r838/3mDP7zrP3li76wp73kxv5tIP5uY33mDj5uIv+9O/5rXP++PP83cz4pFz4qGj3ly73m0T707v6wJr4p2T3kxz7y6/5rnf+9vL6yKj6vJL7zrL84tP3kx395NX//fz839D3m0H4oVf959v4nk73lin4nUf3lST96+D3liz+8Of849X97eP82MP3mTv97eT4nk3/+/j82MT+9/L84dL+9/P//fv4o1z/+fX4nEb97eX/+/n4pmT+9fD84ND4qmv+9vH83Mr6wp///Pr+8+36w6D828cgikvrAAAAFHRSTlMAlYexCFAR7AX8nZxcXe3OzeuWhjKVKp4AAAFsSURBVBgZbcDVQutAAATQSZpkk7rMtLg7193d3d0V5//fKNlNSoGDXBA2ayZJGnUvDLBf1DLKGT9Cn7JRn2oFPXFJBxRjOHFBhyjEsIrKXZ68p0wJqYpyg2NTenlfThldUVXW6LmR2/z8a25ejokA+HLOsuv3NpeVaQGBkXPxFlObE69kmQChcjfIf1v/N8i3j2SF8JS7Tq5Jf1fJSVlN1JXrkOuSZsmHsmpoKDM4TS6vLLWHyDuyDBJlznDXOMmpS7ISJMpMkHeHF/+QNy/ISWCU6ZAj0tMF8vRJWQ3UlDp26vwY+UPSVZIDsupoKnWCXd/eS7pCsi3LQ6jU8Mwcye8zX588IIeOyAoRGFnPR/mFqfGjskwA+HI6/PiOi2/mZ4/L8QFERtb0a3349Ew91QhdZaWutQeWfi5ojwpSJWVePFZPEVZc0CEKMZy4qANKMXoqVfUxZfSJfKOcaUXYLwi9eiNJTM0LA2R2ABW0SYwuFUeAAAAAAElFTkSuQmCC');
left: 236px;
border-radius: 1px;
top: 6px;
}

.bit-ad-box:hover .bit-coin-1 {
left: 470px;
top: 6px;
transform: scale(0.8, 0.8) rotate(540deg);
-o-transform: scale(0.8, 0.8) rotate(540deg);
-moz-transform: scale(0.8, 0.8) rotate(540deg);
-webkit-transform: scale(0.8, 0.8) rotate(700deg);
}

.bit-coin-2 {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABXFBMVEVHcEx4eHhlZWViYmJqampdXV1fX1+rq6twcHBdXV2Li4tvb29iYmJvb29hYWGCgoJ5eXl5eXlwcHBmZmZsbGxkZGRiYmJgYGBlZWVdXV1qampeXl55eXlfX191dXVcXFySkpJ5eXldXV18fHxgYGBfX19bW1v09PTPz8/m5uba2trZ2dnv7+/x8fGysrLh4eHo6Oijo6Pe3t7Ozs7g4ODX19e3t7ebm5uwsLC8vLzT09PDw8Pc3Nyenp6rq6uXl5e6urrHx8fV1dWMjIz19fVubm6UlJR+fn7z8/O9vb3AwMDi4uKgoKCRkZGoqKjIyMjR0dHs7OyDg4PFxcXMzMxiYmKBgYH+/v7p6em0tLTKysqIiIiGhobu7u7w8PB6enpoaGj5+fn8/Pzk5OSqqqqmpqaurq53d3eHh4fq6upqamqOjo5/f3+kpKSJiYn39/d1dXWioqJzc3NkZGQ8cV6SAAAAJ3RSTlMAKPdoTeX4ATv5CmqgQfoRFRssjzVkfo17vDDNIN5QxgQusULteJ7U0vlRAAACY0lEQVQoz42T6VPaUBTFXRBQ1C5Oq13U1tr6SPJYAkmQJCSGkAQCSSAB2aFGAsEV/f9nGipM1dqZ3nmf3m/mzj33nrOw8N/1ZdEXCm18DrzEAsEfh/07uZe7391e/Iu+/TCm8mk8mmQAebG5/vopfbdEAbsjihCKihs1r1c2HtP3OV6FmK6VKnI7IihlRvP7/tDlHB0T9UGGq8g1toCaiBJN+YNz+nGJj0HymHRGIAGEEnpCkUryauXVbOb9onqU1wukQwKQRlrcdVvmIVrbfsC+nAGtE57kJyBNIIVWKXutmXi94H/zGx/EbbfoREi+HWbwWFGieAFXdYW53JnStSUaozUn1WhQdTsMhxGvBYOQQjjzaYqDOUKMZ3jTbOTrZSzKTnTB1Ea1VJneXJuqqiQhT6QT+gTpHt2cnlIRqpRtVSRoVL96+PuF6gJEoKlL8efZqcG1KU66iJ/QCtH/Nsd6pATOvLq5nUxYymkS+Bwv13DIaZlszD27EdGSNkjRTSAQ/Ky5N9pRfJBJ9VRRgWSWutKcSENrz0fzhHXMJiFwIlbGEMuymk3rdlQT7AdhCwdF203gaQdzw7aaZBBUUMdZCSLyzmypoAtoqeC69VjYtlU1ahUtJpyfLTWwzyYVdlitDrOe3steb8QlEhghb80PusnbsHgOUKNJ8+fnZIHWIT6ZH9TTNqZtxbCQ9DErsZrjEF3cWQ0+MlOfxDsdYyD3alLKgHX0atX3xIp+zoq6UOl6L8bQladWnBr5nuMNhGFQq9FafW7kaQzWD6vj4V2/uru1+I8Q7YVCey+H6KHF849f/j+WCbqWBe4AAAAASUVORK5CYII=')
;
left: 10px;
border-radius: 1px;
top: 6px;
}

.bit-ad-box:hover .bit-coin-2 {
left: 331px;
top: 6px;
transform: scale(0.8, 0.8) rotate(720deg);
-o-transform: scale(0.8, 0.8) rotate(720deg);
-moz-transform: scale(0.8, 0.8) rotate(720deg);
-webkit-transform: scale(0.8, 0.8) rotate(700deg);
}

.bit-ad-box:hover .bit-logo {
transform: scale(0.70, 0.70);
-o-transform: scale(0.70, 0.70);
-moz-transform: scale(0.70, 0.70);
-webkit-transform: scale(0.70, 0.70);
}

.bit-eth-showit {
opacity: 0;
}

.bit-ad-box:hover .bit-eth-showit {
opacity: 1;
}
.zp {
font-family:Proxima Nova, sans-serif;
width:100%;
height:100%;
overflow:hidden;
}

/* ad background */
.zp {
display:flex;
justify-content: space-between;
width:893px;
height:42px;
margin:0 auto;
position:relative;
overflow:hidden;
color:#fff;
text-decoration:none;
background:#2072ef;
/* -webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px; */
padding:0 0 0 7px;
position: relative;

}
.halfCircle{

-webkit-border-top-left-radius:20px;
-moz-border-top-left-radius:20px;
-ms-border-top-left-radius:20px;
-o-border-top-left-radius:20px;
border-top-left-radius:20px;

-webkit-border-bottom-left-radius:20px;
-moz-border-bottom-left-radius:20px;
-ms-border-bottom-left-radius:20px;
-o-border-bottom-left-radius:20px;
border-bottom-left-radius:20px;

font-size:21px;
padding-left:40px;
padding-right:10px;
width:723px;

}
.halfCircleArea{
background-color:#fff;
color:#2072ef;

}
.halfCircleAreaOnHover{
background-color:#4f5868;
color:#fff;

position: absolute;top:0;right:-773px;bottom:0;

-webkit-transition: opacity 0.2s ease-in-out, right 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out, right 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out, right 0.2s ease-in-out;

opacity: 0;

}
.halfCircleAreaOnHover2{
background-color:#2072ef;
}
.topLayer{position:relative;z-index:99;
-webkit-transition: color 0.8s ease-in-out;
-o-transition: color 0.8s ease-in-out;
transition: color 0.8s ease-in-out;
}

a.zp:hover .topLayer{color:#fff;}
a.zp:hover .halfCircleAreaOnHover{

opacity: 1;
-webkit-transition: right 0.133333333333333s ease-in-out;
-o-transition: right 0.133333333333333s ease-in-out;
transition: right 0.433333333333333s ease-in-out;

right: 0px;
-webkit-transition-delay: 0.133333333333333s;
-o-transition-delay: 0.133333333333333s;
transition-delay: 0.133333333333333s;

z-index: 9;

}

.redText{color:#fb663e;}
.flex{display:flex;}
.align-center{align-items:center;}
.justify-center{justify-content: center;}
.justify-around{justify-content: space-around;}
.justify-between{justify-content: space-between;}
.justify-start{justify-content: flex-start;}

.smallfont{font-size: 10px;}

.zbutton{
background:#fb663e;
-webkit-border-radius:18px;
-moz-border-radius:18px;
-ms-border-radius:18px;
-o-border-radius:18px;
border-radius:18px;

border:0;
color:#fff;
font-size:14px;
padding:8px;

}

.zp ul{list-style:none;margin:0;padding:0;}
.zp ul li{display: inline-block;border-right:1px solid #fff;padding:0 5px;}
.zp ul li:last-child{border-right:0;}
.zp:hover{text-decoration:none}