Putting more content further down my website

So, I am a beginner in web development and i am curretly making a website of a hypothetical travel start up, so i have the home page/landing page up but i don't know how to add content down on my website, basically i want the content when i scroll down, basically like i want a fresh slate where i can put more of my content, i don't know how to explain but like when we visit a website we see a screen with the home page and then we scroll down to reveal more content i want just that, i am linking the home page that i made and also the css, please help me with this.

P.S:- When you run this on html you can even see the text "The Various Tours we do" which was supposed to be down in my website in a new fresh screen rather than on that same page where i have the logo and everything.

Start-Up html code:-

html {
  scroll-behavior: smooth;
}

body {
  background: url(https://i.pinimg.com/originals/e5/5c/e0/e55ce0b3aa7f8f1c520516dae8f691bf.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#content {
  text-align: center;
  padding-top: 25%;
}

html {
  height: 100%
}

@font-face {
  font-family: 'Gloss And Bloom Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Gloss And Bloom Regular'), url('Gloss_And_Bloom.woff') format('woff');
}

h1 {
  font-family: 'Gloss And Bloom Regular';
  font-size: 7em;
  color: white;
  text-shadow: 0px 4px 3px orange;
}

h3 {
  font-family: 'Satisfy', cursive;
  color: white
}

hr {
  border: 0;
  clear: both;
  display: block;
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.fade-in {
  animation: fadeIn 3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#fade-in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.navbar-brand:hover {
  background-color: yellow;
  color: white;
}

#secondPage {
  text-align: center;
  height: relative;
  float: bottom;
  color: black;
}

#heading {
  float: top;
  margin: 0;
  text-align: center;
  margin: 0 auto;
}

<title>Wishy Travels</title>
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Wishy</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Sign Up </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>



<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div id="content">
        <h1 class='fade-in'> Wishy Travels </h1>
        <h3 id="fade-in">Don't listen to what they say, GO SEE.</h3>
        <hr>
        <button type="button" class="btn btn-light">EXPLORE!</button>
      </div>
    </div>
  </div>
</div>

<div id="secondPage">
  <h2>
    <center>THE VARIOUS TOURS WE DO</center>
  </h2>
</div>

<div id="heading">
  The Various Tours we do!
</div>





<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>