Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags always come first -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

        <!-- Font awesome CDN -->
        <script src="https://use.fontawesome.com/8a5a7cf9ff.js"></script>

        <!-- CSS -->
        <style type="text/css">
            /* Font import */
            @import url(https://fonts.googleapis.com/css?family=Bitter);

            /* Responsive navbar */
            .navbar-brand {
              float: none;
            }

            .navbar-nav .nav-item {
              float: none;
            }

            .navbar-divider,
            .navbar-nav .nav-item+.nav-item,
            .navbar-nav .nav-link + .nav-link {
              margin-left: 0;
            }

            @media (min-width: 34em) {
              .navbar-brand {
                float: left;
              }
              .navbar-nav .nav-item {
                float: left;
              }
              .navbar-divider,
              .navbar-nav .nav-item + .nav-item,
              .navbar-nav .nav-link + .nav-link {
                margin-left: 1rem;
              }
            }

            /* Navbar styling */
            #navbar {
                background-color: #54BAFF;
                height: 76.5px;
            }

            #navbarImg {
                height: 60px;

            }

            #navbarBrandImg {
                position: absolute;
                transform: translateX(-50%);
                left: 50%;
                bottom: 3px;
                outline: none;
            }

            #navbar > .nav > .nav-item > .navbarButtonDiv > .nav-link {
                position: relative;
                font-family: "Bitter", serif;
                color: Black;
                font-size: 120%;
                top: 14.5px;
                outline: none;
            }

            #navbar > .nav > .nav-item > .navbarButtonDiv {
                margin-right: 50px;
                height: 76.5px;
                cursor: pointer;
            }

            #navbar > .nav > .nav-item > .navbarButtonDiv:hover {
                background-color: #96D5FF;
                transition: 0.2s;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivHome {
                position: relative;
                width: 130px;
                bottom: 15px;
                left: 37.5px;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivHome > a {
                width: 0px;
                left: 37px;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivAbout {
                position: relative;
                width: 135px;
                bottom: 15px;
                right: 29px;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivAbout > a {
                width: 0px;
                left: 37px;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivLearn {
                position: relative;
                width: 135px;
                bottom: 15px;
                right: 95px;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivLearn > a {
                width: 0px;
                left: 40px;
            }

            #navbar > #leftNavbar {
                position: fixed;
                top: 15px;
                left: 340px;
            }

            #navbar > #navbarBrandImg:hover {
                content: url("images/edufeLogoShadow.png");
            }

            #navbarForm {
                position: absolute;
                left: 1150px;
                top: 18px;
            }

            #navbarFormSearch {
                width: 127%;
                font-family:"Bitter", serif;
            }

            #navbarFormSubmit {
                position: absolute;
                height: 38px;
                width: 46px;
                bottom: 16px;
                left: 285px;
            }

            #navbarFormSubmitFa {
                position: absolute;
                right: 14px;
                bottom: 10px;
            }

            #navbar > #rightNavbar {
                position: absolute;
                left: 1600px;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivLogIn {
                position: relative;
                width: 135px;
                bottom: 7px;
                right: 70px;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivLogIn > a {
                left: 39px;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivSignUp {
                position: relative;
                width: 135px;
                bottom: 83.5px;
                left: 50px;
            }

            #navbar > .nav > .nav-item > #navbarButtonDivSignUp > a {
                left: 39px;
            }

            #navbar > .nav {
                position: relative;
                left: 15.5%;
                top: 7px;
            }


        </style>

        <!-- Favicon and title-->
        <link rel="shortcut icon" type="image/x-icon" href="favicon.png"/>
        <title>Education for Everyone</title>
    </head>
    <body>
        <!-- Bootstrap fallback test div -->
        <div id="bootstrapCssTest" class="hidden"></div>

        <!-- Navbar -->
        <nav class="navbar navbar-fixed-top" id="navbar">
            <ul class="nav navbar-nav" id="leftNavbar">
                <!-- Home -->
                <li class="nav-item">
                    <div class="navbarButtonDiv" id="navbarButtonDivHome">
                        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                    </div>
                </li>
                <!-- About -->
                <li class="nav-item">
                    <div class="navbarButtonDiv" id="navbarButtonDivAbout">
                        <a class="nav-link" href="#about">About</a>
                    <div>
                </li>
                <!-- Search -->
                <li class="nav-item">
                    <div class="navbarButtonDiv" id="navbarButtonDivLearn">
                        <a class="nav-link" href="#learn">Learn</a>
                    </div>
                </li>
            </ul>
            <!-- Logo -->
            <a class="navbar-brand" href="#home" id="navbarBrandImg"><img src="images/edufeLogo.png" id="navbarImg"></a>
            <!-- Search -->
            <form class="navbar-form navbar-left" role="search" id="navbarForm">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="I want to learn about..." id="navbarFormSearch">
                </div>
                <button type="submit" class="btn btn-default" id="navbarFormSubmit">
                    <i class="fa fa-search" id="navbarFormSubmitFa" aria-hidden="true"></i>
                </button>
            </form>
            <ul class="nav navbar-nav" id="rightNavbar">
                <!-- Log In -->
                <li class="nav-item">
                    <div class="navbarButtonDiv" id="navbarButtonDivLogIn">
                        <a class="nav-link" href="#logIn">Log In</a>
                    </div>
                </li>
                <!-- Sign Up -->
                <li class="nav-item">
                    <div class="navbarButtonDiv" id="navbarButtonDivSignUp">
                        <a class="nav-link" href="#signUp">Sign Up</a>
                    <div>
                </li>
            </ul>
        </nav>

        <!-- Script tags -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
        <script type="text/javascript">
            // Bootstrap callback test
            if ($('#bootstrapCssTest').is(':visible') === true) {
                $('<link href="/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css" />').appendTo('head');
            }

            // Make .navbarButtonDiv go to its child 'a' tag's href on click
            $(".navbarButtonDiv").click(function() {
                window.location = $(this).find("a").attr("href");
                return false;
            });
        </script>
    </body>
</html>