accept.html

<html>
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    <!--JavaScript at end of body for optimized loading-->
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
</head>
<body class="blue-grey lighten-5">
    <nav>
        <div class="nav-wrapper grey darken-4">
            <a href="#" class="brand-logo"><h5>Requests</h5></a>
            <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#">Profile</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
            
            <ul class="sidenav" id="mobile-demo">
                <li><a href="#">Profile</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <div class="row" style="height: 5%"></div>
        <div class="row" style="overflow: auto; height: 50%">
            <div class="col s8 offset-s2 center-align">
                <a class="waves-effect waves-light btn modal-trigger white black-text" href="#modal1">Product Title</a>
                <div id="modal1" class="modal">
                    <div class="modal-content">
                        <h4>Product Title</h4>
                        <p>Product Description</p>
                    </div>
                    <div class="modal-footer">
                        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
                        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
                    </div>
                </div>
            </div>
            <div class="row" style="height: 10%"></div>
        </div>
        <div class="row" style="height: 2%"></div>
        <div class="row">
            <div class="col s12 center-align">
                <a class="waves-effect waves-light btn-small grey darken-4"><i class="material-icons left">done_outline</i>View Accepted</a>
            </div>
        </div>
        <div class="row">
            <div class="col s12 center-align">
                <a class="waves-effect waves-light btn-small grey darken-4"><i class="material-icons left">location_off</i>End Trip</a>                    
            </div>
        </div>
    </div>
</body>
</html>