1102 lines
66 KiB
HTML
1102 lines
66 KiB
HTML
<!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="500">
|
|
<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 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/paper-kit" target="_blank">
|
|
<i class="fa fa-github"></i>
|
|
<p class="hidden-lg-up">GitHub</p>
|
|
</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 href="https://www.creative-tim.com/product/paper-kit-2-pro?ref=pk2-free-local" target="_blank" class="btn btn-danger btn-round">Upgrade to Pro</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="wrapper">
|
|
<div class="page-header section-dark" style="background-image: url('assets/img/antoine-barres.jpg')">
|
|
<div class="filter"></div>
|
|
<div class="content-center">
|
|
<div class="container">
|
|
<div class="title-brand">
|
|
<h1 class="presentation-title">Paper Kit 2</h1>
|
|
<div class="fog-low">
|
|
<img src="assets/img/fog-low.png" alt="">
|
|
</div>
|
|
<div class="fog-low right">
|
|
<img src="assets/img/fog-low.png" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="presentation-subtitle text-center">Make your mark with a Free Bootstrap 4 UI Kit! </h2>
|
|
</div>
|
|
</div>
|
|
<div class="moving-clouds" style="background-image: url('assets/img/clouds.png'); ">
|
|
|
|
</div>
|
|
<h6 class="category category-absolute">Designed and coded by
|
|
<a href="https://www.creative-tim.com" target="_blank">
|
|
<img src="assets/img/creative-tim-white-slim2.png" class="creative-tim-logo">
|
|
</a>
|
|
</h6>
|
|
</div>
|
|
<div class="main">
|
|
<div class="section section-buttons">
|
|
<div class="container">
|
|
<div class="tim-title">
|
|
<h2>Basic Elements</h2>
|
|
</div>
|
|
<div id="buttons">
|
|
<div class="tim-title">
|
|
<h3>Buttons
|
|
<br/>
|
|
<small>Pick your style</small>
|
|
</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<button type="button" class="btn btn-danger">Default</button>
|
|
<button type="button" class="btn btn-danger btn-round">Round</button>
|
|
<button type="button" class="btn btn-danger btn-round"><i class="fa fa-heart"></i> With Icon</button>
|
|
<button type="button" class="btn btn-danger btn-just-icon"><i class="fa fa-heart"></i></button>
|
|
<button type="button" class="btn btn-danger btn-link">Simple</button>
|
|
</div>
|
|
</div>
|
|
<div class="tim-title">
|
|
<h3><small>Pick your size</small></h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<button type="button" class="btn btn-outline-danger btn-sm">Small</button>
|
|
<button type="button" class="btn btn-outline-danger">Regular</button>
|
|
<button type="button" class="btn btn-outline-danger btn-lg">Large</button>
|
|
</div>
|
|
</div>
|
|
<div class="tim-title">
|
|
<h3><small>Pick your color</small></h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<button type="button" class="btn btn-outline-default btn-round">Default</button>
|
|
<button type="button" class="btn btn-outline-primary btn-round">Primary</button>
|
|
<button type="button" class="btn btn-outline-info btn-round">Info</button>
|
|
<button type="button" class="btn btn-outline-success btn-round">Success</button>
|
|
<button type="button" class="btn btn-outline-warning btn-round">Warning</button>
|
|
<button type="button" class="btn btn-outline-danger btn-round">Danger</button>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<button type="button" class="btn btn-default btn-round">Default</button>
|
|
<button type="button" class="btn btn-primary btn-round">Primary</button>
|
|
<button type="button" class="btn btn-info btn-round">Info</button>
|
|
<button type="button" class="btn btn-success btn-round">Success</button>
|
|
<button type="button" class="btn btn-warning btn-round">Warning</button>
|
|
<button type="button" class="btn btn-danger btn-round">Danger</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="tim-title">
|
|
<h3>Links</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<a href="#0" class="btn btn-link btn-default">Default</a>
|
|
<a href="#0" class="btn btn-link btn-primary">Primary</a>
|
|
<a href="#0" class="btn btn-link btn-success">Success</a>
|
|
<a href="#0" class="btn btn-link btn-info">Info</a>
|
|
<a href="#0" class="btn btn-link btn-warning">Warning</a>
|
|
<a href="#0" class="btn btn-link btn-danger">Danger</a>
|
|
<a href="#0" class="btn btn-link btn-neutral">Neutral</a>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="tim-title">
|
|
<h3>Inputs</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="Default">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="form-group has-success">
|
|
<input type="text" class="form-control form-control-success" id="inputSuccess1" value="Success">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="form-group has-danger">
|
|
<input type="text" class="form-control form-control-danger" id="inputDanger1" value="Error">
|
|
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
|
|
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-group" aria-hidden="true"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="row">
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="tim-title">
|
|
<h3>Checkboxes</h3>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input id="checkbox1" type="checkbox">
|
|
<label for="checkbox1">
|
|
Unchecked
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input id="checkbox2" type="checkbox" checked="">
|
|
<label for="checkbox2">
|
|
Checked
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input id="checkbox3" type="checkbox" disabled="">
|
|
<label for="checkbox3">
|
|
Disabled unchecked
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input id="checkbox4" type="checkbox" checked="" disabled="">
|
|
<label for="checkbox4">
|
|
Disabled checked
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="tim-title">
|
|
<h3>Radio Buttons</h3>
|
|
</div>
|
|
<div class="radio">
|
|
<input type="radio" name="radio1" id="radio1" value="option1">
|
|
<label for="radio1">
|
|
Radio is off
|
|
</label>
|
|
</div>
|
|
|
|
<div class="radio">
|
|
<input type="radio" name="radio1" id="radio2" value="option2" checked="">
|
|
<label for="radio2">
|
|
Radio is on
|
|
</label>
|
|
</div>
|
|
|
|
<div class="radio">
|
|
<input type="radio" name="radio3" id="radio3" value="option3" disabled="">
|
|
<label for="radio3">
|
|
Disabled radio is off
|
|
</label>
|
|
</div>
|
|
|
|
<div class="radio">
|
|
<input type="radio" name="radio4" id="radio4" value="option4" checked="" disabled="">
|
|
<label for="radio4">
|
|
Disabled radio is on
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="tim-title">
|
|
<h3>Toggle Buttons</h3>
|
|
</div>
|
|
<div class="togglebutton">
|
|
<label>
|
|
<input type="checkbox" data-toggle="switch" checked=""><span class="toggle"></span> Toggle is on
|
|
</label>
|
|
</div>
|
|
<div class="togglebutton">
|
|
<label>
|
|
<input type="checkbox" data-toggle="switch"><span class="toggle"></span> Toggle is off
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="tim-title">
|
|
<h3>Sliders</h3>
|
|
</div>
|
|
<div id="sliderRegular" class="slider noUi-target noUi-ltr noUi-horizontal noUi-connect"></div>
|
|
<br/>
|
|
<div id="sliderDouble" class="slider slider-info noUi-target noUi-ltr noUi-horizontal noUi-background"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-navbars">
|
|
<div class="container" id="menu-dropdown">
|
|
<div class="tim-title">
|
|
<h3>Menu</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<nav class="navbar navbar-toggleable-md bg-primary">
|
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
<span class="navbar-toggler-icon"></span>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Menu</a>
|
|
<div class="collapse navbar-collapse" id="navbar-menu">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#pk">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#pk">Link</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<ul class="dropdown-menu dropdown-menu-right dropdown-info">
|
|
<li class="dropdown-header">Dropdown header</li>
|
|
<li class="dropdown-item"><a href="#pk">Action</a></li>
|
|
<li class="dropdown-item"><a href="#pk">Another action</a></li>
|
|
<li class="dropdown-item"><a href="#pk">Something else here</a></li>
|
|
<div class="dropdown-divider"></div>
|
|
<li class="dropdown-item"><a href="#pk">Separated link</a></li>
|
|
<div class="dropdown-divider"></div>
|
|
<li class="dropdown-item"><a href="#pk">Another separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<nav class="navbar navbar-toggleable-md bg-danger">
|
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-menu-icon" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
<span class="navbar-toggler-icon"></span>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Icons</a>
|
|
<div class="collapse navbar-collapse" id="navbar-menu-icon">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#pk"><i class="nc-icon nc-email-85" aria-hidden="true"></i></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#pk"><i class="nc-icon nc-single-02" aria-hidden="true"></i></a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="nc-icon nc-settings-gear-65" aria-hidden="true"></i></a>
|
|
<ul class="dropdown-menu dropdown-menu-right dropdown-danger">
|
|
<li class="dropdown-header" href="#pk">Dropdown header</li>
|
|
<li class="dropdown-item"><a href="#pk">Another action</a></li>
|
|
<li class="dropdown-item"><a href="#pk">Something else here</a></li>
|
|
<div class="dropdown-divider"></div>
|
|
<li class="dropdown-item"><a href="#pk">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div id="navbar">
|
|
<div class="container">
|
|
<div class="tim-title">
|
|
<h3>Navigation</h3>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
<div class="navigation-example">
|
|
<nav class="navbar navbar-toggleable-md bg-primary">
|
|
<div class="container">
|
|
<button class="navbar-toggler navbar-toggler-right burger-menu" type="button" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbarNav" 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="#">Primary Color</a>
|
|
<div class="collapse navbar-collapse" id="navbar-primary">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="nc-icon nc-compass-05" aria-hidden="true"></i> Discover</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="nc-icon nc-single-02" aria-hidden="true"></i> Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="nc-icon nc-settings-gear-65" aria-hidden="true"></i> Settings</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav class="navbar navbar-toggleable-md bg-info">
|
|
<div class="container">
|
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-info" aria-controls="navbarNav" 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="#">Info Color</a>
|
|
<div class="collapse navbar-collapse" id="navbar-info">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Discover</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Settings</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav class="navbar navbar-toggleable-md bg-success">
|
|
<div class="container">
|
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-success" aria-controls="navbarNav" 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="#">Success Color</a>
|
|
<div class="collapse navbar-collapse" id="navbar-success">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="nc-icon nc-compass-05" aria-hidden="true"></i></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="nc-icon nc-single-02" aria-hidden="true"></i> </a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="nc-icon nc-settings-gear-65" aria-hidden="true"></i></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav class="navbar navbar-toggleable-md bg-warning">
|
|
<div class="container">
|
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-warning" aria-controls="navbarNav" 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="#">Warning Color</a>
|
|
<div class="collapse navbar-collapse" id="navbar-warning">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav class="navbar navbar-toggleable-md bg-danger">
|
|
<div class="container">
|
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-danger" aria-controls="navbarNav" 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="#">Danger Color</a>
|
|
<div class="collapse navbar-collapse" id="navbar-danger">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i> Share</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i> Tweet</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-pinterest" aria-hidden="true"></i> Pin</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav class="navbar navbar-toggleable-md navbar-transparent">
|
|
<div class="container">
|
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-transparent" aria-controls="navbarNav" 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="#">Transparent</a>
|
|
<div class="collapse navbar-collapse" id="navbar-transparent">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="tim-title">
|
|
<h3>Progress Bar</h3>
|
|
<br/>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div><br/>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div><br/>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div><br/>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar progress-bar-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="tim-title">
|
|
<h3>Pagination</h3>
|
|
<br/>
|
|
</div>
|
|
<nav aria-label="Page navigation example">
|
|
<ul class="pagination">
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Previous">
|
|
<i class="fa fa-angle-left" aria-hidden="true"></i>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">
|
|
<i class="fa fa-angle-right" aria-hidden="true"></i>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<br/>
|
|
<nav aria-label="...">
|
|
<ul class="pagination">
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" tabindex="-1">Previous</a>
|
|
</li>
|
|
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">3<span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="tim-title">
|
|
<h3>Navigation Tabs</h3>
|
|
</div>
|
|
|
|
<div class="nav-tabs-navigation">
|
|
<div class="nav-tabs-wrapper">
|
|
<ul id="tabs" class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="my-tab-content" class="tab-content text-center">
|
|
<div class="tab-pane active" id="home" role="tabpanel"><p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.</p></div>
|
|
<div class="tab-pane" id="profile" role="tabpanel"><p>Here is your profile.</p></div>
|
|
<div class="tab-pane" id="messages" role="tabpanel"><p>Here are your messages.</p></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="tim-title">
|
|
<h3>Labels</h3>
|
|
</div>
|
|
<span class="label label-default">Default</span>
|
|
<span class="label label-primary">Primary</span>
|
|
<span class="label label-info">Info</span>
|
|
<span class="label label-success">Success</span>
|
|
<span class="label label-warning">Warning</span>
|
|
<span class="label label-danger">Danger</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-notifications" id="notifications">
|
|
<div class="container">
|
|
<div class="tim-title">
|
|
<h3>Notification</div>
|
|
</div>
|
|
|
|
|
|
<div class="alert alert-info">
|
|
<div class="container">
|
|
<span>This is a plain notification! </span>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-success">
|
|
<div class="container">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="nc-icon nc-simple-remove"></i>
|
|
</button>
|
|
<span>This is a notification with close button. </span>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-warning alert-with-icon" data-notify="container">
|
|
<div class="container">
|
|
<div class="alert-wrapper">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="nc-icon nc-simple-remove"></i>
|
|
</button>
|
|
<div class="message"><i class="nc-icon nc-bell-55"></i> This is a notification with close button and icon.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-danger alert-with-icon" data-notify="container">
|
|
<div class="container">
|
|
<div class="alert-wrapper">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<i class="nc-icon nc-simple-remove"></i>
|
|
</button>
|
|
<div class="message"><i class="nc-icon nc-bell-55"></i> This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="section">
|
|
<div class="container tim-container">
|
|
<div class="tim-title">
|
|
<h3>Typography</h3>
|
|
<br/>
|
|
</div>
|
|
<div id="typography">
|
|
<div class="row">
|
|
<div class="typography-line">
|
|
<h1>
|
|
<span class="note">Header 1</span> Thinking in textures
|
|
</h1>
|
|
</div>
|
|
<div class="typography-line">
|
|
<h2>
|
|
<span class="note">Header 2</span> Thinking in textures
|
|
</h2>
|
|
</div>
|
|
<div class="typography-line">
|
|
<h3>
|
|
<span class="note">Header 3</span> Thinking in textures
|
|
</h3>
|
|
</div>
|
|
<div class="typography-line">
|
|
<h4>
|
|
<span class="note">Header 4</span> Thinking in textures
|
|
</h4>
|
|
</div>
|
|
<div class="typography-line">
|
|
<h5>
|
|
<span class="note">Header 5</span> Thinking in textures
|
|
</h5>
|
|
</div>
|
|
<div class="typography-line">
|
|
<h6>
|
|
<span class="note">Header 6</span> Thinking in textures
|
|
</h6>
|
|
</div>
|
|
<div class="typography-line">
|
|
<p>
|
|
<span class="note">Paragraph</span> Thinking in textures
|
|
</p>
|
|
</div>
|
|
<div class="typography-line">
|
|
<span class="note">Quote</span>
|
|
<blockquote class="blockquote">
|
|
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer class="blockquote-footer">Someone famous in <cite title="source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
<div class="typography-line">
|
|
<span class="note">Muted text</span>
|
|
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
|
</div>
|
|
<div class="typography-line">
|
|
<span class="note">Primary text</span>
|
|
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
</div>
|
|
<div class="typography-line">
|
|
<span class="note">Success text</span>
|
|
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
</div>
|
|
<div class="typography-line">
|
|
<span class="note">Info text</span>
|
|
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
</div>
|
|
<div class="typography-line">
|
|
<span class="note">Warning text</span>
|
|
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
|
</div>
|
|
<div class="typography-line">
|
|
<span class="note">Danger text</span>
|
|
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
</div>
|
|
<div class="typography-line">
|
|
<h2><span class="note">Small tag</span>Header with small subtitle
|
|
<br/>
|
|
<small>".small" is a tag for the headers</small>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div id="images">
|
|
<div class="container">
|
|
<div class="tim-title">
|
|
<h3>Images</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-8 col-sm-6 col-md-3">
|
|
<h4 class="images-title">Rounded Image</h4>
|
|
<img src="assets/img/uriel-soberanes.jpg" class="img-rounded img-responsive" alt="Rounded Image">
|
|
<div class="img-details">
|
|
<div class="author">
|
|
<img src="assets/img/faces/clem-onojeghuo-2.jpg" alt="Circle Image" class="img-circle img-no-padding img-responsive">
|
|
</div>
|
|
<p>Chet Faker</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-2 offset-md-1">
|
|
<h4 class="images-title">Circle Image</h4>
|
|
<img src="assets/img/faces/joe-gardner-2.jpg" class="img-circle img-no-padding img-responsive" alt="Rounded Image">
|
|
<p class="text-center">Joe Gardner</p>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-2 offset-md-1">
|
|
<h4 class="images-title">Thumbnail</h4>
|
|
<img src="assets/img/faces/clem-onojeghuo-3.jpg" class="img-thumbnail img-responsive" alt="Rounded Image">
|
|
<p class="text-center">Erik Faker</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section javascript-components">
|
|
<div class="container">
|
|
<div class="tim-title">
|
|
<h2>Javascript Components</h2>
|
|
</div>
|
|
<div class="row" id="modals">
|
|
<div class="col-md-6">
|
|
<div class="tim-title">
|
|
<h3>Modal</h3>
|
|
</div>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-danger btn-round" data-toggle="modal" data-target="#myModal">
|
|
Launch demo modal
|
|
</button>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title text-center" id="exampleModalLabel">Modal title</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="left-side">
|
|
<button type="button" class="btn btn-default btn-link" data-dismiss="modal">Never mind</button>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="right-side">
|
|
<button type="button" class="btn btn-danger btn-link">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="tim-title">
|
|
<h3>Popovers</h3>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-danger btn-round" data-container="body" data-toggle="popover" data-placement="left" data-title="Popover on left" data-content="Here will be some very useful information about this popover.">on left</button>
|
|
<button type="button" class="btn btn-outline-danger btn-round" data-container="body" data-toggle="popover" data-placement="right" data-title="Popover on right" data-content="Here will be some very useful information about this popover.">on right</button>
|
|
<button type="button" class="btn btn-outline-danger btn-round" data-container="body" data-toggle="popover" data-placement="top" data-title="Popover on top" data-content="Here will be some very useful information about this popover.">on top</button>
|
|
<button type="button" class="btn btn-outline-danger btn-round" data-container="body" data-toggle="popover" data-placement="bottom" data-title="Popover on bottom" data-content="Here will be some very useful information about this popover.">on bottom</button>
|
|
</div>
|
|
<br/>
|
|
<div class="col-md-6">
|
|
<div class="tim-title">
|
|
<h3>Datepicker</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class='col-sm-6'>
|
|
<div class="form-group">
|
|
<div class='input-group date' id='datetimepicker'>
|
|
<input type='text' class="form-control datetimepicker" placeholder="05/08/2017" />
|
|
<span class="input-group-addon">
|
|
<span class="glyphicon glyphicon-calendar"><i class="fa fa-calendar" aria-hidden="true"></i></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="tim-title">
|
|
<h3>Tooltips</h3>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-danger btn-round" data-toggle="tooltip" data-placement="left" title="Tooltip on left">On left</button>
|
|
<button type="button" class="btn btn-outline-danger btn-round" data-toggle="tooltip" data-placement="right" title="Tooltip on right">On right</button>
|
|
<button type="button" class="btn btn-outline-danger btn-round" data-toggle="tooltip" data-placement="top" title="Tooltip on top">On top</button>
|
|
<button type="button" class="btn btn-outline-danger btn-round" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">On bottom</button>
|
|
</div>
|
|
</div>
|
|
<div class="tim-title">
|
|
<h3>Carousel</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="carousel">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 offset-md-2">
|
|
<div class="card page-carousel">
|
|
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="carousel-item active">
|
|
<img class="d-block img-fluid" src="assets\img\soroush-karimi.jpg" alt="First slide">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>Somewhere</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="assets\img\federico-beccari.jpg" alt="Second slide">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>Somewhere else</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="assets\img\joshua-stannard.jpg" alt="Third slide">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>Here it is</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="left carousel-control carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
|
<span class="fa fa-angle-left"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="right carousel-control carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
|
<span class="fa fa-angle-right"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-dark section-nucleo-icons">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-12">
|
|
<h2 class="title">Nucleo Icons</h2><br/>
|
|
<p class="description">
|
|
Now UI Kit comes with 100 custom icons made by our friends from NucleoApp. The official package contains over 2.100 thin icons which are looking great in combination with Now UI Kit Make sure you check all of them and use those that you like the most.
|
|
</p><br/>
|
|
<a href="nucleo-icons-demo.html" class="btn btn-danger btn-round" target="_blank">View Demo Icons</a>
|
|
<a href="https://nucleoapp.com/?ref=1712" class="btn btn-outline-danger btn-round" target="_blank">View All Icons</a>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="icons-container">
|
|
<i class="nc-icon nc-time-alarm"></i>
|
|
<i class="nc-icon nc-atom"></i>
|
|
<i class="nc-icon nc-camera-compact"></i>
|
|
<i class="nc-icon nc-watch-time"></i>
|
|
<i class="nc-icon nc-key-25"></i>
|
|
<i class="nc-icon nc-diamond"></i>
|
|
<i class="nc-icon nc-user-run"></i>
|
|
<i class="nc-icon nc-layout-11"></i>
|
|
<i class="nc-icon nc-badge"></i>
|
|
<i class="nc-icon nc-bulb-63"></i>
|
|
<i class="nc-icon nc-favourite-28"></i>
|
|
<i class="nc-icon nc-planet"></i>
|
|
<i class="nc-icon nc-tie-bow"></i>
|
|
<i class="nc-icon nc-zoom-split"></i>
|
|
<i class="nc-icon nc-cloud-download-93"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-dark">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 offset-md-2 text-center">
|
|
<h2 class="title">Completed with examples</h2>
|
|
<p class="description">The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful kit.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-image section-login" style="background-image: url('assets/img/login-image.jpg');">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-4 offset-md-4">
|
|
<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>
|
|
<div class="input-group form-group-no-border">
|
|
<span class="input-group-addon">
|
|
<i class="nc-icon nc-email-85"></i>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Email">
|
|
</div>
|
|
|
|
<label>Password</label>
|
|
<div class="input-group form-group-no-border">
|
|
<span class="input-group-addon">
|
|
<i class="nc-icon nc-key-25"></i>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Password">
|
|
</div>
|
|
<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 class="col text-center">
|
|
<a href="examples/register.html" class="btn btn-outline-neutral btn-round btn-lg" target="_blank">View Register Page</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-dark">
|
|
<div class="container">
|
|
<div class="row example-page">
|
|
<div class="col-md-6 text-center">
|
|
<a href="examples/landing.html" target="_blank">
|
|
<img src="assets\img\examples\landing-page.jpg" alt="Rounded Image" class="img-rounded img-responsive" style="width: 100%">
|
|
<a href="examples/landing.html" class="btn btn-outline-neutral btn-round" target="_blank">Landing Page</a>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-6 text-center">
|
|
<a href="examples/profile.html" target="_blank">
|
|
<img src="assets\img\examples\profile-page.jpg" alt="Rounded Image" class="img-rounded img-responsive" style="width: 100%">
|
|
<a href="examples/profile.html" class="btn btn-outline-neutral btn-round" target="_blank">Profile Page</a>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="container text-center">
|
|
<div class="row">
|
|
<div class="col-md-8 offset-md-2 text-center">
|
|
<h2 class="title">Do you like what you see?</h2>
|
|
<p class="description">Cause if you do, it can be yours for Free. Hit the button below and download it. Start a new project or give an old Bootstrap 4 project a new look.</p>
|
|
</div>
|
|
<div class="col-xs-8 offset-xs-2 col-sm-4 offset-sm-4 col-md-4 offset-md-4 download-area">
|
|
<a href="http://www.creative-tim.com/product/paper-kit-2" class="btn btn-danger btn-round">Download free HTML</a>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center upgrade-pro">
|
|
<div class="col-md-8 offset-md-2">
|
|
<h2 class="title">Want more?</h2>
|
|
<p class="description">We've just launched <a href="http://demos.creative-tim.com/paper-kit-2-pro/presentation.html?ref=utp-pk2-demos" class="text-danger" target="_blank">Paper Kit 2 PRO</a>. It has a huge number of components, sections and example pages.</p>
|
|
</div>
|
|
<div class="col-xs-8 offset-xs-2 col-sm-4 offset-sm-4">
|
|
<a href="https://www.creative-tim.com/product/paper-kit-2-pro?ref=utp-pk-demos" class="btn btn-info btn-round" target="_blank">
|
|
<i class="nc-icon nc-spaceship" aria-hidden="true"></i> Upgrade to PRO
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-md-center sharing-area text-center">
|
|
<div class="text-center col-md-12 col-lg-8">
|
|
<h3>Thank you for supporting us!</h3>
|
|
</div>
|
|
<div class="text-center col-md-12 col-lg-8">
|
|
<a href="#pablo" class="btn btn-twitter-bg twitter-sharrre btn-round" rel="tooltip" title="Tweet!">
|
|
<i class="fa fa-twitter"></i> Twitter
|
|
</a>
|
|
<a href="#pablo" class="btn btn-google-bg linkedin-sharrre btn-round" rel="tooltip" title="Share!">
|
|
<i class="fa fa-google-plus"></i> Google
|
|
</a>
|
|
<a href="#pablo" class="btn btn-facebook-bg facebook-sharrre btn-round" rel="tooltip" title="Share!">
|
|
<i class="fa fa-facebook-square"></i> Facebook
|
|
</a>
|
|
<a href="https://github.com/creativetimofficial/paper-kit" class="btn btn-github-bg btn-github sharrre btn-round" rel="tooltip" title="Star on Github">
|
|
<i class="fa fa-github"></i> Star
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="row">
|
|
<nav class="footer-nav">
|
|
<ul>
|
|
<li><a href="http://www.creative-tim.com">Creative Tim</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="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>
|
|
|
|
<!-- Switches -->
|
|
<script src="assets/js/bootstrap-switch.min.js"></script>
|
|
|
|
<!-- Plugins for Slider -->
|
|
<script src="assets/js/nouislider.js"></script>
|
|
|
|
<!-- Plugins for DateTimePicker -->
|
|
<script src="assets/js/moment.min.js"></script>
|
|
<script src="assets/js/bootstrap-datetimepicker.min.js"></script>
|
|
|
|
<!-- Paper Kit Initialization and functons -->
|
|
<script src="assets/js/paper-kit.js?v=2.0.1"></script>
|
|
|
|
</html>
|