56 lines
3.3 KiB
PHP
56 lines
3.3 KiB
PHP
<section class="container pt-5 pb-4 pb-sm-5 my-2 mt-md-3 mt-xxl-4 mb-sm-0 mb-lg-4 mb-xl-5">
|
|
<h2 class="h1 text-center pt-lg-3 pt-xl-0 pb-md-2 pb-lg-3 pb-xl-4">Theme Customizer</h2>
|
|
|
|
<!-- Colors -->
|
|
<div class="row align-items-center justify-content-center py-4">
|
|
<div class="col-9 col-sm-7 col-md-6 order-md-2 offset-lg-1">
|
|
<div class="ratio" style="max-width: 593px; --cz-aspect-ratio: calc(542 / 593 * 100%)">
|
|
<img src="/img/intro/customizer/colors-light.jpg" class="d-none-dark" alt="Colors">
|
|
<img src="/img/intro/customizer/colors-dark.png" class="d-none d-block-dark" alt="Colors">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-3 mt-md-n5">
|
|
<span class="badge fs-sm bg-primary-subtle text-primary mb-3 mb-md-4">Colors</span>
|
|
<h2 class="h3 mb-md-4">Change theme brand colors quickly and easily</h2>
|
|
<p class="mb-0">Customize theme colors to match your brand palette using the color picker or just type in
|
|
the color hex. Supported colors: primary, warning, success, info, danger.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="d-md-none my-3 my-sm-4">
|
|
|
|
<!-- Typography -->
|
|
<div class="row align-items-center justify-content-center py-4">
|
|
<div class="col-10 col-sm-7 col-md-6 col-lg-7">
|
|
<div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(510 / 668 * 100%)">
|
|
<img src="/img/intro/customizer/typography-light.jpg" class="d-none-dark" alt="Typography">
|
|
<img src="/img/intro/customizer/typography-dark.png" class="d-none d-block-dark" alt="Typography">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-5 text-center text-md-start mt-3 mt-md-n5">
|
|
<span class="badge fs-sm bg-info-subtle text-info mb-3 mb-md-4">Typography</span>
|
|
<h2 class="h3 mb-md-4">Set up fonts from the huge Google font collection</h2>
|
|
<p class="mb-0">Easily change the font to your liking. Choose the font from Google Fonts library of 1,600+
|
|
open source font families. Update headings and body font sizes right from customizer.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="d-md-none my-3 my-sm-4">
|
|
|
|
<!-- Borders -->
|
|
<div class="row align-items-center justify-content-center py-4">
|
|
<div class="col-10 col-sm-7 col-md-6 col-lg-7 order-md-2 d-flex justify-content-end">
|
|
<div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(428 / 668 * 100%)">
|
|
<img src="/img/intro/customizer/borders-light.jpg" class="d-none-dark" alt="Borders">
|
|
<img src="/img/intro/customizer/borders-dark.png" class="d-none d-block-dark" alt="Borders">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-4 mt-md-0">
|
|
<span class="badge fs-sm bg-success-subtle text-success mb-3 mb-md-4">Borders</span>
|
|
<h2 class="h3 mb-md-4">Rounded or square? Customize borders as you wish</h2>
|
|
<p class="mb-0">It's up to you to make your website soft and friendly with increased border radius or add
|
|
business vibes with less rounded shapes. Additionally, you can adjust the border width.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|