a div doesn't appear, it's not visible

user_13025419 0
Viewed 71

I'm working on a website and I have a problem, here is my code

Html and CSS:

* {
  margin: 0;
  scroll-behavior: smooth;
}

@font-face {
    font-family: "Oswald";
    src: url("font/Oswald-VariableFont_wght.ttf") format('truetype');
}

.firstPage {
  height: 90vh;
  width: 100vw;
  background-color: #ffffff;
}

.box {
  margin-top: 40vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.box span {
  display: block;
  width: 30px;
  height: 30px;
  border-bottom: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2s infinite;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(10px, 10px);
  }

}

.bigTitle {
  font-size: 100px;
  letter-spacing: 2px;
}

.Oswald {
  font-family: "Oswald";
}

.middleTitle {
  display: flex;
  justify-content: center;
  position: relative;
  top: 43%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.rightTextHeader {
  margin-left: 3vh;
  margin-top: 1.5vh;
  font-size: 20px;
  transition: all 300ms;
}

.header {
  background-color: #fff;
  height: 8.5vh
}

.secondPage {
  height: 100vh;
  width: 100vw;
  background-color: #000;
}
<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Purpl5Rain - Website</title>
    <link rel="stylesheet" href="css/firstPage.css">
    <link rel="stylesheet" href="css/secondPage.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body>
    <div class="header">
      <p class="Oswald rightTextHeader">BeatMaker</p>
    </div>
    <div class="firstPage">
      <div class="middleTitle">
        <h1 class="bigTitle Oswald">PURPL5RAIN</h1>
      </div>
      <div class="box">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="secondPage">
    </div>
  </body>
</html>

My problem is : why secondPage doesn't appear on my website ?

I tried so many thing but nothing works, I need help, I didn't find help on internet

Sorry if my English is very bad I'm French and I don't speak English very well

Thanks for everybody who will help me.

css html
4 Answers

The background color of the <div class="secondPage"> is black. That's the reason. As well as, you didn't add anything to your second page. Change the background color. I changed it to white and add some text. As your wish you can change the fonts colors and background color.

* {
  margin: 0;
  scroll-behavior: smooth;
}

@font-face {
    font-family: "Oswald";
    src: url("font/Oswald-VariableFont_wght.ttf") format('truetype');
}

.firstPage {
  height: 90vh;
  width: 100vw;
  background-color: #ffffff;
}

.box {
  margin-top: 40vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.box span {
  display: block;
  width: 30px;
  height: 30px;
  border-bottom: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2s infinite;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(10px, 10px);
  }

}

.bigTitle {
  font-size: 100px;
  letter-spacing: 2px;
}

.Oswald {
  font-family: "Oswald";
}

.middleTitle {
  display: flex;
  justify-content: center;
  position: relative;
  top: 43%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.rightTextHeader {
  margin-left: 3vh;
  margin-top: 1.5vh;
  font-size: 20px;
  transition: all 300ms;
}

.header {
  background-color: #fff;
  height: 8.5vh
}

.secondPage {
  height: 100vh;
  width: 100vw;
  background-color: white;
  color: red;
}
<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Purpl5Rain - Website</title>
    <link rel="stylesheet" href="css/firstPage.css">
    <link rel="stylesheet" href="css/secondPage.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body>
    <div class="header">
      <p class="Oswald rightTextHeader">BeatMaker</p>
    </div>
    <div class="firstPage">
      <div class="middleTitle">
        <h1 class="bigTitle Oswald">PURPL5RAIN</h1>
      </div>
      <div class="box">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="secondPage">
    <h1>Second Page</h1>
    </div>
  </body>
</html>

user_126878790 

* {
  margin: 0;
  scroll-behavior: smooth;
}

@font-face {
    font-family: "Oswald";
    src: url("font/Oswald-VariableFont_wght.ttf") format('truetype');
}

.firstPage {
  height: 90vh;
  width: 100vw;
  background-color: #ffffff;
}

.box {
  margin-top: 40vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.box span {
  display: block;
  width: 30px;
  height: 30px;
  border-bottom: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transform: rotate(45deg); /* also, I think you don't need this line since you are already transforming the rotate() property in @keyframes animate */
  margin: -10px;
  animation: animate 2s infinite;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(10px, 10px);
  }

}

.bigTitle {
  font-size: 100px;
  letter-spacing: 2px;
}

.Oswald {
  font-family: "Oswald";
}

.middleTitle {
  display: flex;
  justify-content: center;
  position: relative;
  top: 43%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.rightTextHeader {
  margin-left: 3vh;
  margin-top: 1.5vh;
  font-size: 20px;
  transition: all 300ms;
}

.header {
  background-color: #fff;
  height: 8.5vh
}

.secondPage {
  height: 100vh;
  width: 100vw;
  background-color: #000;
}

/* Here is our secondPage content */
.secondPage-para {
  color: white;
  font-size: 1.4rem;
  padding: 1rem;
}
<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Purpl5Rain - Website</title>
    <link rel="stylesheet" href="css/firstPage.css">
    <link rel="stylesheet" href="css/secondPage.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body>
    <div class="header">
      <p class="Oswald rightTextHeader">BeatMaker</p>
    </div>
    <div class="firstPage">
      <div class="middleTitle">
        <h1 class="bigTitle Oswald">PURPL5RAIN</h1>
      </div>
      <div class="box">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="secondPage">
      
<!-- add some content here to make seconds page visible. Without content, it'll show it's own height -->
      <p class="secondPage-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque fuga eligendi maiores porro quidem, consequuntur voluptatem fugit maxime neque eveniet iusto error voluptas quo tempore soluta autem omnis deleniti beatae.</p>
    </div>
  </body>
</html>

Well, basically your .secondPage doesn't have any content to show up. That's the problem. But your .secondPage styles like height, backgroud-color are working properly as you can see. So .secondPage is actually showing, isn't it?

Just add some content here(actually you will have to add content in future, haven't you?) & you are ready to go.

#A bit Explanation -

By default, an element will show it's default height, if there are no content within it(that's why we use overflow: hidden in navigation to prevent it, if you have already worked with it!). And the default height is actually 0. So it's doesn't show up, and we think our code is broken.

Let's go through a demonstration -

.blue-div {
  background-color: #0a9dff;
}
<div class="blue-div">
</div>

As you can see here, nothing is actually showing. Because there is nothing to show(actually). But whenever we add a heading, it's showing the blue color as background-color.

.blue-div {
  background-color: #0a9dff;
}
<div class="blue-div">
  <h3>Hello World!</h3>
</div>

See? Content is King!

So keep that in mind. This is something that'll help you a lot in CSS world! Thank you :)

user_138535190

I think you want to visible the second page when the down arrow button clicked. If so then you need to apply js. Am I right? If I'm right then there has a solution.

user_42842940

The issue here is the styling of the box, which hides the other page div. You may need to style the second-page div in view of the box styling.

user_79529740
Related