Modern CSS Demos

Loading ...

<div class="article">
        <div class="article-image">
        <img src="https://picsum.photos/id/33/640/480" width="640" height="480" aspect-ratio="16/9">
    </div>
        <div class="article-body">
        <h2>Praesent faucibus sollicitudin porttitor</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales molestie eros, vitae hendrerit massa aliquet ut. Vivamus felis magna, accumsan vel lorem ac, porta facilisis ligula. Vivamus in tincidunt metus. Suspendisse eu molestie quam. Mauris fringilla metus vitae nibh tempus ultricies. Suspendisse lacinia diam eu mi consequat condimentum.</p>
    </div>
</div>
        <div class="article">
        <div class="article-body">
        <h2>Integer convallis tortor ac enim</h2>
        <p>Mauris ante lorem, sagittis eu purus id, finibus tempor quam. Suspendisse eu viverra neque. Vivamus aliquet lorem lorem, a vestibulum justo venenatis at. Nunc turpis nisi, tempus elementum tellus sit amet, viverra finibus nisi.</p>
    </div>
</div>
        <div class="article">
        <div class="article-body">
        <h2>In hac habitasse platea dictumst</h2>
        <p>Vivamus a orci molestie, dictum orci eu, gravida lacus. Praesent vulputate, turpis id efficitur aliquam, diam ante luctus sapien, quis condimentum nisi orci ac mi. Praesent varius quam orci, ut mollis libero mattis id.</p>
    </div>
</div>
        <div class="article">
        <div class="article-image">
        <img src="https://picsum.photos/id/36/640/480" width="640" height="480" aspect-ratio="16/9">
    </div>
        <div class="article-body">
        <h2>Mauris eget convallis diam</h2>
        <p>Nam commodo, mauris iaculis dictum consequat, risus tortor placerat massa, sed scelerisque tortor mauris non velit. Donec eu augue molestie, tempus velit in, congue ligula. Maecenas finibus nisi massa, et semper ipsum viverra a. Mauris pellentesque mi sed mauris maximus, in ultrices dui maximus.</p>
    </div>
</div>
        <div class="article">
        <div class="article-image">
        <img src="https://picsum.photos/id/39/640/480" width="640" height="480" aspect-ratio="16/9">
    </div>
        <div class="article-body">
        <h2>Vestibulum at porta ante</h2>
        <p>Nulla in rutrum enim, eget semper lectus. Etiam congue at ex non elementum. Donec eu quam urna. Quisque sed ornare felis. Nam nec nunc quis lorem varius laoreet. Etiam egestas tincidunt dolor ut auctor. Quisque non magna aliquam, consectetur lorem vel, luctus enim.</p>
    </div>
</div>
        <div class="article">
        <div class="article-body">
        <h2>Nam iaculis sem iaculis laoreet</h2>
        <p>Aliquam erat volutpat. Nullam ullamcorper ligula eget lacus posuere ullamcorper. Donec non libero varius, sodales risus facilisis, finibus felis. Curabitur mollis, ex et tempus commodo, purus diam iaculis purus, in lacinia metus magna quis lacus. Quisque vel nisl lectus.</p>
    </div>
</div>
    
</div>

Zoom

Document

Container