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.
202 lines
8.4 KiB
202 lines
8.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Haazen | Contact</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
|
|
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
|
|
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
|
|
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
|
|
<link href="plugins/colorbox/colorbox.css" rel="stylesheet" type="text/css">
|
|
<link rel="stylesheet" type="text/css" href="styles/contact_styles.css">
|
|
<link rel="stylesheet" type="text/css" href="styles/contact_responsive.css">
|
|
<script src="js/email.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="super_container">
|
|
|
|
<!-- Header -->
|
|
|
|
<header class="header d-flex flex-row justify-content-end align-items-center">
|
|
|
|
<!-- Logo -->
|
|
<div class="logo_container mr-auto">
|
|
<div class="logo">
|
|
<a href="/"><img src='images/logo.png' alt="Haazen"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Navigation -->
|
|
<nav class="main_nav justify-self-end">
|
|
<ul class="nav_items">
|
|
<li><a href="/"><span>home</span></a></li>
|
|
<li class="active"><a href="contact"><span>contact</span></a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Hamburger -->
|
|
<div class="hamburger_container">
|
|
<span class="hamburger_text">Menu</span>
|
|
<span class="hamburger_icon"></span>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<!-- Menu -->
|
|
|
|
<div class="fs_menu_overlay"></div>
|
|
<div class="fs_menu_container">
|
|
<div class="fs_menu_shapes"><img src="images/menu_shapes.png" alt=""></div>
|
|
<nav class="fs_menu_nav">
|
|
<ul class="fs_menu_list">
|
|
<li><a href="/"><span><span>H</span>Home</span></a></li>
|
|
<li><a href="contact"><span><span>C</span>Contact</span></a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="fs_social_container d-flex flex-row justify-content-end align-items-center">
|
|
<ul class="fs_social">
|
|
<li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
|
|
<li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
|
|
<li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
|
|
<li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
|
|
<li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
|
|
<li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Home -->
|
|
|
|
<div class="home prlx_parent">
|
|
|
|
<!-- Parallax Background -->
|
|
<div class="home_background_half prlx" style="background-image:url(images/blog_background.jpg)"></div>
|
|
<div class="services_page_shapes" style="background-image:url(images/services_page_shapes.png)"></div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="home_content">
|
|
<h1>Contact</h1>
|
|
<span>get in touch</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="home_social_container d-flex flex-row justify-content-end align-items-center">
|
|
<ul class="home_social">
|
|
<li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
|
|
<li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
|
|
<li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
|
|
<li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
|
|
<li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
|
|
<li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Contact Content -->
|
|
|
|
<div class="contact_content">
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-8">
|
|
<div class="contact_main_content">
|
|
|
|
<div class="contact_subtitle">contact us</div>
|
|
|
|
<!-- Contact Us Form -->
|
|
<div class="contact_form_container">
|
|
<form id="reply_form" action="https://formspree.io/marcel@haazen.xyz" method="post">
|
|
<div>
|
|
<input id="contact_form_name" class="input_field contact_form_name" name="name" type="text" placeholder="Name" required="required" data-error="Name is required.">
|
|
<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.">
|
|
<input id="contact_form_subject" class="input_field contact_form_subject" name="_subject" type="text" placeholder="Subject" required="required" data-error="Subject is required.">
|
|
<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>
|
|
</div>
|
|
<div>
|
|
<button id="contact_form_submit" type="submit" class="contact_submit_btn trans_300">
|
|
send<img src="images/arrow_right.svg" alt="">
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<div class="contact_sidebar">
|
|
|
|
<!-- Contact Info -->
|
|
<div class="sidebar_section">
|
|
<div class="sidebar_contact_info">
|
|
<div class="sidebar_title">contact info</div>
|
|
<ul>
|
|
<li><script>gen_mail_to_link('marcel','haazen.xyz');</script></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Footer -->
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="row footer_content d-flex flex-sm-row flex-column align-items-center">
|
|
<div class="col-sm-9 cr text-sm-left text-center">
|
|
<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
|
Copyright © <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>
|
|
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
|
|
</div>
|
|
<div class="col-sm-3 text-sm-right text-center">
|
|
<div class="footer_social_container">
|
|
<ul class="footer_social">
|
|
<li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
|
|
<li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
|
|
<li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
|
|
<li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
|
|
<li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
|
|
<li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="js/jquery-3.2.1.min.js"></script>
|
|
<script src="styles/bootstrap4/popper.js"></script>
|
|
<script src="styles/bootstrap4/bootstrap.min.js"></script>
|
|
<script src="plugins/greensock/TweenMax.min.js"></script>
|
|
<script src="plugins/greensock/TimelineMax.min.js"></script>
|
|
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
|
|
<script src="plugins/greensock/animation.gsap.min.js"></script>
|
|
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
|
|
<script src="plugins/progressbar/progressbar.min.js"></script>
|
|
<script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCIwF204lFZg1y4kPSIhKaHEXMLYxxuMhA"></script>
|
|
<script src="plugins/easing/easing.js"></script>
|
|
<script src="js/contact_custom.js"></script>
|
|
</body>
|
|
|
|
</html>
|