description = "Main Menu"

[viewBag]

[staticMenu]
code = "mainmenu"
==
<style>

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .25rem !important;
        padding-left: .25rem !important;
    }

    #sidebar ul li a:hover {
        color: #7386D5;
        background-color: transparent;
        background: transparent;
        text-weight: 600;
    }

    #nav_booknow {
        padding-right: 10px;
        padding-left: 10px;
        border: solid 1px #ffffff;
        background-color: rgba(0, 0, 0, 0.3);

    }
    
    .sidebar-toggle {
    
    }
    .sidebar-toggle::before {
        content: '';
        background-image: url("/themes/ketikidis-octobercms-success/assets/images/white-icon-menu.svg");
        position: absolute;
        width: 69px;
        height: 69px;
        background-repeat: no-repeat;
        display: block;
    }
</style>

<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<nav id="sidebar" class="active">

    <div style="margin:0px auto; text-align: center;position: relative;width: 100%">
        <ul style="margin:50px 0px 40px 0px;list-style-type: none;position: absolute;
    left: 25px;">

            <li style="background: #2E2B2D; padding: 15px;color: #dedede;border-radius:8px;display: block;float: left;margin-right: 20px;width: 100px;">
                <a href="#"
                   class="icon text-center d-flex justify-content-center align-items-center icon mr-2">
                    <span class="icon icon-user"
                          style="font-size: 30px;color:grey"></span>
                </a>
            </li>

            <li style="background: #2E2B2D; padding: 15px;color: #dedede;border-radius:8px;display: block;float: left;margin-right: 20px;width: 100px;">
                <a href="#"
                   class="icon text-center d-flex justify-content-center align-items-center icon mr-2">
                    <span class="icon icon-heart"
                          style="font-size: 30px;color:grey"></span>
                </a>
            </li>

            <li style="background: #2E2B2D; padding: 15px;color: #dedede;border-radius:8px;display: block;float: left;margin-right: 20px;width: 100px;">
                <a href="#"
                   class="icon text-center d-flex justify-content-center align-items-center icon mr-2">
                    <span class="icon icon-logout"
                          style="font-size: 30px;color:grey"></span>
                </a>
            </li>
            
            <li style="background: #2E2B2D; padding: 15px;color: #dedede;border-radius:8px;display: block;float: left;margin-right: 20px;width: 100px;">
                <a href="#"
                   class="icon text-center d-flex justify-content-center align-items-center icon mr-2">
                    <span class="icon-heart"
                          style="font-size: 30px;color:#FF0068"></span>
                </a>
            </li>
            <li style="background: #2E2B2D; padding: 15px;color: #dedede;border-radius:8px;display: block;float: left;margin-right: 0px;width: 100px;">
                <a href="#"
                   class="icon text-center d-flex justify-content-center align-items-center icon mr-2">
                    <span class="icon-sign-out"
                          style="font-size: 30px;color: grey"></span>
                </a>
            </li>

        </ul>
    </div>


    <ul style="margin:250px 0px 140px 0px;list-style-type: none;">

        <li style="background: #2E2B2D; padding: 15px;color: #dedede;border-radius:8px;display: block;float: left;margin-right:0px;width:93%;">
            <form action="{{'search' | page }}" method="get">
                <div class="form-group">
                    <i class="fa fa-map-marker" aria-hidden="true">
<input type="text" name="q" class="form-control"
                           placeholder="
 Where would you like to go?"
                           style="border-bottom:1px solid grey;border-top :0px ; border-right:0px; border-left:0px; border-radius: 0px;background: none !important"></i><br/>
                    <input type="submit" value="SEARCH NOW" class=""
                           style="color:#fff;font-weight:600;background:#FF0068 !important;width:220px;border: 1px solid #FF0068; margin-left: 50px;">
                </div>
            </form>
        </li>


    </ul>

    <br>
    <div>
        <ul style="margin:190px 0px 40px 0px;list-style-type: none;">

            <li style="background: #2E2B2D; padding:0px;color: #dedede;border-radius:8px;display: block;float: left;margin:0px 20px 20px 0px;width: 110px; text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important">
                    <img src="/storage/app/media/Shape.png" width="110px">
                </a>
            </li>
            <li style="background: #2E2B2D; padding:0px;color: #dedede;border-radius:8px;display: block;float: left;margin:0px 20px 20px 0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important">
                    <img src="/storage/app/media/Shape-1.png" width="110px">
                </a>
            </li>
            <li style="background: #2E2B2D; padding:0px;color: #dedede;border-radius:8px;display: block;float: left;margin:0px 0px 20px 0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important">
                    <img src="/storage/app/media/Shape-2.png" width="110px">
                </a>
            </li>
            <br>
            <li style="color: #dedede;display: block;float: left;margin:0px 20px 20px 0px;padding:0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important"><p
                            Style="color:#ffffff;">Islands</p></a>
            </li>
            <li style="color: #dedede;display: block;float: left;margin:0px 20px 20px 0px;padding:0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important"><p
                            Style="color:#ffffff;">Our Packages</p></a>
            </li>
            <li style="color: #dedede;display: block;float: left;margin:0px 20px 20px 0px;padding:0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important"><p
                            Style="color:#ffffff;">Hotels</p></a>
            </li>
            <br>
            <li style="background: #2E2B2D; padding:0px;color: #dedede;border-radius:8px;display: block;float: left;margin:0px 20px 20px 0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important">
                    <img src="/storage/app/media/Shape-3.png" width="110px">
                </a>
            </li>
            <li style="background: #2E2B2D; padding:0px;color: #dedede;border-radius:8px;display: block;float: left;margin:0px 20px 20px 0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important">
                    <img src="/storage/app/media/Shape-4.png" width="110px">
                </a>
            </li>

            <li style="background: #2E2B2D; padding:0px;color: #dedede;border-radius:8px;display: block;float: left;margin:0px 0px 20px 0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important">
                    <img src="/storage/app/media/Shape-5.png" width="110px">
                </a>
            </li>
            <br>
            <li style="color: #dedede;display: block;float: left;margin:0px 20px 20px 0px;padding:0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important"><p
                            Style="color:#ffffff;">Activites</p></a>
            </li>
            <li style="color: #dedede;display: block;float: left;margin:0px 20px 20px 0px;padding:0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important"><p
                            Style="color:#ffffff;">Events</p></a>
            </li>
            <li style="color: #dedede;display: block;float: left;margin:0px 20px 20px 0px;padding:0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important "><p
                            Style="color:#ffffff;">Be Inspired</p></a>
            </li>
            <br>
            <li style="background: #2E2B2D; padding:0px;color: #dedede;border-radius:8px;display: block;float: left;margin:0px 20px 20px 0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important">
                    <img src="/storage/app/media/Shape-6.png" width="110px">
                </a>
            </li>


            <li style="background: #2E2B2D; padding:0px;color: #dedede;border-radius:8px;display: block;float: left;margin:0px 20px 20px 0px;width: 110px;text-align: center;overflow: hidden;">
                <a href="#" style="padding: 0px !important">
                    <img src="/storage/app/media/Shape-7.png" width="110px">
                </a>
            </li>

            <div>
                <li style="background: #2E2B2D; padding:0px;color: #dedede;border-radius:8px;display: block;float: left;margin:0px 0px 20px 0px;width: 110px;text-align: center;overflow: hidden;">
                    <a href="#" style="padding: 0px !important">
                        <img src="/storage/app/media/Shape-8.png" width="110px">
                    </a>
                </li>
                <br>
                <li style="color: #dedede;display: block;float: left;margin:0px 20px 20px 0px;padding:0px;width: 110px;text-align: center;overflow: hidden;">
                    <a href="#" style="padding: 0px !important"><p
                                Style="color:#ffffff;">Special Offers</p></a>
                </li>
                <li style="color: #dedede;display: block;float: left;margin:0px 20px 20px 0px;padding:0px;width: 110px;text-align: center;overflow: hidden;">
                    <a href="#" style="padding: 0px !important"><p
                                Style="color:#ffffff;">Experinces</p></a>
                </li>
                <li style="color: #dedede;display: block;float: left;margin:0px 20px 20px 0px;padding:0px;width: 110px;text-align: center;overflow: hidden;">
                    <a href="#" style="padding: 0px !important"><p
                                Style="color:#ffffff;">Book Now</p></a>
                </li>


        </ul>
    </div>


</nav>
<div id="content-k2">

    <nav class="navbar navbar-expand-lg ftco_navbar bg-dark ftco-navbar-light">
        <div class="container-fluid px-md-4 ">
            <button type="button" id="sidebarCollapse" class="btn"
                    style="color:#fff;">
                <span class="sidebar-toggle">MENU</span>
            </button>
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#ftco-nav" aria-controls="ftco-nav"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="oi oi-menu"></span> Menu
            </button>

            <div class="collapse navbar-collapse" id="nav-left">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item cta mr-md-1">&nbsp;</li>
                    <li class="nav-item cta cta-colored">&nbsp;</li>

                </ul>
            </div>


            <a class="navbar-brand mx-auto" href="#" style="text-align:center;">
                <div id="logo"><a class="navbar-brand" href="index.html">
                        <img style="margin-top:10px;"
                             src="/themes/ketikidis-octobercms-success/assets/images/white-logo.svg"
                             alt="carribean tours and travels"
                             width="300px"></a>
                </div>
            </a>

            <div class="collapse navbar-collapse" id="ftco-nav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item cta mr-md-1"><a href="#"
                                                        class="nav-link"
                                                        id="nav_booknow">BOOK
                            NOW</a></li>
                    <li class="nav-item cta mr-md-1"><a href="#"
                                                        class="nav-link"><i
                                    class="far fa-user-circle"
                                    data-toggle="tooltip"
                                    title="Account"></i></a></li>
                    <li class="nav-item cta mr-md-1"><a href="#"
                                                        class="nav-link"><i
                                    class="fas fa-heart" data-toggle="tooltip"
                                    title="WishList" style="color:red;"></i></a>
                    </li>
                    <li class="nav-item cta mr-md-1"><a href="#"
                                                        class="nav-link"><i
                                    class="fas fa-user-plus"
                                    data-toggle="tooltip"
                                    title="Sign Up"></i></a></li>
                    <li class="nav-item cta mr-md-1"><a href="#"
                                                        class="nav-link"><i
                                    class="fas fa-sign-in-alt"
                                    data-toggle="tooltip"
                                    title="Sign In"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- END nav -->