Cards - List
Component #1
Dedicated app development platform
From open source to premium services.
Mobile devs
App builder
Subscriptions Beta
Integrations
<!-- Features Section -->
<div class="container">
<div class="w-lg-85 mx-lg-auto">
<!-- Card -->
<div class="card p-5">
<div class="row align-items-md-center">
<div class="col-md-9 mb-5 mb-md-0">
<h3>Dedicated app development platform</h3>
<p>From open source to premium services.</p>
<!-- List -->
<div class="row">
<div class="col-sm-6">
<div class="media font-size-1 text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Mobile devs
</div>
</div>
<div class="media font-size-1 text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
App builder
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media font-size-1 text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Subscriptions <span class="badge badge-soft-secondary badge-pill ml-1">Beta</span>
</div>
</div>
<div class="media font-size-1 text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Integrations
</div>
</div>
</div>
</div>
<!-- End List -->
</div>
<div class="col-md-3 column-divider-md">
<div class="pl-md-2">
<h4>Included</h4>
<p>Full integration guidance and resources.</p>
<a class="font-size-1 font-weight-bold" href="#">Get Started <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Features Section -->
Component #2
<!-- Hiring Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-65 text-center mx-auto mb-5 mb-sm-9">
<h2 class="h1">We are hiring</h2>
</div>
<!-- End Title -->
<div class="w-lg-75 mx-lg-auto mb-5 mb-md-7">
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-3" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
Business Strategy Manager
</span>
<span class="col-6 col-sm-3 text-body">
London
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-3" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
Business Strategy Senior Associate
</span>
<span class="col-6 col-sm-3 text-body">
London
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-3" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
Product Designer
</span>
<span class="col-6 col-sm-3 text-body">
San Francisco
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-3" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
Account Executive - Enterprise
</span>
<span class="col-6 col-sm-3 text-body">
San Francisco
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
</div>
<!-- Link -->
<div class="text-center">
<a href="#">
View all
<span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mx-2">
<i class="fas fa-angle-right"></i>
</span>
careers
</a>
</div>
<!-- End Link -->
</div>
<!-- End Hiring Section -->
Component #3
Open positions
Current job openings
6
open positions
Technology
6 openings
Android Engineering
Hong Kong
Apply
Cloud System Engineer
Sydney
Apply
Database Administrator
Sydney
Apply
Engineering Lead
Beijing
Apply
IT Operations Engineer
San Francisco
Apply
Senior Analyst, Data Analytics
London
Apply
Can't find a position that suits you? Contact us
<!-- Jobs Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="d-block small font-weight-bold text-cap mb-2">Open positions</span>
<h2>Current job openings</h2>
</div>
<!-- End Title -->
<!-- Filters -->
<div class="border-bottom pb-5 mb-9">
<div class="row align-items-center">
<div class="col-sm-auto mb-3 mb-sm-0">
<!-- Select -->
<select class="custom-select custom-select-sm">
<option selected disabled>Location</option>
<option value="locationAll">All</option>
<option value="location1">London</option>
<option value="location2">New York</option>
<option value="location6">Singapore</option>
<option value="location3">Beijing</option>
<option value="location4">Hong Kong</option>
<option value="location5">Berlin</option>
<option value="location6">Sydney</option>
<option value="location6">San Francisco</option>
</select>
<!-- End Select -->
</div>
<div class="col-sm text-sm-right">
<span class="text-dark font-weight-bold">6</span>
open positions
</div>
</div>
</div>
<!-- End Filters -->
<!-- Title -->
<div class="row justify-content-lg-between align-items-lg-center mt-7 mb-3">
<div class="col-sm-auto">
<h3 class="h4">Technology</h3>
</div>
<div class="col-sm text-sm-right">
<small>6 openings</small>
</div>
</div>
<!-- End Title -->
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-2" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
Android Engineering
</span>
<span class="col-6 col-sm-3 text-body">
Hong Kong
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-2" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
Cloud System Engineer
</span>
<span class="col-6 col-sm-3 text-body">
Sydney
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-2" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
Database Administrator
</span>
<span class="col-6 col-sm-3 text-body">
Sydney
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-2" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
Engineering Lead
</span>
<span class="col-6 col-sm-3 text-body">
Beijing
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-2" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
IT Operations Engineer
</span>
<span class="col-6 col-sm-3 text-body">
San Francisco
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame py-3 px-4 mb-2" href="#">
<div class="row align-items-sm-center">
<span class="col-sm-6 text-dark">
Senior Analyst, Data Analytics
</span>
<span class="col-6 col-sm-3 text-body">
London
</span>
<span class="col-6 col-sm-3 text-right">
Apply <i class="fas fa-angle-right fa-sm ml-1"></i>
</span>
</div>
</a>
<!-- End Card -->
<div class="text-center mt-5">
<p>Can't find a position that suits you? <a class="font-weight-bold text-nowrap" href="#">Contact us <i class="fas fa-angle-right fa-sm ml-1"></i></a></p>
</div>
</div>
<!-- End Jobs Section -->
Component #4
<!-- Related Courses -->
<div class="container space-2">
<h3 class="mb-4">Students also bought</h3>
<!-- Course -->
<div class="pt-0 mt-0">
<a class="card shadow-none" href="#">
<div class="card-body p-0">
<div class="row">
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded" src="../../assets/svg/components/graphics-4.svg" alt="Image Description">
</div>
<div class="col-sm-7 col-lg-9">
<div class="row">
<div class="col-lg-6 mb-2 mb-lg-0">
<h5>Get started with Vue.js</h5>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
</ul>
<span class="d-inline-block">
<span class="text-dark font-size-1 mr-1">4.95</span>
</span>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-7">
<div class="small text-muted mb-2">
<i class="fas fa-book-reader mr-1"></i>
10 lessons
</div>
<div class="small text-muted">
<i class="fas fa-clock mr-1"></i>
3h 25m
</div>
</div>
<div class="col-5 text-right">
<small class="d-block text-muted text-lh-sm"><del>$78.00</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$73.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- End Course -->
<!-- Course -->
<div class="border-top pt-3 mt-3">
<a class="card shadow-none" href="#">
<div class="card-body p-0">
<div class="row">
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded" src="../../assets/svg/components/graphics-6.svg" alt="Image Description">
</div>
<div class="col-sm-7 col-lg-9">
<div class="row">
<div class="col-lg-6 mb-2 mb-lg-0">
<h5>Coding block for WordPress</h5>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
</ul>
<span class="d-inline-block">
<span class="text-dark font-size-1 mr-1">4.95</span>
</span>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-7">
<div class="small text-muted mb-2">
<i class="fas fa-book-reader mr-1"></i>
8 lessons
</div>
<div class="small text-muted">
<i class="fas fa-clock mr-1"></i>
1h 14m
</div>
</div>
<div class="col-5 text-right">
<small class="d-block text-muted text-lh-sm"><del>$59.99</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$39.99</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- End Course -->
<!-- Course -->
<div class="border-top pt-3 mt-3">
<a class="card shadow-none" href="#">
<div class="card-body p-0">
<div class="row">
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded" src="../../assets/svg/components/graphics-5.svg" alt="Image Description">
</div>
<div class="col-sm-7 col-lg-9">
<div class="row">
<div class="col-lg-6 mb-2 mb-lg-0">
<h5>The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert</h5>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16"></li>
</ul>
<span class="d-inline-block">
<span class="text-dark font-size-1 mr-1">4.87</span>
</span>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-7">
<div class="small text-muted mb-2">
<i class="fas fa-book-reader mr-1"></i>
23 lessons
</div>
<div class="small text-muted">
<i class="fas fa-clock mr-1"></i>
7h 47m
</div>
</div>
<div class="col-5 text-right">
<small class="d-block text-muted text-lh-sm"><del>$99.99</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$89.99</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- End Course -->
</div>
<!-- End Related Courses -->
Component #5
Bestseller
Complete Python Bootcamp: Go from zero to hero in Python 3
10 lessons
|
3h 25m
|
All levels
Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!
From the Top: Adobe Illustrator for Beginners
8 lessons
|
7h 59m
|
All levels
The only course you need to learn Adobe Illustrator.
<div class="container">
<!-- Card -->
<a class="d-block border-bottom pb-5 mb-5" href="#">
<div class="row mx-md-n2">
<div class="col-md-4 px-md-2 mb-3 mb-md-0">
<div class="position-relative">
<img class="img-fluid w-100 rounded" src="../assets/svg/components/graphics-1.svg" alt="Image Description">
<div class="position-absolute top-0 left-0 mt-3 ml-3">
<small class="btn btn-xs btn-success btn-pill text-uppercase shadow-soft py-1 px-2 mb-3">Bestseller</small>
</div>
<div class="position-absolute bottom-0 left-0 mb-3 ml-4">
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
</ul>
<span class="d-inline-block">
<small class="font-weight-bold text-white mr-1">4.91</small>
<small class="text-white-70">(1.5k+ reviews)</small>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="media mb-2">
<div class="media-body mr-7">
<h3>Complete Python Bootcamp: Go from zero to hero in Python 3</h3>
</div>
<div class="d-flex mt-1 ml-auto">
<div class="text-right">
<small class="d-block text-muted text-lh-sm"><del>$114.99</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$99.99</span>
</div>
</div>
</div>
<div class="d-flex justify-content-start align-items-center small text-muted mb-2">
<div class="d-flex align-items-center">
<div class="avatar-group">
<span class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Nataly Gaga">
<img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</span>
</div>
</div>
<div class="ml-auto">
<i class="fa fa-book-reader mr-1"></i>
10 lessons
</div>
<span class="text-muted mx-2">|</span>
<div class="d-inline-block">
<i class="fa fa-clock mr-1"></i>
3h 25m
</div>
<span class="text-muted mx-2">|</span>
<div class="d-inline-block">
<i class="fa fa-signal mr-1"></i>
All levels
</div>
</div>
<p class="font-size-1 text-body mb-0">Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="d-block border-bottom pb-5 mb-5" href="#">
<div class="row mx-md-n2">
<div class="col-md-4 px-md-2 mb-3 mb-md-0">
<div class="position-relative">
<img class="img-fluid w-100 rounded" src="../assets/svg/components/graphics-2.svg" alt="Image Description">
<div class="position-absolute bottom-0 left-0 mb-3 ml-4">
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
</ul>
<span class="d-inline-block">
<small class="font-weight-bold text-white mr-1">4.95</small>
<small class="text-white-70">(1k+ reviews)</small>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="media mb-2">
<div class="media-body mr-7">
<h3>From the Top: Adobe Illustrator for Beginners</h3>
</div>
<div class="d-flex mt-1 ml-auto">
<div class="text-right">
<small class="d-block text-muted text-lh-sm"><del>$129.99</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$119.99</span>
</div>
</div>
</div>
<div class="d-flex justify-content-start align-items-center small text-muted mb-2">
<div class="d-flex align-items-center">
<div class="avatar-group">
<span class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Emily Milda">
<img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</span>
<span class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="John O'nolan">
<img class="avatar-img" src="../assets/img/100x100/img4.jpg" alt="Image Description">
</span>
</div>
</div>
<div class="ml-auto">
<i class="fa fa-book-reader mr-1"></i>
8 lessons
</div>
<span class="text-muted mx-2">|</span>
<div class="d-inline-block">
<i class="fa fa-clock mr-1"></i>
7h 59m
</div>
<span class="text-muted mx-2">|</span>
<div class="d-inline-block">
<i class="fa fa-signal mr-1"></i>
All levels
</div>
</div>
<p class="font-size-1 text-body mb-0">The only course you need to learn Adobe Illustrator.</p>
</div>
</div>
</a>
<!-- End Card -->
</div>