Initial code to build the structure of the page

2025-08-27 11:47:11 -04:00
parent 710bdd45ac
commit 5e88b034ac
2 changed files with 52 additions and 0 deletions
--- a/wally/index.html
+++ b/wally/index.html
@@ -7,6 +7,12 @@
 		<link href="style.css" rel="stylesheet">
 	</head>
 	<body>
+		<p class="score-counter">Score: <span class="player-score">0</span></p>
+		<h1>WallyKazam Word Quiz</h1>
+		<img src="wally.webp"></img>
+		<div class="input-buttons">
+			<button class="correct">&check;</button> <button class="wrong">&cross;</button>
+		</div>
 	<script src="app.js"></script>
 	</body>
 </html>
--- a/wally/style.css
+++ b/wally/style.css
@@ -0,0 +1,46 @@
+h1 {
+	text-align: center;
+	font-size: 64px;
+	position: fixed;
+	bottom: 458px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+img {
+	position: fixed;
+	bottom: 72px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.score-counter {
+	font-size: 32px;
+	font-weight: bold;
+	position: fixed;
+	right: 16px;
+	top: 16px;
+}
+
+.input-buttons {
+	position: fixed;
+	bottom: 16px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+button {
+	color: white;
+	font-size: 32px;
+	height: 40px;
+	width: 40px;
+}
+
+button.correct {
+	background-color: green;
+	margin-right: 32px;
+}
+
+button.wrong {
+	background-color: red;
+}