1353 lines
67 KiB
HTML
1353 lines
67 KiB
HTML
<!--
|
|
=========================================================
|
|
* Blk• Design System Pro - v1.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/blk-design-system-pro
|
|
* Copyright 2019 Creative Tim (http://www.creative-tim.com)
|
|
|
|
* Coded by www.creative-tim.com
|
|
|
|
=========================================================
|
|
|
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../../static/blk-pro/assets/img/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../../static/blk-pro/assets/img/favicon.png">
|
|
<title>
|
|
Blk• Design System Pro by Creative Tim
|
|
</title>
|
|
<!-- Fonts and icons -->
|
|
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
|
|
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
|
|
<!-- Nucleo Icons -->
|
|
<link href="../../static/blk-pro/assets/css/nucleo-icons.css" rel="stylesheet" />
|
|
<!-- CSS Files -->
|
|
<link href="../../static/blk-pro/assets/css/blk-design-system-pro.css?v=1.0.0" rel="stylesheet" />
|
|
<!-- CSS Just for demo purpose, don't include it in your project -->
|
|
<link href="../../static/blk-pro/assets/demo/demo.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body class="presentation-page">
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg fixed-top navbar-transparent " color-on-scroll="300">
|
|
<div class="container">
|
|
<div class="navbar-translate">
|
|
<a class="navbar-brand" href="https://demos.creative-tim.com/blk-design-system-pro/index.html" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
|
|
<span>BLK•</span> Design System PRO
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-bar bar1"></span>
|
|
<span class="navbar-toggler-bar bar2"></span>
|
|
<span class="navbar-toggler-bar bar3"></span>
|
|
</button>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="navigation">
|
|
<div class="navbar-collapse-header">
|
|
<div class="row">
|
|
<div class="col-6 collapse-brand">
|
|
<a>
|
|
BLK•
|
|
<span> PRO </span>
|
|
</a>
|
|
</div>
|
|
<div class="col-6 collapse-close text-right">
|
|
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
|
<i class="tim-icons icon-simple-remove"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="dropdown nav-item">
|
|
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
|
|
<i class="fa fa-cogs d-lg-none d-xl-none"></i> Getting started
|
|
</a>
|
|
<div class="dropdown-menu dropdown-with-icons">
|
|
<a href="./index.html" class="dropdown-item">
|
|
<i class="tim-icons icon-paper"></i> Components
|
|
</a>
|
|
<a href="./presentation.html" class="dropdown-item">
|
|
<i class="tim-icons icon-bullet-list-67"></i>Presentation Page
|
|
</a>
|
|
<a href="https://demos.creative-tim.com/blk-design-system-pro/docs/1.0/getting-started/overview.html" class="dropdown-item">
|
|
<i class="tim-icons icon-book-bookmark"></i>Documentation
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
|
|
<i class="tim-icons icon-paper" aria-hidden="true"></i>
|
|
<p>Sections</p>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
|
<a class="dropdown-item" href="./sections.html#headers">
|
|
<i class="tim-icons icon-app"></i> Headers
|
|
</a>
|
|
<a class="dropdown-item" href="./sections.html#features">
|
|
<i class="tim-icons icon-settings"></i> Features
|
|
</a>
|
|
<a class="dropdown-item" href="./sections.html#blogs">
|
|
<i class="tim-icons icon-align-left-2"></i> Blogs
|
|
</a>
|
|
<a class="dropdown-item" href="./sections.html#teams">
|
|
<i class="tim-icons icon-user-run"></i> Teams
|
|
</a>
|
|
<a class="dropdown-item" href="./sections.html#projects">
|
|
<i class="tim-icons icon-paper"></i> Projects
|
|
</a>
|
|
<a class="dropdown-item" href="./sections.html#pricing">
|
|
<i class="tim-icons icon-money-coins"></i> Pricing
|
|
</a>
|
|
<a class="dropdown-item" href="./sections.html#testimonials">
|
|
<i class="tim-icons icon-chat-33"></i> Testimonials
|
|
</a>
|
|
<a class="dropdown-item" href="./sections.html#contactus">
|
|
<i class="tim-icons icon-mobile"></i> Contact Us
|
|
</a>
|
|
<a class="dropdown-item" href="./sections.html#tables">
|
|
<i class="tim-icons icon-chart-bar-32"></i> Tables
|
|
</a>
|
|
<a class="dropdown-item" href="./sections.html#accordion">
|
|
<i class="tim-icons icon-paper"></i> Accordion
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
|
|
<i class="tim-icons icon-book-bookmark" aria-hidden="true"></i>
|
|
<p>Examples</p>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
|
<a class="dropdown-item" href="./examples/about-us.html">
|
|
<i class="tim-icons icon-bulb-63"></i> About-us
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/blog-post.html">
|
|
<i class="tim-icons icon-align-center"></i> Blog Post
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/blog-posts.html">
|
|
<i class="tim-icons icon-chart-bar-32"></i> Blog Posts
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/contact-us.html">
|
|
<i class="tim-icons icon-square-pin"></i> Contact Us
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/landing-page.html">
|
|
<i class="tim-icons icon-paper"></i> Landing Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/pricing.html">
|
|
<i class="tim-icons icon-coins"></i> Pricing
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/ecommerce.html">
|
|
<i class="tim-icons icon-basket-simple"></i> Ecommerce Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/product-page.html">
|
|
<i class="tim-icons icon-bag-16"></i> Product Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/profile-page.html">
|
|
<i class="tim-icons icon-lock-circle"></i> Profile Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/error.html">
|
|
<i class="tim-icons icon-button-power"></i> 404 Error Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/500-error.html">
|
|
<i class="tim-icons icon-alert-circle-exc"></i> 500 Error Page
|
|
</a>
|
|
<a href="#" class="dropdown-item dropdown-toggle" id="navbarDropdown2" data-toggle="dropdown">
|
|
<i class="tim-icons icon-book-bookmark" aria-hidden="true"></i> App Pages
|
|
</a>
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
|
|
<a class="dropdown-item" href="./examples/account-settings.html">
|
|
<i class="tim-icons icon-lock-circle"></i> Account Settings
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/login-page.html">
|
|
<i class="tim-icons icon-tablet-2"></i> Login Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/register-page.html">
|
|
<i class="tim-icons icon-laptop"></i> Register Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/reset-page.html">
|
|
<i class="tim-icons icon-molecule-40"></i> Reset Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/invoice-page.html">
|
|
<i class="tim-icons icon-notes"></i> Invoice Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/checkout-page.html">
|
|
<i class="tim-icons icon-basket-simple"></i> Checkout Page
|
|
</a>
|
|
<a class="dropdown-item" href="./examples/chat-page.html">
|
|
<i class="tim-icons icon-email-85"></i> Chat Page
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link btn btn-sm btn-default" href="https://www.creative-tim.com/product/blk-design-system-pro" target="_blank">
|
|
<p>Buy Now</p>
|
|
</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="fab 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="fab 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="fab fa-instagram"></i>
|
|
<p class="hidden-lg-up">Instagram</p>
|
|
</a>
|
|
</li> -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- End Navbar -->
|
|
<div class="wrapper">
|
|
<div class="page-header">
|
|
<img src="../../static/blk-pro/assets/img/blob.png" class="path">
|
|
<img src="../../static/blk-pro/assets/img/path2.png" class="path2">
|
|
<img src="../../static/blk-pro/assets/img/triunghiuri.png" class="shapes triangle">
|
|
<img src="../../static/blk-pro/assets/img/waves.png" class="shapes wave">
|
|
<img src="../../static/blk-pro/assets/img/patrat.png" class="shapes squares">
|
|
<img src="../../static/blk-pro/assets/img/cercuri.png" class="shapes circle">
|
|
<div class="container">
|
|
<div class="content-center brand">
|
|
<h1 class="h1-seo">BLK•
|
|
<small class="text-warning">PRO</small>
|
|
</h1>
|
|
<h3>Start the Development With this Badass Bootstrap 4 Design System.</h3>
|
|
<a href="https://www.creative-tim.com/product/blk-design-system-pro?ref=presentation-header" target="_blank" class="btn btn-warning btn-simple btn-lg mt-4">BUY NOW</a>
|
|
<a href="#pricing" class="btn btn-warning btn-link btn-lg mt-4 d-block"><u>Show pricing</u></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-110"></div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="info info-hover">
|
|
<div class="icon icon-primary">
|
|
<img class="bg-blob" src="../../static/blk-pro/assets/img/feature-blob/primary.png">
|
|
<i class="tim-icons icon-user-run"></i>
|
|
</div>
|
|
<h2 class="info-title">Huge number of components</h2>
|
|
<h4 class="description">Every element that you need in a product comes built in as a component. All components fit perfectly with each other and can take variations in colour.</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="info info-hover" style="margin-top:-50px;">
|
|
<div class="icon icon-warning">
|
|
<img class="bg-blob" src="../../static/blk-pro/assets/img/feature-blob/warning.png">
|
|
<i class="tim-icons icon-atom"></i>
|
|
</div>
|
|
<h2 class="info-title">Multi-Purpose Sections</h2>
|
|
<h4 class="description">Putting together a page has never been easier than matching together sections. From team presentation to pricing options, you can easily customise and built your pages.</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="info info-hover">
|
|
<div class="icon icon-success">
|
|
<img class="bg-blob" src="../../static/blk-pro/assets/img/feature-blob/success.png">
|
|
<i class="tim-icons icon-gift-2"></i>
|
|
</div>
|
|
<h2 class="info-title">Multiple Example Pages</h2>
|
|
<p class="description">If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-basic-components">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-5 col-md-7 ml-auto mr-auto">
|
|
<h1 class="title">Basic Elements</h1>
|
|
<h5 class="category text-primary"><strong>The core elements of your website</strong></h5>
|
|
<p class="description mt-5">We re-styled every Bootstrap 4 element to match the BLK• Design System style. All the Bootstrap 4 components that you need in a development have been re-design with the new look. Besides the numerous basic elements, we have also created additional classes. All these items will help you take your project to the next level.</p>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="image-container">
|
|
<img class="table-img" src="../../static/blk-pro/assets/img/presentation-page/table.png" alt="">
|
|
<img class="share-btn-img" src="../../static/blk-pro/assets/img/presentation-page/success-btn.png" alt="">
|
|
<img class="coloured-card-btn-img" src="../../static/blk-pro/assets/img/presentation-page/card-btn.png" alt="">
|
|
<img class="coloured-card-img" src="../../static/blk-pro/assets/img/presentation-page/card-orange.png" alt="">
|
|
<img class="linkedin-btn-img" src="../../static/blk-pro/assets/img/presentation-page/dribbble-btn.png" alt="">
|
|
<img src="../../static/blk-pro/assets/img/path3.png" class="path path3">
|
|
<!-- SVG Illustration -->
|
|
<figure class="ie-non-standard-hero-shape">
|
|
<svg x="0px" y="0px" viewBox="10 12 878.9 907" style="enable-background:new 10 12 878.9 907;" xml:space="preserve" class="injected-svg js-svg-injector">
|
|
<g>
|
|
<defs>
|
|
<path id="firstShape" d="M329.15,403.44c30.22-62,26.51-223.94,94.06-268.46C479,98.23,560.16,257,700.68,151.61c71.25-53.44,85.54,81,160.38,172.6C1008.5,504.74,881.5,639.14,825.35,686.6c-62.54,52.85-246.14,24.42-386.7,79.28S214.07,834,202.07,702C190.39,573.57,288.69,486.43,329.15,403.44Z"></path>
|
|
</defs>
|
|
<clipPath id="secondShape">
|
|
<use xlink:href="#firstShape" style="overflow:visible;"></use>
|
|
</clipPath>
|
|
<g clip-path="url(#secondShape)">
|
|
<image id="imageShape1" style="overflow:visible;" width="900" height="900" xlink:href="assets/img/elements-bg.png" transform="matrix(0.9488 0 0 0.9488 25 53.1187)"></image>
|
|
</g>
|
|
</g>
|
|
<g>
|
|
<defs>
|
|
<path id="thirdShape" d="M337.17,855.62c-7.81-35.46,42.38-43.95,63.66-52.44,24.39-9.74,135.86-48,192.58-52.52,64.22-5.13,190.21-26.84,160.46,35.34-19.76,41.3-51.47,64.52-87.63,62.33-46.36-2.81-101.56,4.39-150.8,44C448.53,946.08,450.93,865,412,868,372.28,871,340.79,872.08,337.17,855.62Z"></path>
|
|
</defs>
|
|
<clipPath id="fourthShape">
|
|
<use xlink:href="#thirdShape" style="overflow:visible;"></use>
|
|
</clipPath>
|
|
<g transform="matrix(1 0 0 1 0 0)" clip-path="url(#fourthShape)">
|
|
<image id="imageShape2" style="overflow:visible;" width="900" height="1000" xlink:href="assets/img/elements-bg.png" transform="matrix(0.9488 0 0 0.9488 25 53.1187)"> </image>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</figure>
|
|
<!-- End SVG Illustration -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-110"></div>
|
|
<div class="section section-cards">
|
|
<div class="content-center">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-5 col-md-8 col-12 ml-auto mr-auto text-center">
|
|
<h1 class="title">Unconventional cards</h1>
|
|
<h3 class="category text-info"><strong>One card for every problem</strong></h3>
|
|
<p class="description">
|
|
We love cards and everybody on the web seems to. We have gone above and beyond with options for you to organise your information. From cards designed for blog posts, to product cards or user profiles, you will have many options to choose from. All the cards follow the material principles and have a design that stands out.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-12 col-md-6">
|
|
<section class="center slider">
|
|
<div>
|
|
<div class="card card-blog card-plain">
|
|
<div class="card-image">
|
|
<a href="javascript:;">
|
|
<img class="img rounded" src="../../static/blk-pro/assets/img/noah-wetering.jpg">
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="category text-info">Animals</h6>
|
|
<h4 class="card-title">
|
|
<a href="javascript:;">Shark Week: How to Watch It Like a Scientist</a>
|
|
</h4>
|
|
<p class="card-description">
|
|
Just when you thought it was safe to turn on your television, the Discovery Channel's "Shark Week"...
|
|
</p>
|
|
<div class="card-footer">
|
|
<div class="author">
|
|
<img src="../../static/blk-pro/assets/img/johana.jpg" alt="..." class="avatar img-raised d-inline">
|
|
<span>Jona Zmud</span>
|
|
</div>
|
|
<div class="stats stats-right">
|
|
<i class="tim-icons icon-watch-time"></i> 5 min read
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="card card-blog card-background">
|
|
<div class="full-background" style="background-image: url('../../static/blk-pro/assets/img/randy-colas.jpg')"></div>
|
|
<div class="card-body">
|
|
<div class="content-center">
|
|
<a href="#pablo">
|
|
<h2 class="card-title">Dream Big</h2>
|
|
</a>
|
|
<h3 class="card-category">Best Practices</h3>
|
|
<div class="author">
|
|
<img src="../../static/blk-pro/assets/img/p10.jpg" alt="..." class="avatar img-raised mx-auto">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="card card-profile">
|
|
<div class="card-image">
|
|
<h4 class="title">Dylan Wyatt</h4>
|
|
<div class="dropdown">
|
|
<button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown" aria-expanded="false">
|
|
<i class="tim-icons icon-settings-gear-63"></i>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
|
|
<a class="dropdown-item" href="#pablo">Edit Profile</a>
|
|
<a class="dropdown-item" href="#pablo">Settings</a>
|
|
<a class="dropdown-item" href="#pablo">Log out</a>
|
|
</div>
|
|
</div>
|
|
<a href="#pablo">
|
|
<img class="img img-raised rounded w-100" src="../../static/blk-pro/assets/img/michael.jpg">
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<hr class="line-primary">
|
|
<h3 class="job-title">Team Lead</h3>
|
|
<div class="table-responsive">
|
|
<table class="table tablesorter " id="plain-table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-left">
|
|
<i class="tim-icons icon-atom"></i> Skills
|
|
</td>
|
|
<td class="text-right">
|
|
Leadership
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left">
|
|
<i class="tim-icons icon-user-run"></i> Hobbies
|
|
</td>
|
|
<td class="text-right">
|
|
Skiing, Chess
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left">
|
|
<i class="tim-icons icon-chart-bar-32"></i> Level
|
|
</td>
|
|
<td class="text-right">
|
|
• • • • •
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="card card-profile profile-bg">
|
|
<div class="card-header" style="background-image: url('../../static/blk-pro/assets/img/sendra-martorell.jpg')">
|
|
<div class="card-avatar">
|
|
<a href="#pablo">
|
|
<img class="img img-raised" src="../../static/blk-pro/assets/img/ryan.png">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">Jon Collins</h3>
|
|
<h6 class="category text-primary">Data Specialist</h6>
|
|
<p class="card-description">
|
|
Scaling DevOps: Strategy & Technical Considerations for Successful Enterprise DevOps
|
|
</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="follow float-left">
|
|
<a class="btn btn-primary btn-sm btn-simple" href="javascript:;">
|
|
<i class="tim-icons icon-check-2"></i> Following
|
|
</a>
|
|
</div>
|
|
<div class="d-inline float-right">
|
|
<a href="#pablo" class="btn btn-icon btn-dribbble btn-round"><i class="fab fa-dribbble"></i></a>
|
|
<a href="#pablo" class="btn btn-icon btn-linkedin btn-round"><i class="fab fa-linkedin"></i></a>
|
|
<a href="#pablo" class="btn btn-icon btn-behance btn-round"><i class="fab fa-behance"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="card card-profile" data-background="full">
|
|
<a href="#pablo">
|
|
<img class="img img-raised rounded" src="../../static/blk-pro/assets/img/tom-klein.jpg">
|
|
</a>
|
|
<div class="card-image">
|
|
<h4 class="title">Tom Klein</h4>
|
|
<div class="dropdown">
|
|
<button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown" aria-expanded="false">
|
|
<i class="tim-icons icon-settings-gear-63"></i>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
|
|
<a class="dropdown-item" href="#pablo">Edit Profile</a>
|
|
<a class="dropdown-item" href="#pablo">Settings</a>
|
|
<a class="dropdown-item" href="#pablo">Log out</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<hr class="line-primary">
|
|
<h3 class="job-title">CTO</h3>
|
|
<div class="table-responsive">
|
|
<table class="table tablesorter " id="plain-table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-left">
|
|
<i class="tim-icons icon-atom"></i> Skills
|
|
</td>
|
|
<td class="text-right">
|
|
Negotiation
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left">
|
|
<i class="tim-icons icon-user-run"></i> Hobbies
|
|
</td>
|
|
<td class="text-right">
|
|
Graffiti Skiing
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left">
|
|
<i class="tim-icons icon-chart-bar-32"></i> Level
|
|
</td>
|
|
<td class="text-right">
|
|
• • • •
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-110"></div>
|
|
<div class="section section-content" data-background-color="black">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="image-container">
|
|
<img class="img img-raised rounded img-comments rellax" data-rellax-speed="1" src="../../static/blk-pro/assets/img/presentation-page/content.png">
|
|
<img class="img img-raised rounded img-blog rellax" data-rellax-speed="4" src="../../static/blk-pro/assets/img/presentation-page/content1.png">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 ml-auto mr-auto">
|
|
<div class="section-description">
|
|
<h1 class="title">Content Areas</h1>
|
|
<h5 class="category text-danger mb-5"><strong>For Areas that Need More Space</strong></h5>
|
|
<p class="description">We took into consideration multiple use cases and came up with some specific areas for you. If you need elements such as tables, comments, description areas, tabs and many others, we've got you covered. They're beautiful and easy to use for the end user navigating your website. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-sections" data-background-color="gray">
|
|
<div class="container">
|
|
<div class="col-md-8 ml-auto mr-auto">
|
|
<div class="section-description text-center">
|
|
<h2 class="title">Sections you will love</h2>
|
|
<p class="description"> Build pages in no time using pre-made sections! From headers to footers, you will be able to choose the best combination for your project. We have created multiple sections for you to put together and customise into pixel perfect example pages.</p>
|
|
<a href="sections.html" target="_blank" class="btn btn-primary btn-round">View All Sections</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="section-cols">
|
|
<div class="row mt-5">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/header1.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/header2.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/header3.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/header4.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/header5.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/header6.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/features1.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/features2.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/features3.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/features4.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/features5.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/features6.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/blogpost1.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/blogpost2.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/blogpost3.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/blogpost4.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/blogpost5.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/blogpost6.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/blogpost7.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/team1.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/team2.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/team3.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/team4.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/team5.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/projects1.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/projects2.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/projects3.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/projects4.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pricing1.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pricing2.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pricing3.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pricing4.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pricing5.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pricing6.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/testimonials1.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/testimonials2.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/testimonials3.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/testimonials4.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/contact1.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/contact2.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/contact3.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/contact4.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/table1.png" alt="">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/table2.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3 mx-auto">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/accordion.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-examples" data-background-color="black">
|
|
<div class="container">
|
|
<div class="col-md-8 ml-auto mr-auto text-center">
|
|
<div class="section-description">
|
|
<h2 class="title">Example Pages</h2>
|
|
<h5 class="description">Forget about building everything from scratch. From landing pages to e-commerce or blog pages, you will be able jump start your development. Show your clients a quick prototype and get inspired for your next project!</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<h5 class="title">About Us</h5>
|
|
<div class="card">
|
|
<a href="examples/about-us.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/about-us.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Landing Page</h5>
|
|
<div class="card">
|
|
<a href="examples/landing-page.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/landing.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Login Page</h5>
|
|
<div class="card">
|
|
<a href="examples/login-page.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/login.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Register Page</h5>
|
|
<div class="card">
|
|
<a href="examples/register-page.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/register.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Error 500</h5>
|
|
<div class="card">
|
|
<a href="examples/500-error.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/500-error.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Error 404</h5>
|
|
<div class="card">
|
|
<a href="examples/404-error.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/404-error.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Invoice Page</h5>
|
|
<div class="card">
|
|
<a href="examples/invoice-page.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/invoice-page.png" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h5 class="title">Blog Post</h5>
|
|
<div class="card">
|
|
<a href="examples/blog-post.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/blog-post.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Product Page</h5>
|
|
<div class="card">
|
|
<a href="examples/product-page.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/product.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Profile Page</h5>
|
|
<div class="card">
|
|
<a href="examples/profile-page.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/profile.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Account Settings</h5>
|
|
<div class="card">
|
|
<a href="examples/account-settings.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/account-settings.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Reset Page</h5>
|
|
<div class="card">
|
|
<a href="examples/reset-page.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/reset-page.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Checkout Page</h5>
|
|
<div class="card">
|
|
<a href="examples/checkout-page.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/checkout-page.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Chat Page</h5>
|
|
<div class="card">
|
|
<a href="examples/chat-page.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/chat-page.png" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h5 class="title">Pricing Page</h5>
|
|
<div class="card">
|
|
<a href="examples/pricing.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/pricing.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Ecommerce</h5>
|
|
<div class="card">
|
|
<a href="examples/ecommerce.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/ecommerce.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Blog Posts</h5>
|
|
<div class="card">
|
|
<a href="examples/blog-posts.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/blog-posts.png" alt="">
|
|
</a>
|
|
</div>
|
|
<h5 class="title">Contact Us</h5>
|
|
<div class="card">
|
|
<a href="examples/contact-us.html" target="_blank">
|
|
<img src="../../static/blk-pro/assets/img/presentation-page/pages/contact.png" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-free-demo">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-7 col-md-12">
|
|
<div class="section-description">
|
|
<h2 class="title">Free Demo</h2>
|
|
<p class="description mb-4">Do you want to test and see the benefits of this Design System before purchasing it? You can give the demo version a try. It features enough basic components for you to get a feel of the design and also test the quality of the code. Get it free on GitHub!</p>
|
|
<div class="github-buttons">
|
|
<a href="https://github.com/creativetimofficial/blk-design-system" target="_blank" class="btn btn-primary btn-round">View Demo on Github</a>
|
|
<div class="github-button">
|
|
<a class="github-button" href="https://github.com/creativetimofficial/ct-blk-design-system-pro" data-icon="octicon-star" data-size="large" data-show-count="true">Star</a>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 pt-5">
|
|
<div class="card card-pricing card-plain card-info">
|
|
<div class="card-body">
|
|
<h2 class="title">Free Version</h2>
|
|
<ul>
|
|
<li><strong>70</strong> Components</li>
|
|
<li><strong>3</strong> Example Pages</li>
|
|
<li><i class="tim-icons icon-simple-remove text-warning"></i>Uncoventional cards</li>
|
|
<li><i class="tim-icons icon-simple-remove text-warning"></i>Sections</li>
|
|
<li><i class="tim-icons icon-simple-remove text-warning"></i>Photoshop for Prototype</li>
|
|
<li><i class="tim-icons icon-simple-remove text-warning"></i>Premium Support</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 pt-5">
|
|
<div class="card card-pricing card-plain card-info">
|
|
<div class="card-body">
|
|
<h2 class="title">PRO Version</h2>
|
|
<ul>
|
|
<li><strong>1100+</strong> Components</li>
|
|
<li><strong>17</strong> Example Pages</li>
|
|
<li><i class="tim-icons icon-check-2 text-success"></i>Uncoventional cards</li>
|
|
<li><i class="tim-icons icon-check-2 text-success"></i>Sections</li>
|
|
<li><i class="tim-icons icon-check-2 text-success"></i>Photoshop for Prototype</li>
|
|
<li><i class="tim-icons icon-check-2 text-success"></i>Premium Support</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 col-md-12">
|
|
<div class="github-background-container">
|
|
<i class="fab fa-github"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-icons">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-3 col-sm-2">
|
|
<div class="icons-nucleo">
|
|
<i class="first-left-icon tim-icons icon-send text-primary"></i>
|
|
<i class="second-left-icon tim-icons icon-alert-circle-exc text-warning"></i>
|
|
<i class="third-left-icon tim-icons icon-cart text-info"></i>
|
|
<i class="fourth-left-icon tim-icons icon-bold text-default"></i>
|
|
<i class="fifth-left-icon tim-icons icon-headphones text-danger"></i>
|
|
<i class="sixth-left-icon tim-icons icon-satisfied text-success"></i>
|
|
<i class="seventh-left-icon tim-icons icon-cart text-default"></i>
|
|
<i class="eighth-left-icon tim-icons icon-spaceship text-info"></i>
|
|
<i class="ninth-left-icon tim-icons icon-sound-wave text-warning"></i>
|
|
<i class="tenth-left-icon tim-icons icon-heart-2 text-danger"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-sm-8 text-center">
|
|
<h1 class="title">Custom Icons</h1>
|
|
<p class="description">
|
|
BLK• Design System PRO comes with 100 custom demo icons made by our friends from
|
|
<a href="https://nucleoapp.com/?ref=1712" target="_blank">NucleoApp</a>. The official package contains over 20.729 icons which are looking great in combination with BLK• Design System PRO. Make sure you check all of them and use those that you like the most.
|
|
</p>
|
|
<br>
|
|
<a href="nucleo-icons.html" class="btn btn-warning btn-round btn-lg " target="_blank">View Demo Icons</a>
|
|
<a href="https://nucleoapp.com/?ref=1712" class="btn btn-outline-primary btn-round btn-lg " target="_blank">View All Icons</a>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-2">
|
|
<div class="icons-nucleo icons-nucleo-right text-success">
|
|
<i class="first-right-icon tim-icons icon-palette text-warning"></i>
|
|
<i class="second-right-icon tim-icons icon-tie-bow text-primary"></i>
|
|
<i class="third-right-icon tim-icons icon-pin text-info"></i>
|
|
<i class="fourth-right-icon tim-icons icon-key-25 text-default"></i>
|
|
<i class="fifth-right-icon tim-icons icon-istanbul text-danger"></i>
|
|
<i class="sixth-right-icon tim-icons icon-bus-front-12 text-warning"></i>
|
|
<i class="seventh-right-icon tim-icons icon-image-02 text-success"></i>
|
|
<i class="eighth-right-icon tim-icons icon-world text-info"></i>
|
|
<i class="ninth-right-icon tim-icons icon-puzzle-10 text-primary"></i>
|
|
<i class="tenth-right-icon tim-icons icon-atom text-default"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section features-7">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-6 px-0">
|
|
<div class="col-sm-12">
|
|
<div class="info info-horizontal">
|
|
<div class="icon text-warning">
|
|
<i class="tim-icons icon-coins"></i>
|
|
</div>
|
|
<div class="description">
|
|
<h3 class="info-title">Save Time & Money</h3>
|
|
<p class="description">Creating your design from scratch with dedicated designers can be very expensive.Using BLK• Design System PRO you don't have to worry about customising the basic Bootstrap 4 design or its components.</p>
|
|
</div>
|
|
</div>
|
|
<div class="info info-horizontal">
|
|
<div class="icon text-info">
|
|
<i class="tim-icons icon-bold"></i>
|
|
</div>
|
|
<div class="description">
|
|
<h3 class="info-title">Bootstrap 4 & Flexbox</h3>
|
|
<p class="description">It is built over Bootstrap 4, it's fully responsive and has all the benefits of the flexbox for the layout, grid system and components. This is a huge advantage when you work with columns.</p>
|
|
</div>
|
|
</div>
|
|
<div class="info info-horizontal">
|
|
<div class="icon text-danger">
|
|
<i class="tim-icons icon-paper"></i>
|
|
</div>
|
|
<div class="description">
|
|
<h3 class="info-title">Fast Prototype</h3>
|
|
<p class="description">Using BLK• Design System PRO you can create hundreds of components combinations within seconds and present them to your client. You just need to change some classes and colors.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="image-container">
|
|
<img src="../../static/blk-pro/assets/img/ipad3.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-testimonials">
|
|
<div class="row">
|
|
<div class="col-md-6 ml-auto mr-auto text-center">
|
|
<h1 class="title mb-5">Trusted by 660,000+ People</h1>
|
|
<p class="description">The UI Kits, Templates and Dashboards that we've created are used by <strong class="text-warning">660,000+ web developers</strong> in over <strong class="text-warning">1,100,000 Web Projects</strong>. This is what some of them think:</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-6 mx-auto">
|
|
<div id="carouselExampleIndicators2" class="carousel slide">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
|
|
<li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="carousel-item active justify-content-center">
|
|
<div class="card card-testimonial card-plain">
|
|
<div class="card-avatar">
|
|
<a href="#pablo">
|
|
<img class="img img-raised rounded" src="https://s3.amazonaws.com/creativetim_bucket/photos/154001/thumb.JPG?1501184024" />
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-description">"Awesome Design and very well organized code structure! Also, it contains numerous elements using which achieving the perfect or required template can be done with ease. Great job!"
|
|
</h5>
|
|
<h4 class="card-title">Stefan</h4>
|
|
<h6 class="category text-muted">Web Designer</h6>
|
|
<div class="card-footer">
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item justify-content-center">
|
|
<div class="card card-testimonial card-plain">
|
|
<div class="card-avatar">
|
|
<a href="#pablo">
|
|
<img class="img img-raised rounded" src="https://s3.amazonaws.com/uifaces/faces/twitter/chadengle/128.jpg" />
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-description">"It looks great and its somewhat futuristics cant wait to use it on a project here in nigeria i'm sure it would put me ahead.. I cant wait to hv enough money to buy ur product."
|
|
</h5>
|
|
<h4 class="card-title">Mr. Bones</h4>
|
|
<h6 class="category text-muted">Web Designer</h6>
|
|
<div class="card-footer">
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item justify-content-center">
|
|
<div class="card card-testimonial card-plain">
|
|
<div class="card-avatar">
|
|
<a href="#pablo">
|
|
<img class="img img-raised rounded" src="https://s3.amazonaws.com/creativetim_bucket/photos/123124/thumb.?1480480048" />
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-description">"Everything is perfect. Codes are really organized. It's easy to edit for my own purposes. It's great that it is built on top of Bootstrap 4."
|
|
<br>
|
|
<br>
|
|
</h5>
|
|
<h4 class="card-title">DOĞA</h4>
|
|
<h6 class="category text-muted">Web Developer</h6>
|
|
<div class="card-footer">
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
<i class="fa fa-star text-warning"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
|
|
<i class="tim-icons icon-minimal-left"></i>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
|
|
<i class="tim-icons icon-minimal-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="section section-pricing" id="sectionBuy">
|
|
<div class="container">
|
|
<div class="our-clients">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-3 ml-auto">
|
|
<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/stanford-white.png" alt="" />
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/mit-white.png" alt="" style="margin-top:-15px;" />
|
|
</div>
|
|
<div class="col-3 mr-auto">
|
|
<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/harvard-white.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="pricing">
|
|
<div class="col-md-8 ml-auto mr-auto text-center mt-5">
|
|
<h2 class="title">Ready to grab
|
|
<span class="text-primary">BLK• Design System PRO</span>?</h2>
|
|
</div>
|
|
<div class="col-md-8 ml-auto mr-auto">
|
|
<p class="description mb-5 text-center">You have
|
|
<b>Free Unlimited Updates</b> and
|
|
<b>Premium Support</b> on each package. You also have
|
|
<b>30 days</b> to request a refund if you're not happy with your purchase.
|
|
<br> Read more about
|
|
<b>
|
|
<a href="https://www.creative-tim.com/license" target="_blank">licenses here</a>
|
|
</b>.
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-md-6 pt-lg-5 mt-lg-5">
|
|
<div class="card card-pricing card-plain card-info">
|
|
<div class="card-body">
|
|
<h4 class="title">Personal License</h4>
|
|
<h1 class="card-title">
|
|
<small>$</small>79</h1>
|
|
<ul>
|
|
<li>
|
|
<b>HTML/CSS/JS/SASS</b> Files</li>
|
|
<li>
|
|
<b>Fully Coded</b> Components</li>
|
|
<li>
|
|
<b>Responsive</b> Design</li>
|
|
<li>Product
|
|
<b> Documentation</b>
|
|
</li>
|
|
</ul>
|
|
<a href="https://www.creative-tim.com/buy/blk-design-system-pro?license=1?ref=presentation" target="_blank" class="btn btn-primary btn-round">
|
|
Buy Now!
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 pt-lg-5">
|
|
<div class="card card-pricing card-plain card-info">
|
|
<div class="card-body">
|
|
<h4 class="title">Developer License</h4>
|
|
<h1 class="card-title">
|
|
<small>$</small>319</h1>
|
|
<ul class="b-left">
|
|
<li>Everything in Personal</li>
|
|
<li>
|
|
<b>+</b> Create
|
|
<b>Multiple Websites</b>
|
|
</li>
|
|
<li>
|
|
<b>+</b> Sell to
|
|
<b>Multiple Clients</b>
|
|
</li>
|
|
<li>
|
|
<b>+</b> Can
|
|
<b> Charge Customers</b>
|
|
</li>
|
|
<li>
|
|
<b>+</b> Use in
|
|
<b> Commercial Projects</b>
|
|
</li>
|
|
<li>
|
|
<b>+</b> Use in
|
|
<b> SaaS Projects</b>
|
|
</li>
|
|
</ul>
|
|
<a href="https://www.creative-tim.com/buy/blk-design-system-pro?license=2?ref=presentation" target="_blank" class="btn btn-primary btn-round">
|
|
Buy Now!
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section section-download" id="#download-section" data-background-color="black">
|
|
<div class="container">
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<div class="row row-grid align-items-center my-md">
|
|
<div class="col-lg-6">
|
|
<h3 class="text-primary font-weight-light mb-2">Thank you for supporting us!</h3>
|
|
<h4 class="mb-0 font-weight-light">Let's get in touch on any of these platforms.</h4>
|
|
</div>
|
|
<div class="col-lg-6 text-lg-center btn-wrapper">
|
|
<a id="twitter" class="btn btn-icon btn-twitter btn-round btn-lg" data-toggle="tooltip" data-original-title="Tweet!">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a id="facebook" class="btn btn-icon btn-facebook btn-round btn-lg" data-toggle="tooltip" data-original-title="Share!">
|
|
<i class="fab fa-facebook-square"></i>
|
|
</a>
|
|
<a target="_blank" href="https://github.com/creativetimofficial/ct-blk-design-system-pro" class="btn btn-icon btn-github btn-round btn-lg" data-toggle="tooltip" data-original-title="Star on Github">
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<h1 class="title">BLK•</h1>
|
|
</div>
|
|
<div class="col-md-3 col-6">
|
|
<ul class="nav">
|
|
<li class="nav-item">
|
|
<a href="./index.html" class="nav-link">
|
|
Home
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="./examples/landing-page.html" class="nav-link">
|
|
Landing
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="./examples/register-page.html" class="nav-link">
|
|
Register
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="./examples/profile-page.html" class="nav-link">
|
|
Profile
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-3 col-6">
|
|
<ul class="nav">
|
|
<li class="nav-item">
|
|
<a href="https://creative-tim.com/contact-us?ref=blkdsp-footer" class="nav-link">
|
|
Contact Us
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="https://creative-tim.com/about-us?ref=blkdsp-footer" class="nav-link">
|
|
About Us
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="http://creative-tim.com/blog?ref=blkdsp-footer" class="nav-link">
|
|
Blog
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="https://opensource.org/licenses/MIT?ref=blkdsp-footer" class="nav-link">
|
|
License
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<h3 class="title">Follow us:</h3>
|
|
<div class="btn-wrapper profile text-left">
|
|
<a target="_blank" href="https://twitter.com/creativetim" class="btn btn-icon btn-neutral btn-round btn-simple" data-toggle="tooltip" data-original-title="Follow us">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a target="_blank" href="https://www.facebook.com/creativetim" class="btn btn-icon btn-neutral btn-round btn-simple" data-toggle="tooltip" data-original-title="Like us">
|
|
<i class="fab fa-facebook-square"></i>
|
|
</a>
|
|
<a target="_blank" href="https://dribbble.com/creativetim" class="btn btn-icon btn-neutral btn-round btn-simple" data-toggle="tooltip" data-original-title="Follow us">
|
|
<i class="fab fa-dribbble"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<!-- Core JS Files -->
|
|
<script src="../../static/blk-pro/assets/js/core/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../../static/blk-pro/assets/js/core/popper.min.js" type="text/javascript"></script>
|
|
<script src="../../static/blk-pro/assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
|
<script src="../../static/blk-pro/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
|
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/bootstrap-switch.js"></script>
|
|
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
|
|
<!-- Plugin for the Carousel, full documentation here: http://kenwheeler.github.io/slick/ -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/slick.js" type="text/javascript"></script>
|
|
<!-- Plugin for the blob animation -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/anime.min.js" type="text/javascript"></script>
|
|
<!-- Chart JS -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/chartjs.min.js"></script>
|
|
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/moment.min.js"></script>
|
|
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/bootstrap-tagsinput.js"></script>
|
|
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/bootstrap-selectpicker.js" type="text/javascript"></script>
|
|
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/bootstrap-datetimepicker.js" type="text/javascript"></script>
|
|
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
|
|
<script src="../../static/blk-pro/assets/js/plugins/jasny-bootstrap.min.js"></script>
|
|
<!-- Black Dashboard DEMO methods, don't include it in your project! -->
|
|
<script src="../../static/blk-pro/assets/demo/demo.js"></script>
|
|
<!-- Control Center for Black UI Kit: parallax effects, scripts for the example pages etc -->
|
|
<!-- Google Maps Plugin -->
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
|
<script src="../../static/blk-pro/assets/js/blk-design-system-pro.min.js?v=1.0.0" type="text/javascript"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
// Carousel
|
|
|
|
$(".center").slick({
|
|
dots: false,
|
|
infinite: true,
|
|
centerMode: true,
|
|
slidesToShow: 4,
|
|
slidesToScroll: 1,
|
|
responsive: [{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
infinite: true,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1
|
|
}
|
|
}
|
|
// You can unslick at a given breakpoint now by adding:
|
|
// settings: "unslick"
|
|
// instead of a settings object
|
|
]
|
|
});
|
|
|
|
});
|
|
</script>
|
|
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script>
|
|
<script>
|
|
window.TrackJS &&
|
|
TrackJS.install({
|
|
token: "ee6fab19c5a04ac1a32a645abde4613a",
|
|
application: "black-dashboard-pro"
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|