mirror of
https://github.com/tabler/tabler.git
synced 2026-06-17 12:50:03 +04:00
511 lines
21 KiB
HTML
511 lines
21 KiB
HTML
<!doctype html>
|
||
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<meta http-equiv="Content-Language" content="en" />
|
||
|
||
<meta name="msapplication-TileColor" content="#2d89ef">
|
||
<meta name="theme-color" content="#4188c9">
|
||
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="HandheldFriendly" content="True">
|
||
<meta name="MobileOptimized" content="320">
|
||
|
||
<title>Blog components - Documentation - tabler.io - a responsive, flat and full featured admin template</title>
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext">
|
||
<script src="../assets/js/require.min.js"></script>
|
||
<script>
|
||
requirejs.config({
|
||
baseUrl: '..'
|
||
});
|
||
</script>
|
||
|
||
<!-- Dashboard Core -->
|
||
<link href="../assets/css/dashboard.css" rel="stylesheet" />
|
||
<script src="../assets/js/dashboard.js"></script>
|
||
|
||
|
||
<!-- c3.js Charts Plugin -->
|
||
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
|
||
<script src="../assets/plugins/charts-c3/plugin.js"></script>
|
||
|
||
|
||
</head>
|
||
<body class="">
|
||
|
||
<div class="page">
|
||
|
||
|
||
<div class="page-main">
|
||
|
||
<div class="header">
|
||
<div class="container">
|
||
<div class="navbar p-0">
|
||
<a class="navbar-brand" href="#">
|
||
<img src="./assets/images/logo.svg" class="navbar-brand-img" alt="tabler.io">
|
||
<span class="d-none d-lg-inline-block">Bootstrap</span>
|
||
</a>
|
||
<div class="nav order-lg-2">
|
||
<div class="nav-item">
|
||
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
|
||
</div>
|
||
<a class="nav-link icon">
|
||
<i class="fe fe-maximize"></i>
|
||
</a>
|
||
<div class="dropdown d-none d-md-flex">
|
||
<a class="nav-link icon" data-toggle="dropdown">
|
||
<i class="fe fe-message-square"></i>
|
||
<span class="badge badge-pill badge-danger">1</span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
|
||
delectus dolore dolores maxime nesciunt qui quia totam.
|
||
</div>
|
||
</div>
|
||
<div class="dropdown d-none d-md-flex">
|
||
<a class="nav-link icon" data-toggle="dropdown">
|
||
<i class="fe fe-bell"></i>
|
||
<span class="badge badge-pill badge-danger">10</span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
|
||
delectus dolore dolores maxime nesciunt qui quia totam.
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="nav-link" data-toggle="dropdown">
|
||
<span class="avatar" style="background-image: url(assets/images/faces/female/25.jpg)"></span>
|
||
<span class="ml-2 d-none d-lg-block">
|
||
<span class="text-default">Jane Pearson</span>
|
||
<small class="text-muted d-block mt-1">Administrator</small>
|
||
</span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="#">
|
||
<span>Profile</span>
|
||
</a>
|
||
<a class="dropdown-item" href="#">
|
||
<span>Settings</span>
|
||
</a>
|
||
<a class="dropdown-item" href="#">
|
||
<span class="float-right"><span class="badge badge-primary">6</span></span>
|
||
<span>Inbox</span>
|
||
</a>
|
||
<a class="dropdown-item" href="#">
|
||
<span>Message</span>
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Need help? </a>
|
||
<a class="dropdown-item" href="#">Sign out</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
|
||
<ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
|
||
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
|
||
<li class="nav-item dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
|
||
<div class="dropdown-menu mt-2 text-color" role="menu">
|
||
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
|
||
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
|
||
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-nav d-none d-lg-flex">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<ul class="nav nav-tabs">
|
||
|
||
|
||
|
||
|
||
<li class="nav-item">
|
||
|
||
|
||
<a href="../." class="nav-link"><i class="fe fe-home"></i> Home</a>
|
||
|
||
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
|
||
|
||
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
|
||
|
||
|
||
<div class="nav-submenu nav">
|
||
|
||
|
||
|
||
<a href="../cards.html" class="nav-item ">Cards design</a>
|
||
|
||
|
||
|
||
<a href="../charts.html" class="nav-item ">Charts</a>
|
||
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
|
||
|
||
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
|
||
|
||
|
||
<div class="nav-submenu nav">
|
||
|
||
|
||
|
||
<a href="../maps.html" class="nav-item ">Maps</a>
|
||
|
||
|
||
|
||
<a href="../icons.html" class="nav-item ">Icons</a>
|
||
|
||
|
||
|
||
<a href="../store.html" class="nav-item ">Store</a>
|
||
|
||
|
||
|
||
<a href="../blog.html" class="nav-item ">Blog</a>
|
||
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
|
||
|
||
<a href="../profile.html" class="nav-link"><i class="fe fe-user"></i> Profile</a>
|
||
|
||
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
|
||
|
||
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
|
||
|
||
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
|
||
|
||
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-3 ml-auto">
|
||
<form class="input-icon">
|
||
<input type="search" class="form-control header-search" placeholder="Search…" tabindex="1">
|
||
<div class="input-icon-addon">
|
||
<i class="fe fe-search"></i>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="page-content">
|
||
|
||
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<h1 class="page-title">
|
||
<i class=" page-title-icon"></i>
|
||
|
||
Documentation
|
||
</h1>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-3">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<ul class="list">
|
||
|
||
<li><a href="../docs/blog.html">Blog components</a></li>
|
||
|
||
<li><a href="../docs/buttons.html">Buttons</a></li>
|
||
|
||
<li><a href="../docs/charts.html">Charts</a></li>
|
||
|
||
<li><a href="../docs/form-components.html">Form components</a></li>
|
||
|
||
<li><a href="../docs/index.html">Getting started</a></li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-9">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
|
||
<div class="text-wrap">
|
||
<h2 class="mt-0 mb-4">Blog components</h2>
|
||
|
||
|
||
|
||
<p>Tabler is a great choice when it comes to the blog management. It allows you to create advanced systems with which you’ll be able to administrate your posts without the mess. With our components, your blog will be transparent and really nice-looking.</p>
|
||
|
||
<h3 id="post-card">Post card</h3>
|
||
|
||
<p>The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the <code class="highlighter-rouge">.card-img-top</code> class:</p>
|
||
|
||
<div class="example example-bg">
|
||
<div class="example-column example-column-1">
|
||
<div class="card">
|
||
|
||
<a href="#"><img class="card-img-top" src="../assets/images/photos/david-klaasen-54203-500.jpg" alt="And this isn't my nose. This is a false one." /></a>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="card-body d-flex flex-column">
|
||
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
|
||
|
||
<div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
|
||
|
||
<div class="d-flex align-items-center pt-5 mt-auto">
|
||
<div class="avatar avatar-md mr-3" style="background-image: url(../assets/images/faces/female/18.jpg)"></div>
|
||
<div>
|
||
<a href="../profile.html" class="text-default">Rose Bradley</a>
|
||
<small class="d-block text-muted">3 days ago</small>
|
||
</div>
|
||
<div class="ml-auto text-muted">
|
||
<a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></div>
|
||
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"./assets/images/photos/david-klaasen-54203-500.jpg"</span> <span class="na">alt=</span><span class="s">"And this isn&#39;t my nose. This is a false one."</span><span class="nt">></a></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body d-flex flex-column"</span><span class="nt">></span>
|
||
<span class="nt"><h4><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>And this isn't my nose. This is a false one.<span class="nt"></a></h4></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-5 mt-auto"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"avatar avatar-md mr-3"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/18.jpg)"</span><span class="nt">></div></span>
|
||
<span class="nt"><div></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"./profile.html"</span> <span class="na">class=</span><span class="s">"text-default"</span><span class="nt">></span>Rose Bradley<span class="nt"></a></span>
|
||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">></span>3 days ago<span class="nt"></small></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ml-auto text-muted"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"icon d-none d-md-inline-block ml-3"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fe fe-heart mr-1"</span><span class="nt">></i></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<p>We’ve added the <code class="highlighter-rouge">.d-flex .flex-column</code> classes to the <code class="highlighter-rouge">.card-body</code> to have the author details be on the bottom of the card.</p>
|
||
|
||
<p>If you want to create a couple of posts next to each other, add the <code class="highlighter-rouge">.row-deck</code> class to <code class="highlighter-rouge">.row</code>—then they will all have the same height:</p>
|
||
|
||
<div class="example example-bg">
|
||
<div class="example-column example-column-2">
|
||
<div class="row row-cards row-deck">
|
||
<div class="col-md-4">
|
||
<div class="card">
|
||
<div class="card-body">Short content</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card">
|
||
<div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card">
|
||
<div class="card-body">Short content</div>
|
||
</div>
|
||
</div>
|
||
</div></div>
|
||
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row row-cards row-deck"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>Short content<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>Short content<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h3 id="post-card-with-aside-image">Post card with aside image</h3>
|
||
|
||
<p>You can also add the image on the left side of the card. All you need do to is: add the <code class="highlighter-rouge">.card-aside</code> class to the element with the <code class="highlighter-rouge">.card</code> class. Then add the image in the <code class="highlighter-rouge">.card-aside-column</code> element. No worries, tabler will automatically center it and scale to right size:</p>
|
||
|
||
<div class="example example-bg">
|
||
<div class="example-column example-column-2">
|
||
<div class="card card-aside">
|
||
|
||
|
||
|
||
<a href="#" class="card-aside-column" style="background-image: url(../assets/images/photos/david-klaasen-54203-500.jpg)"></a>
|
||
|
||
|
||
|
||
|
||
<div class="card-body d-flex flex-column">
|
||
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
|
||
|
||
<div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
|
||
|
||
<div class="d-flex align-items-center pt-5 mt-auto">
|
||
<div class="avatar avatar-md mr-3" style="background-image: url(../assets/images/faces/female/18.jpg)"></div>
|
||
<div>
|
||
<a href="../profile.html" class="text-default">Rose Bradley</a>
|
||
<small class="d-block text-muted">3 days ago</small>
|
||
</div>
|
||
<div class="ml-auto text-red">
|
||
<a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></div>
|
||
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-aside"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-aside-column"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/photos/david-klaasen-54203-500.jpg)"</span><span class="nt">></a></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body d-flex flex-column"</span><span class="nt">></span>
|
||
<span class="nt"><h4><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>And this isn't my nose. This is a false one.<span class="nt"></a></h4></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-5 mt-auto"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"avatar avatar-md mr-3"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/18.jpg)"</span><span class="nt">></div></span>
|
||
<span class="nt"><div></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"./profile.html"</span> <span class="na">class=</span><span class="s">"text-default"</span><span class="nt">></span>Rose Bradley<span class="nt"></a></span>
|
||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">></span>3 days ago<span class="nt"></small></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ml-auto text-red"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"icon d-none d-md-inline-block ml-3"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fe fe-heart mr-1"</span><span class="nt">></i></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<p>See more live examples <a href="../blog.html">here</a>.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-8">
|
||
<div class="row">
|
||
<div class="col-6 col-md-3">
|
||
<ul class="list-unstyled mb-0">
|
||
<li><a href="..">Advertise</a></li>
|
||
<li><a href="..">Help Center</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<ul class="list-unstyled mb-0">
|
||
<li><a href="..">Invite friends</a></li>
|
||
<li><a href="..">Tag photos</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<ul class="list-unstyled mb-0">
|
||
<li><a href="..">Stock photos</a></li>
|
||
<li><a href="..">Photobooks</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<ul class="list-unstyled mb-0">
|
||
<li><a href="..">Press Kit</a></li>
|
||
<li><a href="..">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mt-4 mt-lg-0">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequatur corporis debitis dolore doloribus esse.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row align-items-center flex-row-reverse">
|
||
<div class="col-auto ml-auto">
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-inline-dots mb-0">
|
||
<li class="list-inline-item"><a href="../docs/index.html">Documentation</a></li>
|
||
<li class="list-inline-item"><a href="../faq.html">FAQ</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-auto">
|
||
<a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
|
||
Copyright © 2018 <a href="..">tabler.io</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a> All rights reserved.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html> |