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/elements.html

378 lines
14 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>Zeta - Elements</title>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="description" content="Zeta Template Project - Elements">
  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="plugins/js-flickr-gallery-1.24/js-flickr-gallery.css">
  15. <link href="plugins/colorbox/colorbox.css" rel="stylesheet" type="text/css">
  16. <link rel="stylesheet" type="text/css" href="styles/elements_styles.css">
  17. <link rel="stylesheet" type="text/css" href="styles/elements_responsive.css">
  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="#"><span>z</span>zeta<span>.</span></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="index.html"><span>home</span></a></li>
  39. 				<li><a href="services.html"><span>services</span></a></li>
  40. 				<li class="active"><a href="elements.html"><span>elements</span></a></li>
  41. 				<li><a href="blog.html"><span>blog</span></a></li>
  42. 				<li><a href="contact.html"><span>contact</span></a></li>
  43. 			</ul>
  44. 		</nav>
  45. 

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

  52. 	</header>
  53. 

  54. 	<!-- Menu -->
  55. 

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

  80. 	<!-- Home -->
  81. 

  82. 	<div class="home prlx_parent">
  83. 

  84. 		<!-- Parallax Background -->
  85. 		<div class="home_background prlx" style="background-image:url(images/blog_background.jpg)"></div>
  86. 		<div class="services_page_shapes" style="background-image:url(images/services_page_shapes.png)"></div>
  87. 

  88. 		<div class="container">
  89. 			<div class="row">
  90. 				<div class="col-lg-6">
  91. 					<div class="home_content">
  92. 						<h1>Contact</h1>
  93. 						<span>get in touch</span>
  94. 					</div>
  95. 				</div>
  96. 			</div>
  97. 		</div>
  98. 	</div>
  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="#"><i class="fab fa-pinterest trans_300"></i></a></li>
  102. 			<li><a href="#"><i class="fab fa-facebook-f trans_300"></i></a></li>
  103. 			<li><a href="#"><i class="fab fa-twitter trans_300"></i></a></li>
  104. 			<li><a href="#"><i class="fab fa-dribbble trans_300"></i></a></li>
  105. 			<li><a href="#"><i class="fab fa-behance trans_300"></i></a></li>
  106. 			<li><a href="#"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  107. 		</ul>
  108. 	</div>	
  109. 

  110. 	<!-- Elements Content -->
  111. 

  112. 	<div class="elements_content">
  113. 		
  114. 		<div class="container">
  115. 

  116. 			<!-- Buttons -->
  117. 			<div class="row">
  118. 				<div class="col">
  119. 					<div class="elements_section">
  120. 						<div class="elements_title">
  121. 							<h3>buttons</h3>
  122. 						</div>
  123. 						<div class="elements_buttons_container d-flex flex-sm-row flex-column">
  124. 							
  125. 							<!-- Button -->
  126. 							<div class="button element_button">
  127. 								<a href="#" class="d-flex flex-row align-items-center justify-content-center">
  128. 									discover
  129. 									<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"
  130. 										 width="13px" height="7px" viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
  131. 									<polygon id="arrow_poly_1" class="arrow_poly" points="13,3.5 9,0 9,3 0,3 0,4 9,4 9,7 "></polygon>
  132. 									</svg>
  133. 								</a>
  134. 							</div>
  135. 							
  136. 							<!-- Button -->
  137. 							<div class="button border_button element_button">
  138. 								<a href="#" class="d-flex flex-row align-items-center justify-content-center">
  139. 									discover
  140. 									<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"
  141. 										 width="13px" height="7px" viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
  142. 									<polygon id="arrow_poly_2" class="arrow_poly" points="13,3.5 9,0 9,3 0,3 0,4 9,4 9,7 "></polygon>
  143. 									</svg>
  144. 								</a>
  145. 							</div>
  146. 

  147. 							<!-- Button -->
  148. 							<div class="button element_button button_black">
  149. 								<a href="#" class="d-flex flex-row align-items-center justify-content-center">
  150. 									discover
  151. 									<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"
  152. 										 width="13px" height="7px" viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
  153. 									<polygon id="arrow_poly_3" class="arrow_poly" points="13,3.5 9,0 9,3 0,3 0,4 9,4 9,7 "></polygon>
  154. 									</svg>
  155. 								</a>
  156. 							</div>
  157. 						</div>
  158. 						
  159. 					</div>
  160. 

  161. 					<!-- Progress Bars & Accordions -->
  162. 

  163. 					<div class="elements_section">
  164. 						<div class="elements_title">
  165. 							<h3>progress bars & accordions</h3>
  166. 						</div>
  167. 						<div class="row">
  168. 							<div class="col-lg-6">
  169. 								<div class="elements_progress_bars">
  170. 

  171. 									<div class="pbar_container">
  172. 										<ul class="progress_bar_container col_12 clearfix">
  173. 											<li class="pb_item">
  174. 												<div id="skill_1_pbar" class="skill_bars" data-perc="0.85"></div>
  175. 												<h5>management</h5>
  176. 											</li>
  177. 											<li class="pb_item">
  178. 												<div id="skill_2_pbar" class="skill_bars" data-perc="1"></div>
  179. 												<h5>design</h5>
  180. 											</li>
  181. 											<li class="pb_item">
  182. 												<div id="skill_3_pbar" class="skill_bars" data-perc="0.75"></div>
  183. 												<h5>projects</h5>
  184. 											</li>
  185. 											<li class="pb_item">
  186. 												<div id="skill_4_pbar" class="skill_bars" data-perc="0.95"></div>
  187. 												<h5>inspiration</h5>
  188. 											</li>
  189. 										</ul>
  190. 									</div>
  191. 

  192. 								</div>
  193. 							</div>
  194. 

  195. 							<div class="col-lg-6">
  196. 								<div class="elements_accordions">
  197. 

  198. 									<div class="accordion_container">
  199. 

  200. 										<div class="accordion d-flex flex-row align-items-center"> Phasellus vestibulum, quam tincidunt venen.</div>
  201. 										<div class="accordion_panel">
  202. 											<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.</p>
  203. 										</div>
  204. 

  205. 									</div>
  206. 

  207. 									<div class="accordion_container">
  208. 

  209. 										<div class="accordion d-flex flex-row align-items-center"> Phasellus vestibulum, quam tincidunt venen.</div>
  210. 										<div class="accordion_panel">
  211. 											<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.</p>
  212. 										</div>
  213. 										
  214. 									</div>
  215. 

  216. 									<div class="accordion_container">
  217. 

  218. 										<div class="accordion d-flex flex-row align-items-center"> Phasellus vestibulum, quam tincidunt venen.</div>
  219. 										<div class="accordion_panel">
  220. 											<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.</p>
  221. 										</div>
  222. 										
  223. 									</div>
  224. 

  225. 								</div>
  226. 							</div>
  227. 						</div>
  228. 					</div>
  229. 

  230. 					<!-- Loaders -->
  231. 

  232. 					<div class="elements_section">
  233. 						<div class="elements_title">
  234. 							<h3>loaders</h3>
  235. 						</div>
  236. 						<div class="row elements_loaders_container">
  237. 							<div class="col-lg-3">
  238. 								<!-- Loader -->
  239. 								<div class="loader" data-perc="0.75"><span>hard work</span></div>
  240. 							</div>
  241. 							<div class="col-lg-3">
  242. 								<!-- Loader -->
  243. 								<div class="loader" data-perc="0.83"><span>creativity</span></div>
  244. 							</div>
  245. 							<div class="col-lg-3">
  246. 								<!-- Loader -->
  247. 								<div class="loader" data-perc="0.25"><span>good luck</span></div>
  248. 							</div>
  249. 							<div class="col-lg-3">
  250. 								<!-- Loader -->
  251. 								<div class="loader" data-perc="0.95"><span>developement</span></div>
  252. 							</div>
  253. 						</div>
  254. 					</div>
  255. 

  256. 					<!-- Milestones -->
  257. 

  258. 					<div class="elements_section">
  259. 						<div class="elements_title">
  260. 							<h3>milestones</h3>
  261. 						</div>
  262. 						<div class="milestones_container d-flex flex-lg-row flex-column">
  263. 							
  264. 							<!-- Milestone -->
  265. 							<div class="milestone">
  266. 								<div class="milestone_counter" data-end-value="12">0</div>
  267. 								<div class="milestone_text">years of experience</div>
  268. 							</div>
  269. 

  270. 							<!-- Milestone -->
  271. 							<div class="milestone">
  272. 								<div class="milestone_counter" data-end-value="257">0</div>
  273. 								<div class="milestone_text">happy clients</div>
  274. 							</div>
  275. 

  276. 							<!-- Milestone -->
  277. 							<div class="milestone">
  278. 								<div class="milestone_counter" data-end-value="1142">0</div>
  279. 								<div class="milestone_text">projects</div>
  280. 							</div>
  281. 

  282. 							<!-- Milestone -->
  283. 							<div class="milestone">
  284. 								<div class="milestone_counter" data-end-value="05">0</div>
  285. 								<div class="milestone_text">coffees a day</div>
  286. 							</div>
  287. 

  288. 							<!-- Milestone -->
  289. 							<div class="milestone">
  290. 								<div class="milestone_counter" data-end-value="10">0</div>
  291. 								<div class="milestone_text">team members</div>
  292. 							</div>
  293. 						</div>
  294. 					</div>
  295. 

  296. 					<!-- Icon Boxes -->
  297. 

  298. 					<div class="elements_section">
  299. 						<div class="elements_title">
  300. 							<h3>icon boxes</h3>
  301. 						</div>
  302. 						<div class="row iconbox_container">
  303. 							
  304. 							<!-- Icon Box -->
  305. 							<div class="col-lg-4 icon_box text-left d-flex flex-column align-items-start justify-content-start">
  306. 								<div class="icon_container d-flex flex-column justify-content-end">
  307. 									<img src="images/icon_1.svg" alt="">
  308. 								</div>
  309. 								<h3>modern design</h3>
  310. 								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum.</p>
  311. 							</div>
  312. 							
  313. 							<!-- Icon Box -->
  314. 							<div class="col-lg-4 icon_box text-left d-flex flex-column align-items-start justify-content-start">
  315. 								<div class="icon_container d-flex flex-column justify-content-end">
  316. 									<img src="images/icon_2.svg" alt="">
  317. 								</div>
  318. 								<h3>easy to use</h3>
  319. 								<p>Dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt.</p>
  320. 							</div>
  321. 							
  322. 							<!-- Icon Box -->
  323. 							<div class="col-lg-4 icon_box text-left d-flex flex-column align-items-start justify-content-start">
  324. 								<div class="icon_container d-flex flex-column justify-content-end">
  325. 									<img src="images/icon_3.svg" alt="">
  326. 								</div>
  327. 								<h3>well documented</h3>
  328. 								<p>Adipiscing elit. Phasellus vestibulum, quam tincidunt venen atis ultrices.</p>
  329. 							</div>
  330. 						</div>
  331. 					</div>
  332. 				</div>
  333. 			</div>
  334. 		</div>
  335. 	</div>
  336. 

  337. 	<!-- Footer -->
  338. 

  339. 	<footer class="footer">
  340. 		<div class="container">
  341. 			<div class="row footer_content d-flex flex-sm-row flex-column align-items-center">
  342. 				<div class="col-sm-6 cr text-sm-left text-center">
  343. 					<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  344. 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>
  345. <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
  346. 				</div>
  347. 				<div class="col-sm-6 text-sm-right text-center">
  348. 					<div class="footer_social_container">
  349. 						<ul class="footer_social">
  350. 							<li><a href="#"><i class="fab fa-pinterest trans_300"></i></a></li>
  351. 							<li><a href="#"><i class="fab fa-facebook-f trans_300"></i></a></li>
  352. 							<li><a href="#"><i class="fab fa-twitter trans_300"></i></a></li>
  353. 							<li><a href="#"><i class="fab fa-dribbble trans_300"></i></a></li>
  354. 							<li><a href="#"><i class="fab fa-behance trans_300"></i></a></li>
  355. 							<li><a href="#"><i class="fab fa-linkedin-in trans_300"></i></a></li>
  356. 						</ul>
  357. 					</div>
  358. 				</div>
  359. 			</div>
  360. 		</div>
  361. 	</footer>
  362. 

  363. </div>
  364. 

  365. <script src="js/jquery-3.2.1.min.js"></script>
  366. <script src="styles/bootstrap4/popper.js"></script>
  367. <script src="styles/bootstrap4/bootstrap.min.js"></script>
  368. <script src="plugins/greensock/TweenMax.min.js"></script>
  369. <script src="plugins/greensock/TimelineMax.min.js"></script>
  370. <script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
  371. <script src="plugins/greensock/animation.gsap.min.js"></script>
  372. <script src="plugins/greensock/ScrollToPlugin.min.js"></script>
  373. <script src="plugins/progressbar/progressbar.min.js"></script>
  374. <script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
  375. <script src="plugins/easing/easing.js"></script>
  376. <script src="js/elements_custom.js"></script>
  377. </body>
  378. 

  379. </html>