Размер файла: 14.48Kb
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>PopForms Material Design Modal Forms</title>
<!-- ====Google Font CSS==== -->
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,500,700,900' rel='stylesheet' type='text/css'>
<!-- ====Font Awesome CSS==== -->
<link href='css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<!-- ====Favicons==== -->
<link href="img/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="img/favicon.png" rel="icon" type="image/x-icon">
<!-- ====Bootstrap Core CSS==== -->
<link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'>
<!-- ====Material Design Lite Core CSS==== -->
<link href="css/material.min.css" rel="stylesheet" type='text/css'>
<!-- ====Core CSS==== -->
<link href="style.css" rel="stylesheet" type='text/css'>
<!-- ====Main Color Scheme CSS==== -->
<link href="css/main-color-1.css" rel="stylesheet" type='text/css' id="mainColorScheme">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Top Navigation Bar Start -->
<nav id="topNav2" class="navbar">
<div class="container">
<!-- Logo Start -->
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="">
</a>
<!-- Logo End -->
</div>
</nav>
<!-- Top Navigation Bar End -->
<!-- Banner Area Start -->
<div id="banner" data-img-src="img/banner-bg.jpg">
<div class="vc-parent">
<div class="vc-child">
<div class="banner-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="slider-2-content text-center">
<h2 class="mdl-typography--display-2 mdl-typography--text-capitalize">lorem ipsum dolor amet consectetur</h2>
<h4 class="mdl-typography--text-capitalize">lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
<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>
<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>
<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>
<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>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Banner Area End -->
<!-- Login Form Start -->
<div class="modal fade" id="loginFormModal" tabindex="-1" role="dialog" aria-labelledby="loginForm">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="loginForm">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<div class="modal--logo">
<img src="img/logo.png" alt="">
</div>
</div>
<div class="mdl-card__supporting-text">
<form action="#" method="post" id="loginForm">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" name="loginUsername" id="loginUsername">
<label class="mdl-textfield__label" for="loginUsername">Username</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" name="loginPassword" id="loginPassword">
<label class="mdl-textfield__label" for="loginPassword">Password</label>
</div>
<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>
</form>
</div>
<div class="mdl-card__actions mdl-card--border clearfix">
<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">
Forgot Password?
</a>
<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">
Create An Account
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Login Form End -->
<!-- Signup Form Start -->
<div class="modal fade" id="signupFormModal" tabindex="-1" role="dialog" aria-labelledby="signupFormModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="signupForm">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<div class="modal--logo">
<img src="img/logo.png" alt="">
</div>
</div>
<div class="mdl-card__supporting-text">
<form action="#" method="post" id="signupForm">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" name="singupName" id="singupName">
<label class="mdl-textfield__label" for="singupName">Full Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" name="singupUsername" id="singupUsername">
<label class="mdl-textfield__label" for="singupUsername">Username</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" name="singupEmail" id="singupEmail">
<label class="mdl-textfield__label" for="singupEmail">E-mail Address</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" name="singupPassword" id="singupPassword">
<label class="mdl-textfield__label" for="singupPassword">Password</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" name="singupPasswordAgain" id="singupPasswordAgain">
<label class="mdl-textfield__label" for="singupPasswordAgain">Re-Type Password</label>
</div>
<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>
</form>
</div>
<div class="mdl-card__actions mdl-card--border clearfix">
<p class="pull-left">Already Have An Account?</p>
<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">
Login
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Signup Form End -->
<!-- Forgot Form Start -->
<div class="modal fade" id="forgotFormModal" tabindex="-1" role="dialog" aria-labelledby="signupFormModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="forgotForm">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<div class="modal--logo">
<img src="img/logo.png" alt="">
</div>
</div>
<div class="mdl-card__supporting-text">
<form action="#" method="post" id="forgotForm">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" name="forgotEmail" id="forgotEmail">
<label class="mdl-textfield__label" for="forgotEmail">E-mail Address</label>
</div>
<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>
</form>
</div>
<div class="mdl-card__actions mdl-card--border clearfix">
<p class="pull-left">No Account?</p>
<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">
Create An Account
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Forgot Form End -->
<!-- Subscribe Form Start -->
<div class="modal fade" id="subscribeFormModal" tabindex="-1" role="dialog" aria-labelledby="subscribeFormModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="subscribeForm">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<div class="modal--logo">
<img src="img/logo.png" alt="">
</div>
</div>
<div class="mdl-card__supporting-text">
<form action="#" method="post" id="subscribeForm">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" name="subscribeEmail" id="subscribeEmail">
<label class="mdl-textfield__label" for="subscribeEmail">E-mail Address</label>
</div>
<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>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Subscribe Form End -->
<!-- Contact Form Start -->
<div class="modal fade" id="contactFormModal" tabindex="-1" role="dialog" aria-labelledby="contactFormModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="contactForm">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<div class="modal--logo">
<img src="img/logo.png" alt="">
</div>
</div>
<div class="mdl-card__supporting-text">
<form action="sendmail.php" method="post" id="contactForm">
<div class="row">
<div class="col-md-6">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" name="contactName" id="contactName">
<label class="mdl-textfield__label" for="contactName">Full Name</label>
</div>
</div>
<div class="col-md-6">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" name="contactEmail" id="contactEmail">
<label class="mdl-textfield__label" for="contactEmail">E-mail Address</label>
</div>
</div>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" name="contactSubject" id="contactSubject">
<label class="mdl-textfield__label" for="contactSubject">Subject</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<textarea class="mdl-textfield__input" name="contactMessage" id="contactMessage"></textarea>
<label class="mdl-textfield__label" for="contactMessage">Message</label>
</div>
<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>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Form End -->
<!-- Color Switcher Start -->
<div id="open-switcher">
<i class="fa fa-paint-brush"></i>
</div>
<div id="close-switcher">
<i class="fa fa-times"></i>
</div>
<div id="demo-colors" class="mdl-card mdl-shadow--24dp">
<div id="demo-wrapper">
<h2>MAIN COLOR:</h2>
<ul id="mainColors">
<li class="color-2 active" data-path="css/main-color-1.css"></li>
<li class="color-4" data-path="css/main-color-2.css"></li>
<li class="color-3" data-path="css/main-color-3.css"></li>
<li class="color-1" data-path="css/main-color-4.css"></li>
<li class="color-5" data-path="css/main-color-5.css"></li>
</ul>
</div>
</div>
<!-- Color Switcher End -->
<!-- ====jQuery Core JavaScript==== -->
<script src="js/jquery-2.2.2.min.js"></script>
<!-- ====Bootstrap Core JavaScript==== -->
<script src="js/bootstrap.min.js"></script>
<!-- ====Material Design Lite Core JavaScript==== -->
<script src="js/material.min.js"></script>
<!-- ====jQuery Validation JavaScript==== -->
<script src="js/jquery.validate.min.js"></script>
<!-- ====Core JavaScript==== -->
<script src="js/main.js"></script>
<!-- ====Color Switcher JavaScript==== -->
<script src="js/color-switcher.js"></script>
</body>
</html>