<!DOCTYPE html>
<html>
<head>
<title>8bit - Interactive Website</title>
<style>
/* CSS styles for the website */
body {
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
.container {
margin-top: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
.form-input {
margin-bottom: 10px;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #f44336;
color: #fff;
text-decoration: none;
border-radius: 5px;
margin: 10px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff6659;
}
.tweet-button {
display: inline-block;
padding: 10px 20px;
background-color: #1da1f2;
color: #fff;
text-decoration: none;
border-radius: 5px;
margin: 10px;
transition: background-color 0.3s ease;
}
.tweet-button:hover {
background-color: #0c85d0;
}
</style>
</head>
<body>
<h1>Welcome to 8bit</h1>
<p>An interactive website with a form to fill out</p>
<div class="container">
<form id="contact-form" action="mailto:beetsbyj@gmail.com" method="post" enctype="text/plain">
<div class="form-input">
<label for="name">Twitter Handle</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-input">
<label for="email">Tao Root Wallet</label>
<input type="email" id="email" name="email" required>
<button class="button" type="submit">Submit</button>
<a class="tweet-button" href="https://twitter.com/intent/tweet?text=I+have+applied+for+8bit+WL" target="_blank">Tweet</a>
<!DOCTYPE html>
<html>
<head>
<title>Frogger Game</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.frog {
width: 40px;
height: 40px;
background-color: green;
position: absolute;
bottom: 0;
transition: left 0.5s, bottom 0.5s;
}
.car {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
bottom: 40px;
transition: left 3s;
}
</style>
</head>
<body>
<h1>Play Some Frogger While Your Here</h1>
<div id="game-board">
<div id="frog" class="frog"></div>
<div id="car1" class="car"></div>
<div id="car2" class="car"></div>
<div id="car3" class="car"></div>
</div>
<script>
document.addEventListener('keydown', moveFrog);
function moveFrog(event) {
var frog = document.getElementById("frog");
var frogLeft = frog.offsetLeft;
var frogBottom = frog.offsetTop;
switch (event.key) {
case "ArrowUp":
frog.style.bottom = (frogBottom + 40) + "px";
break;
case "ArrowDown":
frog.style.bottom = (frogBottom - 40) + "px";
break;
case "ArrowLeft":
frog.style.left = (frogLeft - 40) + "px";
break;
case "ArrowRight":
frog.style.left = (frogLeft + 40) + "px";
break;
}
}
setInterval(moveCars, 3000);
function moveCars() {
var car1 = document.getElementById("car1");
var car2 = document.getElementById("car2");
var car3 = document.getElementById("car3");
car1.style.left = getRandomPosition();
car2.style.left = getRandomPosition();
car3.style.left = getRandomPosition();
}
function getRandomPosition() {
var min = 0;
var max = 360;
var step = 40;
var position = Math.floor(Math.random() * (max - min + 1)) / step * step;
return position + "px";
}
</script>
</body>
</html>
</form>
</div>
</body>
</html>