Untitled

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Assignment1.Site" %>

<!DOCTYPE html>

<html>
<head runat="server">

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

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="/Content/bootstrap.css" rel="stylesheet"/>

    <script src="/Scripts/jquery-3.3.1.js"></script>
    <script src="/Scripts/bootstrap.js"></script>

    <title><%: Page.Title %></title>

    <style type="text/css">

        #navbar1
        {
            padding: 0px 7px 0px 7px;
            background-color: #000000;
            height: 40px;
        }

        #ulNav1 li a
        {
            display: block;
            color: white;
            text-align: center;
            padding: 9px 12px;
            text-decoration: none;
            font-size: 87%;
            font-style: inherit
        }

        #navbar1 a:hover
        {
           background-color: #787878 !important;
        }

        #navbar2
        {
            padding: 0px 2px 0px 2px;
            background-color: #FFFFFF;
            height: 75px;
        }

        img
        {
            width: 120px;
            height: 19px;
        }

        #navbar2 li a
        {
            display: block;
            color: #333333;
            text-align: center;
            padding: 0px 22px;
            text-decoration: none;
            font-size: 105%;
            font-style: initial
        }

        #linkBike
        {
            padding-left: 0px !important;
            padding-right: 20px !important;
        }

        #navbar2 a:hover
        {
           color: #d52020 !important;
        }

        #linkSale, #linkLocation
        {
            font-weight:bold;
            color: #d52020 !important;
        }

        #linkLocation
        {
            padding-left: 0px !important;
        }

        #linkSale
        {
            margin-right: 23px !important;
        }

        #searchBox{
            border: 0;
            outline: 0;
            border-bottom: 2px solid black;
        }

        .containerSearch {
          display: flex;
          width: 100%;
        }

        /* Style the form icons */
        span.icon {
          padding: 0px;
          color: black;
          min-width: 20px;
          text-align: center;
          border-bottom: 2px solid black;
          font-size: 98%;
        }

        /* Style the input fields */
        .nav-fill.search.square{
          width: 75%;
          outline: none;
          font-size: 105%;
        }

    </style>

    <asp:ContentPlaceHolder ID="CPhead" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-expand-lg" id = "navbar1">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="nav navbar-nav ml-auto" id="ulNav1">
                    <li class="nav-item">
                        <a class="nav-link" href="#">ABOUT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">CONTACT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">BLOG</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-fw fa-user"></i>MY ACCOUNT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-fw fa-shopping-cart"></i> CART</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">RETAILER LOGIN</a>
                    </li>
                </ul>
            </div>
        </nav>

        <nav class="navbar navbar-expand-lg" id="navbar2">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar1">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar1">
                <a class="navbar-brand" href="#"><img src="Logo/johnson.png"></a>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="linkBike">BIKES</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">TREADMILLS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ROWERS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ELLIPTICALS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" >STRENGTH</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#" id="linkSale">SALE</a>
                    </li>
                    <li class="nav-item">
                        <div class="containerSearch">
                            <span class="icon"><i class="fa fa-search"></i></span>
                            <input id="searchBox" class="nav-fill search square" type="text" placeholder=" PRODUCT SEARCH"/>
                        </div>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#" id="linkLocation">LOCATE A STORE</a>
                    </li>
                </ul>
            </div>
        </nav>
        <main>
            <asp:ContentPlaceHolder ID="CPBody" runat="server">
            </asp:ContentPlaceHolder>
        </main>

        <footer class="text-center">
        </footer>
    </form>
</body>
</html>