Nová Joomla 4 šablona zdarma - LBOX

<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-1 position-relative order-lg-2 text-center rounded">OBRÁZEK</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>

<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>

<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>

<div class="col-md-8 col-lg-6 position-relative"> <figure class="rounded">OBRÁZEK</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>