Home Explore Help
Sign In
hanzhengyi
/
usky-website
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 018c4ec8ef
Branches Tags
usky-website
/
web
/
assets
/
admin
/
frontend_theme
/
index.html

index.html 25 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. 	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    5. 

  5. 	<meta charset="utf-8">
    6. 

  6. 	<title>Cloud Responsive Bootstrap Theme - Home</title>
    7. 

  7. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 

  8. 	<meta name="description" content="">
    9. 

  9. 	<meta name="author" content="">
    10. 

  10. 		<!-- STYLESHEETS --><!--[if lt IE 9]><script src="../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    11. 

  11. 	<link rel="stylesheet" type="text/css" href="css/cloud-admin-frontend.css" >
    12. 

  12. 	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    13. 

  13. 	<!-- ANIMATE -->
    14. 

  14.     <link href="css/amimatecss/animate.min.css" rel="stylesheet">
    15. 

  15. 	<!-- COLORBOX -->
    16. 

  16. 	<link rel="stylesheet" type="text/css" href="js/colorbox/colorbox.min.css" />
    17. 

  17. 	<!-- CAROUSEL -->
    18. 

  18.     <link href="css/carousel.css" rel="stylesheet">
    19. 

  19. 	<!-- FONTS -->
    20. 

  20. 	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
    21. 

  21. </head>
    22. 

  22. <body>
    23. 

  23. 	<!-- PAGE -->
    24. 

  24. 	<div id="page">
    25. 

  25. 		<!-- HEADER -->
    26. 

  26. 		<section id="header" data-type="background" data-speed="10">
    27. 

  27. 			<!-- OVERLAY -->
    28. 

  28. 			<!-- <div class="overlay"> -->
    29. 

  29. 				<div id="sidebar-collapse" class="sidebar-collapse btn visible-xs">
    30. 

  30. 					<i class="fa fa-bars" data-icon2="fa fa-bars" data-icon1="fa fa-bars"></i>
    31. 

  31. 				</div>
    32. 

  32. 				<div class="divide60"></div>
    33. 

  33. 				<div id="mobile-menu" class="list-group collapse text-center">
    34. 

  34. 				  <a href="#portfolio" class="list-group-item">Portfolio</a>
    35. 

  35. 				  <a href="#parallax-1" class="list-group-item">Demo</a>
    36. 

  36. 				  <a href="#features" class="list-group-item">Features</a>
    37. 

  37. 				  <a href="#about" class="list-group-item">About</a>
    38. 

  38. 				  <a href="#contact" class="list-group-item">Contact</a>
    39. 

  39. 				  <a href="../login.html" class="list-group-item external">Login</a>
    40. 

  40. 				</div>
    41. 

  41. 

  42. 					<!-- HERO -->
    43. 

  43. 					<div class="container-transparent text-center">
    44. 

  44. 						<ul class="heronav left hidden-xs">
    45. 

  45. 							<li><a href="#portfolio">Portfolio</a></li>
    46. 

  46. 							<li><a href="#parallax-1">Demo</a></li>
    47. 

  47. 							<li><a href="#features">Features</a></li>
    48. 

  48. 						</ul>
    49. 

  49. 						<ul class="heronav right hidden-xs">
    50. 

  50. 							<li><a href="#about">About</a></li>
    51. 

  51. 							<li><a href="#contact">Contact</a></li>
    52. 

  52. 							<li><a href="../login.html" class="external">Login</a></li>
    53. 

  53. 						</ul>
    54. 

  54. 						<h1>
    55. 

  55. 							<img src="img/logo/logo.png" height="50" alt="logo name">
    56. 

  56. 						</h1>
    57. 

  57. 						<h1 class="page-title">Beautiful responsive frontend theme</h1>
    58. 

  58. 						<h4 class="page-sub-title">In the end, it's not going to matter how many breath you took, 
    59. 

  59. 						<br>
    60. 

  60. 							but how many moments took your breath away.
    61. 

  61. 						</h4>
    62. 

  62. 						<div class="showcase">
    63. 

  63. 							<a class="btn btn-warning btn-lg hidden-xs" href="#portfolio">Learn More &nbsp;&nbsp;<i class="fa fa-play"></i></a>
    64. 

  64. 							<a class="btn btn-warning btn-sm visible-xs" href="#portfolio">Learn More &nbsp;&nbsp;<i class="fa fa-play"></i></a>
    65. 

  65. 						</div>
    66. 

  66. 					</div>
    67. 

  67. 				<!--/HERO -->
    68. 

  68. 			<!-- </div> -->
    69. 

  69. 			<!--/OVERLAY -->
    70. 

  70. 		</section>
    71. 

  71. 		<!--/HEADER -->
    72. 

  72. 		<!-- NAV-BAR -->
    73. 

  73. 		<div id="nav-bar">
    74. 

  74. 			<div class="container">
    75. 

  75. 				<div class="row">
    76. 

  76. 					<div class="col-sm-3 col-md-4">
    77. 

  77. 						<div class="logo" >
    78. 

  78. 							<a href="index.html"><img src="img/logo/logo.png" height="40" alt="logo name"/></a>
    79. 

  79. 						</div>
    80. 

  80. 					</div>
    81. 

  81. 					<div class="col-sm-9 col-md-8">
    82. 

  82. 						<nav id="fixed-top-navigation">
    83. 

  83. 							<ul class="list-inline pull-right">
    84. 

  84. 								<li><a href="#portfolio">Portfolio</a></li>
    85. 

  85. 								<li><a href="#parallax-1">Demo</a></li>
    86. 

  86. 								<li><a href="#features">Features</a></li>
    87. 

  87. 								<li><a href="#about">About</a></li>
    88. 

  88. 								<li><a href="#contact">Contact</a></li>
    89. 

  89. 								<li><a href="../login.html" class="external">Login</a></li>
    90. 

  90. 							</ul>
    91. 

  91. 						</nav>
    92. 

  92. 					</div>
    93. 

  93. 				</div>
    94. 

  94. 			</div>
    95. 

  95. 		</div>
    96. 

  96. 		<!--/NAV-BAR -->
    97. 

  97. 

  98. 		<!-- PORTFOLIO UNIT -->
    99. 

  99. 		<section id="portfolio" class="color-light text-center">			
    100. 

  100. 				<div class="divide40"></div>
    101. 

  101. 					<div class="row">
    102. 

  102. 						<div class="col-md-12">
    103. 

  103. 								<h2 class="text-center">
    104. 

  104. 								<span class="bigintro">Portfolio</span>
    105. 

  105. 								</h2>
    106. 

  106. 						</div>
    107. 

  107. 					</div>
    108. 

  108. 					<div class="divide60"></div>
    109. 

  109. 					<div class="row">
    110. 

  110. 						<div class="col-md-6 col-md-offset-3">
    111. 

  111. 							<div id="filters" class="text-center btn-group">
    112. 

  112. 								  <div  class="hidden-xs">
    113. 

  113. 									  <a class="btn btn-lg btn-primary active" data-filter="*" href="#">All</a>
    114. 

  114. 									  <a class="btn btn-lg btn-warning" data-filter=".design" href="#">Design</a>
    115. 

  115. 									  <a class="btn btn-lg btn-success" data-filter=".videos" href="#">Videos</a>
    116. 

  116. 									  <a class="btn btn-lg btn-danger" data-filter=".banners" href="#">Banners</a>
    117. 

  117. 								  </div>
    118. 

  118. 								  <div class="visible-xs">
    119. 

  119. 									   <select id="e1" class="form-control">
    120. 

  120. 											<option value="*">All</option>
    121. 

  121. 											<option value=".design">Designs</option>
    122. 

  122. 											<option value=".videos">Videos</option>
    123. 

  123. 											<option value=".banners">Banners</option>
    124. 

  124. 										</select>
    125. 

  125. 								  </div>
    126. 

  126. 							</div>
    127. 

  127. 						</div>
    128. 

  128. 					</div>
    129. 

  129. 					<div class="divide40"></div>
    130. 

  130. 					<div class="container">
    131. 

  131. 						<div id="filter-items" class="row">
    132. 

  132. 							<div class="col xs-12 col-sm-4 design item">
    133. 

  133. 								<div class="filter-content">
    134. 

  134. 									<img src="img/gallery/1.png" alt="" class="img-responsive" />
    135. 

  135. 									<div class="image-content">
    136. 

  136. 										<h4>Image Title</h4>
    137. 

  137. 										<p class="hidden-xs hidden-sm">
    138. 

  138. 											For faster mobile-friendly development, use these utility.
    139. 

  139. 										</p>
    140. 

  140. 										<a href="img/gallery/1.png" class="btn btn-sm btn-warning colorbox-button">Know More</a>
    141. 

  141. 									</div>
    142. 

  142. 								</div>
    143. 

  143. 							</div>
    144. 

  144. 							<div class="col xs-12 col-sm-4 videos item">
    145. 

  145. 								<div class="filter-content">
    146. 

  146. 									<img src="img/gallery/2.jpg" alt="" class="img-responsive" />
    147. 

  147. 									<div class="image-content">
    148. 

  148. 										<h4>Image Title</h4>
    149. 

  149. 										<p class="hidden-xs hidden-sm">
    150. 

  150. 											For faster mobile-friendly development, use these utility.
    151. 

  151. 										</p>
    152. 

  152. 										<a href="img/gallery/2.jpg" class="btn btn-sm btn-warning colorbox-button">Know More</a>
    153. 

  153. 									</div>
    154. 

  154. 								</div>
    155. 

  155. 							</div>
    156. 

  156. 							<div class="col xs-12 col-sm-4 banners item">
    157. 

  157. 								<div class="filter-content">
    158. 

  158. 									<img src="img/gallery/3.png" alt="" class="img-responsive" />
    159. 

  159. 									<div class="image-content">
    160. 

  160. 										<h4>Image Title</h4>
    161. 

  161. 										<p class="hidden-xs hidden-sm">
    162. 

  162. 											For faster mobile-friendly development, use these utility.
    163. 

  163. 										</p>
    164. 

  164. 										<a href="img/gallery/3.png" class="btn btn-sm btn-warning colorbox-button">Know More</a>
    165. 

  165. 									</div>
    166. 

  166. 								</div>
    167. 

  167. 							</div>
    168. 

  168. 							<div class="col xs-12 col-sm-4 videos item">
    169. 

  169. 								<div class="filter-content">
    170. 

  170. 									<img src="img/gallery/4.png" alt="" class="img-responsive" />
    171. 

  171. 									<div class="image-content">
    172. 

  172. 										<h4>Image Title</h4>
    173. 

  173. 										<p class="hidden-xs hidden-sm">
    174. 

  174. 											For faster mobile-friendly development, use these utility.
    175. 

  175. 										</p>
    176. 

  176. 										<a href="img/gallery/4.png" class="btn btn-sm btn-warning colorbox-button">Know More</a>
    177. 

  177. 									</div>
    178. 

  178. 								</div>
    179. 

  179. 							</div>
    180. 

  180. 							<div class="col xs-12 col-sm-4 design item">
    181. 

  181. 								<div class="filter-content">
    182. 

  182. 									<img src="img/gallery/5.png" alt="" class="img-responsive" />
    183. 

  183. 									<div class="image-content">
    184. 

  184. 										<h4>Image Title</h4>
    185. 

  185. 										<p class="hidden-xs hidden-sm">
    186. 

  186. 											For faster mobile-friendly development, use these utility.
    187. 

  187. 										</p>
    188. 

  188. 										<a href="img/gallery/5.png" class="btn btn-sm btn-warning colorbox-button">Know More</a>
    189. 

  189. 									</div>
    190. 

  190. 								</div>
    191. 

  191. 							</div>
    192. 

  192. 							<div class="col xs-12 col-sm-4 banners item">
    193. 

  193. 								<div class="filter-content">
    194. 

  194. 									<img src="img/gallery/8.png" alt="" class="img-responsive" />
    195. 

  195. 									<div class="image-content">
    196. 

  196. 										<h4>Image Title</h4>
    197. 

  197. 										<p class="hidden-xs hidden-sm">
    198. 

  198. 											For faster mobile-friendly development, use these utility.
    199. 

  199. 										</p>
    200. 

  200. 										<a href="img/gallery/8.png" class="btn btn-sm btn-warning colorbox-button">Know More</a>
    201. 

  201. 									</div>
    202. 

  202. 								</div>
    203. 

  203. 							</div>
    204. 

  204. 							<div class="col xs-12 col-sm-4 banners item">
    205. 

  205. 								<div class="filter-content">
    206. 

  206. 									<img src="img/gallery/7.jpg" alt="" class="img-responsive" />
    207. 

  207. 									<div class="image-content">
    208. 

  208. 										<h4>Image Title</h4>
    209. 

  209. 										<p class="hidden-xs hidden-sm">
    210. 

  210. 											For faster mobile-friendly development, use these utility.
    211. 

  211. 										</p>
    212. 

  212. 										<a href="img/gallery/7.jpg" class="btn btn-sm btn-warning colorbox-button">Know More</a>
    213. 

  213. 									</div>
    214. 

  214. 								</div>
    215. 

  215. 							</div>
    216. 

  216. 							<div class="col xs-12 col-sm-4 videos item">
    217. 

  217. 								<div class="filter-content">
    218. 

  218. 									<img src="img/gallery/2.jpg" alt="" class="img-responsive" />
    219. 

  219. 									<div class="image-content">
    220. 

  220. 										<h4>Image Title</h4>
    221. 

  221. 										<p class="hidden-xs hidden-sm">
    222. 

  222. 											For faster mobile-friendly development, use these utility.
    223. 

  223. 										</p>
    224. 

  224. 										<a href="img/gallery/2.jpg" class="btn btn-sm btn-warning colorbox-button">Know More</a>
    225. 

  225. 									</div>
    226. 

  226. 								</div>
    227. 

  227. 							</div>
    228. 

  228. 						</div>
    229. 

  229. 					</div>
    230. 

  230. 					<div class="divide60"></div>
    231. 

  231. 		</section>
    232. 

  232. 		<!--/PORTFOLIO UNIT  -->
    233. 

  233. 		
    234. 

  234. 		<!-- PARALLAX DIALOGUE UNIT-->
    235. 

  235. 		<section id="parallax-1" data-type="background" data-speed="10" class="pages text-center">
    236. 

  236. 			<div class="parallax-overlay text-center">
    237. 

  237. 				<h2 class="text-center">
    238. 

  238. 					<span class="bigintro-light">Product Demo</span>
    239. 

  239. 				</h2>
    240. 

  240. 				<iframe class="hidden-xs" src="http://player.vimeo.com/video/72393668" width="700" height="393" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    241. 

  241. 				
    242. 

  242. 				<iframe class="visible-xs" src="http://player.vimeo.com/video/72393668" width="100%" height="auto" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    243. 

  243. 			</div>
    244. 

  244. 		</section>
    245. 

  245. 		<!--/PARALLAX DIALOGUE UNIT-->
    246. 

  246. 		
    247. 

  247. 		<!-- FEATURES UNIT -->
    248. 

  248. 		<section id="features" class="color-light">
    249. 

  249. 			<div class="container">
    250. 

  250. 				<div class="divide40"></div>
    251. 

  251. 				<div class="row">
    252. 

  252. 					<div class="col-md-12">
    253. 

  253. 							<h2 class="text-center">
    254. 

  254. 							<span class="bigintro">Features</span>
    255. 

  255. 							</h2>
    256. 

  256. 					</div>
    257. 

  257. 				</div>
    258. 

  258. 				<div class="divide60"></div>
    259. 

  259. 				<div class="row">
    260. 

  260. 					<div class="col-md-3 col-sm-6">
    261. 

  261. 						<div class="feature">
    262. 

  262. 							<i class="extralarge fa fa-bar-chart-o"></i>
    263. 

  263. 							<br/><br/>
    264. 

  264. 							<h3>Analytics</h3>
    265. 

  265. 							<br/>
    266. 

  266. 							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
    267. 

  267. 						</div>
    268. 

  268. 					</div>
    269. 

  269. 					<div class="col-md-3 col-sm-6">
    270. 

  270. 						<div class="feature">
    271. 

  271. 							<i class="extralarge fa fa-video-camera"></i>
    272. 

  272. 							<br/><br/>
    273. 

  273. 							<h3>Media</h3>
    274. 

  274. 							<br/>
    275. 

  275. 							<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
    276. 

  276. 						</div>
    277. 

  277. 					</div>
    278. 

  278. 					<div class="col-md-3 col-sm-6">
    279. 

  279. 						<div class="feature">
    280. 

  280. 							<i class="extralarge fa fa-bullhorn"></i>
    281. 

  281. 							<br/><br/>
    282. 

  282. 							<h3>Notifications</h3>
    283. 

  283. 							<br/>
    284. 

  284. 							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
    285. 

  285. 						</div>
    286. 

  286. 					</div>
    287. 

  287. 					<div class="col-md-3 col-sm-6">
    288. 

  288. 						<div class="feature">
    289. 

  289. 							<i class="extralarge fa fa-picture-o"></i>
    290. 

  290. 							<br/><br/>
    291. 

  291. 							<h3>Design</h3>
    292. 

  292. 							<br/>
    293. 

  293. 							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
    294. 

  294. 						</div>
    295. 

  295. 					</div>
    296. 

  296. 				</div>
    297. 

  297. 				<div class="divide60"></div>
    298. 

  298. 			</div>
    299. 

  299. 		</section>
    300. 

  300. 		<!--/FEATURES UNIT  -->
    301. 

  301. 						
    302. 

  302. 		<!-- SIGNUP -->
    303. 

  303. 		<section id="signup-again" class="color-primary pattern text-center">
    304. 

  304. 			<section class="container">
    305. 

  305. 				<div class="divide20"></div>
    306. 

  306. 				<div class="row">
    307. 

  307. 					<div class="col-md-12">
    308. 

  308. 						<h3 class="centered big call-to-action">
    309. 

  309. 						Try out our 30-day trial package
    310. 

  310. 						</h3>
    311. 

  311. 					</div>
    312. 

  312. 				</div>
    313. 

  313. 				<div class="divide20"></div>
    314. 

  314. 				<div class="row">
    315. 

  315. 					<form class="form-inline centered" role="form">
    316. 

  316. 						<div class="form-group">
    317. 

  317. 							<label class="sr-only" for="exampleInputEmail2">Email address</label>
    318. 

  318. 							<input type="email" class="form-control input-lg" id="exampleInputEmail2" placeholder="Enter your email address">
    319. 

  319. 						</div>
    320. 

  320. 					</form>
    321. 

  321. 				</div>
    322. 

  322. 				<br/>
    323. 

  323. 				<div class="row">
    324. 

  324. 					<button type="submit" class="btn btn-warning btn-lg">Get started for free</button>
    325. 

  325. 				</div>
    326. 

  326. 				<div class="divide20"></div>
    327. 

  327. 			</section>
    328. 

  328. 		</section>
    329. 

  329. 		<!--/SIGNUP -->
    330. 

  330. 				
    331. 

  331. 		<!-- ABOUT UNIT -->
    332. 

  332. 		<section id="about" class="color-light text-center">
    333. 

  333. 			<div class="container">
    334. 

  334. 				<div class="divide40"></div>
    335. 

  335. 				<div class="row">
    336. 

  336. 					<div class="col-md-12">
    337. 

  337. 							<h2 class="text-center">
    338. 

  338. 							<span class="bigintro">About Us</span>
    339. 

  339. 							</h2>
    340. 

  340. 					</div>
    341. 

  341. 				</div>
    342. 

  342. 				<div class="divide20"></div>
    343. 

  343. 				<div class="row">
    344. 

  344. 					<div class="col-md-12 about">
    345. 

  345. 						<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, isn't anything embarrassing hidden in the middle of text. </p><p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from injected humour, or non-characteristic words etc. </p>
    346. 

  346. 					</div>
    347. 

  347. 				</div>
    348. 

  348. 			</div>
    349. 

  349. 			<div class="divide40"></div>
    350. 

  350. 		</section>
    351. 

  351. 		<!-- /ABOUT UNIT -->
    352. 

  352. 

  353. 		<!-- TESTIMONIALS -->
    354. 

  354. 		<section id="parallax-2" data-type="background" data-speed="10" class="pages textcenter">
    355. 

  355. 			<div class="parallax-overlay">
    356. 

  356. 				<h2 class="text-center">
    357. 

  357. 					<span class="bigintro-light">Testimonials</span>
    358. 

  358. 				</h2>
    359. 

  359. 				 <div id="myCarousel" class="carousel slide">
    360. 

  360. 				  <!-- Indicators -->
    361. 

  361. 				  <ol class="carousel-indicators">
    362. 

  362. 					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    363. 

  363. 					<li data-target="#myCarousel" data-slide-to="1"></li>
    364. 

  364. 					<li data-target="#myCarousel" data-slide-to="2"></li>
    365. 

  365. 				  </ol>
    366. 

  366. 				  <div class="carousel-inner">
    367. 

  367. 					<div class="item active">
    368. 

  368. 					  <div class="container">
    369. 

  369. 						<div class="carousel-caption">
    370. 

  370. 						  <div class="row">
    371. 

  371. 							<div class="circular col-md-6">
    372. 

  372. 								<img src="img/testimonials/headshot1.jpg" alt="headshot #1" />
    373. 

  373. 								<h3>Jane Richards</h3>
    374. 

  374. 								<p>"He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat peristyles. This quarter occupied, with its streets, squares, docks, and warehouses."</p>
    375. 

  375. 								<h4>www.firstname.com</h4>
    376. 

  376. 							</div>
    377. 

  377. 							<div class="circular col-md-6">
    378. 

  378. 								<img src="img/testimonials/headshot2.jpg" alt="headshot #2" />
    379. 

  379. 								<h3>Shelly Doe</h3>
    380. 

  380. 								<p>"The civil Emperor, before the Mikado, the spiritual Emperor, absorbed his office in his own. The Carnatic anchored at the quay near the custom-house, in the midst of a crow-fluidd of ships bearing the flags of all nations. Passepartout went."</p>
    381. 

  381. 								<h4>www.secondname.com</h4>
    382. 

  382. 							</div>
    383. 

  383. 						 </div>
    384. 

  384. 						</div>
    385. 

  385. 					  </div>
    386. 

  386. 					</div>
    387. 

  387. 					<div class="item">
    388. 

  388. 					  <div class="container">
    389. 

  389. 						<div class="carousel-caption">
    390. 

  390. 						  <div class="row">
    391. 

  391. 							<div class="circular col-md-6">
    392. 

  392. 								<img src="img/testimonials/headshot3.jpg" alt="headshot #3" />
    393. 

  393. 								<h3>Jim Doe</h3>
    394. 

  394. 								<p>"He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat peristyles. This quarter occupied, with its streets, squares, docks, and warehouses."</p>
    395. 

  395. 								<h4>www.thirdname.com</h4>
    396. 

  396. 							</div>
    397. 

  397. 							<div class="circular col-md-6">
    398. 

  398. 								<img src="img/testimonials/headshot4.jpg" alt="headshot #4" />
    399. 

  399. 								<h3>Kim Doe</h3>
    400. 

  400. 								<p>"The civil Emperor, before the Mikado, the spiritual Emperor, absorbed his office in his own. The Carnatic anchored at the quay near the custom-house, in the midst of a crow-fluidd of ships bearing the flags of all nations. Passepartout went."</p>
    401. 

  401. 								<h4>www.lastname.com</h4>
    402. 

  402. 							</div>
    403. 

  403. 						 </div>
    404. 

  404. 						</div>
    405. 

  405. 					  </div>
    406. 

  406. 					</div>
    407. 

  407. 					<div class="item">
    408. 

  408. 					  <div class="container">
    409. 

  409. 						<div class="carousel-caption">
    410. 

  410. 						  <div class="row">
    411. 

  411. 							<div class="circular col-md-6">
    412. 

  412. 								<img src="img/testimonials/headshot5.jpg" alt="headshot #4" />
    413. 

  413. 								<h3>Liz Doe</h3>
    414. 

  414. 								<p>"He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat peristyles. This quarter occupied, with its streets, squares, docks, and warehouses."</p>
    415. 

  415. 								<h4>www.doefirst.com</h4>
    416. 

  416. 							</div>
    417. 

  417. 							<div class="circular col-md-6">
    418. 

  418. 								<img src="img/testimonials/headshot6.jpg" alt="headshot #5" />
    419. 

  419. 								<h3>Nat Doe</h3>
    420. 

  420. 								<p>"The civil Emperor, before the Mikado, the spiritual Emperor, absorbed his office in his own. The Carnatic anchored at the quay near the custom-house, in the midst of a crow-fluidd of ships bearing the flags of all nations. Passepartout went."</p>
    421. 

  421. 								<h4>www.natgeo.com</h4>
    422. 

  422. 							</div>
    423. 

  423. 						 </div>
    424. 

  424. 						</div>
    425. 

  425. 					  </div>
    426. 

  426. 					</div>
    427. 

  427. 				  </div>
    428. 

  428. 				  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="fa fa-chevron-left fa-2x"></span></a>
    429. 

  429. 				  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="fa fa-chevron-right fa-2x"></span></a>
    430. 

  430. 				</div>
    431. 

  431. 				<div class="divide85"></div>
    432. 

  432. 			</div>
    433. 

  433. 		</section>
    434. 

  434. 		<!--/TESTIMONIALS -->
    435. 

  435. 			
    436. 

  436. 		<!-- TEAM UNIT -->
    437. 

  437. 		<section id="team" class="color-light text-center">
    438. 

  438. 			<div class="container">
    439. 

  439. 				<div class="divide40"></div>
    440. 

  440. 				<div class="row">
    441. 

  441. 					<div class="col-md-12">
    442. 

  442. 							<h2 class="text-center">
    443. 

  443. 							<span class="bigintro">The Team</span>
    444. 

  444. 							</h2>
    445. 

  445. 					</div>
    446. 

  446. 				</div>
    447. 

  447. 				<div class="divide60"></div>
    448. 

  448. 				<div class="row">
    449. 

  449. 					<div class="col-md-3 col-sm-6">
    450. 

  450. 						<div class="team">
    451. 

  451. 							<img alt="" src="img/img1.jpg">
    452. 

  452. 							<h3>Ruby Burrow</h3>
    453. 

  453. 							<h4>Production Manager</h4>
    454. 

  454. 							<p>I just want to argue I saw it chewing the orange peels I grow on my lawn, so I deleted it from my book.</p>
    455. 

  455. 							<a class="facebook" title="twitter" href="#"><i class="fa fa-facebook"></i></a>
    456. 

  456. 							<a class="twitter" title="twitter" href="#"><i class="fa fa-twitter"></i></a>
    457. 

  457. 							<a class="linkedin" title="linkedin" href="#"><i class="fa fa-linkedin"></i></a>
    458. 

  458. 						</div>
    459. 

  459. 					</div>
    460. 

  460. 					<div class="col-md-3 col-sm-6">
    461. 

  461. 						<div class="team">
    462. 

  462. 							<img alt="" src="img/img2.jpg">
    463. 

  463. 							<h3>Molly Debris</h3>
    464. 

  464. 							<h4>Assistant Buyer</h4>
    465. 

  465. 							<p>My waffle ate the banana last time. I saw it with my very eyes I tell you. I enjoy spinning chair on cheese.</p>
    466. 

  466. 							<a class="facebook" title="facebook" href="#"><i class="fa fa-facebook"></i></a>
    467. 

  467. 							<a class="twitter" title="twitter" href="#"><i class="fa fa-twitter"></i></a>
    468. 

  468. 							<a class="linkedin" title="linkedin" href="#"><i class="fa fa-linkedin"></i></a>
    469. 

  469. 						</div>
    470. 

  470. 					</div>
    471. 

  471. 					<div class="col-md-3 col-sm-6">
    472. 

  472. 						<div class="team">
    473. 

  473. 							<img alt="" src="img/img3.jpg">
    474. 

  474. 							<h3>Dave Jose</h3>
    475. 

  475. 							<h4>Brand Manager</h4>
    476. 

  476. 							<p>After eating that pie I just want to argue you may go smell the roses of the divine heaven.</p>
    477. 

  477. 							<a class="facebook" title="facebook" href="#"><i class="fa fa-facebook"></i></a>
    478. 

  478. 							<a class="twitter" title="twitter" href="#"><i class="fa fa-twitter"></i></a>
    479. 

  479. 							<a class="linkedin" title="linkedin" href="#"><i class="fa fa-linkedin"></i></a>
    480. 

  480. 						</div>
    481. 

  481. 					</div>
    482. 

  482. 					<div class="col-md-3 col-sm-6">
    483. 

  483. 						<div class="team">
    484. 

  484. 							<img alt="" src="img/img4.jpg">
    485. 

  485. 							<h3>Rachael Buffay</h3>
    486. 

  486. 							<h4>Design Head</h4>
    487. 

  487. 							<p>What a donkey your unicorn is. Give the penguin back its credit card right now. I just want to argue.</p>
    488. 

  488. 							<a class="facebook" title="facebook" href="#"><i class="fa fa-facebook"></i></a>
    489. 

  489. 							<a class="twitter" title="twitter" href="#"><i class="fa fa-twitter"></i></a>
    490. 

  490. 							<a class="linkedin" title="linkedin" href="#"><i class="fa fa-linkedin"></i></a>
    491. 

  491. 						</div>
    492. 

  492. 					</div>
    493. 

  493. 				</div>
    494. 

  494. 				<div class="divide60"></div>
    495. 

  495. 			</div>
    496. 

  496. 		</section>
    497. 

  497. 		<!--/TEAM UNIT  -->
    498. 

  498. 							
    499. 

  499. 		<!-- SOCIAL BAR -->
    500. 

  500. 		<section class="color-danger social text-center">
    501. 

  501. 			<section class="container">
    502. 

  502. 				<div class="row">
    503. 

  503. 					<div class="col-md-12">
    504. 

  504. 						<h3>Be up to date, follow us</h3>
    505. 

  505. 							<i class="fa fa-twitter-square fa-2x darkred rm20 bm10"></i>
    506. 

  506. 							<i class="fa fa-facebook-square fa-2x darkred rm20 bm10"></i>
    507. 

  507. 							<i class="fa fa-linkedin-square fa-2x darkred rm20 bm10"></i>			
    508. 

  508. 							<i class="fa fa-youtube-square fa-2x darkred rm20 bm10"></i>
    509. 

  509. 							<i class="fa fa-google-plus-square fa-2x darkred rm20 bm10"></i>
    510. 

  510. 					</div>
    511. 

  511. 				</div>
    512. 

  512. 			</section>
    513. 

  513. 		</section>
    514. 

  514. 		<!--/SOCIAL BAR -->
    515. 

  515. 		
    516. 

  516. 		<!-- CONTACT-US -->
    517. 

  517. 		<section id="parallax-3" data-type="background" data-speed="10" class="pages text-center">
    518. 

  518. 			<div class="parallax-overlay">
    519. 

  519. 				<section id="contact">
    520. 

  520. 					<section class="container">
    521. 

  521. 						<div class="divide40"></div>
    522. 

  522. 										<div class="row">
    523. 

  523. 							<div class="col-md-12">
    524. 

  524. 									<h2 class="text-center">
    525. 

  525. 									<span class="bigintro-light">Contact Us</span>
    526. 

  526. 									</h2>
    527. 

  527. 							</div>
    528. 

  528. 						</div>
    529. 

  529. 						<div class="divide20"></div>
    530. 

  530. 						<div class="row">
    531. 

  531. 							<div class="col-md-6 col-md-offset-3 form-input">
    532. 

  532. 								<input id="company" type="text" placeholder="Company" value="" name="company"/>
    533. 

  533. 							</div>
    534. 

  534. 							<div class="col-md-6 col-md-offset-3 form-input">
    535. 

  535. 								<input id="title" type="text" placeholder="Title" value="" name="title"/>
    536. 

  536. 							</div>
    537. 

  537. 							<div class="col-md-6 col-md-offset-3 form-input">
    538. 

  538. 								<input id="name" type="text" placeholder="Name" value="" name="name"/>
    539. 

  539. 							</div>
    540. 

  540. 							<div class="col-md-6 col-md-offset-3 form-input">
    541. 

  541. 								<input id="email" type="email" placeholder="Email" value="" name="email"/>
    542. 

  542. 							</div>
    543. 

  543. 							<div class="col-md-6 col-md-offset-3 form-input">
    544. 

  544. 								<textarea id="message"  placeholder="Message" name="message"></textarea>
    545. 

  545. 							</div>
    546. 

  546. 							<div class="col-md-6 col-md-offset-3 form-submit">
    547. 

  547. 								<button id="submit" class="btn btn-warning btn-lg" type="submit">SEND</button>
    548. 

  548. 							</div>
    549. 

  549. 						</div>
    550. 

  550. 						<div class="divide60"></div>
    551. 

  551. 					</section>
    552. 

  552. 				</section>
    553. 

  553. 			</div>
    554. 

  554. 		</section>
    555. 

  555. 		<!--/CONTACT-US -->
    556. 

  556. 		
    557. 

  557. 		<!-- FOOTER -->
    558. 

  558. 		<section id="footer" class="color-light pattern">
    559. 

  559. 			<div class="container">
    560. 

  560. 				<div id="column-footer" class="row-fluid">
    561. 

  561. 					<div class="col-sm-4">
    562. 

  562. 						<h3>Learn More</h3>
    563. 

  563. 						<ul>
    564. 

  564. 							<li><a href="#">How it works</a></li>
    565. 

  565. 							<li><a href="#">Safety measures</a></li>
    566. 

  566. 							<li><a href="#">Testimonials</a></li>
    567. 

  567. 							<li><a href="#">The Blog</a></li>
    568. 

  568. 						</ul>
    569. 

  569. 					</div>
    570. 

  570. 					<div class="col-sm-4">
    571. 

  571. 						<h3>Help & Support</h3>
    572. 

  572. 						<ul>
    573. 

  573. 							<li><a href="#">Frequently Asked Questions</a></li>
    574. 

  574. 							<li><a href="#">Creative Requirements</a></li>
    575. 

  575. 							<li><a href="#">Glossary of Terms</a></li>
    576. 

  576. 							<li><a href="#">The Safety</a></li>
    577. 

  577. 						</ul>
    578. 

  578. 					</div>
    579. 

  579. 					<div class="col-sm-4">
    580. 

  580. 						<h3>About Us</h3>
    581. 

  581. 						<ul>
    582. 

  582. 							<li><a href="#">Press</a></li>
    583. 

  583. 							<li><a href="#">Our Team</a></li>
    584. 

  584. 							<li><a href="#">Careers</a></li>
    585. 

  585. 							<li><a href="#">Our Partners</a></li>
    586. 

  586. 						</ul>
    587. 

  587. 					</div>
    588. 

  588. 				</div>
    589. 

  589. 			  </div>
    590. 

  590. 		</section>
    591. 

  591. 		<!--/FOOTER -->
    592. 

  592. 	</div>
    593. 

  593. 	<!--/PAGE -->
    594. 

  594. 	
    595. 

  595. 	<!-- JAVASCRIPTS -->
    596. 

  596. 	<!-- Placed at the end of the document so the pages load faster -->
    597. 

  597. 	<script src="js/jquery-1.9.1.min.js"></script>
    598. 

  598. 	<script src="bootstrap-dist/js/bootstrap.min.js"></script>
    599. 

  599. 	<script type="text/javascript" src="js/waypoint/waypoints.min.js"></script>
    600. 

  600. 	<script type="text/javascript" src="js/navmaster/jquery.scrollTo.js"></script>
    601. 

  601. 	<script type="text/javascript" src="js/navmaster/jquery.nav.js"></script>
    602. 

  602. 	<script src="js/isotope/jquery.isotope.min.js" type="text/javascript"></script>
    603. 

  603. 	<script type="text/javascript" src="js/isotope/imagesloaded.pkgd.min.min.js"></script>
    604. 

  604. 	<!-- COLORBOX -->
    605. 

  605. 	<script type="text/javascript" src="js/colorbox/jquery.colorbox.min.js"></script>
    606. 

  606. 	<script src="js/script.js"></script>
    607. 

  607. </body>
    608. 

  608. </html>
    609.