Changing UX for simpler design
This commit is contained in:
297
examples/landing.html
Normal file
297
examples/landing.html
Normal file
@@ -0,0 +1,297 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>Paper Kit 2 PRO by Creative Tim</title>
|
||||
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../assets/css/paper-kit.css?v=2.0.1" rel="stylesheet"/>
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
|
||||
<!-- Fonts and icons -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,300,700' rel='stylesheet' type='text/css'>
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-toggleable-md fixed-top navbar-transparent" color-on-scroll="300">
|
||||
<div class="container">
|
||||
<div class="navbar-translate">
|
||||
<button class="navbar-toggler navbar-toggler-right navbar-burger" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-bar"></span>
|
||||
<span class="navbar-toggler-bar"></span>
|
||||
<span class="navbar-toggler-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="https://www.creative-tim.com">Paper Kit 2</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbarToggler">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a href="../index.html" class="nav-link"><i class="nc-icon nc-layout-11"></i>Components</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../documentation/tutorial-components.html" target="_blank" class="nav-link"><i class="nc-icon nc-book-bookmark"></i> Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom" href="https://twitter.com/CreativeTim" target="_blank">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<p class="hidden-lg-up">Twitter</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank">
|
||||
<i class="fa fa-facebook-square"></i>
|
||||
<p class="hidden-lg-up">Facebook</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
|
||||
<i class="fa fa-instagram"></i>
|
||||
<p class="hidden-lg-up">Instagram</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Star on GitHub" data-placement="bottom" href="https://www.github.com/CreativeTimOfficial" target="_blank">
|
||||
<i class="fa fa-github"></i>
|
||||
<p class="hidden-lg-up">GitHub</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="page-header" data-parallax="true" style="background-image: url('../assets/img/daniel-olahh.jpg');">
|
||||
<div class="filter"></div>
|
||||
<div class="container">
|
||||
<div class="motto text-center">
|
||||
<h1>Example page</h1>
|
||||
<h3>Start designing your landing page here.</h3>
|
||||
<br />
|
||||
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="btn btn-outline-neutral btn-round"><i class="fa fa-play"></i>Watch video</a>
|
||||
<button type="button" class="btn btn-outline-neutral btn-round">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="section text-center">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 offset-md-2">
|
||||
<h2 class="title">Let's talk product</h2>
|
||||
<h5 class="description">This is the paragraph where you can write more details about your product. Keep you user engaged by providing meaningful information. Remember that by this time, the user is curious, otherwise he wouldn't scroll to get here. Add a button if you want the user to see more.</h5>
|
||||
<br>
|
||||
<a href="#paper-kit" class="btn btn-danger btn-round">See Details</a>
|
||||
</div>
|
||||
</div>
|
||||
<br/><br/>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="info">
|
||||
<div class="icon icon-danger">
|
||||
<i class="nc-icon nc-album-2"></i>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h4 class="info-title">Beautiful Gallery</h4>
|
||||
<p class="description">Spend your time generating new ideas. You don't have to think of implementing.</p>
|
||||
<a href="#pkp" class="btn btn-link btn-danger">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="info">
|
||||
<div class="icon icon-danger">
|
||||
<i class="nc-icon nc-bulb-63"></i>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h4 class="info-title">New Ideas</h4>
|
||||
<p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient.</p>
|
||||
<a href="#pkp" class="btn btn-link btn-danger">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="info">
|
||||
<div class="icon icon-danger">
|
||||
<i class="nc-icon nc-chart-bar-32"></i>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h4 class="info-title">Statistics</h4>
|
||||
<p>Choose from a veriety of many colors resembling sugar paper pastels.</p>
|
||||
<a href="#pkp" class="btn btn-link btn-danger">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="info">
|
||||
<div class="icon icon-danger">
|
||||
<i class="nc-icon nc-sun-fog-29"></i>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h4 class="info-title">Delightful design</h4>
|
||||
<p>Find unique and handmade delightful designs related items directly from our sellers.</p>
|
||||
<a href="#pkp" class="btn btn-link btn-danger">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section section-dark text-center">
|
||||
<div class="container">
|
||||
<h2 class="title">Let's talk about us</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card card-profile card-plain">
|
||||
<div class="card-avatar">
|
||||
<a href="#avatar"><img src="../assets/img/faces/clem-onojeghuo-3.jpg" alt="..."></a>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<a href="#paper-kit">
|
||||
<div class="author">
|
||||
<h4 class="card-title">Henry Ford</h4>
|
||||
<h6 class="card-category">Product Manager</h6>
|
||||
</div>
|
||||
</a>
|
||||
<p class="card-description text-center">
|
||||
Teamwork is so important that it is virtually impossible for you to reach the heights of your capabilities or make the money that you want without becoming very good at it.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<a href="#pablo" class="btn btn-link btn-just-icon btn-neutral"><i class="fa fa-twitter"></i></a>
|
||||
<a href="#pablo" class="btn btn-link btn-just-icon btn-neutral"><i class="fa fa-google-plus"></i></a>
|
||||
<a href="#pablo" class="btn btn-link btn-just-icon btn-neutral"><i class="fa fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card card-profile card-plain">
|
||||
<div class="card-avatar">
|
||||
<a href="#avatar"><img src="../assets/img/faces/joe-gardner-2.jpg" alt="..."></a>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<a href="#paper-kit">
|
||||
<div class="author">
|
||||
<h4 class="card-title">Sophie West</h4>
|
||||
<h6 class="card-category">Designer</h6>
|
||||
</div>
|
||||
</a>
|
||||
<p class="card-description text-center">
|
||||
A group becomes a team when each member is sure enough of himself and his contribution to praise the skill of the others. No one can whistle a symphony. It takes an orchestra to play it.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<a href="#pablo" class="btn btn-link btn-just-icon btn-neutral"><i class="fa fa-twitter"></i></a>
|
||||
<a href="#pablo" class="btn btn-link btn-just-icon btn-neutral"><i class="fa fa-google-plus"></i></a>
|
||||
<a href="#pablo" class="btn btn-link btn-just-icon btn-neutral"><i class="fa fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card card-profile card-plain">
|
||||
<div class="card-avatar">
|
||||
<a href="#avatar"><img src="../assets/img/faces/erik-lucatero-2.jpg" alt="..."></a>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<a href="#paper-kit">
|
||||
<div class="author">
|
||||
<h4 class="card-title">Robert Orben</h4>
|
||||
<h6 class="card-category">Developer</h6>
|
||||
</div>
|
||||
</a>
|
||||
<p class="card-description text-center">
|
||||
The strength of the team is each individual member. The strength of each member is the team. If you can laugh together, you can work together, silence isn’t golden, it’s deadly.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<a href="#pablo" class="btn btn-link btn-just-icon btn-neutral"><i class="fa fa-twitter"></i></a>
|
||||
<a href="#pablo" class="btn btn-link btn-just-icon btn-neutral"><i class="fa fa-google-plus"></i></a>
|
||||
<a href="#pablo" class="btn btn-link btn-just-icon btn-neutral"><i class="fa fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section landing-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 offset-md-2">
|
||||
<h2 class="text-center">Keep in touch?</h2>
|
||||
<form class="contact-form">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label>Name</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="nc-icon nc-single-02"></i>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label>Email</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="nc-icon nc-email-85"></i>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label>Message</label>
|
||||
<textarea class="form-control" rows="4" placeholder="Tell us your thoughts and feelings..."></textarea>
|
||||
<div class="row">
|
||||
<div class="col-md-4 offset-md-4">
|
||||
<button class="btn btn-danger btn-lg btn-fill">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer section-dark">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<nav class="footer-nav">
|
||||
<ul>
|
||||
<li><a href="https://www.creative-tim.com">Creative Tim</a></li>
|
||||
<li><a href="http://blog.creative-tim.com">Blog</a></li>
|
||||
<li><a href="https://www.creative-tim.com/license">Licenses</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="credits ml-auto">
|
||||
<span class="copyright">
|
||||
© <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/jquery-ui-1.12.1.custom.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/tether.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Paper Kit Initialization snd functons -->
|
||||
<script src="../assets/js/paper-kit.js?v=2.0.1"></script>
|
||||
|
||||
</html>
|
||||
191
examples/profile.html
Normal file
191
examples/profile.html
Normal file
@@ -0,0 +1,191 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>Paper Kit 2 by Creative Tim</title>
|
||||
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../assets/css/paper-kit.css?v=2.0.1" rel="stylesheet"/>
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
|
||||
<!-- Fonts and icons -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,300,700' rel='stylesheet' type='text/css'>
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-toggleable-md fixed-top navbar-transparent" color-on-scroll="150">
|
||||
<div class="container">
|
||||
<div class="navbar-translate">
|
||||
<button class="navbar-toggler navbar-toggler-right navbar-burger" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-bar"></span>
|
||||
<span class="navbar-toggler-bar"></span>
|
||||
<span class="navbar-toggler-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="https://www.creative-tim.com">Paper Kit 2</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbarToggler">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a href="../index.html" class="nav-link"><i class="nc-icon nc-layout-11"></i>Components</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../documentation/tutorial-components.html" target="_blank" class="nav-link"><i class="nc-icon nc-book-bookmark"></i> Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom" href="https://twitter.com/CreativeTim" target="_blank">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<p class="hidden-lg-up">Twitter</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank">
|
||||
<i class="fa fa-facebook-square"></i>
|
||||
<p class="hidden-lg-up">Facebook</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
|
||||
<i class="fa fa-instagram"></i>
|
||||
<p class="hidden-lg-up">Instagram</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Star on GitHub" data-placement="bottom" href="https://www.github.com/CreativeTimOfficial" target="_blank">
|
||||
<i class="fa fa-github"></i>
|
||||
<p class="hidden-lg-up">GitHub</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="page-header page-header-xs" data-parallax="true" style="background-image: url('../assets/img/fabio-mangione.jpg');">
|
||||
<div class="filter"></div>
|
||||
</div>
|
||||
<div class="section profile-content">
|
||||
<div class="container">
|
||||
<div class="owner">
|
||||
<div class="avatar">
|
||||
<img src="../assets/img/faces/joe-gardner-2.jpg" alt="Circle Image" class="img-circle img-no-padding img-responsive">
|
||||
</div>
|
||||
<div class="name">
|
||||
<h4 class="title">Jane Faker<br /></h4>
|
||||
<h6 class="description">Music Producer</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 offset-md-3 text-center">
|
||||
<p>An artist of considerable range, Jane Faker — the name taken by Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure. </p>
|
||||
<br />
|
||||
<btn class="btn btn-outline-default btn-round"><i class="fa fa-cog"></i> Settings</btn>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="nav-tabs-navigation">
|
||||
<div class="nav-tabs-wrapper">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#follows" role="tab">Follows</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#following" role="tab">Following</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content following">
|
||||
<div class="tab-pane active" id="follows" role="tabpanel">
|
||||
<div class="row">
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<ul class="list-unstyled follows">
|
||||
<li>
|
||||
<div class="row">
|
||||
<div class="col-md-2 offset-md-0">
|
||||
<img src="../assets/img/faces/clem-onojeghuo-2.jpg" alt="Circle Image" class="img-circle img-no-padding img-responsive">
|
||||
</div>
|
||||
<div class="col-md-7 col-xs-4">
|
||||
<h6>Flume<br/><small>Musical Producer</small></h6>
|
||||
</div>
|
||||
<div class="col-md-3 col-xs-2">
|
||||
<div class="unfollow" >
|
||||
<div class="checkbox">
|
||||
<input id="checkbox1" type="checkbox" checked="">
|
||||
<label for="checkbox1"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<hr />
|
||||
<li>
|
||||
<div class="row">
|
||||
<div class="col-md-2 offset-md-0">
|
||||
<img src="../assets/img/faces/ayo-ogunseinde-2.jpg" alt="Circle Image" class="img-circle img-no-padding img-responsive">
|
||||
</div>
|
||||
<div class="col-md-7 col-xs-4">
|
||||
<h6>Banks<br /><small>Singer</small></h6>
|
||||
</div>
|
||||
<div class="col-md-3 col-xs-2">
|
||||
<div class="unfollow" >
|
||||
<div class="checkbox">
|
||||
<input id="checkbox2" type="checkbox" checked="">
|
||||
<label for="checkbox2"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane text-center" id="following" role="tabpanel">
|
||||
<h3 class="text-muted">Not following anyone yet :(</h3>
|
||||
<button class="btn btn-warning btn-round">Find artists</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer section-dark">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<nav class="footer-nav">
|
||||
<ul>
|
||||
<li><a href="https://www.creative-tim.com">Creative Tim</a></li>
|
||||
<li><a href="http://blog.creative-tim.com">Blog</a></li>
|
||||
<li><a href="https://www.creative-tim.com/license">Licenses</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="credits ml-auto">
|
||||
<span class="copyright">
|
||||
© <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/jquery-ui-1.12.1.custom.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/tether.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Paper Kit Initialization snd functons -->
|
||||
<script src="../assets/js/paper-kit.js?v=2.0.1"></script>
|
||||
|
||||
</html>
|
||||
121
examples/register.html
Normal file
121
examples/register.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/png" href="../assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>Paper Kit 2 by Creative Tim</title>
|
||||
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../assets/css/paper-kit.css?v=2.0.1" rel="stylesheet"/>
|
||||
<link href="../assets/css/demo.css" rel="stylesheet" />
|
||||
|
||||
<!-- Fonts and icons -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,300,700' rel='stylesheet' type='text/css'>
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-toggleable-md fixed-top navbar-transparent">
|
||||
<div class="container">
|
||||
<div class="navbar-translate">
|
||||
<button class="navbar-toggler navbar-toggler-right navbar-burger" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-bar"></span>
|
||||
<span class="navbar-toggler-bar"></span>
|
||||
<span class="navbar-toggler-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="https://www.creative-tim.com">Paper Kit 2</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbarToggler">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a href="../index.html" class="nav-link"><i class="nc-icon nc-layout-11"></i>Components</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../documentation/tutorial-components.html" target="_blank" class="nav-link"><i class="nc-icon nc-book-bookmark"></i> Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom" href="https://twitter.com/CreativeTim" target="_blank">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<p class="hidden-lg-up">Twitter</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank">
|
||||
<i class="fa fa-facebook-square"></i>
|
||||
<p class="hidden-lg-up">Facebook</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
|
||||
<i class="fa fa-instagram"></i>
|
||||
<p class="hidden-lg-up">Instagram</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" rel="tooltip" title="Star on GitHub" data-placement="bottom" href="https://www.github.com/CreativeTimOfficial" target="_blank">
|
||||
<i class="fa fa-github"></i>
|
||||
<p class="hidden-lg-up">GitHub</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="wrapper">
|
||||
<div class="page-header" style="background-image: url('../assets/img/login-image.jpg');">
|
||||
<div class="filter"></div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 offset-lg-4 col-sm-6 offset-sm-3">
|
||||
<div class="card card-register">
|
||||
<h3 class="title">Welcome</h3>
|
||||
<div class="social-line text-center">
|
||||
<a href="#pablo" class="btn btn-neutral btn-facebook btn-just-icon">
|
||||
<i class="fa fa-facebook-square"></i>
|
||||
</a>
|
||||
<a href="#pablo" class="btn btn-neutral btn-google btn-just-icon">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
</a>
|
||||
<a href="#pablo" class="btn btn-neutral btn-twitter btn-just-icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
<form class="register-form">
|
||||
<label>Email</label>
|
||||
<input type="text" class="form-control" placeholder="Email">
|
||||
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
<button class="btn btn-danger btn-block btn-round">Register</button>
|
||||
</form>
|
||||
<div class="forgot">
|
||||
<a href="#" class="btn btn-link btn-danger">Forgot password?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer register-footer text-center">
|
||||
<h6>© <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by Creative Tim</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/jquery-3.2.1.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/jquery-ui-1.12.1.custom.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/tether.min.js" type="text/javascript"></script>
|
||||
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Paper Kit Initialization snd functons -->
|
||||
<script src="../assets/js/paper-kit.js?v=2.0.1"></script>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user