master page

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Charters</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel='stylesheet' type='text/css' href='/public/css/style.css'>


    <img src="/public/img/charterlogo.png" alt="Charters" style="width:50px;height:50px;">

        <ul>


            <li><a href="/about">About Us</a></li>
            <li><a href="/news">News</a></li>
            <li><a href="/contact">Contact US</a></li>
            <li><a href="/faqs">FAQ's</a></li>
            <li><a href="/profile">My Profile</a></li>
        </ul>
       <style>
           ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #5fcae8;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #ff8533;
}

.active {
    background-color: #ff8533;
}
</style>

    </head>
    <body>
     <div class = "container">
    @yield('content')
</div>

<div class="content">

    </div>


    </body>
</html>