<div class="site-content cf">
<h2 class="course-heading">Popular Courses</h2>
<div class="courses cf" id="featured-courses">
<div class="course-item slide">
<div class="course-summary card">
<div class="course-thumbnail">
<img src="https://tfirdaus.github.io/flickable-slider/img/mspaint-course.jpg" height="277" width="400" alt="MSPaint Image">
</div>
<div class="course-info">
<div class="course-topic webdesign">Web Design</div>
<h3 class="course-title">Rapid Prototyping with MSPaint</h3>
<div class="course-meta">
<time class="course-date">10 Apr 2015</time>
<span class="course-duration">2.3 hours</span>
</div>
</div>
</div>
</div>
<div class="course-item slide">
<div class="course-summary card">
<div class="course-thumbnail">
<img src="https://tfirdaus.github.io/flickable-slider/img/flash-course.jpg" height="277" width="400" alt="">
</div>
<div class="course-info">
<div class="course-topic webdesign">Web Design</div>
<h3 class="course-title">Highly Interactive Website with Flash</h3>
<div class="course-meta">
<time class="course-date">9 Apr 2015</time>
<span class="course-duration">24 hours</span>
</div>
</div>
<span class="course-caption ion ion-closed-captioning"></span>
</div>
</div>
<div class="course-item slide">
<div class="course-summary card">
<div class="course-thumbnail">
<img src="https://tfirdaus.github.io/flickable-slider/img/msdos-course.jpg" height="277" width="400" alt="MSDOS Image">
</div>
<div class="course-info">
<div class="course-topic computer">Computer</div>
<h3 class="course-title">Mastering MSDOS</h3>
<div class="course-meta">
<time class="course-date">9 Apr 2015</time>
<span class="course-duration">6 hours</span>
</div>
</div>
</div>
</div>
<div class="course-item slide">
<div class="course-summary card">
<div class="course-thumbnail">
<img src="https://tfirdaus.github.io/flickable-slider/img/textedit-course.jpg" height="277" width="400" alt="TextEdit Image">
</div>
<div class="course-info">
<div class="course-topic code">Code</div>
<h3 class="course-title">Introduction to TextEdit for Web Development</h3>
<div class="course-meta">
<time class="course-date">9 Apr 2015</time>
<span class="course-duration">10 hours</span>
</div>
</div>
<span class="course-caption ion ion-closed-captioning"></span>
</div>
</div>
<div class="course-item slide">
<div class="course-summary card">
<div class="course-thumbnail">
<img src="https://tfirdaus.github.io/flickable-slider/img/pages-course.jpg" height="277" width="400" alt="Pages Image">
</div>
<div class="course-info">
<div class="course-topic design">Design</div>
<h3 class="course-title">Design Print-Ready Magazine with Apple Pages</h3>
<div class="course-meta">
<time class="course-date">9 Apr 2015</time>
<span class="course-duration">1 hour</span>
</div>
</div>
</div>
</div>
<div class="course-item slide">
<div class="course-summary card">
<div class="course-thumbnail">
<img src="https://tfirdaus.github.io/flickable-slider/img/instagram-course.jpg" height="277" width="400" alt="">
</div>
<div class="course-info">
<div class="course-topic photo">Photography</div>
<h3 class="course-title">Creative Photo Effects in Instagram</h3>
<div class="course-meta">
<time class="course-date">9 Apr 2015</time>
<span class="course-duration">3 hours</span>
</div>
<span class="course-caption ion ion-closed-captioning"></span>
</div>
</div>
</div>
</div>
</div>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.cf:before,
.cf:after {
display: table;
content: ' ';
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
body {
font-family: 'Roboto', Arial, sans-serif;
margin: 0;
color: #555555;
background-color: #f5f7fa;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
figure {
margin: 0;
padding: 10px;
}
figure a {
display: block;
}
mark {
padding: 0 5px;
background-color: #dddddd;
}
::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
.site-content {
text-align: left;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
padding-right: 5%;
padding-left: 5%;
margin-bottom: 90px;
}
.card {
width: 100%;
background-color: #fff;
text-align: left;
position: relative;
height: 100%;
box-shadow: 0px 2px 6px 0px rgba(204,209,217,.5);
border: 1px solid #E6E9ED;
}
.courses {
margin-top: 30px;
margin-bottom: 60px;
}
.course-item {
width: 33%;
padding-right: 2%;
padding-left: 2%;
margin-bottom: 30px;
/* ensuring proper layout*/
float: left;
}
.course-heading {
font-weight: 500;
font-size: 12px;
color: #AAB2BD;
text-transform: uppercase;
text-align: center;
}
.course-info {
padding: 7%;
min-height: 140px;
}
.course-topic {
font-weight: 500;
color: #AAB2BD;
font-size: 12px;
margin-bottom: 5px;
}
.course-topic.photo {
color: #673AB7;
}
.course-topic.webdesign {
color: #009688;
}
.course-topic.computer {
color: #2196F3;
}
.course-topic.code {
color: #4CAF50;
}
.course-topic.design {
color: #F44336;
}
.course-title {
font-weight: 500;
font-size: 14px;
margin: 0 0 30%;
}
.course-meta {
color: #AAB2BD;
font-weight: 300;
font-size: 11px;
position: absolute;
left: 7%;
bottom: 7%;
}
.course-duration:before {
display: inline-block;
content: "•";
padding-right: 5px;
padding-left: 5px;
}
.course-caption {
position: absolute;
right: 5%;
bottom: 5%;
font-size: 18px;
color: #AAB2BD;
}
/*Customizing INterface*/
.flickity-prev-next-button.previous {
left: -30px;
}
.flickity-prev-next-button.next {
right: -30px;
}
.flickity-prev-next-button .arrow {
fill: #F5F7FA;
}
.flickity-prev-next-button {
background-color: #434A54;
width: 38px;
height: 38px;
}
.flickity-prev-next-button:hover {
background-color: #656D78;
}
$("#featured-courses").flickity({
wrapAround: true,
pageDots: false,
arrowShape: "M31.308,14.241L3.2,43.667c-1.681,1.625-2.522,3.839-2.522,6.277s0.841,4.624,2.522,6.277l28.108,29.538 c3.335,3.503,8.772,3.503,12.106,0s3.335-9.164,0-12.667l-13.48-14.124h60.813c4.736,0,8.575-4.007,8.575-8.968 c0-4.96-3.839-8.968-8.575-8.968H29.934l13.508-14.124c3.335-3.503,3.335-9.164,0-12.667C40.079,10.738,34.671,10.738,31.308,14.241z"
});
// Velocity.js
$(".slide").velocity("transition.expandIn", { stagger: 150 });
