<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Metro Security Services - Contact Us</title>
    <meta property="og:title" content="Metro Security Services - Contact US"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <meta name="HandheldFriendly" content="true">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#000000">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-navbutton-color" content="#000000">
    <meta name="description" content="Securing your assets better than anyone else can."/>
    <meta property="og:description" content="Securing your assets better than anyone else can."/>
    <meta name="keywords" content="security, military, cyber, physical">
    <meta property="og:image" content="https://mweya.duckdns.org/styles/extra/300px.png"/>
    <meta property="og:image:width" content="300" />
    <meta property="og:image:height" content="300" />
    <meta name="author" content="Mweya Ruider, Johnathan Langford, Denzel Similo, Shakeel Hoosain">
    <!-- All images used in this project have been licensed under the Creative Commons license and have been found on pexels.com or kisspng.com -->
</head>
<body onmousemove='trackmouse(event)' id="contactPage">
        <noscript>
        <div id="alert">
            <h1>Don't do that!</h1>
            <p>For this site to function properly, we need to be able to use JavaScript to make our menus look and act great.<br>Please turn it back on before reloading this page.</p>
        </div>
    </noscript>
    <section id="sidebar">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="civilian.html">Civilian Services</a></li>
                    <li><a href="military.html">Military Services</a></li>
                    <li><a href="cyber.html">Cyber Services</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="careers.html">Join Us</a></li>
                </ul>
            </nav>
        </section>
        <div class="wrapper2">
        <section id="main">
            <div id="splashpage2">
            <header><h1>Contact Us</h1></header>
        </div>
            <div class="p1" id="offer">
                <h2>Send us an email</h2>
                <form action="">
                <div id="inputs">
                <div>
                    <div id="wr2">
                <img src="img/user.png" alt="This is a picture of a user.">
                <input type="text" placeholder="Awesome site!"><br>
                <input type="text" placeholder="John Doe"><br>
                <input type="email" placeholder="example@example.com">
                <input type="submit" value="Send Email">
            </div>
                <br>
                <textarea placeholder="Dear MSS, I've recently come into the posession of a rather substantial amount of money, but I cannot use it until I transfer it out of the country and back into it due to the fact that there is a civil war happening in my back garden. If you would be so kind as to give me your banking details..."></textarea>
            </div>
        </form>
            </div>
            </div>
        </section>
        </div>
        <footer id="footer">
                <ul><li><a href="#"><img src="img/fb.png" alt="Facebook"></a></li><li><a href="#"><img src="img/tw.png" alt="Twitter"></a></li><li><a href="#"><img alt="LinkedIn" src="img/li.png"></a></li></ul>
            </footer>
        </div>
    </body>
    </html>