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
Branch: new
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'new'
${ noResults }
Haazen/index.html

218 lines
9.3 KiB
Raw Permalink Normal View History

First commit of new site
6 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Haazen | Home</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 rel="stylesheet" type="text/css" href="styles/main_styles.css">
  15. <link rel="stylesheet" type="text/css" href="styles/responsive.css">
  16. </head>
  17. 

  18. <body>
  19. 

  20. <div class="super_container">
  21. 	
  22. 	<!-- Header -->
  23. 

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

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

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

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

  47. 	</header>
  48. 

  49. 	<!-- Menu -->
  50. 

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

  72. 	<!-- Hero Slider -->
  73. 	
  74. 	<div class="home">
  75. 		<div class="hero_slider_container slider_prlx">
  76. 			<div class="owl-carousel owl-theme hero_slider">
  77. 

  78. 				<!-- Slider Item -->
  79. 				<div class="owl-item main_slider_item">
  80. 					<div class="main_slider_item_bg" style="background-image:linear-gradient( rgba(32,32,32,0.5), rgba(32,32,32,0.5) ), url(images/racks.jpg);)"></div>
  81. 					<div class="container">
  82. 						<div class="row">
  83. 							<div class="col slider_content_col">
  84. 								<div class="main_slider_content">
  85. 									<h1>How well do you</h1>
  86. 									<h1>know your <span>infrastructure</span>?</h1>
  87. 									<p>A running infrastucture can always be improved and needs to stay managed to make sure it stays in top state. </p>
  88. 									<div class="button discover_button">
  89. 										<a href="#" class="d-flex flex-row align-items-center justify-content-center">discover<img src="images/arrow_right.svg" alt=""></a>
  90. 									</div>
  91. 								</div>
  92. 							</div>
  93. 						</div>
  94. 					</div>
  95. 				</div>
  96. 			</div>
  97. 	</div>
  98. 

  99. 	<div class="home_social_container d-flex flex-row justify-content-end align-items-center">
  100. 		<ul class="home_social">
  101. 			<li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
  102. 			<li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
  103. 			<li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
  104. 			<li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
  105. 			<li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  106. 			<li><a href="https://www.youracclaim.com/users/marcel-haazen"><i class="fas fa-angle-double-up trans_300"></i></a></li>
  107. 		</ul>
  108. 	</div>
  109. 		
  110. 	<!-- Features -->
  111. 

  112. 	<div class="features">
  113. 		<div class="container">
  114. 			<div class="row align-items-end">
  115. 

  116. 				<!-- Features Item -->
  117. 				<div class="col-lg-4 features_col">
  118. 					<div class="features_item d-flex flex-column align-items-center justify-content-end text-center">
  119. 						<div class="icon_container d-flex flex-column justify-content-end">
  120. 							<img src="images/icon_1.svg" alt="">
  121. 						</div>
  122. 						<h3>System Administration</h3>
  123. 						<p>Systems need to stay managed to stay up-to-date and secure.</p>
  124. 					</div>
  125. 				</div>
  126. 				
  127. 				<!-- Features Item -->
  128. 				<div class="col-lg-4 features_col">
  129. 					<div class="features_item d-flex flex-column align-items-center justify-content-center text-center">
  130. 						<div class="icon_container d-flex flex-column justify-content-end">
  131. 							<img src="images/icon_2.svg" alt="">
  132. 						</div>
  133. 						<h3>easy to use</h3>
  134. 						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  135. 					</div>
  136. 				</div>
  137. 				
  138. 				<!-- Features Item -->
  139. 				<div class="col-lg-4 features_col">
  140. 					<div class="features_item d-flex flex-column align-items-center justify-content-center text-center">
  141. 						<div class="icon_container d-flex flex-column justify-content-end">
  142. 							<img src="images/icon_3.svg" alt="">
  143. 						</div>
  144. 						<h3>well documented</h3>
  145. 						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  146. 					</div>
  147. 				</div>
  148. 

  149. 			</div>
  150. 		</div>
  151. 	</div>
  152. 

  153. 	<!-- Contact -->
  154. 

  155. 	<div class="contact prlx_parent">
  156. 		<!-- <div class="contact_background parallax-window" data-parallax="scroll" data-speed="0.7" data-image-src="images/contact_background.jpg"></div> -->
  157. 		<div class="contact_background prlx" style="background-image:linear-gradient( rgba(32,32,32,0.5), rgba(32,32,32,0.5) ),url(images/cables.jpg);"></div>
  158. 		<div class="contact_shapes"><img src="images/contact_shape.png" alt=""></div>
  159. 		<div class="container">
  160. 			
  161. 			<div class="row">
  162. 				<div class="col-lg-6 offset-lg-3 text-center section_title contact_title">
  163. 					<h2>let's work together</h2>
  164. 				</div>
  165. 			</div>
  166. 			
  167. 			<div class="row">
  168. 				<div class="col-lg-10 offset-lg-1 text-center contact_text">
  169. 					<p>Dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venen atis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venenatis ultrices, est libero mattis ante, ac consectetur diam neque eget quam.</p>
  170. 					<div class="button contact_button">
  171. 						<a href="contact" class="d-flex flex-row align-items-center justify-content-center">contact<img src="images/arrow_right.svg" alt=""></a>
  172. 					</div>
  173. 				</div>
  174. 			</div>
  175. 		</div>
  176. 	</div>
  177. 

  178. 	<!-- Footer -->
  179. 

  180. 	<footer class="footer">
  181. 		<div class="container">
  182. 			<div class="row footer_content d-flex flex-sm-row flex-column align-items-center">
  183. 				<div class="col-sm-9 cr text-sm-left text-center">
  184. 					<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  185. 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>
  186. <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
  187. 				</div>
  188. 				<div class="col-sm-3 text-sm-right text-center">
  189. 					<div class="footer_social_container">
  190. 						<ul class="footer_social">
  191. 			             <li><a href="https://github.com/nekocentral"><i class="fab fa-github trans_300"></i></a></li>
  192. 			             <li><a href="https://twitter.com/nekocentral"><i class="fab fa-twitter trans_300"></i></a></li>
  193. 			             <li><a href="https://news.ycombinator.com/user?id=nekocentral"><i class="fab fa-hacker-news-square trans_300"></i></a></li>
  194. 			             <li><a href="https://keybase.io/nekocentral#no"><i class="fab fa-keybase trans_300"></i></a></li>
  195. 			             <li><a href="https://www.linkedin.com/in/mhaazen/"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  196. 						</ul>
  197. 					</div>
  198. 				</div>
  199. 			</div>
  200. 		</div>
  201. 	</footer>
  202. 

  203. </div>
  204. 

  205. <script src="js/jquery-3.2.1.min.js"></script>
  206. <script src="styles/bootstrap4/popper.js"></script>
  207. <script src="styles/bootstrap4/bootstrap.min.js"></script>
  208. <script src="plugins/greensock/TweenMax.min.js"></script>
  209. <script src="plugins/greensock/TimelineMax.min.js"></script>
  210. <script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
  211. <script src="plugins/greensock/animation.gsap.min.js"></script>
  212. <script src="plugins/greensock/ScrollToPlugin.min.js"></script>
  213. <script src="plugins/progressbar/progressbar.min.js"></script>
  214. <script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
  215. <script src="plugins/easing/easing.js"></script>
  216. <script src="js/custom.js"></script>
  217. </body>
  218. 

  219. </html>