I am practicing JavaScript and CSS by following a YouTube tutorial.
Here is a link to the GitHub repo, where the script is found.
I typed the entire code by hand, so that I could get more familiar with it. And when opening index.html
in my browser, the content is displayed at the very bottom and very right, rather than being centered as it should. I thought maybe I had a typo, so I copied and pasted the entire code from GitHub and refreshed it, still no change. What could I be doing wrong?
Could the issue lie in index, rather than the script?
Here is my code:
:root {
background-color: #ecf5ff;
font-size: 62.5%;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
h1,
h2,
h3,
h4 {
margin-bottom: 1rem;
}
h1 {
font-size: 5.4rem;
color: #56a5eb;
margin-bottom: 5rem;
}
h1 > span {
font-size: 2.4rem;
font-weight: 500;
}
h2 {
font-size: 4.2rem;
margin-bottom: 4rem;
font-weight: 700;
}
h3 {
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80rem;
margin: 0 auto;
}
.container > * {
width: 100%;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-center {
justify-content: center;
align-items: center;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
/* BUTTONS */
.btn {
font-size: 1.8rem;
padding: 1rem 0;
width: 20rem;
text-align: center;
border: 0.1rem solid #56a5eb;
margin-bottom: 1rem;
text-decoration: none;
color: #56a5eb;
background-color: white;
}
.btn:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.btn[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick Quiz</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container"></div>
<div id="home" class="flex-center flex-column"></div>
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</body>
</html>