---
layout: base
body-class: body-marketing body-gradient
plugins: marketing
---
<!-- BEGIN NAVBAR  -->
<header role="banner">
{% include "marketing/navbar.html" %}
</header>
<!-- END NAVBAR  -->

<!-- BEGIN PAGE BODY -->
<main id="content">
{{ content }}
</main>
<!-- END PAGE BODY -->

<!-- BEGIN FOOTER -->
<footer class="footer">
	<div class="container">
		<div class="py-3">
			<div class="row g-lg-4">
				<div class="col-lg-7">
					<div class="row g-lg-4">
						<div class="col-md">
							<div class="subheader mb-3">Our products</div>
							<ul class="list-unstyled list-separated gap-2">
								<li><a class="link-secondary" href="{{ site.base }}">UI Kit</a></li>
								<li>
									<a class="link-secondary" href="{{ site.base }}">Open source icons</a>
								</li>
								<li>
									<a class="link-secondary" href="{{ site.base }}">Email templates</a>
								</li>
								<li><a class="link-secondary" href="{{ site.base }}">Pricing</a></li>
							</ul>
						</div>
						<div class="col-md">
							<div class="subheader mb-3">Support</div>
							<ul class="list-unstyled list-separated gap-2">
								<li><a class="link-secondary" href="{{ site.base }}">Blog</a></li>
								<li><a class="link-secondary" href="{{ site.base }}">Documentation</a></li>
								<li><a class="link-secondary" href="{{ site.base }}">Support</a></li>
								<li>
									<a
										href="https://status.tabler.io"
										class="link-secondary"
										target="_blank"
										rel="noreferrer"
										>Status</a
									>
								</li>
							</ul>
						</div>
						<div class="col-md">
							<div class="subheader mb-3">Tabler</div>
							<ul class="list-unstyled list-separated gap-2">
								<li><a class="link-secondary" href="{{ site.base }}">About</a></li>
								<li><a class="link-secondary" href="{{ site.base }}">Blog</a></li>
								<li><a class="link-secondary" href="{{ site.base }}">Changelog</a></li>
								<li>
									<a
										href="{{ site.githubUrl }}"
										class="link-secondary"
										target="_blank"
										rel="noreferrer"
										>Github</a
									>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-lg-4 ml-auto">
					<div class="text-secondary">
						Tabler comes with tons of well-designed components and features.
						Start your adventure with Tabler and make your dashboard great
						again. For free!
					</div>
				</div>
			</div>

			<div class="row g-lg-4 justify-content-between mt-0 mt-md-2">
				<div class="col-sm-7 col-md-6 col-lg-4">
					<h5 class="subheader">Payment &amp; Security</h5>
					<ul class="list-inline mb-0 mt-3">
						<li class="list-inline-item">
							<a href="#">{% include "ui/payment.html" payment="paypal" %}</a>
						</li>
						<li class="list-inline-item">
							<a href="#">{% include "ui/payment.html" payment="visa" %}</a>
						</li>
						<li class="list-inline-item">
							<a href="#">{% include "ui/payment.html" payment="mastercard" %}</a>
						</li>
						<li class="list-inline-item">
							<a href="#"
								>{% include "ui/payment.html" payment="americanexpress" %}</a
							>
						</li>
					</ul>
				</div>

				<div class="col-sm-5 col-md-6 col-lg-3 text-sm-end">
					<h5 class="subheader">Follow us on</h5>
					<ul class="list-inline mb-0 mt-3">
						<li class="list-inline-item">
							<a class="btn btn-icon btn-facebook" href="#"
								>{% include "ui/icon.html" icon="brand-facebook" %}</a
							>
						</li>
						<li class="list-inline-item">
							<a class="btn btn-icon btn-instagram" href="#"
								>{% include "ui/icon.html" icon="brand-instagram" %}</a
							>
						</li>
						<li class="list-inline-item">
							<a class="btn btn-icon btn-twitter" href="#"
								>{% include "ui/icon.html" icon="brand-twitter" %}</a
							>
						</li>
						<li class="list-inline-item">
							<a class="btn btn-icon btn-linkedin" href="#"
								>{% include "ui/icon.html" icon="brand-linkedin" %}</a
							>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</footer>

<footer class="footer">
	<div class="container">
		<div class="py-3 border-top-light text-center text-lg-start">
			<div class="row g-lg-4">
				<div class="col-lg-auto text-lg-end order-lg-last">
					<div class="row justify-center">
						<div class="col-auto">
							©<a
								href="https://codecalm.net"
								class="link-secondary"
								target="_blank"
								rel="noopener noreferrer"
								>codecalm.net</a
							>
						</div>
						<div class="col-auto">
							<ul class="list-inline list-inline-dots">
								<li class="list-inline-item">
									<a class="link-secondary" href="/terms-of-service"
										>Terms of service</a
									>
								</li>
								<li class="list-inline-item">
									<a class="link-secondary" href="/privacy-policy"
										>Privacy policy</a
									>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-lg">
					Made with {% include "ui/icon.html" icon="heart" filled=true color="red"
					inline=true %} in Poland.
				</div>
			</div>
		</div>
	</div>
</footer>
<!-- END FOOTER -->