first boostrap code with js

.main { background:#1abc9c; padding: 30px; } .main p { padding: 30px; color: white; font-size: 30px; } .second { background: #474e5d; color: #fff; height: 270px; } .btn{} .o{padding: 30px; font-size: 40px;} .second p{font-size: 15px; color: #fff;} .hello{margin: 40px; font-size: 35px} .row{margin: 40px;} footer { background: #2f2f2f; height: 200px; width: 100%; } .ooo { color: #fff; padding-top: 80px; } .navbar { background: green; padding: 50px; transition: 1s; paddin } .nav-link { color: blue; } .nav.navbar-nav.navbar-right li a {     color: blue; } .red { background: red; padding:20px; }

<!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=...