-
Frantisek
- Announcements
- Friday, 24 February 2023
New Free Joomla 4 template was released today.
LBOX is free Joomla 4 template that can fit of any type of website. LBOX is very easy to customize. Lightweight, modern and fast-loading design.
Super fast loading speed without caching and WebP!
98 % Performance - A Grade
DEMO: lbox.linelab.org
Info: https://www.linelab.org/tutorials/lbox-free-joomla-4-template
Changelog: http://www.linelab.org/features/changelog/104-lbox-free-joomla-4-template-changelog
Download joomlaportal.cz
The LBOX template color system can help you create a color theme that reflects your brand or style. No code skills needed. Super easy customization. This flexibility gives you an entirely unique design.
Mobile First Design
LBOX is free Joomla 4 template that can fit of any type of website. LBOX is very easy to customize. Lightweight, modern and fast-loading design.
Super fast loading speed without caching and WebP!
98 % Performance - A Grade
DEMO: lbox.linelab.org
Info: https://www.linelab.org/tutorials/lbox-free-joomla-4-template
Changelog: http://www.linelab.org/features/changelog/104-lbox-free-joomla-4-template-changelog
Download joomlaportal.cz
The LBOX template color system can help you create a color theme that reflects your brand or style. No code skills needed. Super easy customization. This flexibility gives you an entirely unique design.
Mobile First Design
Position: carousel
Phoca Carousel Module - a Joomla! CMS module which displays horizontal image slider containing HTML parts and additional images.
Download: https://www.phoca.cz/download/category/122-phoca-carousel-module
Demo LBOX Joomla template: https://lbox.linelab.org/index.php/en/home-en-gb/home-with-carousel
Module settings:
Background Image Animation:
Title CSS:
Title Animation:
More than 90 animation effects https://animate.style/ (copy > paste)
Description CSS:
Description Animation:
Button CSS:
Button Animation:
Second Image CSS:
Phoca Carousel Module - a Joomla! CMS module which displays horizontal image slider containing HTML parts and additional images.
Download: https://www.phoca.cz/download/category/122-phoca-carousel-module
Demo LBOX Joomla template: https://lbox.linelab.org/index.php/en/home-en-gb/home-with-carousel
Module settings:
Background Image Animation:
kenburnsBottomLeft
Title CSS:
animation-duration: 2s; animation-delay: 0s;
Title Animation:
animate__animated animate__fadeInDown
More than 90 animation effects https://animate.style/ (copy > paste)
Description CSS:
animation-duration: 3s; animation-delay: 0s;
Description Animation:
animate__animated animate__fadeInUp
Button CSS:
animation-duration: 1s; animation-delay: 6s;
Button Animation:
animate__animated animate__bounce
Second Image CSS:
top: 9%;
left: 33%;
position:absolute;
animation-duration: 2s; animation-delay: 2s;
Position: bottom-c1
In the template settings, select the fluid layout for "bottom" section
Custom html code:
In the template settings, select the fluid layout for "bottom" section
Custom html code:
<div class="col-md-6 col-lg-3 text-center">
<div class="mb-5"> </div>
<h4>EXPRESS SHIPPING</h4>
<p class="mb-3">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo.</p>
<a class="btn btn-primary rounded-pill mt-3 mb-5" href="#">More</a></div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mb-5"> </div>
<h4>30 DAY RETURN POLICY</h4>
<p class="mb-3">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo. </p>
<a class="btn btn-primary rounded-pill mt-3 mb-5" href="#">More</a></div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mb-5"> </div>
<h4>EASY INSTALLATION</h4>
<p class="mb-3">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo. </p>
<a class="btn btn-primary rounded-pill mt-3 mb-5" href="#">More</a></div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mb-5"> </div>
<h4>100% PAYMENT SECURE</h4>
<p class="mb-3">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo. </p>
<a class="btn btn-primary rounded-pill mt-3 mb-5" href="#">More</a></div>
Position: top-c1
<div class="col-md-8 col-lg-6 position-relative">
<figure class="rounded">IMAGE</figure>
</div>
<div class="col-lg-5 offset-lg-1">
<h2 class="fsi-20 text-uppercase mb-3 mt-3">Etiam posuere lacus?</h2>
<h3 class="display-4 mb-6">Integer lacinia. Nullam at arcu a est sollicitudin euismod.</h3>
<p class="mb-6">Nullam at arcu a est sollicitudin euismod. Pellentesque sapien. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. In enim a arcu imperdiet malesuada.</p>
<div class="row gy-3 gx-xl-8">
<div class="col-xl-6">
<ul class="mb-0 no-list">
<li>Cras pede libero, dapibus nec, pretium sit amet, tempor quis.</li>
<li class="mt-3">Cras pede libero, dapibus nec, pretium sit amet, tempor quis.</li>
</ul>
</div>
<div class="col-xl-6">
<ul class="mb-0 no-list">
<li>Cras pede libero, dapibus nec, pretium sit amet, tempor quis.</li>
<li class="mt-3">Cras pede libero, dapibus nec, pretium sit amet, tempor quis.</li>
</ul>
</div>
</div>
</div>
Position: top-b1
Custom html code
Custom html code
<h2 class="fsi-20 text-muted mb-3">Our Customer Reviews</h2>
<h3 class="display-5 mb-5">Proin mattis <span class="txt-primary">lacinia justo</span>. Fusce aliquam vestibulum ipsum.</h3>
<p>Aenean id metus id velit ullamcorper pulvinar. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.</p>
<p><a class="btn btn-primary rounded-pill mt-3" href="#">More info</a></p>
Position: top-a1
Custom html code
Custom html code
<div class="col-md-8 col-lg-6">
<figure class="rounded">OBRÁZEK</figure>
</div>
<div class="col-lg-5 col-xl-4 offset-lg-1">
<h2 class="display-4 mb-4 mt-4">WHY CHOOSE US</h2>
<p class="mb-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div class="d-flex flex-row mb-6">
<div><span class="btn btn-circle btn-primary pe-none me-4"><span class="number fsi-20">1</span></span></div>
<div>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
<div class="d-flex flex-row mb-6">
<div><span class="btn btn-circle btn-primary pe-none me-4"><span class="number fsi-20">2</span></span></div>
<div>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
<div class="d-flex flex-row">
<div><span class="btn btn-circle btn-primary pe-none me-4"><span class="number fsi-20">3</span></span></div>
<div>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
</div>
Position: banner
Custom html code
You can upload a background image with Parallax effect to this module on the "options" tab
Custom html code
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-1 position-relative order-lg-2 text-center rounded">IMAGE</div>
<div class="col-lg-5 mt-lg-n10 text-center text-lg-start">
<h1 class="display-3 mb-5 mt-5 animate__animated animate__fadeInDown">Lorem <span class="txt-primary">ipsum dolor sit</span> amet, consectetuer adipiscing elit.</h1>
<p class="lead fsi-25 lh-sm mb-12 px-md-10 px-lg-0">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo. Quisque porta.</p>
<div class="d-flex justify-content-center justify-content-lg-start"><a class="btn btn-lg btn-primary rounded-pill me-3" href="#">Shop Now</a> <a class="btn btn-lg btn-secondary rounded-pill" href="#">Special Collections</a></div>
</div>
You can upload a background image with Parallax effect to this module on the "options" tab
- Page :
- 1
- 2
There are no replies made for this post yet.
However, you are not allowed to reply to this post.
However, you are not allowed to reply to this post.