bdo-theme
Version:
bootstrap 4, cosmo theme, flexbox in action
157 lines (148 loc) • 6.36 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Theme Demo</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<a class="navbar-brand" href="#">
<button class="navbar-toggler" type="button">
☰
</button>
NG2 Demo
</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<div id="wrapper">
<aside class="sidebar left sidebar-menu-bg sidebar-xs">
<div class="sidebar-inner">
<ul class="menu">
<li>
<a href=''>Home</a>
</li>
<li class="active">
<a href=''>About</a>
</li>
<li>
<a href=''>Contact</a>
</li>
<li class="sub-menu">
<a href="">
<i class="ti-angle-right menu-arrow"></i> Headers</a>
<ul>
<li><a data-ng-click="mactrl.sidebarStat($event)" data-ui-sref="headers.textual-menu" data-ui-sref-active="active" class="active" href="#/headers/textual-menu">Textual menu</a></li>
<li><a data-ng-click="mactrl.sidebarStat($event)" data-ui-sref="headers.image-logo" data-ui-sref-active="active" href="#/headers/image-logo">Image logo</a></li>
<li><a data-ng-click="mactrl.sidebarStat($event)" data-ui-sref="headers.mainmenu-on-top" data-ui-sref-active="active" href="#/headers/mainmenu-on-top">Mainmenu on top</a></li>
</ul>
</li>
</ul>
</div>
</aside>
<div class="content">
<div class="card card-outline-primary callout text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
<div class="card card-outline-secondary text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
<div class="card card-outline-success callout text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
<div class="card card-outline-info text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
<div class="card card-outline-warning text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
<div class="card card-outline-danger text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
<div class="callout callout-success">
<h4>I am kooll</h4>
<p><strong>Heads up!</strong> This copy is a work in progress.</p>
</div>
<div class="card">
<div class="card-header bg-warning">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
Hello Footer
</div>
</div>
<footer>
<div class="container">
<a href="/" class="logo-font">conduit</a>
<span class="attribution">
An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code & design licensed under MIT.
</span>
</div>
</footer>
<script src="vendor/jquery-2.2.3.min.js"></script>
<script src="vendor/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>
</div>
</div>