So I was just writing some html and CSS stuff for fun, but only one of all the lines in my code is working here's my code
<!DOCTYPE html>
<Html Lang="en">
<Head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Minecraft</title>
</head>
<body>
<div class="container">
<div class="border">
<div class="content">
<P>ihc</P>
</div>
</div>
</div>
<center>
<footer>
<p style="font-size: 1%;">© Copyright 2022</p>
</footer>
</center>
<script src="script.js"></script>
</body>
</html>
h1 {
margin: 16px;
font-size: 24px;
font-weight: 600;
line-height: 36px;
font-family: EuclidCircularA-Regular;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin: auto 16px;
font-style: normal;
font-family: EuclidCircularA-Regular;
}
.container {
width: 100%;
height: 100%;
}
.border {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
width: 100%;
height: 100%;
}
.content {
width: 90%;
height: 90%;
Background-color: rgb(255,255,255);
}
And all I can see is this: copyright text and a black box with no text even though there should be text
What should I do? Add styling for the "container" div? I'm not very good at this stuff so help would be appreciated.
You need to change .container
height
to 100vh
and background color of .content
to black.
Here you go:
h1 {
margin: 16px;
font-size: 24px;
font-weight: 600;
line-height: 36px;
font-family: EuclidCircularA-Regular;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin: auto 16px;
font-style: normal;
font-family: EuclidCircularA-Regular;
}
.container {
background-color: rgb(0, 0, 0);
width: 100%;
height: 100vh;
}
.border {
color: rgb(255, 255, 255);
width: 100%;
height: 100%;
}
.content {
width: 90%;
height: 90%;
background-color: rgb(0, 0, 0);
}
<!DOCTYPE html>
<Html Lang="en">
<Head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Minecraft</title>
</head>
<body>
<div class="container">
<div class="border">
<div class="content">
<p>ihc</p>
</div>
</div>
</div>
<center>
<footer>
<p style="font-size: 1%;">© Copyright 2022</p>
</footer>
</center>
<script src="script.js"></script>
</body>
</html>