選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 

202 行
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 &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>
<!-- 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>