material-ui-kit
Version:
Material Kit - FREE BOOTSTRAP MATERIAL DESIGN UI KIT
267 lines (240 loc) • 12.7 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Landing Page - Material Kit by Creative Tim</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/material-kit.css" rel="stylesheet"/>
</head>
<body class="landing-page">
<nav class="navbar navbar-transparent navbar-absolute">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.creative-tim.com">Creative Tim</a>
</div>
<div class="collapse navbar-collapse" id="navigation-example">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="../components-documentation.html" target="_blank">
Components
</a>
</li>
<li>
<a href="http://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-freebie" target="_blank">
<i class="material-icons">unarchive</i> Upgrade to PRO
</a>
</li>
<li>
<a href="https://twitter.com/CreativeTim" target="_blank" class="btn btn-simple btn-white btn-just-icon">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/CreativeTim" target="_blank" class="btn btn-simple btn-white btn-just-icon">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/CreativeTimOfficial" target="_blank" class="btn btn-simple btn-white btn-just-icon">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<div class="header header-filter" style="background-image: url('https://images.unsplash.com/photo-1423655156442-ccc11daa4e99?crop=entropy&dpr=2&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450');">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="title">Write the best title for your page.</h1>
<h4>Every landing page needs a small description after the big bold title, that's why we added this text here. Add here all the information that can make you or your product create the first impression.</h4>
<br />
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="btn btn-danger btn-raised btn-lg">
<i class="fa fa-play"></i> Watch video
</a>
</div>
</div>
</div>
</div>
<div class="main main-raised">
<div class="container">
<div class="section text-center section-landing">
<div class="row">
<div class="col-md-8 col-md-offset-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>
</div>
</div>
<div class="features">
<div class="row">
<div class="col-md-4">
<div class="info">
<div class="icon icon-primary">
<i class="material-icons">chat</i>
</div>
<h4 class="info-title">First Feature</h4>
<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
</div>
</div>
<div class="col-md-4">
<div class="info">
<div class="icon icon-success">
<i class="material-icons">verified_user</i>
</div>
<h4 class="info-title">Second Feature</h4>
<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
</div>
</div>
<div class="col-md-4">
<div class="info">
<div class="icon icon-danger">
<i class="material-icons">fingerprint</i>
</div>
<h4 class="info-title">Third Feature</h4>
<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
</div>
</div>
</div>
</div>
</div>
<div class="section text-center">
<h2 class="title">Here is our team</h2>
<div class="team">
<div class="row">
<div class="col-md-4">
<div class="team-player">
<img src="../assets/img/avatar.jpg" alt="Thumbnail Image" class="img-raised img-circle">
<h4 class="title">Gigi Hadid <br />
<small class="text-muted">Model</small>
</h4>
<p class="description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
<a href="#pablo" class="btn btn-simple btn-just-icon"><i class="fa fa-twitter"></i></a>
<a href="#pablo" class="btn btn-simple btn-just-icon"><i class="fa fa-instagram"></i></a>
<a href="#pablo" class="btn btn-simple btn-just-icon btn-default"><i class="fa fa-facebook-square"></i></a>
</div>
</div>
<div class="col-md-4">
<div class="team-player">
<img src="../assets/img/christian.jpg" alt="Thumbnail Image" class="img-raised img-circle">
<h4 class="title">Christian Louboutin<br />
<small class="text-muted">Designer</small>
</h4>
<p class="description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
<a href="#pablo" class="btn btn-simple btn-just-icon"><i class="fa fa-twitter"></i></a>
<a href="#pablo" class="btn btn-simple btn-just-icon"><i class="fa fa-linkedin"></i></a>
</div>
</div>
<div class="col-md-4">
<div class="team-player">
<img src="../assets/img/kendall.jpg" alt="Thumbnail Image" class="img-raised img-circle">
<h4 class="title">Kendall Jenner<br />
<small class="text-muted">Model</small>
</h4>
<p>You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
<a href="#pablo" class="btn btn-simple btn-just-icon"><i class="fa fa-google-plus"></i></a>
<a href="#pablo" class="btn btn-simple btn-just-icon"><i class="fa fa-youtube-play"></i></a>
<a href="#pablo" class="btn btn-simple btn-just-icon btn-default"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="section landing-section">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center title">Work with us</h2>
<h4 class="text-center description">Divide details about your product or agency work into parts. Write a few lines about each one and contact us about any further collaboration. We will responde get back to you in a couple of hours.</h4>
<form class="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Your Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Your Email</label>
<input type="email" class="form-control">
</div>
</div>
</div>
<div class="form-group label-floating">
<label class="control-label">Your Messge</label>
<textarea class="form-control" rows="4"></textarea>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<button class="btn btn-primary btn-raised">
Send Message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<nav class="pull-left">
<ul>
<li>
<a href="http://www.creative-tim.com">
Creative Tim
</a>
</li>
<li>
<a href="http://presentation.creative-tim.com">
About Us
</a>
</li>
<li>
<a href="http://blog.creative-tim.com">
Blog
</a>
</li>
<li>
<a href="http://www.creative-tim.com/license">
Licenses
</a>
</li>
</ul>
</nav>
<div class="copyright pull-right">
© 2016, made with <i class="fa fa-heart heart"></i> by Creative Tim
</div>
</div>
</footer>
</div>
</body>
<!-- Core JS Files -->
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/js/material.min.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="../assets/js/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the Datepicker, full documentation here: http://www.eyecon.ro/bootstrap-datepicker/ -->
<script src="../assets/js/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc -->
<script src="../assets/js/material-kit.js" type="text/javascript"></script>
</html>