body {
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
}
div#controller {
display: none;
}
div#instructions {
font-size: 20px;
color: white;
position: static;
text-align: center;
}
@media only screen and (max-width: 480px) {
div#instructions {
display: none;
}
div#controller {
display: flex;
position: relative;
background-color: grey;
opacity: 0.6;
height: 33%;
width: 80%;
}
div#controller.dpad {
width: 60%;
}
}
@media only screen and (max-width: 768px) {
div#instructions {
display: none;
}
div#controller {
display: flex;
position: relative;
top: 300px;
background-color: grey;
opacity: 0.6;
height: 50%;
width: 80%;
}
div#controller.dpad {
width: 33%;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- The CSS is missing! Your mission is to re-create it -->
<link rel="stylesheet" href="env3d.css" />
<script src="http://css.operatoroverload.com/exercise/bundle.js"></script>
<script src="http://css.operatoroverload.com/exercise/game.js"></script>
<script type="text/javascript">
function playGame() {
console.log("playGame");
var game = new Game();
game.setup();
var env;
if (game.env) {
env = game.env;
} else {
env = new env3d.Env();
}
env.loop = game.loop.bind(game);
env.start();
}
window.addEventListener('load', function() {
playGame();
});
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
});
</script>
</head>
<body>
<div id="controller">
<div class="dpad">
<button env3d-key="KEY_UP">UP</button>
<button env3d-key="KEY_LEFT">LEFT</button>
<button env3d-key="KEY_RIGHT">RIGHT</button>
<button env3d-key="KEY_DOWN">DOWN</button>
</div>
<button env3d-key="KEY_A">A</button>
<button env3d-key="KEY_Z">Z</button>
</div>
<div id="instructions">Use arrow keys to change camera angle, A to zoom in, Z to zoom out.</div>
<div id="env3d"></div>
</body>
</html>I am currently working on a small project that requires coding mobile controllers using CSS. However, I am facing difficulties in styling it to resemble the provided image.
If anyone could offer guidance or point me in the right direction, it would be greatly appreciated!
Thank you for your assistance! :)