scrolling

by Aaron von Schassen

HTML

<!DOCTYPE HTML>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="homePagecss.css">
    <title>Career Guide</title>
  </head>

  <body>

    <div class="container">

      <ul class="m-0 p-0 bg-success navbar">
        <li class="p-1"><a href="about.html">About</a></li>
        <li class="p-1"><a href="#">Interview</a></li>
        <li class="p-1"><a href="#">Registration</a></li>
        <li class="p-1"><a href="#">Terms</a></li>
        <li class="p-1"><a href="#contact">Contact</a></li>
      </ul>

      <div class="login pt-2">
        <h3 class="mt-3">Your Career Is Your Life</h3>
        <div class="mt-4 question">
          <input id="question" type="text" class="rounded" name="question" placeholder="Type your question">
          <button id="askbtn" type="button" class="btn mt-1 btn-success button">ASK!</button>
        </div>
      </div>

      <div class="menu container">
        <div class="menuHeading">
          <h3 class="mt-3">How to choose your career</h3>
        </div>
        <div class="row">
          <div class="col-sm">
            <button class="btn btn-primary btn-lg my-5 tenthpass">10th pass</button>
          </div>
          <div class="col-sm">
            <button class="btn btn-primary btn-lg my-5 twpass">12th pass</button>
          </div>
          <div class="col-sm">
            <button class="btn btn-primary btn-lg my-5 graduated">Graduated</button>
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            <button class="btn btn-primary btn-lg my-5...

CSS

body {
  background-image: url(../images/images/documentbackground.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

/*-------------------------------------Main head------------------------------------------- */

.jumbotron {
  margin: 0;
  background: url(../images/a2.jpg) no-repeat;
}

.mainHead a {
  display: block;
  width: 7%;
  color: white;
  background-color: #3BF44F;
  text-decoration: none;
  transition: background-color .7s;
}

.mainHead a:hover {
  background-color: #08B81B;
}

/*-----------------------------------------------------NavBar--------------------------------------*/

.navbar {}

ul {
  list-style: none;
}

li {
  float: left;
}

.navbar a {
  color: white;
  padding: 0 75px;
  text-decoration: none;
  transition: background-color 0.7s;
}

.navbar a:hover {
  background-color: #0bbc08;
  color: white;
}

/*----------------------------------------------------------Login------------------------------------*/

.login {
  height: 200px;
  background: url(../images/images/back1.jpg);
  background-size: cover;
  background-position: 0 -45%;
  /*transition: all 1s;*/
}

/*.login:hover{
	transition: all 1s;
	background-size: 150%;
}*/

.login h3 {
  text-align: center;
  color: white;
  margin-top: 2%;
}

.login .question {
  position: relative;
  width: 50%;
  margin: 0 auto;
}

.login .question input {
  width: 100%;
}

.login .button {
  position: absolute;
  left: 50%;
}

/*----------------------------------------Menu--------------------------------------------------*/

.menu {
  overflow: hidden;
  text-align: center;
  background: url(../images/how.jpg);
}

.menu button {
  transition: all .5s;
}

.menu .graduated:hover {
  transform: scale(1.1);
}

.menu .interview:hover {
  transform: scale(1.1);
}

.menu .tenthpass:hover {
  transform: scale(1.1);
}

.menu .questions:hover {
  transform: scale(1.1);
}

.menu .twpass:hover {
  transform: scale(1.1);
}

.menu .register:hover {
  transform:...