index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="./style/style.css" />
		<link
			href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
			rel="stylesheet"
		/>
		<link
			href="https://fonts.googleapis.com/css2?family=Arvo&display=swap"
			rel="stylesheet"
		/>

		<link
			href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap"
			rel="stylesheet"
		/>
		<link
			href="https://fonts.googleapis.com/css2?family=Solway:wght@300&display=swap"
			rel="stylesheet"
		/>
		<title>Flataculties</title>
	</head>
	<body>
		<div class="logo">
			<h1>Flatacuties</h1>
			<h2 class="smaller-header">vote for the cutest animal</h2>
		</div>

		<div id="character-bar">
			<!-- show characters names here -->
		</div>

		<div class="characterInfo">
			<div id="detailed-info">
				<p id="name">Character's Name</p>
				<img
					id="image"
					src="./assets/pngwing.com.png"
					alt="Character's Name"
				/><!-- display character image here -->
				<h4>Total Votes: <span id="vote-count">Character's Votes</span></h4>
				<form id="votes-form">
					<input
						type="text"
						placeholder="Enter Votes"
						id="votes"
						name="votes"
					/>
					<input type="submit" value="Add Votes" />
				</form>
				<button id="reset-btn">Reset Votes</button>
			</div>
			<script src="./src/get.js"></script>
		</div>
		<script src="./src/get.js"></script>
	</body>
</html>