Просмотр файла main_files/index.html

Конкурс дизайнеров на 15000 рублей
контркультура падонки бабруйск
Размер файла: 14.48Kb 
  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
  3. <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
  4. <!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
  5. <!--[if IE 9]>         <html class="no-js ie9" lang=""> <![endif]-->
  6. <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
  7. <head>
  8. 	<meta charset="utf-8">
  9. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  10. 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  11. 	
  12. 	<meta name="description" content="">
  13. 	<meta name="author" content="">
  14.  
  15. 	<title>PopForms Material Design Modal Forms</title>
  16. 	
  17. 	
  18. 	<!-- ====Google Font CSS==== -->
  19. 	<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,500,700,900' rel='stylesheet' type='text/css'>
  20. 	<!-- ====Font Awesome CSS==== -->
  21. 	<link href='css/font-awesome.min.css' rel='stylesheet' type='text/css'>
  22.  
  23. 	<!-- ====Favicons==== -->
  24. 	<link href="img/favicon.png" rel="shortcut icon" type="image/x-icon">
  25. 	<link href="img/favicon.png" rel="icon" type="image/x-icon">
  26.  
  27. 	<!-- ====Bootstrap Core CSS==== -->
  28. 	<link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'>
  29.  
  30. 	<!-- ====Material Design Lite Core CSS==== -->
  31. 	<link href="css/material.min.css" rel="stylesheet" type='text/css'>
  32.  
  33. 	<!-- ====Core CSS==== -->
  34. 	<link href="style.css" rel="stylesheet" type='text/css'>
  35.  
  36. 	<!-- ====Main Color Scheme CSS==== -->
  37. 	<link href="css/main-color-1.css" rel="stylesheet" type='text/css' id="mainColorScheme">
  38.  
  39.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  40.     <!--[if lt IE 9]>
  41.         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  42.         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  43.     <![endif]-->
  44. </head>
  45. <body>
  46. 	<!-- Top Navigation Bar Start -->
  47. 	<nav id="topNav2" class="navbar">
  48. 		<div class="container">
  49.             <!-- Logo Start -->
  50.             <a class="navbar-brand" href="index.html">
  51. 				<img src="img/logo.png" alt="">
  52. 			</a>
  53.             <!-- Logo End -->
  54. 		</div>
  55. 	</nav>
  56. 	<!-- Top Navigation Bar End -->
  57.  
  58. 	<!-- Banner Area Start -->
  59. 	<div id="banner" data-img-src="img/banner-bg.jpg">
  60. 		<div class="vc-parent">
  61. 			<div class="vc-child">
  62. 				<div class="banner-content">
  63. 			        <div class="container">
  64. 			            <div class="row">
  65. 			                <div class="col-md-12">
  66. 			                    <div class="slider-2-content text-center">
  67. 			                        <h2 class="mdl-typography--display-2 mdl-typography--text-capitalize">lorem ipsum dolor amet consectetur</h2>
  68. 			                        <h4 class="mdl-typography--text-capitalize">lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  69. 			                        <a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-toggle="modal" data-target="#loginFormModal"><i class="fa fa-user"></i> Login</a>
  70. 			                        <a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-toggle="modal" data-target="#signupFormModal"><i class="fa fa-user-plus"></i> Singup</a>
  71. 			                        <a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-toggle="modal" data-target="#forgotFormModal"><i class="fa fa-lock"></i> Forgot</a>
  72. 			                        <a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-toggle="modal" data-target="#subscribeFormModal"><i class="fa fa-paper-plane"></i> Subscribe</a>
  73. 			                        <a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-toggle="modal" data-target="#contactFormModal"><i class="fa fa-envelope"></i> Contact</a>
  74. 			                    </div>
  75. 			                </div>
  76. 			            </div>
  77. 			        </div>
  78. 		        </div>
  79. 			</div>
  80. 		</div>
  81. 	</div>
  82. 	<!-- Banner Area End -->
  83. 	
  84. 	<!-- Login Form Start -->
  85. 	<div class="modal fade" id="loginFormModal" tabindex="-1" role="dialog" aria-labelledby="loginForm">
  86. 		<div class="modal-dialog" role="document">
  87. 			<div class="modal-content">
  88. 				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  89. 				<div class="loginForm">
  90. 					<div class="mdl-card mdl-shadow--2dp">
  91. 						<div class="mdl-card__title mdl-card--expand">
  92. 							<div class="modal--logo">
  93. 								<img src="img/logo.png" alt="">
  94. 							</div>
  95. 						</div>
  96. 						<div class="mdl-card__supporting-text">
  97. 							<form action="#" method="post" id="loginForm">
  98. 								<div class="mdl-textfield mdl-js-textfield">
  99. 									<input class="mdl-textfield__input" type="text" name="loginUsername" id="loginUsername">
  100. 									<label class="mdl-textfield__label" for="loginUsername">Username</label>
  101. 								</div>
  102. 								<div class="mdl-textfield mdl-js-textfield">
  103. 									<input class="mdl-textfield__input" type="password" name="loginPassword" id="loginPassword">
  104. 									<label class="mdl-textfield__label" for="loginPassword">Password</label>
  105. 								</div>
  106. 								
  107. 								<button type="submit" class="login-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Login</button>
  108. 							</form>
  109. 						</div>
  110. 						<div class="mdl-card__actions mdl-card--border clearfix">
  111. 							<a href="#" class="pull-left mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-toggle="modal" data-target="#forgotFormModal" data-dismiss="modal">
  112. 								Forgot Password?
  113. 							</a>
  114. 							<a href="#" class="pull-right mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-toggle="modal" data-target="#signupFormModal" data-dismiss="modal">
  115. 								Create An Account
  116. 							</a>
  117. 						</div>
  118. 					</div>
  119. 				</div>
  120. 			</div>
  121. 		</div>
  122. 	</div>
  123. 	<!-- Login Form End -->
  124. 	
  125. 	<!-- Signup Form Start -->
  126. 	<div class="modal fade" id="signupFormModal" tabindex="-1" role="dialog" aria-labelledby="signupFormModal">
  127. 		<div class="modal-dialog" role="document">
  128. 			<div class="modal-content">
  129. 				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  130. 				<div class="signupForm">
  131. 					<div class="mdl-card mdl-shadow--2dp">
  132. 						<div class="mdl-card__title mdl-card--expand">
  133. 							<div class="modal--logo">
  134. 								<img src="img/logo.png" alt="">
  135. 							</div>
  136. 						</div>
  137. 						<div class="mdl-card__supporting-text">
  138. 							<form action="#" method="post" id="signupForm">
  139. 								<div class="mdl-textfield mdl-js-textfield">
  140. 									<input class="mdl-textfield__input" type="text" name="singupName" id="singupName">
  141. 									<label class="mdl-textfield__label" for="singupName">Full Name</label>
  142. 								</div>
  143. 								<div class="mdl-textfield mdl-js-textfield">
  144. 									<input class="mdl-textfield__input" type="text" name="singupUsername" id="singupUsername">
  145. 									<label class="mdl-textfield__label" for="singupUsername">Username</label>
  146. 								</div>
  147. 								<div class="mdl-textfield mdl-js-textfield">
  148. 									<input class="mdl-textfield__input" type="text" name="singupEmail" id="singupEmail">
  149. 									<label class="mdl-textfield__label" for="singupEmail">E-mail Address</label>
  150. 								</div>
  151. 								<div class="mdl-textfield mdl-js-textfield">
  152. 									<input class="mdl-textfield__input" type="password" name="singupPassword" id="singupPassword">
  153. 									<label class="mdl-textfield__label" for="singupPassword">Password</label>
  154. 								</div>
  155. 								<div class="mdl-textfield mdl-js-textfield">
  156. 									<input class="mdl-textfield__input" type="password" name="singupPasswordAgain" id="singupPasswordAgain">
  157. 									<label class="mdl-textfield__label" for="singupPasswordAgain">Re-Type Password</label>
  158. 								</div>
  159. 								
  160. 								<button type="submit" class="singup-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Singup</button>
  161. 							</form>
  162. 						</div>
  163. 						<div class="mdl-card__actions mdl-card--border clearfix">
  164. 							<p class="pull-left">Already Have An Account?</p>
  165. 							<a href="#" class="pull-right mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-toggle="modal" data-target="#loginFormModal" data-dismiss="modal">
  166. 								Login
  167. 							</a>
  168. 						</div>
  169. 					</div>
  170. 				</div>
  171. 			</div>
  172. 		</div>
  173. 	</div>
  174. 	<!-- Signup Form End -->
  175. 	
  176. 	<!-- Forgot Form Start -->
  177. 	<div class="modal fade" id="forgotFormModal" tabindex="-1" role="dialog" aria-labelledby="signupFormModal">
  178. 		<div class="modal-dialog" role="document">
  179. 			<div class="modal-content">
  180. 				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  181. 				<div class="forgotForm">
  182. 					<div class="mdl-card mdl-shadow--2dp">
  183. 						<div class="mdl-card__title mdl-card--expand">
  184. 							<div class="modal--logo">
  185. 								<img src="img/logo.png" alt="">
  186. 							</div>
  187. 						</div>
  188. 						<div class="mdl-card__supporting-text">
  189. 							<form action="#" method="post" id="forgotForm">
  190. 								<div class="mdl-textfield mdl-js-textfield">
  191. 									<input class="mdl-textfield__input" type="text" name="forgotEmail" id="forgotEmail">
  192. 									<label class="mdl-textfield__label" for="forgotEmail">E-mail Address</label>
  193. 								</div>
  194. 								
  195. 								<button type="submit" class="forgot-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Recover</button>
  196. 							</form>
  197. 						</div>
  198. 						<div class="mdl-card__actions mdl-card--border clearfix">
  199. 							<p class="pull-left">No Account?</p>
  200. 							<a href="#" class="pull-right mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-toggle="modal" data-target="#signupFormModal" data-dismiss="modal">
  201. 								Create An Account
  202. 							</a>
  203. 						</div>
  204. 					</div>
  205. 				</div>
  206. 			</div>
  207. 		</div>
  208. 	</div>
  209. 	<!-- Forgot Form End -->
  210. 	
  211. 	<!-- Subscribe Form Start -->
  212. 	<div class="modal fade" id="subscribeFormModal" tabindex="-1" role="dialog" aria-labelledby="subscribeFormModal">
  213. 		<div class="modal-dialog" role="document">
  214. 			<div class="modal-content">
  215. 				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  216. 				<div class="subscribeForm">
  217. 					<div class="mdl-card mdl-shadow--2dp">
  218. 						<div class="mdl-card__title mdl-card--expand">
  219. 							<div class="modal--logo">
  220. 								<img src="img/logo.png" alt="">
  221. 							</div>
  222. 						</div>
  223. 						<div class="mdl-card__supporting-text">
  224. 							<form action="#" method="post" id="subscribeForm">
  225. 								<div class="mdl-textfield mdl-js-textfield">
  226. 									<input class="mdl-textfield__input" type="text" name="subscribeEmail" id="subscribeEmail">
  227. 									<label class="mdl-textfield__label" for="subscribeEmail">E-mail Address</label>
  228. 								</div>
  229. 								
  230. 								<button type="submit" class="subscribe-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Subscribe</button>
  231. 							</form>
  232. 						</div>
  233. 					</div>
  234. 				</div>
  235. 			</div>
  236. 		</div>
  237. 	</div>
  238. 	<!-- Subscribe Form End -->
  239. 	
  240. 	<!-- Contact Form Start -->
  241. 	<div class="modal fade" id="contactFormModal" tabindex="-1" role="dialog" aria-labelledby="contactFormModal">
  242. 		<div class="modal-dialog" role="document">
  243. 			<div class="modal-content">
  244. 				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  245. 				<div class="contactForm">
  246. 					<div class="mdl-card mdl-shadow--2dp">
  247. 						<div class="mdl-card__title mdl-card--expand">
  248. 							<div class="modal--logo">
  249. 								<img src="img/logo.png" alt="">
  250. 							</div>
  251. 						</div>
  252. 						<div class="mdl-card__supporting-text">
  253. 							<form action="sendmail.php" method="post" id="contactForm">
  254. 								<div class="row">
  255. 									<div class="col-md-6">
  256. 										<div class="mdl-textfield mdl-js-textfield">
  257. 											<input class="mdl-textfield__input" type="text" name="contactName" id="contactName">
  258. 											<label class="mdl-textfield__label" for="contactName">Full Name</label>
  259. 										</div>
  260. 									</div>
  261. 									<div class="col-md-6">
  262. 										<div class="mdl-textfield mdl-js-textfield">
  263. 											<input class="mdl-textfield__input" type="text" name="contactEmail" id="contactEmail">
  264. 											<label class="mdl-textfield__label" for="contactEmail">E-mail Address</label>
  265. 										</div>
  266. 									</div>
  267. 								</div>
  268. 								<div class="mdl-textfield mdl-js-textfield">
  269. 									<input class="mdl-textfield__input" type="text" name="contactSubject" id="contactSubject">
  270. 									<label class="mdl-textfield__label" for="contactSubject">Subject</label>
  271. 								</div>
  272. 								<div class="mdl-textfield mdl-js-textfield">
  273. 									<textarea class="mdl-textfield__input" name="contactMessage" id="contactMessage"></textarea>
  274. 									<label class="mdl-textfield__label" for="contactMessage">Message</label>
  275. 								</div>
  276. 								
  277. 								<button type="submit" class="contact-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Send</button>
  278. 							</form>
  279. 						</div>
  280. 					</div>
  281. 				</div>
  282. 			</div>
  283. 		</div>
  284. 	</div>
  285. 	<!-- Contact Form End -->
  286. 		
  287.     <!-- Color Switcher Start -->
  288.     <div id="open-switcher">
  289.         <i class="fa fa-paint-brush"></i>
  290.     </div>
  291.     <div id="close-switcher">
  292.         <i class="fa fa-times"></i>
  293.     </div>
  294.     <div id="demo-colors" class="mdl-card mdl-shadow--24dp">
  295.         <div id="demo-wrapper">
  296.  
  297.             <h2>MAIN COLOR:</h2>
  298.  
  299.             <ul id="mainColors">
  300.                 <li class="color-2 active" data-path="css/main-color-1.css"></li>
  301.                 <li class="color-4" data-path="css/main-color-2.css"></li>
  302.                 <li class="color-3" data-path="css/main-color-3.css"></li>
  303.                 <li class="color-1" data-path="css/main-color-4.css"></li>
  304.                 <li class="color-5" data-path="css/main-color-5.css"></li>
  305.             </ul>
  306.  
  307.         </div>
  308.     </div>
  309.     <!-- Color Switcher End -->
  310.  
  311. 	<!-- ====jQuery Core JavaScript==== -->
  312. 	<script src="js/jquery-2.2.2.min.js"></script>
  313.  
  314. 	<!-- ====Bootstrap Core JavaScript==== -->
  315. 	<script src="js/bootstrap.min.js"></script>
  316.  
  317. 	<!-- ====Material Design Lite Core JavaScript==== -->
  318. 	<script src="js/material.min.js"></script>
  319. 	
  320.     <!-- ====jQuery Validation JavaScript==== -->
  321.     <script src="js/jquery.validate.min.js"></script>
  322.  
  323. 	<!-- ====Core JavaScript==== -->
  324. 	<script src="js/main.js"></script>
  325.  
  326. 	<!-- ====Color Switcher JavaScript==== -->
  327.     <script src="js/color-switcher.js"></script>
  328. </body>
  329. </html>