<div style="width: 800px; height: 600px; background: url(/plus/uploads/backgrounds/50.webp) no-repeat;" class="t-gray50 flex flex-column flex-jc-center flex-ai-center">
    <div class="t-underline t140 t-gray200 bi-stars t-georgia">Albireo CMS</div>
    <div class="t-trebuchet t500 lh150 t-center pad20-tb pad20-rl" style="text-shadow: 0 5px 5px var(--gray600);">Creating Images <br>with HTML</div>
</div>

<div style="width: 800px; height: 600px; background: url(/plus/uploads/backgrounds/156.webp) no-repeat;" class="t-gray50 flex flex-column flex-jc-end flex-ai-start">
    <div class="t-underline t140 t-white pad20-rl bg-op50 mar20-rl mar10-b">22 / 07/ 2026 </div>
    <div class="t400 t-bold lh150 pad20-rl bg-op50 mar20-rl mar20-b">Creating Images with HTML</div>
</div>

<div style="width: 1200px; height: 628px; background-image: linear-gradient( 135deg, #97ABFF 10%, #123597 100%);" class="bg-primary flex flex-column flex-jc-center flex-ai-center">
    <div class="t-center t-bold t-white" style="font-size: 9rem; text-shadow: 0 5px 5px #3857B5;"><i class="bi-folder-plus"></i> MaxSite Plus</div>
</div>

<div style="width: 800px; height: 600px; background-image: radial-gradient( circle farthest-corner at 8.3% 21.6%,  rgba(252,92,125,1) 13.1%, rgba(106,130,251,1) 90%);" class="bg-primary flex flex-column flex-jc-center flex-ai-center">
    <div class="t-exo2 t-center t-bold t-white" style="font-size: 6rem; text-shadow: 0 5px 5px var(--gray600);"><i class="bi-folder-plus"></i> MaxSite Plus</div>
</div>

<div style="width: 800px; height: 600px; background: linear-gradient(180deg, #a23c67, #6a2644);" class="flex flex-column flex-jc-center flex-ai-center">
    <div class="t-exo2 t-center t-bold t-white" style="font-size: 9rem; text-shadow: 0 5px 5px var(--pink800);">Berry CSS</div> 
</div>