ThWack-a-Vole

Developer
Mark Robbins
Size
4,132 Kb
Views
28,336
  1. ThWack-a-Vole Previews
  2. ThWack-a-Vole HTML Codes
  3. ThWack-a-Vole CSS Codes

How do I make an thwack-a-vole?

A CSS game played within an email client. What is a thwack-a-vole? How do you make a thwack-a-vole? This script and codes were developed by Mark Robbins on 06 September 2022, Tuesday.

ThWack-a-Vole Previews
IQ Test

ThWack-a-Vole - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ThWack-a-Vole</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ThWack-a-Vole</title>
<style>
.ExternalClass * { line-height: 100%;
}
table { border-collapse: collapse; table-layout: fixed;
}
@media screen and (max-width: 600px) { body{ margin:0px; } table[class="outer"]{ width:100%;!important; } [class="title"]{ font-size:33px;!important; font-size:9vw;!important; } [class="left-col"]{ width:100%; } [class="right-col"]{ width:100%; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#11aa77" style="background-color:#11aa77;" > <tr> <td>	<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="http://emailcodegeek.com" style="width: 3em; height: 45px; border-radius: 50%; font-family: 'Courier New', Courier, monospace; color: #eee; font-size: 14px; padding: 15px; text-align: center; line-height: 100%; border: 1px solid #eee; margin:5px auto; -webkit-text-size-adjust: none; display:block; text-decoration:none;">email<br>code<br>geek</a> </td> </tr> </table> </td> </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee" style="background-color:#eeeeee;" > <tr> <td>	<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="text-align:center; font-size:60px; font-family:'Courier New', Courier, monospace; color:#000000; padding:10px 0; text-shadow:-2px 2px 2px #888;"> <span class="title">ThWack-a-Vole</span> </td> </tr> </table> </td> </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#92c3b3" style="background-color:#92c3b3;" > <tr> <td>	<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee"style="background-color:#eeeeee;"> <tr> <td height="15" bgcolor="#92c3b3" style="border-bottom:15px solid #eeeeee; background-color:#92c3b3;"></td> </tr> <tr> <td> <table align="left" width="320" class="left-col" border="0" cellspacing="0" cellpadding="0"> <tr> <td>	<!--	INPUT FOR BUTTON SELECT --> <input type="radio" name="next" id="slide0" checked> <input type="radio" name="next" id="slide1"> <input type="radio" name="next" id="slide2"> <input type="radio" name="next" id="slide3"> <input type="radio" name="next" id="slide4"> <input type="radio" name="next" id="slide5">
<div class="brain"> <div class="game"> <label for="slide0" class="int manage_zero mole"></label> <label for="slide1" class="int manage_zero vole"></label> <label for="slide0" class="int manage_one mole"></label> <label for="slide2" class="int manage_one vole"></label> <label for="slide1" class="int manage_two mole"></label> <label for="slide3" class="int manage_two vole"></label> <label for="slide2" class="int manage_tre mole"></label> <label for="slide4" class="int manage_tre vole"></label> <label for="slide3" class="int manage_for mole"></label> <label for="slide5" class="int manage_for vole"></label> </div> <!-- COUNTER --> <span class="count-txt">Score:</span> <div class="count">	<div class="score"> <div class="zeroP">0</div> <div class="oneP">1</div> <div class="twoP">2</div> <div class="threeP">3</div> <div class="fourP">4</div>	</div>	</div> <div class="winner"> WINNER!!! <br/><br/> <a href="http://emailcodegeek.com" style="font-size:25px; font-family: arial;">Now visit my site</a> <br><br> <label for="slide0">play again</label> </div>
</div> </td> </tr> </table> <table align="left" width="250" class="right-col" border="0" cellspacing="0" cellpadding="5"> <tr> <td style="font-size:20px; font-family:arial;"> <strong style="font-size:40px;">How to play</strong> <br/><br/> <img src="https://s2.postimg.org/73kffpz51/vole.png" style="float:left;"> ThWack-a-Vole and score a point. <br/><br/><br/> <img src="https://s2.postimg.org/rmaq71nol/mole.png" style="float:left;"> Wack-a-Mole and you'll lose a point for copyright infringement. </td> </tr> </table> </td> </tr> <tr> <td height="15" bgcolor="#92c3b3" style="border-top:15px solid #eeeeee; background-color:#92c3b3;"></td> </tr> </table> </td> </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333" style="background-color:#333333;"> <tr> <td>	<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div style="width: 3em; height: 45px; border-radius: 50%; font-family: 'Courier New', Courier, monospace; color: #eee; font-size: 15px; padding: 15px; text-align: center; line-height: 100%; border: 1px solid #eee; margin:5px auto; -webkit-text-size-adjust: none;">email<br>code<br>geek</div> </td> </tr> </table> </td> </tr>
</table>
</body>
</html>
</body>
</html>

ThWack-a-Vole - Script Codes CSS Codes

body{	-webkit-user-select:none;	-moz-user-select:none;	-ms-user-select:none;	user-select:none;
}
input{	display: none;
}
.brain{ text-align: center; background:#444; width:300px; margin:0 auto;
}
.game{ height:300px; width:300px; position:relative; background:url('https://s12.postimg.org/6a2v0kbpp/dirt_bottom.gif') #333333; cursor: url(http://wiki.mabinogiworld.com/images/6/63/Toy_Hammer.png), auto;
}
.game::before{ background:url('https://s12.postimg.org/q5yug3sr1/dirt_top.gif'); width:300px; height:300px; display:block; content:''; z-index:10; position:relative; pointer-events:none;
}
/*COUNTER*/
.count-txt{ font-family:impact, arial; font-size:35px; line-height:50px; color:#eeeeee; padding-left:75px; float:left; text-shadow:1px 1px #000;
}
.count{ display:block; width:50px; height: 50px; border: solid 3px #555; overflow: hidden; background:#fff; -webkit-box-shadow: inset 5px 0px 5px 0px rgba(0, 0, 0, 0.4), inset -5px 0px 5px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: inset 5px 0px 5px 0px rgba(0, 0, 0, 0.4), inset -5px 0px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: inset 5px 0px 5px 0px rgba(0, 0, 0, 0.4), inset -5px 0px 5px 0px rgba(0, 0, 0, 0.4);
}
.score div{	width: 50px; height:50px; font-size:50px; font-family:arial; line-height:50px;	-webkit-background-size: contain;	-moz-background-size: contain;	background-size: contain;	display: inline-block;	float: left;	margin: 0;	padding: 0;
}
.score{	display: block;	width: 250px;	height: 50px;	-webkit-transition: all 300ms ease-in-out;	-moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
.winner{ display:none; background:#fff; color:red; padding:10px; font-size:40px;
}
/*Plus minus*/
.vole, .mole{ width: 60px; height: 60px; position: absolute; z-index:5;
}
.mole{	background:url('https://s2.postimg.org/rmaq71nol/mole.png'); -webkit-animation: mole 10s infinite alternate; animation: mole 10s infinite alternate;
}
.vole{ background:url('https://s2.postimg.org/73kffpz51/vole.png'); -webkit-animation: vole 10s infinite alternate; animation: vole 10s infinite alternate;
}
.vole:hover, .mole:hover{ cursor: url(http://wiki.mabinogiworld.com/images/6/63/Toy_Hammer.png), auto;
}
.int{	display: none;
}
/*INPUT MANAGE&PAGINATION CHECKED*/
#slide0:checked ~ .brain .manage_zero{display: inline-block;}
#slide1:checked ~ .brain .count .score{ margin-left:-50px;}
#slide1:checked ~ .brain .manage_one{display: inline-block;}
#slide1:checked ~ .brain .count .but .select1 > div{display: block;}
#slide2:checked ~ .brain .count .score{ margin-left:-100px;}
#slide2:checked ~ .brain .manage_two{display: inline-block;}
#slide2:checked ~ .brain .count .but .select2 > div{display: block;}
#slide3:checked ~ .brain .count .score{ margin-left:-150px;}
#slide3:checked ~ .brain .manage_tre{display: inline-block;}
#slide3:checked ~ .brain .count .but .select3 > div{display: block;}
#slide4:checked ~ .brain .count .score{ margin-left:-200px;}
#slide4:checked ~ .brain .manage_for{display: inline-block;}
#slide4:checked ~ .brain .count .but .select4 > div{display: block;}
#slide5:checked ~ .brain .game { display:none;}
#slide5:checked ~ .brain .count { display:none;}
#slide5:checked ~ .brain .count-txt { display:none;}
#slide5:checked ~ .brain .winner{display: block; height:300px;}
/* Speed up animation */
#slide1:checked ~ .brain .mole{ -webkit-animation: vole 9s infinite alternate; animation: vole 9s infinite alternate;
}
#slide2:checked ~ .brain .mole{ -webkit-animation: mole 8s infinite alternate; animation: mole 8s infinite alternate;
}
#slide3:checked ~ .brain .mole{ -webkit-animation: vole 7s infinite alternate; animation: vole 7s infinite alternate;
}
#slide4:checked ~ .brain .mole{ -webkit-animation: mole 5s infinite alternate; animation: mole 5s infinite alternate;
}
#slide1:checked ~ .brain .vole{ -webkit-animation: mole 9s infinite alternate; animation: mole 9s infinite alternate;
}
#slide2:checked ~ .brain .vole{ -webkit-animation: vole 8s infinite alternate; animation: vole 8s infinite alternate;
}
#slide3:checked ~ .brain .vole{ -webkit-animation: mole 7s infinite alternate; animation: mole 7s infinite alternate;
}
#slide4:checked ~ .brain .vole{ -webkit-animation: vole 5s infinite alternate; animation: vole 5s infinite alternate;
}
@-webkit-keyframes mole{ 0% {bottom: 210px; left: 125px;} 10% {bottom: 115px; left: 215px;} 14% {bottom: 115px; left: 215px;} 20% {bottom: 20px; left: 35px;} 24% {bottom: 20px; left: 35px;} 30% {left:240px; bottom:60px;} 34% {left:240px; bottom:60px;} 40% {bottom: 210px; left: 35px;} 44% {bottom: 210px; left: 35px;} 50% {bottom: 115px; left: 125px;} 54% {bottom: 115px; left: 125px;} 60% {bottom: 210px; left: 215px;} 64% {bottom: 210px; left: 215px;} 70% {left:90px; bottom:160px;} 74% {left:90px; bottom:160px;} 80% {bottom: 20px; left: 215px;} 84% {bottom: 20px; left: 215px;} 90% {bottom: 20px; left: 125px;} 94% {bottom: 20px; left: 125px;} 100% {bottom: 20px; left: 35px;}
}
@-webkit-keyframes vole{ 0% {bottom: 115px; left: 125px;} 10% {left:80px; bottom:60px;} 14% {left:80px; bottom:60px;} 20% {bottom: 210px; left: 215px;} 24% {bottom: 210px; left: 215px;} 30% {bottom: 115px; left: 125px;} 34% {bottom: 115px; left: 125px;} 40% {left:90px; bottom:160px;} 44% {left:90px; bottom:160px;} 50% {bottom: 20px; left: 35px;} 54% {bottom: 20px; left: 35px;} 60% {bottom: 115px; left: 215px;} 64% {bottom: 115px; left: 215px;} 70% {bottom: 210px; left: 35px;} 74% {bottom: 210px; left: 35px;} 80% {bottom: 115px; left: 125px;} 84% {bottom: 115px; left: 125px;} 90% {bottom: 115px; left: 35px;} 94% {bottom: 115px; left: 35px;} 100% {bottom: 210px; left: 35px;}
}
@keyframes mole{ 0% {bottom: 210px; left: 125px;} 10% {bottom: 115px; left: 215px;} 14% {bottom: 115px; left: 215px;} 20% {bottom: 20px; left: 35px;} 24% {bottom: 20px; left: 35px;} 30% {left:240px; bottom:60px;} 34% {left:240px; bottom:60px;} 40% {bottom: 210px; left: 35px;} 44% {bottom: 210px; left: 35px;} 50% {bottom: 115px; left: 125px;} 54% {bottom: 115px; left: 125px;} 60% {bottom: 210px; left: 215px;} 64% {bottom: 210px; left: 215px;} 70% {left:90px; bottom:160px;} 74% {left:90px; bottom:160px;} 80% {bottom: 20px; left: 215px;} 84% {bottom: 20px; left: 215px;} 90% {bottom: 20px; left: 125px;} 94% {bottom: 20px; left: 125px;} 100% {bottom: 20px; left: 35px;}
}
@keyframes vole{ 0% {bottom: 115px; left: 125px;} 10% {left:80px; bottom:60px;} 14% {left:80px; bottom:60px;} 20% {bottom: 210px; left: 215px;} 24% {bottom: 210px; left: 215px;} 30% {bottom: 115px; left: 125px;} 34% {bottom: 115px; left: 125px;} 40% {left:90px; bottom:160px;} 44% {left:90px; bottom:160px;} 50% {bottom: 20px; left: 35px;} 54% {bottom: 20px; left: 35px;} 60% {bottom: 115px; left: 215px;} 64% {bottom: 115px; left: 215px;} 70% {bottom: 210px; left: 35px;} 74% {bottom: 210px; left: 35px;} 80% {bottom: 115px; left: 125px;} 84% {bottom: 115px; left: 125px;} 90% {bottom: 115px; left: 35px;} 94% {bottom: 115px; left: 35px;} 100% {bottom: 210px; left: 35px;}
}
ThWack-a-Vole - Script Codes
ThWack-a-Vole - Script Codes
Home Page Home
Developer Mark Robbins
Username M_J_Robbins
Uploaded September 06, 2022
Rating 3.5
Size 4,132 Kb
Views 28,336
Do you need developer help for ThWack-a-Vole?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Robbins (M_J_Robbins) Script Codes
Name
CSS fly test
Smashingconf SF 2017 slides
Xmas email test
Animated images off pixel art
3D iPhone CSS controls no JS
CSS quick load images
Playing with border-radius and scroll bars
CSS Super Mario - No JS
Facebook feed
Birthday unicorn
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!