No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

201 líneas
8.4 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Haazen | Contact</title>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="description" content="">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
  10. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
  11. <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
  12. <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
  13. <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
  14. <link href="plugins/colorbox/colorbox.css" rel="stylesheet" type="text/css">
  15. <link rel="stylesheet" type="text/css" href="styles/contact_styles.css">
  16. <link rel="stylesheet" type="text/css" href="styles/contact_responsive.css">
  17. <script src="js/email.js"></script>
  18. </head>
  19. <body>
  20. <div class="super_container">
  21. <!-- Header -->
  22. <header class="header d-flex flex-row justify-content-end align-items-center">
  23. <!-- Logo -->
  24. <div class="logo_container mr-auto">
  25. <div class="logo">
  26. <a href="/"><img src='images/logo.png' alt="Haazen"></a>
  27. </div>
  28. </div>
  29. <!-- Main Navigation -->
  30. <nav class="main_nav justify-self-end">
  31. <ul class="nav_items">
  32. <li><a href="/"><span>home</span></a></li>
  33. <li class="active"><a href="contact"><span>contact</span></a></li>
  34. </ul>
  35. </nav>
  36. <!-- Hamburger -->
  37. <div class="hamburger_container">
  38. <span class="hamburger_text">Menu</span>
  39. <span class="hamburger_icon"></span>
  40. </div>
  41. </header>
  42. <!-- Menu -->
  43. <div class="fs_menu_overlay"></div>
  44. <div class="fs_menu_container">
  45. <div class="fs_menu_shapes"><img src="images/menu_shapes.png" alt=""></div>
  46. <nav class="fs_menu_nav">
  47. <ul class="fs_menu_list">
  48. <li><a href="/"><span><span>H</span>Home</span></a></li>
  49. <li><a href="contact"><span><span>C</span>Contact</span></a></li>
  50. </ul>
  51. </nav>
  52. <div class="fs_social_container d-flex flex-row justify-content-end align-items-center">
  53. <ul class="fs_social">
  54. <li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
  55. <li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
  56. <li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
  57. <li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
  58. <li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  59. <li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
  60. </ul>
  61. </div>
  62. </div>
  63. <!-- Home -->
  64. <div class="home prlx_parent">
  65. <!-- Parallax Background -->
  66. <div class="home_background_half prlx" style="background-image:url(images/blog_background.jpg)"></div>
  67. <div class="services_page_shapes" style="background-image:url(images/services_page_shapes.png)"></div>
  68. <div class="container">
  69. <div class="row">
  70. <div class="col-lg-6">
  71. <div class="home_content">
  72. <h1>Contact</h1>
  73. <span>get in touch</span>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="home_social_container d-flex flex-row justify-content-end align-items-center">
  80. <ul class="home_social">
  81. <li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
  82. <li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
  83. <li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
  84. <li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
  85. <li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  86. <li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
  87. </ul>
  88. </div>
  89. <!-- Contact Content -->
  90. <div class="contact_content">
  91. <div class="container">
  92. <div class="row">
  93. <div class="col-lg-8">
  94. <div class="contact_main_content">
  95. <div class="contact_subtitle">contact us</div>
  96. <!-- Contact Us Form -->
  97. <div class="contact_form_container">
  98. <form id="reply_form" action="https://formspree.io/marcel@haazen.xyz" method="post">
  99. <div>
  100. <input id="contact_form_name" class="input_field contact_form_name" name="name" type="text" placeholder="Name" required="required" data-error="Name is required.">
  101. <input id="contact_form_email" class="input_field contact_form_email" name="_replyto" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
  102. <input id="contact_form_subject" class="input_field contact_form_subject" name="_subject" type="text" placeholder="Subject" required="required" data-error="Subject is required.">
  103. <textarea id="contact_form_message" class="text_field contact_form_message" name="message" name="message" placeholder="Message" rows="4" required data-error="Please, write us a message."></textarea>
  104. </div>
  105. <div>
  106. <button id="contact_form_submit" type="submit" class="contact_submit_btn trans_300">
  107. send<img src="images/arrow_right.svg" alt="">
  108. </button>
  109. </div>
  110. </form>
  111. </div>
  112. </div>
  113. </div>
  114. <!-- Sidebar -->
  115. <div class="col-lg-4">
  116. <div class="contact_sidebar">
  117. <!-- Contact Info -->
  118. <div class="sidebar_section">
  119. <div class="sidebar_contact_info">
  120. <div class="sidebar_title">contact info</div>
  121. <ul>
  122. <li><script>gen_mail_to_link('marcel','haazen.xyz');</script></li>
  123. </ul>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <!-- Footer -->
  132. <footer class="footer">
  133. <div class="container">
  134. <div class="row footer_content d-flex flex-sm-row flex-column align-items-center">
  135. <div class="col-sm-9 cr text-sm-left text-center">
  136. <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  137. Copyright &copy; <script>document.write(new Date().getFullYear());</script> All rights reserved | template by <a href="https://colorlib.com" target="_blank">Colorlib</a> | Logo by <a href="https://www.pmlogos.com" target="_blank">PMLogos</a>
  138. <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
  139. </div>
  140. <div class="col-sm-3 text-sm-right text-center">
  141. <div class="footer_social_container">
  142. <ul class="footer_social">
  143. <li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
  144. <li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
  145. <li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
  146. <li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
  147. <li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  148. <li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
  149. </ul>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </footer>
  155. </div>
  156. <script src="js/jquery-3.2.1.min.js"></script>
  157. <script src="styles/bootstrap4/popper.js"></script>
  158. <script src="styles/bootstrap4/bootstrap.min.js"></script>
  159. <script src="plugins/greensock/TweenMax.min.js"></script>
  160. <script src="plugins/greensock/TimelineMax.min.js"></script>
  161. <script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
  162. <script src="plugins/greensock/animation.gsap.min.js"></script>
  163. <script src="plugins/greensock/ScrollToPlugin.min.js"></script>
  164. <script src="plugins/progressbar/progressbar.min.js"></script>
  165. <script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
  166. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCIwF204lFZg1y4kPSIhKaHEXMLYxxuMhA"></script>
  167. <script src="plugins/easing/easing.js"></script>
  168. <script src="js/contact_custom.js"></script>
  169. </body>
  170. </html>