Skip to content

Commit

Permalink
as
Browse files Browse the repository at this point in the history
  • Loading branch information
@imswarnil
imswarnil authored Feb 20, 2025
1 parent e973b14 commit a6ec9e7
Showing 1 changed file with 169 additions and 0 deletions.
169 changes: 169 additions & 0 deletions _layouts/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,175 @@ <h2 class="title is-4">What do you want to learn today?</h2>
</div>
</section>

<section class="section">
<div class="container">
<div class="columns is-mobile is-multiline">
<div class="column is-12">
<div class="is-flex is-justify-content-space-between">
<h1 class="title">Courses</h1>
<button class="button is-secondary">Filters</button>
</div>
</div>

<div class="columns is-multiline is-centered">
<!-- Course Card Template -->
<div class="column is-one-quarter-desktop is-half-mobile">
<div class="card">
<div class="card-image">
<figure class="image is-4by3 has-background-grey-light">
<img src="https://via.placeholder.com/300x200" alt="Course Image" class="skeleton">
</figure>
<span class="icon is-small course-bookmark">
<i class="fas fa-bookmark"></i>
</span>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img class="is-rounded" src="https://via.placeholder.com/48" alt="Instructor">
</figure>
</div>
<div class="media-content">
<p class="title is-5">Salesforce Fundamentals</p>
<p class="subtitle is-6">By <a href="#">Admin</a></p>
</div>
</div>
<div class="content">
<p>Category: Admin</p>
<div class="course-meta">
<span><i class="fas fa-user"></i> 2</span>
<span><i class="fas fa-clock"></i> 1h 30m</span>
</div>
</div>
<div class="buttons">
<button class="button is-primary is-fullwidth">Enroll Now</button>
<button class="button is-light is-fullwidth">Learn More</button>
</div>
</div>
</div>
</div>

<!-- Duplicate the above card 3 more times -->
<div class="column is-one-quarter-desktop is-half-mobile">
<div class="card">
<div class="card-image">
<figure class="image is-4by3 has-background-grey-light">
<img src="https://via.placeholder.com/300x200" alt="Course Image" class="skeleton">
</figure>
<span class="icon is-small course-bookmark">
<i class="fas fa-bookmark"></i>
</span>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img class="is-rounded" src="https://via.placeholder.com/48" alt="Instructor">
</figure>
</div>
<div class="media-content">
<p class="title is-5">Web Development</p>
<p class="subtitle is-6">By <a href="#">John Doe</a></p>
</div>
</div>
<div class="content">
<p>Category: Development</p>
<div class="course-meta">
<span><i class="fas fa-user"></i> 5</span>
<span><i class="fas fa-clock"></i> 2h</span>
</div>
</div>
<div class="buttons">
<button class="button is-primary is-fullwidth">Enroll Now</button>
<button class="button is-light is-fullwidth">Learn More</button>
</div>
</div>
</div>
</div>

<div class="column is-one-quarter-desktop is-half-mobile">
<div class="card">
<div class="card-image">
<figure class="image is-4by3 has-background-grey-light">
<img src="https://via.placeholder.com/300x200" alt="Course Image" class="skeleton">
</figure>
<span class="icon is-small course-bookmark">
<i class="fas fa-bookmark"></i>
</span>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img class="is-rounded" src="https://via.placeholder.com/48" alt="Instructor">
</figure>
</div>
<div class="media-content">
<p class="title is-5">Cloud Computing</p>
<p class="subtitle is-6">By <a href="#">Alice Smith</a></p>
</div>
</div>
<div class="content">
<p>Category: Cloud</p>
<div class="course-meta">
<span><i class="fas fa-user"></i> 8</span>
<span><i class="fas fa-clock"></i> 1h 45m</span>
</div>
</div>
<div class="buttons">
<button class="button is-primary is-fullwidth">Enroll Now</button>
<button class="button is-light is-fullwidth">Learn More</button>
</div>
</div>
</div>
</div>

<div class="column is-one-quarter-desktop is-half-mobile">
<div class="card">
<div class="card-image">
<figure class="image is-4by3 has-background-grey-light">
<img src="https://via.placeholder.com/300x200" alt="Course Image" class="skeleton">
</figure>
<span class="icon is-small course-bookmark">
<i class="fas fa-bookmark"></i>
</span>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img class="is-rounded" src="https://via.placeholder.com/48" alt="Instructor">
</figure>
</div>
<div class="media-content">
<p class="title is-5">Data Science</p>
<p class="subtitle is-6">By <a href="#">Bob Taylor</a></p>
</div>
</div>
<div class="content">
<p>Category: Data</p>
<div class="course-meta">
<span><i class="fas fa-user"></i> 10</span>
<span><i class="fas fa-clock"></i> 2h 30m</span>
</div>
</div>
<div class="buttons">
<button class="button is-primary is-fullwidth">Enroll Now</button>
<button class="button is-light is-fullwidth">Learn More</button>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="has-text-centered mt-5">
<button class="button is-primary is-large">View All Courses</button>
</div>
</div>
</section>

<!-- Hero Home Section End -->
<!-- Adsense Ad Starts -->
<section class="section">
Expand Down

0 comments on commit a6ec9e7

Please sign in to comment.