<!DOCTYPE html> <html> <head> <title>Contact</title> <meta charset="utf-8" /> <link href="lib/css/bootstrap.min.css" rel="stylesheet" /> <link href="aos-master/dist/aos.css" rel="stylesheet" /> <link href="css/home.css" rel="stylesheet" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" /> <link rel="icon" href="data:;base64,iVBORw0KGgo=" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <!--Body--> <body class="bg-dark"> <video autoplay muted loop id="myVideo"> <source src="img/video2.mp4" type=video/mp4> </video> </div> <!--Nav Bar--> <nav class="navbar navbar-expand-md navbar-dark p-3"> <a class="navbar-brand mx-3" href="#"><img src="./img/example.png" width="50px" height="50px" alt="" /> [Business Name]</a> <button class="navbar-toggler mx-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarContent"> <ul class="navbar-nav m-auto"> <!--Home--> <li class="nav-item ms-3"> <a class="nav-link me-2" href="./index.html">Home</a> </li> <!--Our Services--> <li class="nav-item dropdown ms-3"> <a class="nav-link dropdown-toggle me-2" href="./services.html" id="navbarDarkDropdownMenuLink" aria-expanded="false"> Our Services </a> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink"> <li><a class="dropdown-item" href="./services.html#item-1">Website Design & SEO</a></li> <li><a class="dropdown-item" href="./services.html#item-2">Social Media Management</a></li> <li><a class="dropdown-item" href="./services.html#item-3">Pay-Per-Click (PPC) Advertisement</a></li> <li><a class="dropdown-item" href="./services.html#item-4">Email Marketing</a></li> </ul> </li> <!--About Us--> <li class="nav-item ms-3"> <a class="nav-link me-2" href="./about.html">About Us</a> </li> <!--Contact--> <li class="nav-item ms-3"> <a class="nav-link active me-2" href="./contact.html">Contact</a> </li> </ul> <!--Darkmode Switch--> <label class="switch ms-3"> <input type="checkbox" class="checker" id="lightSwitch" /> <span class="slider round"></span> </label> </div> </nav> <div class="row col-8 m-auto mt-5 mb-4"> <h3 class="col-7 text-white">Our Headquarters</h3> <h3 class="col-5 text-white">Contact Information</h3> </div> <div class="row col-8 m-auto"> <div class="col-7"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2918.4223684348012!2d-81.31054198484331!3d42.99044010305112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882ef02538ba8b79%3A0xcc6dd96c9dd25364!2s1020%20Roulston%20Cres%2C%20London%2C%20ON%20N6H%200E8!5e0!3m2!1sen!2sca!4v1672178100216!5m2!1sen!2sca" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" width="400" height="300" class="rounded"></iframe><!--width="400" height="300"--> </div> <div class="col-5"> <p1>Address: 1020 Roulston Crescent, London ON, Canada N6H 0E8 <br><br>Email: <a href="mailto:efahmy111@gmail.com">efahmy111@gmail.com</a><br><br>Phone: <a href="tel:2265596995">+1 (226) 559-6995</a></p1> </div> </div> <div class="row"><h3 class="m-auto mt-5 mb-2 text-center text-white">Contact Us</h3></div> <form id="contact-form"> <div class="form-group col-8 col-md-4 m-auto"> <label for="fullName" class="text-white">Full Name</label> <input type="text" class="form-control bg-dark text-white" id="fullName" name="Full Name" placeholder="Enter your full name"> </div> <div class="form-group col-8 col-md-4 m-auto"> <label for="businessName" class="text-white mt-1">Business Name</label> <input type="text" class="form-control bg-dark text-white" id="businessName" name="Business Name" placeholder="Enter your business name"> </div> <div class="form-group col-8 col-md-4 m-auto"> <label for="email" class="text-white mt-1">Email</label> <input type="email" class="form-control bg-dark text-white" id="email" name="Email" placeholder="Enter your email address"> </div> <div class="form-group col-8 col-md-4 m-auto"> <label for="phoneNumber" class="text-white mt-1">Phone Number</label> <input type="tel" class="form-control bg-dark text-white" id="phoneNumber" name="Phone Number" placeholder="Enter your phone number"> </div> <div class="form-group col-8 col-md-4 m-auto"> <label for="note" class="text-white mt-1">Message</label> <textarea class="form-control bg-dark text-white" id="note" name="Message" rows="3"></textarea> </div> <div class="row"><button type="submit" class="btn btn-primary col-4 col-md-2 m-auto mt-3">Submit</button></div> </form> <div class="row mt-3"><p1 class="col-8 col-md-4 text-center m-auto" id="status"></p1></div> <!-- Footer --> <footer class="text-center text-white"> <!-- Copyright --> <div class="text-center p-3 mt-5" style="background-color: rgba(0, 0, 0, 0.2)"> © 2022 Copyright: <a class="text-white" href="#">[Business Name].com</a> </div> </footer> <!--JQuery and Bootstrap Script Tags--> <script src="lib/js/jquery.min.js"></script> <script src="lib/js/bootstrap.min.js"></script> <script src="aos-master/dist/aos.js "></script> <script src="js/contact.js"></script> <script> AOS.init(); </script> </body> </html>