# STEM Learning Previews Category: showcase Description: Presents STEM learning topics with engaging visuals and descriptions, featuring interactive image previews. ## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) ## SenangStart CSS Code ```html <section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x"> <h1 space="m-b:large tw-lg:m-x:giant tw-lg:m-b:big-3x" visual="text:center text-size:grand font:tw-bold tw-lg:text-size:mega">📖 Learning STEM Topics</h1> <div layout="flex col" space="g:large tw-lg:g:big-3x"> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group"> <div layout="order:2 flex col justify:center tw-lg:order:1" space="g:medium tw-lg:g:large"> <div space="max-w:[max-content] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Science</div> <p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Eclipse</p> <p visual="text-size:big tw-lg:text-size:huge">An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.<br /></p> </div> <div layout="order:1 flex col items:center tw-lg:order:2"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:[100%] max-w:[md]" visual="duration:slower ease:in-out" class="group-hover:scale-150" /> <img src="https://placehold.co/400x160" layout="object:contain" space="w:[100%] max-w:[sm]" /> </div> </div> </div> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group"> <div layout="flex col items:center"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:[100%] max-w:[md]" visual="duration:slower ease:in-out" class="group-hover:scale-150" /> <img src="https://placehold.co/400x160" layout="object:contain" space="w:[100%] max-w:[sm]" /> </div> <div layout="flex col justify:center" space="g:medium tw-lg:g:large"> <div space="max-w:[max-content] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Technology</div> <p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Augmented Reality<br /></p> <p visual="text-size:big tw-lg:text-size:huge">Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.<br /></p> </div> </div> </div> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group"> <div layout="order:2 flex col justify:center tw-lg:order:1" space="g:medium tw-lg:g:large"> <div space="max-w:[max-content] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Engineering</div> <p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Combustion Engines<br /></p> <p visual="text-size:big tw-lg:text-size:huge">Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.<br /></p> </div> <div layout="order:1 flex col items:center tw-lg:order:2"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:[100%] max-w:[md]" visual="duration:slower ease:in-out" class="group-hover:scale-150" /> <img src="https://placehold.co/400x160" layout="object:contain" space="w:[100%] max-w:[sm]" /> </div> </div> </div> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group"> <div layout="flex col items:center"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:[100%] max-w:[md]" visual="duration:slower ease:in-out" class="group-hover:scale-150" /> <img src="https://placehold.co/400x160" layout="object:contain" space="w:[100%] max-w:[sm]" /> </div> <div layout="flex col justify:center" space="g:medium tw-lg:g:large"> <div space="max-w:[max-content] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Mathematics</div> <p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Dimensions<br /></p> <p visual="text-size:big tw-lg:text-size:huge">Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.<br /></p> </div> </div> </div> </div> </section> ``` ## Tailwind CSS Code ```html <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <h1 class="mb-8 text-center text-3xl font-bold lg:mx-24 lg:mb-16 lg:text-6xl">📖 Learning STEM Topics</h1> <div class="flex flex-col gap-8 lg:gap-16"> <div class="flex flex-col lg:mx-24"> <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16"> <div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8"> <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Science</div> <p class="text-2xl font-bold lg:text-4xl">Eclipse</p> <p class="text-xl lg:text-2xl">An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.<br /></p> </div> <div class="order-1 flex flex-col items-center lg:order-2"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" /> <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" /> </div> </div> </div> <div class="flex flex-col lg:mx-24"> <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16"> <div class="flex flex-col items-center"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" /> <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" /> </div> <div class="flex flex-col justify-center gap-4 lg:gap-8"> <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Technology</div> <p class="text-2xl font-bold lg:text-4xl">Augmented Reality<br /></p> <p class="text-xl lg:text-2xl">Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.<br /></p> </div> </div> </div> <div class="flex flex-col lg:mx-24"> <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16"> <div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8"> <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Engineering</div> <p class="text-2xl font-bold lg:text-4xl">Combustion Engines<br /></p> <p class="text-xl lg:text-2xl">Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.<br /></p> </div> <div class="order-1 flex flex-col items-center lg:order-2"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" /> <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" /> </div> </div> </div> <div class="flex flex-col lg:mx-24"> <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16"> <div class="flex flex-col items-center"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" /> <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" /> </div> <div class="flex flex-col justify-center gap-4 lg:gap-8"> <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Mathematics</div> <p class="text-2xl font-bold lg:text-4xl">Dimensions<br /></p> <p class="text-xl lg:text-2xl">Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.<br /></p> </div> </div> </div> </div> </section> ```