Websites
/
Haazen
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
2 Branches
12 MiB
Tree: ad532bbed5
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ad532bbed5'
${ noResults }
Haazen/contact.html

201 lines
8.4 KiB
Raw Normal View History

First commit of new site
6 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  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. 

  20. <body>
  21. 

  22. <div class="super_container">
  23. 	
  24. 	<!-- Header -->
  25. 

  26. 	<header class="header d-flex flex-row justify-content-end align-items-center">
  27. 

  28. 		<!-- Logo -->
  29. 		<div class="logo_container mr-auto">
  30. 			<div class="logo">
  31. 				<a href="/"><img src='images/logo.png' alt="Haazen"></a>
  32. 			</div>
  33. 		</div>
  34. 

  35. 		<!-- Main Navigation -->
  36. 		<nav class="main_nav justify-self-end">
  37. 			<ul class="nav_items">
  38. 				<li><a href="/"><span>home</span></a></li>
  39. 				<li class="active"><a href="contact"><span>contact</span></a></li>
  40. 			</ul>
  41. 		</nav>
  42. 

  43. 		<!-- Hamburger -->
  44. 		<div class="hamburger_container">
  45. 			<span class="hamburger_text">Menu</span>
  46. 			<span class="hamburger_icon"></span>
  47. 		</div>
  48. 

  49. 	</header>
  50. 

  51. 	<!-- Menu -->
  52. 

  53. 	<div class="fs_menu_overlay"></div>
  54. 	<div class="fs_menu_container">
  55. 		<div class="fs_menu_shapes"><img src="images/menu_shapes.png" alt=""></div>
  56. 		<nav class="fs_menu_nav">
  57. 			<ul class="fs_menu_list">
  58. 				<li><a href="/"><span><span>H</span>Home</span></a></li>
  59. 				<li><a href="contact"><span><span>C</span>Contact</span></a></li>
  60. 			</ul>
  61. 		</nav>
  62. 		<div class="fs_social_container d-flex flex-row justify-content-end align-items-center">
  63. 			<ul class="fs_social">
  64.                 <li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
  65.                 <li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
  66.                 <li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
  67.                 <li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
  68.                 <li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  69.                 <li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
  70. 			</ul>
  71. 		</div>
  72. 	</div>
  73. 

  74. 	<!-- Home -->
  75. 

  76. 	<div class="home prlx_parent">
  77. 

  78. 		<!-- Parallax Background -->
  79. 		<div class="home_background_half prlx" style="background-image:url(images/blog_background.jpg)"></div>
  80. 		<div class="services_page_shapes" style="background-image:url(images/services_page_shapes.png)"></div>
  81. 

  82. 		<div class="container">
  83. 			<div class="row">
  84. 				<div class="col-lg-6">
  85. 					<div class="home_content">
  86. 						<h1>Contact</h1>
  87. 						<span>get in touch</span>
  88. 					</div>
  89. 				</div>
  90. 			</div>
  91. 		</div>
  92. 	</div>
  93. 	<div class="home_social_container d-flex flex-row justify-content-end align-items-center">
  94. 		<ul class="home_social">
  95.             <li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
  96. 			<li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
  97. 			<li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
  98. 			<li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
  99. 			<li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  100. 			<li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
  101. 		</ul>
  102. 	</div>	
  103. 

  104. 	<!-- Contact Content -->
  105. 

  106. 	<div class="contact_content">
  107. 		
  108. 		<div class="container">
  109. 			<div class="row">
  110. 				
  111. 				<div class="col-lg-8">
  112. 					<div class="contact_main_content">
  113. 

  114. 						<div class="contact_subtitle">contact us</div>
  115. 						
  116. 						<!-- Contact Us Form -->
  117. 						<div class="contact_form_container">
  118. 							<form id="reply_form" action="https://formspree.io/marcel@haazen.xyz" method="post">
  119. 								<div>
  120. 									<input id="contact_form_name" class="input_field contact_form_name" name="name" type="text" placeholder="Name" required="required" data-error="Name is required.">
  121. 									<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.">
  122. 									<input id="contact_form_subject" class="input_field contact_form_subject" name="_subject" type="text" placeholder="Subject" required="required" data-error="Subject is required.">
  123. 									<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>
  124. 								</div>
  125. 								<div>
  126. 									<button id="contact_form_submit" type="submit" class="contact_submit_btn trans_300">
  127. 										send<img src="images/arrow_right.svg" alt="">
  128. 									</button>
  129. 								</div>
  130. 

  131. 							</form>
  132. 						</div>
  133. 

  134. 					</div>
  135. 				</div>
  136. 				
  137. 				<!-- Sidebar -->
  138. 				<div class="col-lg-4">
  139. 					<div class="contact_sidebar">
  140. 						
  141. 						<!-- Contact Info -->
  142. 						<div class="sidebar_section">
  143. 							<div class="sidebar_contact_info">
  144. 								<div class="sidebar_title">contact info</div>
  145. 								<ul>
  146. 									<li><script>gen_mail_to_link('marcel','haazen.xyz');</script></li>
  147. 								</ul>
  148. 							</div>
  149. 						</div>
  150. 

  151. 					</div>
  152. 				</div>
  153. 

  154. 			</div>
  155. 		</div>
  156. 	</div>
  157. 

  158. 

  159. 	<!-- Footer -->
  160. 

  161. 	<footer class="footer">
  162. 		<div class="container">
  163. 			<div class="row footer_content d-flex flex-sm-row flex-column align-items-center">
  164. 				<div class="col-sm-9 cr text-sm-left text-center">
  165. 					<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  166. 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>
  167. <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
  168. 				</div>
  169. 				<div class="col-sm-3 text-sm-right text-center">
  170. 					<div class="footer_social_container">
  171. 						<ul class="footer_social">
  172. 			             <li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
  173. 			             <li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
  174. 			             <li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
  175. 			             <li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
  176. 			             <li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  177.                          <li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
  178. 						</ul>
  179. 					</div>
  180. 				</div>
  181. 			</div>
  182. 		</div>
  183. 	</footer>
  184. 

  185. </div>
  186. 

  187. <script src="js/jquery-3.2.1.min.js"></script>
  188. <script src="styles/bootstrap4/popper.js"></script>
  189. <script src="styles/bootstrap4/bootstrap.min.js"></script>
  190. <script src="plugins/greensock/TweenMax.min.js"></script>
  191. <script src="plugins/greensock/TimelineMax.min.js"></script>
  192. <script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
  193. <script src="plugins/greensock/animation.gsap.min.js"></script>
  194. <script src="plugins/greensock/ScrollToPlugin.min.js"></script>
  195. <script src="plugins/progressbar/progressbar.min.js"></script>
  196. <script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
  197. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCIwF204lFZg1y4kPSIhKaHEXMLYxxuMhA"></script>
  198. <script src="plugins/easing/easing.js"></script>
  199. <script src="js/contact_custom.js"></script>
  200. </body>
  201. 

  202. </html>