index.html

<!DOCTYPE html>

<html>

<head>

<title>w3 school</title>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>  

<div data-spy="scroll" data-target=".navbar" data-offset="100" > 

<nav class="navbar navbar-expand-lg navbar-light fixed-top ">

  <a class="navbar-brand container" href="#">me</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto nav-pills   ">

      <li class="nav-item  ">

        <a class="nav-link" href="#who" style="color: black;">WHO <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#what" style="color: black;">WHAT</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#where" style="color: black;">WHERE</a>

      </li>

    </ul>

     </div>

</nav>

    

<div class="container-fluid">

<section id="who" >

<div class="main  text-center">

<p>Who Am I?</p>

<img src="https://www.w3schools.com/bootstrap/bird.jpg " class="rounded-circle">

<p>I'm an adventurer</p>

</div>

</section>

<section id="what" >

<div class="second text-center" >

<div class="o">What Am I?</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<button type="button" class="btn btn-light btn-lg">

<i class="fa fa-search" aria-hidden="true"></i> search</button>

</div>

</section>

<section id="where" >

<div class="hello text-center">Where To Find Me?</div>

<div class="row">

<div class="col-md-4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<img src="https://www.w3schools.com/bootstrap/birds1.jpg"></div>

<div class="col-md-4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<img src="https://www.w3schools.com/bootstrap/birds2.jpg"></div>

<div class="col-md-4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<img src="https://www.w3schools.com/bootstrap/birds3.jpg"></div>

</div>

</div>

<footer class="ooo text-center">

Bootstrap Theme Made By <a href="www.w3schools.com"></a>

www.w3schools.com

</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">

$(window).scroll(function(){

if($(this).scrollTop()>50)

{

$(".navbar").addClass("red")

}

else

{

$(".navbar").removeClass("red")

}

})

</script>

</body>

</html>