# Course Product Page Category: product Description: Offers a complete landing page for a course, featuring video, curriculum, instructor bios, and enrollment options. ## 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 relative" space="m-x:auto m-b:big-3x"> <div layout="absolute left:none top:none" space="h:[100%] w:[100%]" class="-z-10"> <div space="h:vast-10x w:[100%]" visual="bg:neutral-200 tw-lg:rounded:medium" style=" background-image: url('https://placehold.co/1000x200'); background-size: cover; background-position: center; " ></div> </div> <div space="p-x:medium-3x p-t:giant-3x tw-lg:p-x:big-3x tw-lg:p-t:big-3x"> <div layout="grid tw-lg:grid-cols:3" space="m-x:auto w:[100%] g:medium"> <div layout="tw-lg:col-span:2"> <section> <div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 bg:blue-600 font:tw-bold text:white">Enrollment Now Open</div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Master the Art of High-Performing Ads</h1> <p space="m-b:large" visual="text-size:large"><i space="m-r:small" class="fas fa-calendar"></i>3 Days (Wednesday & Thursday)<i space="m-x:small" class="fas fa-clock"></i>10:00 AM - 5:00 PM</p> <div layout="relative overflow:hidden" visual="rounded:medium bg:neutral-100" class="aspect-video"> <iframe src="https://www.youtube.com/embed/__NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen layout="absolute left:none top:none" space="h:[100%] w:[100%]"></iframe> </div> </section> <div layout="block tw-lg:hidden"> <div space="h:large w:[100%]"></div> <div layout="sticky top:giant-2x" space="p:medium" visual="rounded:medium bg:neutral-100"> <p space="m-b:tiny" visual="font:tw-semibold tw-lg:text-size:big">Flexible Pricing Plans</p> <p space="m-b:tiny" visual="text-size:small font:tw-semibold">Choose the plan that works for you</p> <p space="m-b:tiny" visual="font:tw-semibold tw-lg:text-size:large">What’s Included:</p> <ul> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>32 mins of on-demand video content</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Lifetime access to course materials</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Practical assignments to reinforce learning</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Certificate of completion</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Access on mobile, tablet, and TV</li> </ul> <div layout="flex" space="p-y:medium" visual="border:neutral-200" class="border-t"> <span layout="grow">Total Investment</span> <span visual="font:tw-bold">RM 1,000</span> </div> <a href="" layout="flex items:center justify:center" space="h:big-2x w:[100%] p-x:medium-3x" visual="rounded:medium bg:blue-600 text-size:base text:white"> Get a Custom Quote </a> </div> </div> <div space="h:large w:[100%]"></div>  <section> <h1 space="m-b:medium" visual="text-size:huge font:tw-bold">About the Course</h1> <p visual="text-size:large">In today’s competitive digital landscape, creating ads that truly resonate with your audience is more important than ever. This course is designed to equip you with the skills and strategies needed to craft compelling, high-converting ads. From understanding your target audience to optimizing ad performance, you’ll gain actionable insights that drive real results.</p> </section>  <div space="h:large w:[100%]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:[100%]"></div>  <section> <h1 visual="text-size:huge font:tw-bold">What You’ll Learn</h1> <div space="m-t:medium p:medium" visual="rounded:medium bg:neutral-100" id="accordion1"> <div layout="flex" class="accordion-title"> <div layout="flex items:center justify:center" space="h:large w:large" visual="cursor:pointer rounded:small bg:blue-600 text:white" onclick="open_accordion('accordion1')"> <div layout="hidden" class="accordion-open"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div layout="flex grow items:center" space="p-x:medium" visual="font:tw-semibold"> <p>Day 1 - Foundations of Effective Ads</p> </div> <div layout="flex items:center"> <p>Half Day</p> </div> </div> <div layout="hidden" space="p-t:medium" class="accordion-body"> <p visual="text-size:large">Discover the core principles of creating ads that capture attention and drive action.</p> <ul> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Master the art of ad targeting</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Learn how to craft compelling ad copy</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Understand the psychology behind ad performance</li> </ul> </div> </div> <div space="m-t:medium p:medium" visual="rounded:medium bg:neutral-100" id="accordion2"> <div layout="flex" class="accordion-title"> <div layout="flex items:center justify:center" space="h:large w:large" visual="cursor:pointer rounded:small bg:blue-600 text:white" onclick="open_accordion('accordion2')"> <div layout="hidden" class="accordion-open"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div layout="flex grow items:center" space="p-x:medium" visual="font:tw-semibold"> <p>Day 2 - Advanced Ad Strategies</p> </div> <div layout="flex items:center"> <p>Half Day</p> </div> </div> <div layout="hidden" space="p-t:medium" class="accordion-body"> <p visual="text-size:large">Take your skills to the next level with advanced techniques for ad optimization.</p> <ul> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Explore retargeting and remarketing tactics</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Learn how to analyze and optimize ad performance</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Discover the secrets of A/B testing</li> </ul> </div> </div> <div space="m-t:medium p:medium" visual="rounded:medium bg:neutral-100" id="accordion3"> <div layout="flex" class="accordion-title"> <div layout="flex items:center justify:center" space="h:large w:large" visual="cursor:pointer rounded:small bg:blue-600 text:white" onclick="open_accordion('accordion3')"> <div layout="hidden" class="accordion-open"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div layout="flex grow items:center" space="p-x:medium" visual="font:tw-semibold"> <p>Day 3 - Real-World Applications</p> </div> <div layout="flex items:center"> <p>Half Day</p> </div> </div> <div layout="hidden" space="p-t:medium" class="accordion-body"> <p visual="text-size:large">Apply what you’ve learned to real-world scenarios and case studies.</p> <ul> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Create a full ad campaign from scratch</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Get feedback and refine your approach</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Walk away with a portfolio-ready project</li> </ul> </div> </div> </section> <script> function open_accordion(id) { $("#" + id + " .accordion-body").slideToggle("hidden"); $("#" + id + " .accordion-open").toggleClass("hidden"); $("#" + id + " .accordion-close").toggleClass("hidden"); } </script>  <div space="h:large w:[100%]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:[100%]"></div>  <section> <h1 visual="text-size:huge font:tw-bold">What’s Included</h1> <ol layout="grid tw-lg:grid-cols:2" space="m-t:medium g:medium" visual="text-size:large"> <li><i space="m-r:small" class="fas fa-check-circle"></i>32 mins of on-demand video content</li> <li><i space="m-r:small" class="fas fa-check-circle"></i>Lifetime access to all course materials</li> <li><i space="m-r:small" class="fas fa-check-circle"></i>Hands-on assignments to practice your skills</li> <li><i space="m-r:small" class="fas fa-check-circle"></i>Certificate of completion to showcase your expertise</li> <li><i space="m-r:small" class="fas fa-check-circle"></i>Access on any device—mobile, tablet, or TV</li> </ol> </section>  <div space="h:large w:[100%]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:[100%]"></div>  <section> <h1 visual="text-size:huge font:tw-bold">Exclusive Bonuses</h1> <div layout="grid grid-cols:2 tw-md:grid-cols:3 tw-lg:grid-cols:4" space="m-t:large g:medium"> <div layout="relative" visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div layout="absolute top:none" space="w:[100%] p-x:small-3x p-y:small"> <p>Bonus: Ad Templates</p> </div> </div> <div layout="relative" visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div layout="absolute top:none" space="w:[100%] p-x:small-3x p-y:small"> <p>Bonus: Case Studies</p> </div> </div> <div layout="relative" visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div layout="absolute top:none" space="w:[100%] p-x:small-3x p-y:small"> <p>Bonus: Checklist</p> </div> </div> <div layout="relative" visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div layout="absolute top:none" space="w:[100%] p-x:small-3x p-y:small"> <p>Bonus: Resource Guide</p> </div> </div> </div> </section>  <div space="h:large w:[100%]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:[100%]"></div>  <section> <h1 visual="text-size:huge font:tw-bold">Meet Your Instructors</h1> <div layout="grid grid-cols:1" space="m-t:medium g:medium"> <div layout="grid grid-cols:2 tw-md:grid-cols:3 tw-lg:grid-cols:4" space="g:medium"> <div visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"></div> <div layout="tw-md:hidden"></div> <div layout="col-span:2 tw-lg:col-span:3"> <p visual="text-size:large font:tw-semibold">Xien Puo</p> <p space="m-y:tiny" visual="text-size:mini">Co-Founder of DriveFunnels</p> <p>With years of experience in digital marketing, Xien has helped countless businesses scale their ad campaigns and achieve measurable success. His practical, results-driven approach makes him a sought-after expert in the field.</p> </div> </div> </div> </section>  </div> <div layout="hidden tw-lg:block"> <div layout="sticky top:giant-2x" space="p:medium" visual="rounded:medium bg:neutral-100"> <p space="m-b:tiny" visual="font:tw-semibold tw-lg:text-size:big">Flexible Pricing Plans</p> <p space="m-b:tiny" visual="text-size:small font:tw-semibold">Choose the plan that works for you</p> <p space="m-b:tiny" visual="font:tw-semibold tw-lg:text-size:large">What’s Included:</p> <ul> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>32 mins of on-demand video content</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Lifetime access to all course materials</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Hands-on assignments to practice your skills</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Certificate of completion to showcase your expertise</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Access on any device—mobile, tablet, or TV</li> </ul> <div layout="flex" space="p-y:medium" visual="border:neutral-200" class="border-t"> <span layout="grow">Total Investment</span> <span visual="font:tw-bold">RM 1,000</span> </div> <a href="" layout="flex items:center justify:center" space="h:big-2x w:[100%] p-x:medium-3x" visual="rounded:medium bg:blue-600 text-size:base text:white"> Get a Custom Quote </a> </div> </div> </div> </div> </section> ``` ## Tailwind CSS Code ```html <section class="container relative mx-auto mb-16"> <div class="absolute left-0 top-0 -z-10 h-full w-full"> <div class="h-96 w-full bg-neutral-200 lg:rounded-lg" style=" background-image: url('https://placehold.co/1000x200'); background-size: cover; background-position: center; " ></div> </div> <div class="px-6 pt-32 lg:px-16 lg:pt-16"> <div class="mx-auto grid w-full gap-4 lg:grid-cols-3"> <div class="lg:col-span-2"> <section> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 bg-blue-600 px-2 font-bold text-white lg:mb-4">Enrollment Now Open</div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Master the Art of High-Performing Ads</h1> <p class="mb-8 text-lg"><i class="fas fa-calendar mr-2"></i>3 Days (Wednesday & Thursday)<i class="fas fa-clock mx-2"></i>10:00 AM - 5:00 PM</p> <div class="relative aspect-video overflow-hidden rounded-lg bg-neutral-100"> <iframe src="https://www.youtube.com/embed/__NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="absolute left-0 top-0 h-full w-full"></iframe> </div> </section> <div class="block lg:hidden"> <div class="h-8 w-full"></div> <div class="sticky top-28 rounded-lg bg-neutral-100 p-4"> <p class="mb-1 font-semibold lg:text-xl">Flexible Pricing Plans</p> <p class="mb-1 text-sm font-semibold">Choose the plan that works for you</p> <p class="mb-1 font-semibold lg:text-lg">What’s Included:</p> <ul> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>32 mins of on-demand video content</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Lifetime access to course materials</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Practical assignments to reinforce learning</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Certificate of completion</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Access on mobile, tablet, and TV</li> </ul> <div class="flex border-t border-neutral-200 py-4"> <span class="flex-grow">Total Investment</span> <span class="font-bold">RM 1,000</span> </div> <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-base text-white"> Get a Custom Quote </a> </div> </div> <div class="h-8 w-full"></div>  <section> <h1 class="mb-4 text-2xl font-bold">About the Course</h1> <p class="text-lg">In today’s competitive digital landscape, creating ads that truly resonate with your audience is more important than ever. This course is designed to equip you with the skills and strategies needed to craft compelling, high-converting ads. From understanding your target audience to optimizing ad performance, you’ll gain actionable insights that drive real results.</p> </section>  <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div>  <section> <h1 class="text-2xl font-bold">What You’ll Learn</h1> <div class="mt-4 rounded-lg bg-neutral-100 p-4" id="accordion1"> <div class="accordion-title flex"> <div class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-600 text-white" onclick="open_accordion('accordion1')"> <div class="accordion-open hidden"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div class="flex flex-grow items-center px-4 font-semibold"> <p>Day 1 - Foundations of Effective Ads</p> </div> <div class="flex items-center"> <p>Half Day</p> </div> </div> <div class="accordion-body hidden pt-4"> <p class="text-lg">Discover the core principles of creating ads that capture attention and drive action.</p> <ul> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Master the art of ad targeting</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Learn how to craft compelling ad copy</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Understand the psychology behind ad performance</li> </ul> </div> </div> <div class="mt-4 rounded-lg bg-neutral-100 p-4" id="accordion2"> <div class="accordion-title flex"> <div class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-600 text-white" onclick="open_accordion('accordion2')"> <div class="accordion-open hidden"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div class="flex flex-grow items-center px-4 font-semibold"> <p>Day 2 - Advanced Ad Strategies</p> </div> <div class="flex items-center"> <p>Half Day</p> </div> </div> <div class="accordion-body hidden pt-4"> <p class="text-lg">Take your skills to the next level with advanced techniques for ad optimization.</p> <ul> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Explore retargeting and remarketing tactics</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Learn how to analyze and optimize ad performance</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Discover the secrets of A/B testing</li> </ul> </div> </div> <div class="mt-4 rounded-lg bg-neutral-100 p-4" id="accordion3"> <div class="accordion-title flex"> <div class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-600 text-white" onclick="open_accordion('accordion3')"> <div class="accordion-open hidden"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div class="flex flex-grow items-center px-4 font-semibold"> <p>Day 3 - Real-World Applications</p> </div> <div class="flex items-center"> <p>Half Day</p> </div> </div> <div class="accordion-body hidden pt-4"> <p class="text-lg">Apply what you’ve learned to real-world scenarios and case studies.</p> <ul> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Create a full ad campaign from scratch</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Get feedback and refine your approach</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Walk away with a portfolio-ready project</li> </ul> </div> </div> </section> <script> function open_accordion(id) { $("#" + id + " .accordion-body").slideToggle("hidden"); $("#" + id + " .accordion-open").toggleClass("hidden"); $("#" + id + " .accordion-close").toggleClass("hidden"); } </script>  <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div>  <section> <h1 class="text-2xl font-bold">What’s Included</h1> <ol class="mt-4 grid gap-4 text-lg lg:grid-cols-2"> <li><i class="fas fa-check-circle mr-2"></i>32 mins of on-demand video content</li> <li><i class="fas fa-check-circle mr-2"></i>Lifetime access to all course materials</li> <li><i class="fas fa-check-circle mr-2"></i>Hands-on assignments to practice your skills</li> <li><i class="fas fa-check-circle mr-2"></i>Certificate of completion to showcase your expertise</li> <li><i class="fas fa-check-circle mr-2"></i>Access on any device—mobile, tablet, or TV</li> </ol> </section>  <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div>  <section> <h1 class="text-2xl font-bold">Exclusive Bonuses</h1> <div class="mt-8 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4"> <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div class="absolute top-0 w-full px-3 py-2"> <p>Bonus: Ad Templates</p> </div> </div> <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div class="absolute top-0 w-full px-3 py-2"> <p>Bonus: Case Studies</p> </div> </div> <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div class="absolute top-0 w-full px-3 py-2"> <p>Bonus: Checklist</p> </div> </div> <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div class="absolute top-0 w-full px-3 py-2"> <p>Bonus: Resource Guide</p> </div> </div> </div> </section>  <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div>  <section> <h1 class="text-2xl font-bold">Meet Your Instructors</h1> <div class="mt-4 grid grid-cols-1 gap-4"> <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4"> <div class="rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"></div> <div class="md:hidden"></div> <div class="col-span-2 lg:col-span-3"> <p class="text-lg font-semibold">Xien Puo</p> <p class="my-1 text-xs">Co-Founder of DriveFunnels</p> <p>With years of experience in digital marketing, Xien has helped countless businesses scale their ad campaigns and achieve measurable success. His practical, results-driven approach makes him a sought-after expert in the field.</p> </div> </div> </div> </section>  </div> <div class="hidden lg:block"> <div class="sticky top-28 rounded-lg bg-neutral-100 p-4"> <p class="mb-1 font-semibold lg:text-xl">Flexible Pricing Plans</p> <p class="mb-1 text-sm font-semibold">Choose the plan that works for you</p> <p class="mb-1 font-semibold lg:text-lg">What’s Included:</p> <ul> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>32 mins of on-demand video content</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Lifetime access to all course materials</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Hands-on assignments to practice your skills</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Certificate of completion to showcase your expertise</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Access on any device—mobile, tablet, or TV</li> </ul> <div class="flex border-t border-neutral-200 py-4"> <span class="flex-grow">Total Investment</span> <span class="font-bold">RM 1,000</span> </div> <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-base text-white"> Get a Custom Quote </a> </div> </div> </div> </div> </section> ```