Websites
/
Haazen
2
0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 1 Wiki Activiteit
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 Labels
${ item.name }
Maak branch ${ searchTerm }
van 'new'
${ noResults }
Haazen/services.html

352 regels
15 KiB
Ruw Permalink Normale weergave Geschiedenis

First commit of new site
6 jaren geleden
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Zeta - Services</title>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="description" content="Zeta Template Project - Services">
  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 href="plugins/fontawesome-free-5.0.1/css/fontawesome-all.css" rel="stylesheet" type="text/css">
  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/services_styles.css">
  15. <link rel="stylesheet" type="text/css" href="styles/services_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="#"><span>z</span>zeta<span>.</span></a>
  30. 			</div>
  31. 		</div>
  32. 

  33. 		<!-- Main Navigation -->
  34. 		<nav class="main_nav justify-self-end">
  35. 			<ul class="nav_items">
  36. 				<li><a href="index.html"><span>home</span></a></li>
  37. 				<li class="active"><a href="#"><span>services</span></a></li>
  38. 				<li><a href="elements.html"><span>elements</span></a></li>
  39. 				<li><a href="blog.html"><span>blog</span></a></li>
  40. 				<li><a href="contact.html"><span>contact</span></a></li>
  41. 			</ul>
  42. 		</nav>
  43. 

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

  50. 	</header>
  51. 

  52. 	<!-- Menu -->
  53. 

  54. 	<div class="fs_menu_overlay"></div>
  55. 	<div class="fs_menu_container">
  56. 		<div class="fs_menu_shapes"><img src="images/menu_shapes.png" alt=""></div>
  57. 		<nav class="fs_menu_nav">
  58. 			<ul class="fs_menu_list">
  59. 				<li><a href="#"><span><span>H</span>Home</span></a></li>
  60. 				<li><a href="#"><span><span>S</span>Services</span></a></li>
  61. 				<li><a href="#"><span><span>E</span>Elements</span></a></li>
  62. 				<li><a href="#"><span><span>B</span>Blog</span></a></li>
  63. 				<li><a href="#"><span><span>C</span>Contact</span></a></li>
  64. 			</ul>
  65. 		</nav>
  66. 		<div class="fs_social_container d-flex flex-row justify-content-end align-items-center">
  67. 			<ul class="fs_social">
  68. 				<li><a href="#"><i class="fab fa-pinterest trans_300"></i></a></li>
  69. 				<li><a href="#"><i class="fab fa-facebook-f trans_300"></i></a></li>
  70. 				<li><a href="#"><i class="fab fa-twitter trans_300"></i></a></li>
  71. 				<li><a href="#"><i class="fab fa-dribbble trans_300"></i></a></li>
  72. 				<li><a href="#"><i class="fab fa-behance trans_300"></i></a></li>
  73. 				<li><a href="#"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  74. 			</ul>
  75. 		</div>
  76. 	</div>
  77. 

  78. 	<!-- Page Top -->
  79. 

  80. 	<div class="home prlx_parent">
  81. 

  82. 		<!-- Parallax Background -->
  83. 		<!-- <div class="page_top_background parallax-window" data-parallax="scroll" data-speed="0.7" data-image-src="images/services_parallax.jpg"></div> -->
  84. 		<div class="home_background prlx" style="background-image:url(images/services_parallax.jpg)"></div>
  85. 		<div class="services_page_shapes" style="background-image:url(images/services_page_shapes.png)"></div>
  86. 

  87. 		<div class="container">
  88. 			<div class="row">
  89. 				<div class="col-lg-6">
  90. 					<div class="home_content">
  91. 						<h1>Services</h1>
  92. 						<span>what we do</span>
  93. 					</div>
  94. 				</div>
  95. 			</div>
  96. 		</div>
  97. 

  98. 	</div>
  99. 

  100. 	<!-- Home Social -->
  101. 	<div class="home_social_container d-flex flex-row justify-content-end align-items-center">
  102. 		<ul class="home_social">
  103. 			<li><a href="#"><i class="fab fa-pinterest trans_300"></i></a></li>
  104. 			<li><a href="#"><i class="fab fa-facebook-f trans_300"></i></a></li>
  105. 			<li><a href="#"><i class="fab fa-twitter trans_300"></i></a></li>
  106. 			<li><a href="#"><i class="fab fa-dribbble trans_300"></i></a></li>
  107. 			<li><a href="#"><i class="fab fa-behance trans_300"></i></a></li>
  108. 			<li><a href="#"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  109. 		</ul>
  110. 	</div>	
  111. 

  112. 	<!-- Services -->
  113. 

  114. 	<div class="services">
  115. 

  116. 		<div class="container">
  117. 			<div class="row">
  118. 

  119. 				<div class="col-lg-4 service_item text-left d-flex flex-column align-items-start justify-content-start">
  120. 					<div class="icon_container d-flex flex-column justify-content-end">
  121. 						<img src="images/icon_1.svg" alt="">
  122. 					</div>
  123. 					<h3>modern design</h3>
  124. 					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum.</p>
  125. 				</div>
  126. 

  127. 				<div class="col-lg-4 service_item text-left d-flex flex-column align-items-start justify-content-start">
  128. 					<div class="icon_container d-flex flex-column justify-content-end">
  129. 						<img src="images/icon_2.svg" alt="">
  130. 					</div>
  131. 					<h3>easy to use</h3>
  132. 					<p>Dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt.</p>
  133. 				</div>
  134. 

  135. 				<div class="col-lg-4 service_item text-left d-flex flex-column align-items-start justify-content-start">
  136. 					<div class="icon_container d-flex flex-column justify-content-end">
  137. 						<img src="images/icon_3.svg" alt="">
  138. 					</div>
  139. 					<h3>well documented</h3>
  140. 					<p>Adipiscing elit. Phasellus vestibulum, quam tincidunt venen atis ultrices.</p>
  141. 				</div>
  142. 

  143. 				<div class="col-lg-4 service_item text-left d-flex flex-column align-items-start justify-content-start">
  144. 					<div class="icon_container d-flex flex-column justify-content-end">
  145. 						<img src="images/icon_4.svg" alt="">
  146. 					</div>
  147. 					<h3>smart structure</h3>
  148. 					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum.</p>
  149. 				</div>
  150. 

  151. 				<div class="col-lg-4 service_item text-left d-flex flex-column align-items-start justify-content-start">
  152. 					<div class="icon_container d-flex flex-column justify-content-end">
  153. 						<img src="images/icon_5.svg" alt="">
  154. 					</div>
  155. 					<h3>elements</h3>
  156. 					<p>Dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt.</p>
  157. 				</div>
  158. 

  159. 				<div class="col-lg-4 service_item text-left d-flex flex-column align-items-start justify-content-start">
  160. 					<div class="icon_container d-flex flex-column justify-content-end">
  161. 						<img src="images/icon_6.svg" alt="">
  162. 					</div>
  163. 					<h3>bold colors</h3>
  164. 					<p>Adipiscing elit. Phasellus vestibulum, quam tincidunt venen atis ultrices.</p>
  165. 				</div>
  166. 

  167. 			</div>
  168. 

  169. 			<div class="row">
  170. 				<div class="col text-center">
  171. 					<div class="button services_button">
  172. 						<a href="services.html" class="d-flex flex-row align-items-center justify-content-center">
  173. 							discover<img src="images/arrow_right.svg" alt="">
  174. 						</a>
  175. 					</div>
  176. 				</div>
  177. 			</div>
  178. 		</div>
  179. 	</div>
  180. 

  181. 	<!-- Cards -->
  182. 

  183. 	<div class="zeta_cards">
  184. 		
  185. 		<div class="container-fluid">
  186. 			<div class="row">
  187. 

  188. 				<!-- Card Item -->
  189. 				<div class="col-lg-4 zeta_card zeta_card_1 prlx_parent">
  190. 					<div class="zeta_card_background prlx" style="background-image:url(images/card_1.jpg)"></div>
  191. 					<div class="zeta_card_content">
  192. 						<h2>smart structure</h2>
  193. 						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venenatis ultrices, est libero mattis ante, ac consectetur diam neque eget quam. Etiam feugiat augue et varius blandit. Praesent mattis, eros a sodales commodo, justo ipsum rutrum mauris, sit amet egestas metus.</p>
  194. 						<div class="button line_button zeta_card_button">
  195. 							<a href="#" class="d-flex flex-row align-items-center justify-content-center">discover<img src="images/arrow_right.svg" alt=""></a>
  196. 						</div>
  197. 					</div>
  198. 				</div>
  199. 

  200. 				<!-- Card Item -->
  201. 				<div class="col-lg-4 zeta_card zeta_card_2 prlx_parent">
  202. 					<div class="zeta_card_background prlx" style="background-image:url(images/card_2.jpg)"></div>
  203. 					<div class="zeta_card_content">
  204. 						<h2>marketing</h2>
  205. 						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venenatis ultrices, est libero mattis ante, ac consectetur diam neque eget quam. Etiam feugiat augue et varius blandit. Praesent mattis, eros a sodales commodo, justo ipsum rutrum mauris, sit amet egestas metus.</p>
  206. 						<div class="button zeta_card_button">
  207. 							<a href="#" class="d-flex flex-row align-items-center justify-content-center">discover<img src="images/arrow_right.svg" alt=""></a>
  208. 						</div>
  209. 					</div>
  210. 				</div>
  211. 

  212. 				<!-- Card Item -->
  213. 				<div class="col-lg-4 zeta_card zeta_card_3 prlx_parent">
  214. 					<div class="zeta_card_background prlx" style="background-image:url(images/card_3.jpg)"></div>
  215. 					<div class="zeta_card_content">
  216. 						<h2>strategy</h2>
  217. 						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venenatis ultrices, est libero mattis ante, ac consectetur diam neque eget quam. Etiam feugiat augue et varius blandit. Praesent mattis, eros a sodales commodo, justo ipsum rutrum mauris, sit amet egestas metus.</p>
  218. 						<div class="button zeta_card_button">
  219. 							<a href="#" class="d-flex flex-row align-items-center justify-content-center">discover<img src="images/arrow_right.svg" alt=""></a>
  220. 						</div>
  221. 					</div>
  222. 				</div>
  223. 			</div>
  224. 		</div>
  225. 

  226. 	</div>
  227. 

  228. 	<!-- Pic Boxes -->
  229. 

  230. 	<div class="picture_boxes">
  231. 		
  232. 		<div class="container">
  233. 			<div class="row">
  234. 

  235. 				<!-- Pic Box -->
  236. 				<div class="col-lg-4 pic_box">
  237. 					<div class="card">
  238. 						<img src="images/pic_box_1.jpg" class="card-img-top" alt="">
  239. 						<h3 class="card-title pic_box_title">the future</h3>
  240. 						<p class="card-text pic_box_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venen.</p>
  241. 						<a href="#" class="pic_box_link">read more
  242. 							<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  243. 								 width="13px" height="7px" viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
  244. 							<polygon id="arrow_poly_1" class="arrow_poly" fill="#FF4200" points="13,3.5 9,0 9,3 0,3 0,4 9,4 9,7 "></polygon>
  245. 							</svg>
  246. 						</a>
  247. 					</div>
  248. 				</div>
  249. 

  250. 				<!-- Pic Box -->
  251. 				<div class="col-lg-4 pic_box">
  252. 					<div class="card">
  253. 						<img src="images/pic_box_2.jpg" class="card-img-top" alt="">
  254. 						<h3 class="card-title pic_box_title">investment strategy</h3>
  255. 						<p class="card-text pic_box_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venen.</p>
  256. 						<a href="#" class="pic_box_link">read more
  257. 							<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  258. 								 width="13px" height="7px" viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
  259. 							<polygon id="arrow_poly_2" class="arrow_poly" fill="#FF4200" points="13,3.5 9,0 9,3 0,3 0,4 9,4 9,7 "></polygon>
  260. 							</svg>
  261. 						</a>
  262. 					</div>
  263. 				</div>
  264. 

  265. 				<!-- Pic Box -->
  266. 				<div class="col-lg-4 pic_box">
  267. 					<div class="card">
  268. 						<img src="images/pic_box_3.jpg" class="card-img-top" alt="">
  269. 						<h3 class="card-title pic_box_title">new plans</h3>
  270. 						<p class="card-text pic_box_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venen.</p>
  271. 						<a href="#" class="pic_box_link">read more
  272. 							<svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  273. 								 width="13px" height="7px" viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
  274. 							<polygon id="arrow_poly_3" class="arrow_poly" fill="#FF4200" points="13,3.5 9,0 9,3 0,3 0,4 9,4 9,7 "></polygon>
  275. 							</svg>
  276. 						</a>
  277. 					</div>
  278. 				</div>
  279. 

  280. 			</div>
  281. 		</div>
  282. 

  283. 	</div>
  284. 

  285. 	<!-- Contact -->
  286. 

  287. 	<div class="contact prlx_parent">
  288. 		<!-- <div class="contact_background" style="background-image: url(images/contact_background.jpg);"></div> -->
  289. 		<div class="contact_background prlx" style="background-image:url(images/contact_background.jpg)"></div>
  290. 		<div class="contact_shapes"><img src="images/contact_shape.png" alt=""></div>
  291. 		<div class="container">
  292. 			
  293. 			<div class="row">
  294. 				<div class="col-lg-6 offset-lg-3 text-center section_title contact_title">
  295. 					<h2>let's work together<span>z</span></h2>
  296. 				</div>
  297. 			</div>
  298. 			
  299. 			<div class="row">
  300. 				<div class="col-lg-10 offset-lg-1 text-center contact_text">
  301. 					<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>
  302. 					<div class="button contact_button">
  303. 						<a href="contact.html" class="d-flex flex-row align-items-center justify-content-center">contact<img src="images/arrow_right.svg" alt=""></a>
  304. 					</div>
  305. 				</div>
  306. 			</div>
  307. 		</div>
  308. 	</div>
  309. 

  310. 	<!-- Footer -->
  311. 

  312. 	<footer class="footer">
  313. 		<div class="container">
  314. 			<div class="row footer_content d-flex flex-sm-row flex-column align-items-center">
  315. 				<div class="col-sm-6 cr text-sm-left text-center">
  316. 					<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  317. Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
  318. <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
  319. 				</div>
  320. 				<div class="col-sm-6 text-sm-right text-center">
  321. 					<div class="footer_social_container">
  322. 						<ul class="footer_social">
  323. 							<li><a href="#"><i class="fab fa-pinterest trans_300"></i></a></li>
  324. 							<li><a href="#"><i class="fab fa-facebook-f trans_300"></i></a></li>
  325. 							<li><a href="#"><i class="fab fa-twitter trans_300"></i></a></li>
  326. 							<li><a href="#"><i class="fab fa-dribbble trans_300"></i></a></li>
  327. 							<li><a href="#"><i class="fab fa-behance trans_300"></i></a></li>
  328. 							<li><a href="#"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  329. 						</ul>
  330. 					</div>
  331. 				</div>
  332. 			</div>
  333. 		</div>
  334. 	</footer>
  335. 

  336. </div>
  337. 

  338. <script src="js/jquery-3.2.1.min.js"></script>
  339. <script src="styles/bootstrap4/popper.js"></script>
  340. <script src="styles/bootstrap4/bootstrap.min.js"></script>
  341. <script src="plugins/greensock/TweenMax.min.js"></script>
  342. <script src="plugins/greensock/TimelineMax.min.js"></script>
  343. <script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
  344. <script src="plugins/greensock/animation.gsap.min.js"></script>
  345. <script src="plugins/greensock/ScrollToPlugin.min.js"></script>
  346. <script src="plugins/parallax.js-1.5.0/parallax.min.js"></script>
  347. <script src="plugins/progressbar/progressbar.min.js"></script>
  348. <script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
  349. <script src="plugins/easing/easing.js"></script>
  350. <script src="js/services_custom.js"></script>
  351. </body>
  352. 

  353. </html>