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

[lightlord]

Note: Before designing an ad for Bitvest, check out bitvest.io, bitvest.io/charts, first, and gather the information and inspiration for design first, before continuing. After all the ad represents the site, and it increases your chances of winning.

Design a Bitvest ad that is both hoverable, and superior in design to the bitvest ad below. Consider taking inspiration from the 777Coin design, and the rainbow color theme of Bitvest betting rows on the site. Bitvest.io/charts - Use sales pitch concepts, Games, etc. (Must contain investor BTC profit, use 200+)

The best ad design gets 0.05 BTC.

Time frame submissions: Latest April 21st

(Consolation prizes of 0.001 BTC, to 2nd, 3rd place submissions.)

Terms and conditions

-Also, you agree upon submission, that if you are not 1st, but we still do decide to use your ad, perhaps rotate between 1st & 2nd, then you'll be rewarded 0.01 BTC.
-The contest may end any time earlier, depending on if we receive a very good submission.
-If there are only 1 quality submission, and 2 very quickly done submissions, poor quality, or not done to a reasonable degree of effort, then you won't be eligible for a consolation prize, even if you are 2nd or 3rd place.
-The ads must follow the rules for bitcointalk ads: https://bitcointalk.org/index.php?topic=5129553


Not Mouse Hovered



Mouse Hovered



Current Bitvest Design

[1714004481]

1714004481

[1714004481]

1714004481

[1714004481]

1714004481

[petahasher]

Without hover:



With hover - (there is no white border, it is just because I took a screenshot):



I did my best to incorporate everything as asked, including the colours at the bottom of the plinko, as seen on the right side. There is still several hours left before the original deadline. If you wanted to just take my submission, I could definitely change things up according to what you like, and add in the plinko logo or other images. I read the rules and they stated that no images unless you get permission, so I played it safe.

My submission is not stolen, and does not contain any js.

Thanks for the opportunity!

[poptok1]

This gonna be my second entry and probably last. This thing is exhausting  
Bit more complicated, with effects. Preview -> https://codepen.io/anon/pen/QPMWqa

HTML

Code:

<tr><td>
   <table width="100%">
    <tbody><tr>
       <td rowspan="2">
     </td>
       <td>
      <table class="BiDyTUaLjmhofGmdEsjuGA" width="100%"><tbody><tr><td></td></tr>
      </tbody></table>
      <div class="qOjUoFFROcjdWkhmKadcCw"><div class="ad  inl-rel">	 	<a class="link" href="https://bitvest.io"></a> 	<div class="frame-inside inl-rel">	 		<div class="frame-left flo-lef inl-rel"> 			<div class="frame-clubs frame-clubs-1 mar-rig flo-lef inl-rel">&#127922;</div> 			<div class="frame-text-top tex-lef flo-lef inl-rel">200+ btc investor profit</div> 			<div class="frame-text-bottom tex-lef flo-lef inl-rel">play win invest and socialize!</div> 		</div> 		<div class="frame-left-2 flo-lef inl-rel"> 			<div class="frame-clubs frame-clubs-2 mar-rig flo-lef inl-rel">&#127922;</div> 			<div class="frame-text-top frame-text-top-2 tex-lef flo-lef inl-rel">provably fair</div> 			<div class="frame-text-bottom frame-text-bottom-2 tex-lef flo-lef inl-rel">full range of games</div> 		</div>  		<div class="frame-left-3 flo-lef inl-rel"> 			<div class="frame-clubs frame-clubs-3 mar-rig flo-lef inl-rel">&#127922;</div> 			<div class="frame-text-top frame-text-top-3 tex-lef flo-lef inl-rel">dice plinko slots</div> 			<div class="frame-text-bottom frame-text-bottom-3 tex-lef flo-lef inl-rel">- low 1% house edge -</div> 		</div>  		<div class="logobox"> 			<div class="bitvest-logo-poptok1 inl-rel"></div> 		</div> 		<div class="frame-text-big-frame flo-lef inl-rel"> 			<div class="frame-text-big">Bitvest.io</div> 			<div class="frame-text-big-2">PLAY NOW</div> 		</div> 	</div> </div></div>
     </td>
    </tr>
    <tr class="BiDyTUaLjmhofGmdEsjuGA"><td></td>
    </tr>
   </tbody></table>
  </td></tr>
 
 

CSS

Code:

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

.ad {    
    width: 900px;
    max-width: 900px;
    min-width: 900px;
    height: 42px;
    max-height: 42px;
    background: #0044cc;
    text-align: center;
    font-family: "Lucida Console", Monaco, monospace
}

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

.logobox {
    display: inline-block;
    position: absolute;
    left: 10px;
    height: 34px;
    width: 34px;
    float: left;
    text-align: center;
    bottom: 1px;	
}


.bitvest-logo-poptok1 {
    background: url('data:image/png;base64,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');  
    height: 36px;
    width: 36px;
    background-size: 36px;
    transition: transform 0.3s ease-out, -o-transform 0.3s ease-out, -moz-transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out, -o-transform 0.3s ease-out, -moz-transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out, -o-transform 0.3s ease-out, -moz-transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transition: transform 0.3s ease-out, -o-transform 0.3s ease-out, -moz-transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
}.

.ad:hover  {
    transform: scale(0.90, 0.90);
    -o-transform: scale(0.90, 0.90);
    -moz-transform: scale(0.90, 0.90);
    -webkit-transform: scale(0.90, 0.90);
}

.frame-inside {
	border: solid;
    border-width: 2px 0px 2px 0px;
    border-color: #ffffff;
    display: block;
    position: absolute;
    width: 836px;
    height: 34px;
    top: 2px;
    left: 0px;
    padding-right: 10px;
    padding-left: 54px;
    text-transform: uppercase;
    font-weight: 600;
}

.frame-left {
    line-height: 34px;
    width: 245px;
}

.frame-left-2 {
    line-height: 34px;
    width: 170px;
}

.mar-rig {
	margin-right: 7px;
}

.mar-lef {
	margin-left: 6px;
}

.frame-left-3 {
    line-height: 34px;
    width: 220px;
}

.frame-clubs {
	font-size: 25px;
	color: #e8b51f;	
	font-family: Arial, Helvetica, sans-serif;
	text-shadow: 0 0 2px #000;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transition: transform 0.4s ease-out, -o-transform 0.4s ease-out, -moz-transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
    -o-transition: transform 0.4s ease-out, -o-transform 0.4s ease-out, -moz-transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
    -moz-transition: transform 0.4s ease-out, -o-transform 0.4s ease-out, -moz-transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
    -webkit-transition: transform 0.4s ease-out, -o-transform 0.4s ease-out, -moz-transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
}

.frame-text-top {
	font-size: 14px;
    color: #40ff00;
    line-height: 17px;
    margin-top: 3px;	
	transition: color 0.4s ease-out;
    -o-transition:  color 0.4s ease-out;
    -moz-transition: color 0.4s ease-out;
    -webkit-transition: color 0.4s ease-out;
}

.frame-text-bottom {
	font-size: 11px;
    color: #fff;
    line-height: 13px;
	transition: color 0.4s ease-out;
    -o-transition:  color 0.4s ease-out;
    -moz-transition: color 0.4s ease-out;
    -webkit-transition: color 0.4s ease-out;
}

.tex-lef {
    text-align: left;
}

.tex-rig {
    text-align: right;
}


.flo-rig {
	float: right;
}

.flo-lef {
	float: left;
}

.frame-text-big-frame {
    right: 10px;
    position: absolute;
    font-weight: 400;
    color: #fff;
    line-height: 26px;
    margin-top: 4px;
    font-size: 20px;
    padding-left: 10px;
    width: 185px;
    padding-right: 10px;
    text-align: center;
    height: 25px;
    background: #ff0000;
    border-right: 2px solid #73e600;
    border-bottom: 2px solid #73e600;
    transition: background 0.4s ease-out, border-right 0.4s ease-out, border-bottom 0.4s ease-out;
    -o-transition:  background 0.4s ease-out, border-right 0.4s ease-out, border-bottom 0.4s ease-out;
    -moz-transition: background 0.4s ease-out, border-right 0.4s ease-out, border-bottom 0.4s ease-out;
    -webkit-transition: background 0.4s ease-out, border-right 0.4s ease-out, border-bottom 0.4s ease-out;
}

.frame-text-big {
	opacity: 1;
	width: 185px;
	position: absolute;	
	transition: opacity 0.4s ease-out;
    -o-transition:  opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
}

.frame-text-big-2 {
	opacity: 0;
	width: 185px;
	position: absolute;
	transition: opacity 0.4s ease-out;
    -o-transition:  opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
}

.ad:hover .frame-text-big {
	opacity: 0;
}

.ad:hover .frame-text-big-2 {
	opacity: 1;
}

.ad:hover .frame-text-big-frame {
    background: #73e600;
    border-right: 2px solid #73e600;
    border-bottom: 2px solid #73e600;	
}


.frame-clubs-2, .frame-text-top-2, .frame-text-bottom-2 {
	-o-transition-delay: 0.2s;
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.frame-clubs-3, .frame-text-top-3, .frame-text-bottom-3 {
	-o-transition-delay: 0.4s;
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.ad:hover .frame-clubs {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
}

.ad:hover .frame-text-bottom {
	color: #ff0000;
}
.ad:hover .frame-text-top {
	color: #fff;
}
.denarium {
    display: block;
    position: relative;
    height: 42px;
    width: 650px;
    overflow: hidden;
    text-overflow: clip;
    text-align: center;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-weight: 100;
}

.denarium_yellow {
    position: absolute;
    left: -54px;
    top: -11px;
    width: 306px;
    height: 75px;
    background-image: radial-gradient(circle farthest-corner at 50% 50%, rgb(203, 21, 23) 0%, rgb(203, 21, 23) 55%, rgb(203, 21, 23) 67%);
}

.denarium_black {
    position: absolute;
    left: 177px;
    top: -14px;
    width: 473px;
    height: 70px;
    background-image: linear-gradient(89deg, rgb(29, 29, 29) 0%, rgb(39, 39, 39) 100%);
    border-radius: 70px 0 0;
}

.denarium_name {
    position: absolute;
    left: -2px;
    top: 2px;
    width: 198px;
    height: 27px;
    font-size: 25px;
    font-weight: 700;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.38);
}

.denarium_phys {
    position: absolute;
    left: 15px;
    top: 26px;
    width: 166px;
    height: 15px;
    font-size: 8px;
    letter-spacing: 2px;
    color: white;
}

.denarium_perf {
    position: absolute;
    left: 207px;
    top: 11px;
    width: 366px;
    height: 27px;
    font-family: Arial Black,Gadget,sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: white;
}

.denarium_buy {
    position: absolute;
    left: 219px;
    top: 1px;
    width: 340px;
    height: 15px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    word-spacing: 3px;
    color: white;
}

.denarium_we {
    position: absolute;
    left: 219px;
    top: 29px;
    width: 340px;
    height: 13px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1px;
    word-spacing: 3px;
    color: rgb(151, 151, 151);
}

.denarium_ring {
    position: absolute;
    left: 589px;
    top: -6px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgb(231, 184, 24);
}

.denarium_d {
    position: absolute;
    left: 585px;
    top: 4px;
    width: 43px;
    height: 43px;
    font-size: 28px;
    color: rgb(255, 0, 0);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    transform: translate(0, 0) rotate(0deg) scale(-1, 0.97725);
}

.denarium_b {
    position: absolute;
    left: 604px;
    top: 4px;
    width: 43px;
    height: 43px;
    font-size: 28px;
    color: rgb(255, 0, 0);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
}

[r1a2y3m4]

-snip-

I like this design bro. I hope that this application of yours will be accepted. Hovering at that signature gives the beauty in it.

[lightlord]

2 days remaining for submissions

[lightlord]

bump

[poptok1]

https://codepen.io/anon/pen/dLZoQe I was forced to change my first submission due to my own action.
Here is something more rainbow-ish yet simple.

HTML

Code:

      <table class="iwyA" width="100%"><tbody><tr><td></td></tr>
      </tbody></table>
      <div class="tySIA"><div class="-ad-wrap">   <div class="-ad">     <a href="https://Bitvest.io" class="-link"></a>     <div class="-logobox">       <div class="-logo"> <span>Bitvest.io </span>     </div>     </div>      <div class="-headline">       <span>Investor profit 200 BTC +</span>       <br> </div>  <div class="-features">       <strong>LOW 1 % HOUSE EDGE</strong>       <br>Dice Plinko Slots Bitspin and Roulette! Invest or Socialize!    </div>     <div class="-cta">PLAY INVEST</div>   </div> </div></div>
     

CSS

Code:

.-ad-wrap {
position: relative;
display: inline-block;
overflow: hidden;
cursor: pointer;
}
.-ad {
display: flex;
width: 900px;
max-width: 900px;
min-width: 900px;
height: 42px;
max-height: 42px;
line-height: 44px;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,black);
align-items: center;
justify-content: space-between;
}
.-link {
position: absolute;
width: 100%;
height: 44px;
left: 0;
top: 0;
z-index: 10;
}
.-logobox {
position: relative;
left: 0;
height: 42px;
border: solid;
border-width: 0 1px 0 0 ;
border-color: #00000;
}

.-logo {
font-family:arial black;
color: #000;
font-size: 28px;
font-weight: bold;
line-height: 1.3em;
padding: 2px 20px;
}

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

.-headline {
color: #000000;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
padding: 2px 20px;
}

.-features {
line-height: 1.4em;
font-size: 12px;
padding: 5px 20px;
border: solid;
border-width: 0 1px 0 0 ;
border-color: #000000;
background-color:;
color: #ffffff;
transition: all 0.2s ease-out;  
}

.-cta {
font-family:arial black;
font-size: 14px;
color: #fff;
margin-right: 7px;
transition: transform 0.2s ease-out, -o-transform 0.2s ease-out, -moz-transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
-o-transition: transform 0.2s ease-out, -o-transform 0.2s ease-out, -moz-transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
-moz-transition: transform 0.2s ease-out, -o-transform 0.2s ease-out, -moz-transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
-webkit-transition: transform 0.2s ease-out, -o-transform 0.2s ease-out, -moz-transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.-ad:hover .-cta {
transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
}

.-ad:hover .-features {
background-color: #fff;
color: #000;
}

[FilipeHenriques]

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!

[idunets]

Reserved

[lightlord]

This gonna be my second entry and probably last. This thing is exhausting  
Bit more complicated, with effects. Preview -> https://codepen.io/anon/pen/QPMWqa

Both the same and also broken.

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.

[wumBowo]

reserved

[petahasher]

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

[poptok1]

This gonna be my second entry and probably last. This thing is exhausting  
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:

<tbody>
  <tr>
    <td>
      <table width="100%">
        <tbody>
          <tr>
            <td rowspan="2">
            </td>
            <td>
              <table class="KSoZ" width="100%">
                <tbody>
                  <tr>
                    <td></td>
                  </tr>
                </tbody>
              </table>
              <div class="zTXf">
                <div class="bit-ad-box bit-inl-rel"> <a class="bit-link" href="https://www.bitvest.io/"></a>
                  <div class="bit-ad bit-inl-rel">
                    <div class="bit-dice bit-coin-1"></div>
                    <div class="bit-dice bit-coin-2"></div>
                    <div class="bit-slogan-box bit-mrl-20">
                      <div class="bit-eth bit-eth-1 bit-eth-showit"></div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-1">Investor profit <span class="bit-color-orange">200 BTC +</span></div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-2">Fully Customizable <span class="bit-color-orange">crypto </span>games </div>
                    </div>
                    <div class="bit-logo-box">
                      <div class="bit-inl-rel bitvest-logo"></div>
                    </div>
                    <div class="bit-slogan-box-small bit-fr bit-mr-5">
                      <div class="bit-eth "></div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-small bit-slogan-6">Invest or Socialize!</div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-small-2 bit-slogan-6"> low 1% house edge</div>
                    </div>
                    <div class="bit-slogan-box-small bit-fr">
                      <div class="bit-eth "></div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-small ">slots</div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-small-2 bit-slogan-5">tokens</div>
                      <div class="bit-hor-line"></div>
                    </div>
                    <div class="bit-slogan-box-small bit-fr">
                      <div class="bit-eth bit-eth"></div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-small bit-slogan-4">plinko</div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-small-2 bit-slogan-4">Bitspin</div>
                      <div class="bit-hor-line"></div>
                    </div>
                    <div class="bit-slogan-box-small bit-fr">
                      <div class="bit-eth bit-eth-"></div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-small bit-slogan-3">Roulette</div>
                      <div class="bit-inl-rel bit-slogan bit-slogan-small-2 bit-slogan-3">dice</div>
                      <div class="bit-hor-line"></div>
                    </div>
                    <div class="bit-action-button">
                      <div class="bit-action-text bit-action-text-visible"></div>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="KSoZGdDvxdXZpsClhiFgpA">
            <td></td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</tbody>

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}

[roslinpl]

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]

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" 
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]

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"  
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.

[payjoe93]

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



Telegram : @payjo93

Version 1

Version 2

Version 2

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.

[lightlord]

bump

[jayce]

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]

bump