Code Snippet Library - Homepage Promoted Courses

Apr 25, 2024

Zapnito

Code Snippet Library - Homepage Promoted Courses

Like Be the first to like this

Preview

HTML

<div class="container mt-12">
  <h3>Heading</h3>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Add course URL below -->
    <a href="" class="group flex h-full bg-white hover:no-underline">
      <div class="flex flex-0 flex-col h-full">
        <!-- Add image URL and alt text below -->
        <img src="" alt="" class="object-cover w-48 h-full">
      </div>
      <div class="flex flex-1 flex-col p-6">
        <h3 class="mb-1 text-xl text-brand-primary 
        group-hover:text-brand-primary-darker">Title</h3>
        <p class="mb-6 text-gray-800">Description</p>
        <p class="mt-auto mb-0 text-brand-primary 
        group-hover:text-brand-primary-darker">View Course →</p>
      </div>
    </a>
    <!-- Add course URL below -->
    <a href="" class="group flex h-full bg-white hover:no-underline">
      <div class="flex flex-0 flex-col h-full">
        <!-- Add image URL and alt text below -->
        <img src="" alt="" class="object-cover w-48 h-full">
      </div>
      <div class="flex flex-1 flex-col p-6">
        <h3 class="mb-1 text-xl text-brand-primary 
        group-hover:text-brand-primary-darker">Title</h3>
        <p class="mb-6 text-base text-gray-800">Description</p>
        <p class="mt-auto mb-0 text-brand-primary 
        group-hover:text-brand-primary-darker">View Course →</p>
      </div>
    </a>
  </div>
</div>

Zapnito

Zapnito is the community platform built for personalized knowledge sharing. Build your custom branded community platform with discussions, content, courses, events and more – under one domain.