# Portfolio Reveal Grid Category: showcase Description: Showcases portfolio projects in a grid where images interact on hover, accompanied by descriptions and links. ## 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 id="i45ch1" 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"> <div layout="grid grid-cols:1" space="m-b:medium tw-lg:m-x:giant tw-lg:m-b:large"> <div layout="col-span:1"></div> <div> <h1 id="iwb62y" space="m-b:small tw-lg:m-b:medium" visual="text-size:grand font:tw-bold capitalize tw-lg:text-size:mega">Our Previous Work - Proof of Our Expertise</h1> </div> <div layout="flex items:center"> <p id="it0vps" space="w:[100%]" visual="text:left text-size:big opacity:70 tw-lg:text-size:huge">Explore our diverse range of software development projects that showcase our team's capabilities. From simple web applications to complex enterprise solutions, we've got you covered.</p> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="g-y:medium tw-lg:g:medium"> <div id="ifim5u" layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:gray-300" class="group"> <div layout="flex col justify:between" space="h:[100%] p:medium tw-lg:p:large" visual="text:center"> <div id="ijjb2h"> <div space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:grand">Kad Kahwin Digital</div> <div id="ion706" space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Revolusi Kad Kahwin - E-card wedding invitation revolution with Chat AI feature</div> </div> <div id="ib9ess" layout="flex justify:center"> <a id="is8dpb" href="https://hub.kadkahwindigital.my/" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 hover:opacity:80 tw-lg:text-size:large">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="iqz78g" src="https://placehold.co/600x600/2563EB/FFFFFF" space="w:[100%]" visual="transition:all" class="grayscale group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="ivbreb" layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:gray-300" class="group"> <div id="iouupi" layout="flex col justify:between" space="h:[100%] p:medium tw-lg:p:large" visual="text:center"> <div id="ih3d3p"> <div space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:grand">SenangWebs</div> <div id="inyi5b" space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Effortless Web Design, Your Way! Drag and drop static page website builder</div> </div> <div layout="flex justify:center"> <a id="iz0gwi" href="https://use.senangwebs.com" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 hover:opacity:80 tw-lg:text-size:large">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="ie1xqz" src="https://placehold.co/600x600/2563EB/FFFFFF" space="w:[100%]" visual="transition:all" class="grayscale group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="ixi16u" layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:gray-300" class="group"> <div id="iefxe5" layout="flex col justify:between" space="h:[100%] p:medium tw-lg:p:large" visual="text:center"> <div> <div id="i765y2" space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:grand">QHeat</div> <div id="il5zfi" space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Advanced heat transfer calculator with preset parameter & built in workflow generator</div> </div> <div layout="flex justify:center"> <a id="ijau8a" href="https://qheatapp.com/" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 hover:opacity:80 tw-lg:text-size:large">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="ilx3al" src="https://placehold.co/600x600/2563EB/FFFFFF" space="w:[100%]" visual="transition:all" class="grayscale group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="icj8d9" layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:gray-300" class="group"> <div id="iiu3jj" layout="flex col justify:between" space="h:[100%] p:medium tw-lg:p:large" visual="text:center"> <div> <div id="i6638l" space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:grand">STEM-AR</div> <div id="i83aw5" space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Dive into the fascinating world of STEM (Science, Technology, Engineering & Mathematic) through the lens of Augmented Reality<br /></div> </div> <div layout="flex justify:center"> <a id="imvnkg" href="https://stem-ar.use.senangwebs.com/" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 hover:opacity:80 tw-lg:text-size:large">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="i8rdy4" src="https://placehold.co/600x600/2563EB/FFFFFF" space="w:[100%]" visual="transition:all" class="grayscale group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> </div> </section> ``` ## Tailwind CSS Code ```html <section id="i45ch1" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8"> <div class="col-span-1"></div> <div> <h1 id="iwb62y" class="mb-2 text-3xl font-bold capitalize lg:mb-4 lg:text-6xl">Our Previous Work - Proof of Our Expertise</h1> </div> <div class="flex items-center"> <p id="it0vps" class="w-full text-left text-xl opacity-70 lg:text-2xl">Explore our diverse range of software development projects that showcase our team's capabilities. From simple web applications to complex enterprise solutions, we've got you covered.</p> </div> </div> <div class="grid grid-cols-1 gap-y-4 lg:grid-cols-2 lg:gap-4"> <div id="ifim5u" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300"> <div class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div id="ijjb2h"> <div class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">Kad Kahwin Digital</div> <div id="ion706" class="mb-4 text-base lg:mb-8 lg:text-lg">Revolusi Kad Kahwin - E-card wedding invitation revolution with Chat AI feature</div> </div> <div id="ib9ess" class="flex justify-center"> <a id="is8dpb" href="https://hub.kadkahwindigital.my/" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="iqz78g" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="ivbreb" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300"> <div id="iouupi" class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div id="ih3d3p"> <div class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">SenangWebs</div> <div id="inyi5b" class="mb-4 text-base lg:mb-8 lg:text-lg">Effortless Web Design, Your Way! Drag and drop static page website builder</div> </div> <div class="flex justify-center"> <a id="iz0gwi" href="https://use.senangwebs.com" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="ie1xqz" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="ixi16u" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300"> <div id="iefxe5" class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div> <div id="i765y2" class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">QHeat</div> <div id="il5zfi" class="mb-4 text-base lg:mb-8 lg:text-lg">Advanced heat transfer calculator with preset parameter & built in workflow generator</div> </div> <div class="flex justify-center"> <a id="ijau8a" href="https://qheatapp.com/" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="ilx3al" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="icj8d9" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300"> <div id="iiu3jj" class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div> <div id="i6638l" class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">STEM-AR</div> <div id="i83aw5" class="mb-4 text-base lg:mb-8 lg:text-lg">Dive into the fascinating world of STEM (Science, Technology, Engineering & Mathematic) through the lens of Augmented Reality<br /></div> </div> <div class="flex justify-center"> <a id="imvnkg" href="https://stem-ar.use.senangwebs.com/" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="i8rdy4" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> </div> </section> ```