contact.html

﻿<!DOCTYPE html>
<html lang="en">
  
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SkyChapuller</title>

    <!-- font-awesome -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if IE 7]>
    <link href="css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- custom CSS -->
    <link href="css/style.css" rel="stylesheet">
    <!--[if lte IE 8]>
    <link href="css/ie8.css" rel="stylesheet">
    <![endif]-->
    <!--[if lte IE 7]>
    <link href="css/ie7.css" rel="stylesheet">
    <![endif]-->

    <!-- JavaScript -->
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/plugins.js"></script>
    <!--[if lte IE 7]>
    <script type="text/javascript" src="js/boxsizing/jquery.boxsizing.js"></script> 
    <![endif]-->
    <script type="text/javascript" src="js/additions.js"></script>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
      var myLatlng;
      var map;
      var marker;

      function initialize() {
        myLatlng = new google.maps.LatLng(39.95984535388306, 32.78744973356878);

        var mapOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false,
          draggable: false
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var contentString = '<p style="line-height: 20px;"><strong>SkyChapuller HQ</strong></p><p>Demetlale Mah. Prof. Dr. Turan Guven Cd. Yenimahalle Ankara 06200</p>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Marker'
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>

  <body>

    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="index.html">SkyChapuller</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Portfolio <i class="fa fa-angle-down"></i></a>
              <ul class="dropdown-menu">
                <li><a href="portfolio-1-col.html">1 Column Portfolio</a></li>
                <li><a href="portfolio-2-col.html">2 Column Portfolio</a></li>
                <li><a href="portfolio-3-col.html">3 Column Portfolio</a></li>
                <li><a href="portfolio-item.html">Single Portfolio Item</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Blog <i class="fa fa-angle-down"></i></a>
              <ul class="dropdown-menu">
                <li><a href="blog-home-1.html">Blog Home</a></li>
                <li><a href="blog-post.html">Blog Post</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Other Pages <i class="fa fa-angle-down"></i></a>
              <ul class="dropdown-menu">
                <li><a href="full-width.html">Full Width Page</a></li>
                <li><a href="sidebar.html">Sidebar Page</a></li>
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="404.html">404</a></li>
              </ul>
            </li>
            <li class="active"><a href="contact.html">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>


    <div id="map-canvas" class="carousel"></div>

    <div class="section">

      <div class="container">

        <div class="row">

          <div class="col-sm-8">
            <h3>Contact</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla ante sed lacus ultricies, quis facilisis eros scelerisque. Donec ut elit lacus.</p>

              <form role="form" method="POST" action="#">
                <div class="row">
                  <div class="form-group col-md-12">
                    <label for="input1">Name</label>
                    <input type="text" name="contact_name" class="form-control" id="input1">
                  </div>
                  <div class="form-group col-md-12">
                    <label for="input2">Email Address</label>
                    <input type="email" name="contact_email" class="form-control" id="input2">
                  </div>
                  <div class="form-group col-md-12">
                    <label for="input3">Phone Number</label>
                    <input type="phone" name="contact_phone" class="form-control" id="input3">
                  </div>
                  <div class="clearfix"></div>
                  <div class="form-group col-lg-12">
                    <label for="input4">Message</label>
                    <textarea name="contact_message" class="form-control" rows="6" id="input4"></textarea>
                  </div>
                  <div class="form-group col-lg-12">
                    <input type="hidden" name="save" value="contact">
                    <button type="submit" class="btn btn-primary pull-right">Submit</button>
                    <div class="clearfix"></div>
                  </div>
                </div>
              </form>
          </div>

          <div class="col-sm-4">
            <h3>Address</h3>
            <h4>SkyChapuller HQ</h4>
            <p>
              <i class="fa fa-map-marker"></i> Demetlale Mah. Prof. Dr. Turan Guven Cd. Yenimahalle Ankara 06200
            </p>
            <p><i class="fa fa-phone"></i> +90(537) 686 23 24</p>
            <p><i class="fa fa-envelope"></i> <a href="mailto:ozturkistemihan@gmail.com">ozturkistemihan@gmail.com</a></p>
            <p><i class="fa fa-clock-o"></i> Monday - Friday: 9:00 AM to 5:00 PM</p>
          </div>

        </div><!-- /.row -->

      </div><!-- /.container -->

    </div><!-- /.section -->

    
    <footer>
      <div class="container">

        <div class="row">
          <div class="col-lg-3 col-md-3">
            <a class="footer-brand" href="index.html">SkyChapuller</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar quam sed consequat adipiscing. Sed est quam, pretium a vestibulum vel, aliquam vitae eros.</p>
            <ul class="list-inline list-unstyled social-networks">
              <li>
                <a href="https://www.facebook.com/declarck">
                  <div class="icon-social icon-social-facebook normal">
                    <i class="fa fa-facebook"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-facebook"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="https://twitter.com/declarck">
                  <div class="icon-social icon-social-twitter normal">
                    <i class="fa fa-twitter"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-twitter"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="https://www.instagram.com/skychapuller/">
                  <div class="icon-social icon-social-instagram normal">
                    <i class="fa fa-instagram"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-instagram"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="https://www.youtube.com/channel/UCAjUdQo0gCIoIskTISvpByQ">
                  <div class="icon-social icon-social-youtube normal">
                    <i class="fa fa-youtube-play"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-youtube-play"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="https://www.linkedin.com/in/ahmet-istemihan-ozturk/">
                  <div class="icon-social icon-social-linkedin normal">
                    <i class="fa fa-linkedin"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-linkedin"></i>
                  </div>
                </a>
              </li>

              <li>
                <a href="https://pinterest.com/declarck/">
                  <div class="icon-social icon-social-pinterest normal">
                    <i class="fa fa-pinterest"></i>
                  </div>
                  <div class="icon-social hover">
                    <i class="fa fa-pinterest"></i>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-3">
            <h3>CONTACT</h3>
            <address>
              <i class="fa fa-map-marker"></i> Demetlale Mah. Prof. Dr. Turan Guven Cd. Yenimahalle Ankara 06200<br>
              <i class="fa fa-phone"></i> +90(537) 686 23 24<br>
              <i class="fa fa-envelope"></i> ozturkistemihan@gmail.com
            </address>
          </div>
          
          <div class="col-lg-3 col-md-3">
            <h3>LATEST TWEETS</h3>
            <ul class="latest-tweets">
              <li>
                <i class="fa fa-twitter"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar quam sed consequat adipiscing
              </li>
              <li>
                <i class="fa fa-twitter"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar quam sed consequat adipiscing
              </li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-3">
            <h3>NEWSLETTER</h3>
            <p>Type your email address below and subscribe to our newsletter</p>
            <div class="input-group">
              <input type="text" placeholder="Email" class="form-control">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button">Go!</button>
              </span>
            </div><!-- /input-group -->
          </div>
        </div><!-- /.row -->

      </div><!-- /.container -->
    </footer>

    <div class="footer-after">
      <div class="container">
        <div class="row">
          <p class="col-md-10">Free to use website template designed by Ahmet İstemihan Öztürk.</p>
          <p class="col-md-2 legal"><a href="#" rel="nofollow">Legal Notice</a></p>
        </div><!-- /.row -->
      </div>
    </div>
    
    <!-- Switcher -->
    <!-- 
    <script type="text/javascript" src="js/switcher/switcher.js"></script>
    <link href="js/switcher/switcher.css" rel="stylesheet">

    <div id="switcher-options">
      <a href="#" class="switcher-btn"><i class="fa fa-cog"></i></a>
      <small>Switch Theme Colour</small>
      <ul class="list-unstyled list-inline">
        <li><a href="#" class="theme-colour default" data-name="default"></a></li>
        <li><a href="#" class="theme-colour blue" data-name="blue"></a></li>
        <li><a href="#" class="theme-colour violet" data-name="violet"></a></li>
        <li><a href="#" class="theme-colour red" data-name="red"></a></li>
        <li><a href="#" class="theme-colour orange" data-name="orange"></a></li>
      </ul>
    </div>
    -->
    <!-- /Switcher -->

  </body>

</html>