Bitvest Bitcointalk Design Ad Contest [0.05 BTC, and Consolation prizes]

roslinpl

legendary

Activity: 2212

Merit: 1199

Quote from: ?? on ??

When new design contest will going to start.

Wake up

https://www.youtube.com/watch?v=BsKbwR7WXN4

jayce

legendary

Activity: 2982

Merit: 1506

Pie Baking Contest: https://tinyurl.com/2s3z6dee

Thank you lightlord for choosing me as the winner, it's a great pleasure to join this great contest. I wish all the best for your projects

And thank you roslin, good luck!

PS. My btc address has been pmed.

payjoe93

sr. member

Activity: 500

Merit: 268

PAYJOE93 DESIGN SERVICE

Wow, thanks.. Huh

Quote from: roslinpl on April 17, 2019, 08:28:22 AM

Spot reserved ;-)

even though, i have waiting for your creation.. you just inspired me and i learn a lot from your work..

roslinpl

legendary

Activity: 2212

Merit: 1199

Congrats to the winners.

lightlord

donator

Activity: 3228

Merit: 1226

★Bitvest.io★ Play Plinko or Invest!

Contest conclusion: jayce is the winner of the 0.05 BTC prize!

Its as if jayce read my mind, on how I'd imagine it to be, good job!

payjoe93 wins 2nd place and consolation prize, for your effort put in, i'll award you double of 0.001 btc for 0.002 btc. Just pm your bitcoin address.
Remember winners, pm your bitcoin addresses

FilipeHenriques

member

Activity: 499

Merit: 12

Just a bitcointalk member

Reserved.

payjoe93

sr. member

Activity: 500

Merit: 268

PAYJOE93 DESIGN SERVICE

Hello, today is 21st.. how many hours left?

lightlord

donator

Activity: 3228

Merit: 1226

★Bitvest.io★ Play Plinko or Invest!

bump

jayce

legendary

Activity: 2982

Merit: 1506

Pie Baking Contest: https://tinyurl.com/2s3z6dee

Here is my design;

Lightlord, since it looks bit blurry, if you want to see the clearer image, feel free to ask me so I can share its codepen's link to you. Thank you! And good luck for other participants.

lightlord

donator

Activity: 3228

Merit: 1226

★Bitvest.io★ Play Plinko or Invest!

bump

payjoe93

sr. member

Activity: 500

Merit: 268

PAYJOE93 DESIGN SERVICE

Hello, here's my submission.. If there's any suggestion for TEXT and ANIMATION, Please let me know.. Good Luck..

Telegram : @payjo93

Version 1

Quote

Version 2

Quote

Version 2

Quote

Note For OP : If you want to see and try this html banner, let me know and i will send you a link to codepen.io by bitcointalk PM. Thanks.

roslinpl

legendary

Activity: 2212

Merit: 1199

Quote from: poptok1 on April 17, 2019, 10:29:46 AM

As you can clearly see, I have heavily copied from this design and made it not as my own, but as everyone else's.
It now became open for everyone to study, inspire and learn from.
"Imitation is the sincerest form of flattery that mediocrity can pay to greatness" Roll Eyes

I do apologies however I'm not sorry for doing so, as I have learned a lot in the process.
I feel like simple "thank you" rather than sorry is more appropriate right now and so, thank you.

Where your deletion of unfavourable feedback would be nice, there it's not mandatory as every action requires consequences.
Those I am willing to take unconditionally, even without you proving the paternity over that design.
Your ebullient, vehement and fervent private massages, gave me no time for a proper reaction and so, I won't delete my post with the codes, as I would normally do. P.S. Despite the circumstances, still better love story than Twilight.

I always support creators.
Developers often use code written by other people, and designers often use other people's designs.

I think that you can often use it for inspiration, learn from somebody else's code, get inspired, but do not forget about the element that makes it unique.
Your heart.

Original work has always one undeniable advantage, it is unique. The copy will always be just a copy.

We've all learned something here.

I can only add, I hope that you will try to post one more design (4 days left, plenty of time), this time it will be made with a piece of your heart!

And I'm sure it will be unique and nice!

PS. Try to keep your base64 elements smaller than 5KB (total) or Theymos might not accept it,
Hint: reduce image colors before converting and resize it ;-) try not to compress too much (quality matters).
Avoid using emojis.

Good luck.

Best wishes.

poptok1

hero member

Activity: 1638

Merit: 756

Bobby Fischer was right

Quote from: roslinpl on April 17, 2019, 08:28:22 AM

I see that some copy my designs to make "own"

ps. I've changed my mind, I send negative feedback straight away, and maybe after apologizing I will delete it.

As you can clearly see, I have heavily copied from this design and made it not as my own, but as everyone else's.
It now became open for everyone to study, inspire and learn from.
"Imitation is the sincerest form of flattery that mediocrity can pay to greatness" Roll Eyes

I do apologies however I'm not sorry for doing so, as I have learned a lot in the process.
I feel like simple "thank you" rather than sorry is more appropriate right now and so, thank you.

Where your deletion of unfavourable feedback would be nice, there it's not mandatory as every action requires consequences.
Those I am willing to take unconditionally, even without you proving the paternity over that design.
Your ebullient, vehement and fervent private massages, gave me no time for a proper reaction and so, I won't delete my post with the codes, as I would normally do. P.S. Despite the circumstances, still better love story than Twilight.

roslinpl

legendary

Activity: 2212

Merit: 1199

Hello,

I see that some copy my designs to make "own"

Not a good strategy ^_^.

Remember that creativity wins even with minor mistakes, copying someone else's designs is very weak point.
And still ... my designs are not "open-source" ;-)

(...) Only a fool can not forgive. (...) ;-)

Spot reserved ;-)

poptok1

hero member

Activity: 1638

Merit: 756

Bobby Fischer was right

Quote from: lightlord on April 16, 2019, 10:41:27 AM

Quote from: poptok1 on April 12, 2019, 02: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}

petahasher

member

Activity: 316

Merit: 25

I've just updated the first reply with my submission, good luck to all participants.

wumBowo

sr. member

Activity: 770

Merit: 298

tozex.io

reserved

lightlord

donator

Activity: 3228

Merit: 1226

★Bitvest.io★ Play Plinko or Invest!

Quote from: poptok1 on April 12, 2019, 02: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.

Quote from: FilipeHenriques on April 15, 2019, 02:29:41 PM

Preview:

https://codepen.io/appletrader/pen/axVKvd

The js code is a bit long to post here, but feel free to check it out on codepen.

Thanks!

Javascript is against the bitcointalk ad rules

No submissions meet the requirements, contest extension of time to April 21st.

idunets

full member

Activity: 462

Merit: 109

Reserved

FilipeHenriques

member

Activity: 499

Merit: 12

Just a bitcointalk member

Preview:

https://codepen.io/appletrader/pen/axVKvd

The js code is a bit long to post here, but feel free to check it out on codepen.

Thanks!

Topic: Bitvest Bitcointalk Design Ad Contest [0.05 BTC, and Consolation prizes] (Read 992 times)