CODEWITHSUNDEEP
htmlcssbroken-image
Mecode2
Mecode2

Reputation: 11

It's there a way to make these divs visible

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%;">&copy; 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.

Upvotes: 0

Views: 46

Answers (1)

Ho&#224;ng Huy Kh&#225;nh
Ho&#224;ng Huy Kh&#225;nh

Reputation: 1492

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%;">&copy; Copyright 2022</p>
    </footer>
  </center>
  <script src="script.js"></script>
</body>

</html>

Upvotes: 0

Related Questions