Untitled

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="function.js"></script>
        <style>
            #headbar {
                display: grid;
                grid-template-columns: 65% 35%;
                height: 45px;
                margin: auto;
                position: fixed;
                width: 100%;
                background-color: #555;
                top: 0;
            }

            #inpageNav {

                display: grid;
                grid-template-columns: 5% 20% 14% 14% 14% 14% 14% 5%;

            }

            #outpageNav {
                margin-right: 20px;
                display: grid;
                grid-template-columns: 20% 40% 40%;
            }
            .navBut {
                background-color: inherit;
                border-style: none;
                color: white;
                font-size: 15px;
            }

            #cartDiv {
                padding-top: 50px;
                display: grid;
                justify-items: center;
            }

            #searchBar {
                width: 600px;
            }

            #preview {
                padding-top: 10px;
                margin: auto;
                display: grid;
                grid-template-columns: 65% 35%;
                transform: scale(0.75);
            }

            #shoeImg {
                background-color: #F0ECCB;
                width: 100%;
            }

            #shoeType {
                display: grid;
                grid-template-rows: 25% 25% 25% 25%;
            }

            #mainDiv {
                display: grid;
                grid-template-columns: 25% 75%;
            }

            #allShoeType {
                display: grid;
                grid-template-columns: 25% 25% 25% 25%;
                grid-template-rows: 50% 50%;
                height: auto;

            }
            #shoeCatagory {
                background:
            }

            #catagory, #hotShoeText {
                text-align: center;
                font-size: 20px;
            }

            .shoeTypeDiv {
                display: grid;
                grid-template-rows: 80% 20%;
                cursor: pointer;

                background-color: black;
            }

            .shoeTypeName {
                text-align: center;
                margin: auto;
                font-size: 20px;
                background-color: inherit;
                color: white;
            }

            .shoeTypeImg {
                width: 95%;
            }
        </style>
    </head>
    <body>
        <nav id="headbar">
            <div id="inpageNav">
                <div></div>
                <input type="button" class="navBut" value="Group 3" id="us">
                <input type="button" class="navBut" value="Home" id="home">
                <input type="button" class="navBut" value="Product" id="productType">
                <input type="button" class="navBut" value="Contact" id="contact">
                <input type="button" class="navBut"value="Hot trend" id="trend">
                <input type="button" class="navBut" value="About us" id="infor">
                <div></div>
            </div>

            <div id="outpageNav">
                <button id="search"  class="fa fa-search" aria-hidden="true" style="background-color: inherit; border-style: none; color: white; font-size: 15px;"></button>
                <button id="login" class="fa fa-sign-in" aria-hidden="true" style="background-color: inherit; border-style: none; color: white; font-size: 15px;">  Login</button>
                <button id="sign-up"  class="fa fa-user-circle-o" aria-hidden="true"style="background-color: inherit; border-style: none; color: white; font-size: 15px;" > Sign-up </button>
            </div>
        </nav>

        <form id="cartDiv">
            <input type="text" id="searchBar">
            <button type="submit" class="fa fa-search" aria-hidden="true" value="submit" id="searchSubmit">Browse All</button>
        </form>

        <div id="preview">
            <div id="shoePreview">
                <img src="shoe/previewShoe/nike/1.png" id="shoeImg">
            </div>

            <div id="shoeType">
                <button id="adidas" class="hotShoeTypeDiv">Adidas</button>
                <button id="nike" class="hotShoeTypeDiv">Nike</button>
                <button id="lining" class="hotShoeTypeDiv">Li-ning</button>
                <button id="timberland" class="hotShoeTypeDiv">Timberland</button>
            </div>
        </div>

        <div id="mainDiv">
            <div id="leftDiv"></div>
            <div id="rightDiv">
                <div id="shoeCatagory">
                    <p id="catagory" class="text">Catagory</p>
                </div>
                <div id="allShoeType">
                    <div id="adidasDiv" class="shoeTypeDiv">
                        <img src="logo/adidas.jpg" id="adidasImg" class="shoeTypeImg">
                        <p class="shoeTypeName">Adidas</p>
                    </div>

                    <div id="nikeDiv" class="shoeTypeDiv">
                        <img src="logo/nike.jpg" id="nikeImg" class="shoeTypeImg">
                        <p class="shoeTypeName">Nike</p>
                    </div>

                    <div id="reebokDiv" class="shoeTypeDiv">
                        <img src="logo/reebok.jpg" id="reebokImg" class="shoeTypeImg">
                        <p class="shoeTypeName">Reebok</p>
                    </div>

                    <div id="timberlandDiv" class="shoeTypeDiv">
                        <img src="logo/timberland.jpg" id="timberImg" class="shoeTypeImg">
                        <p class="shoeTypeName">Timberland</p>
                    </div>

                    <div id="vansDiv" class="shoeTypeDiv">
                        <img src="logo/vans.jpg" id="vansImg" class="shoeTypeImg">
                        <p class="shoeTypeName">Vans</p>
                    </div>

                    <div id="converseDiv" class="shoeTypeDiv">
                        <img src="logo/converse.jpg" id="converseImg" class="shoeTypeImg">
                        <p class="shoeTypeName">Converse</p>
                    </div>

                    <div id="pumaDiv" class="shoeTypeDiv">
                        <img src="logo/puma.jpg" id="pumaImg" class="shoeTypeImg">
                        <p class="shoeTypeName">Puma</p>
                    </div>

                    <div id="lacosteDiv" class="shoeTypeDiv">
                        <img src="logo/lacoste.jpg" id="lacosteImg" class="shoeTypeImg">
                        <p class="shoeTypeName">Lacoste</p>
                    </div>

                </div>

                <div id="hotShoe">
                    <div id="hotShoeText">
                        <p id="hotShoeParagraph" class="text">Hot Shoe</p>
                    </div>

                </div>


            </div>
        </div>
    </body>
</html>