Reviews
There are several parts to write a review that is attractive to your audience and beneficial to potential clients.
Review Counter
How students rated this courses
4.5
(Based on 27 reviews)
53%
36%
9%
3%
2%
Reviews
<!-- Reviews -->
<div class="mb-3">
<h3 class="mb-4">How students rated this courses</h3>
<div class="row align-items-center">
<div class="col-auto text-center">
<h3 class="display-2 fw-bold">4.5</h3>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1-half text-warning"></i>
<p class="mb-0 fs-6">(Based on 27 reviews)</p>
</div>
<!-- Progress Bar -->
<div class="col pt-3 order-3 order-md-2">
<div class="progress mb-3" style="height: 6px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3" style="height: 6px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3" style="height: 6px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3" style="height: 6px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-0" style="height: 6px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-auto col-6 order-2 order-md-3">
<!-- Rating -->
<div>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<span class="ms-1">53%</span>
</div>
<div>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<span class="ms-1">36%</span>
</div>
<div>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<span class="ms-1">9%</span>
</div>
<div>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<span class="ms-1">3%</span>
</div>
<div>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<i class="mdi mdi-star me-n1 text-light"></i>
<span class="ms-1">2%</span>
</div>
</div>
</div>
</div>
<hr class="my-5">
<div class="mb-3">
<div class="d-lg-flex align-items-center justify-content-between mb-5">
<!-- Reviews -->
<div class="mb-3 mb-lg-0">
<h3 class="mb-0">Reviews</h3>
</div>
<div>
<form class="form-inline">
<div class="d-flex align-items-center me-2">
<span class="position-absolute ps-3">
<i class="fe fe-search"></i>
</span>
<input type="search" class="form-control ps-6" placeholder="Search Review">
</div>
</form>
</div>
</div>
<!-- Rating -->
<div class="d-flex align-items-start border-bottom pb-4 mb-4">
<img src="../assets/images/avatar/avatar-2.jpg" alt="" class="rounded-circle avatar-lg">
<div class="ms-3">
<h4 class="mb-1">
Max Hawkins
<span class="ms-1 fs-6 text-muted">2 Days ago</span>
</h4>
<div class="fs-6 mb-2">
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
</div>
<p>Lectures were at a really good pace and I never felt lost. The instructor was well informed and allowed me to learn and navigate Figma easily.</p>
<div class="d-lg-flex">
<p class="mb-0">Was this review helpful?</p>
<a href="#" class="btn btn-xs btn-primary ms-lg-3">Yes</a>
<a href="#" class="btn btn-xs btn-outline-secondary ms-1">No</a>
</div>
</div>
</div>
<!-- Rating -->
<div class="d-flex align-items-start border-bottom pb-4 mb-4">
<img src="../assets/images/avatar/avatar-3.jpg" alt="" class="rounded-circle avatar-lg">
<div class="ms-3">
<h4 class="mb-1">Arthur Williamson <span class="ms-1 fs-6 text-muted">3 Days ago</span></h4>
<div class="fs-6 mb-2">
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
</div>
<p>Its pretty good.Just a reminder that there are also students with Windows, meaning Figma its a bit different of yours. Thank you!</p>
<div class="d-lg-flex">
<p class="mb-0">Was this review helpful?</p>
<a href="#" class="btn btn-xs btn-primary ms-lg-3">Yes</a>
<a href="#" class="btn btn-xs btn-outline-secondary ms-1">No</a>
</div>
</div>
</div>
<!-- Rating -->
<div class="d-flex align-items-start border-bottom pb-4 mb-4">
<img src="../assets/images/avatar/avatar-4.jpg" alt="" class="rounded-circle avatar-lg">
<div class="ms-3">
<h4 class="mb-1">Claire Jones <span class="ms-1 fs-6 text-muted">4 Days ago</span></h4>
<div class="fs-6 mb-2">
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
</div>
<p>
Great course for learning Figma, the only bad detail would be that some icons are not included in the assets. But 90% of the icons needed are included, and the voice of the instructor
was very clear and easy to understood.
</p>
<div class="d-lg-flex">
<p class="mb-0">Was this review helpful?</p>
<a href="#" class="btn btn-xs btn-primary ms-lg-3">Yes</a>
<a href="#" class="btn btn-xs btn-outline-secondary ms-1">No</a>
</div>
</div>
</div>
<!-- Rating -->
<div class="d-flex align-items-start">
<img src="../assets/images/avatar/avatar-5.jpg" alt="" class="rounded-circle avatar-lg">
<div class="ms-3">
<h4 class="mb-1">
Bessie Pena
<span class="ms-1 fs-6 text-muted">5 Days ago</span>
</h4>
<div class="fs-6 mb-2">
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
<i class="mdi mdi-star me-n1 text-warning"></i>
</div>
<p>
I have really enjoyed this class and learned a lot, found it very inspiring and helpful, thank you!
<i class="em em-heart_eyes ms-2 fs-6"></i>
</p>
<div class="d-lg-flex">
<p class="mb-0">Was this review helpful?</p>
<a href="#" class="btn btn-xs btn-primary ms-lg-3">Yes</a>
<a href="#" class="btn btn-xs btn-outline-secondary ms-1">No</a>
</div>
</div>
</div>
</div>Reviews
Reviews
You have full control to manage your own account setting.-
for How to easily create a website with WordPressThe course is very interesting and insightful. I think it should have more downloadable resources for 'points to remember' or 'key learnings' kind of document for later reference after finishing each section.
Respond -
for Getting started - Grunt: The JavaScript Task...
Quisque semper aliquet lacinia. Ut molestie felis nec consectetur hendrerit. Aliquam eu viverra velit. In non leo ornare, ornare lorem elementum, efficitur urna. Curabitur fringilla nulla ac odio dignissim viverra.
Respond -
for Getting started - Vue js: The JavaScript Task...Nulla eu cursus lacus. Vestibulum imperdiet accumsan tempor. Vivamus lacinia posuere augue ac mollis. Integer ornare purus ac hendrerit vehicula. In condimentum efficitur quam, sed porta turpis lobortis sit amet.
Respond -
for Getting started - Gulp: The JavaScript Task...Suspendisse mauris lectus, posuere et quam eu, auctor interdum turpis. Maecenas gravida libero vitae risus sodales dictu llentesque tristique mi ut lectus luctus, eu hendrerit felis accumsan. Nam eget felis porttitor, volutpat nisi id, aliquam purus.
Respond -
for Getting started - HTML: The Foundations Task...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod nulla orci, sed varius metus tincidunt consequat. Maecenas in purus non nisi luctus pulvinar vitae eu lacus. Nam magna ipsum, fermentum in commodo ut, tristique ut mauris.
Respond
<!-- Card -->
<div class="card mb-4">
<!-- Card Header -->
<div
class="card-header d-lg-flex align-items-center justify-content-between">
<div class="mb-3 mb-lg-0">
<h3 class="mb-0">Reviews</h3>
<span>You have full control to manage your own account
setting.</span>
</div>
<div>
<a href="#" class="btn btn-outline-primary btn-sm">Export
To CSV...</a>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Form -->
<form class="row mb-4">
<div class="col-xl-7 col-lg-6 col-md-4 col-12 mb-2 mb-lg-0">
<select class="custom-select choiceSelect">
<option value="">ALL</option>
<option
value="How to easily create a website with WordPress">
How to easily create a website with WordPress
</option>
<option
value="Getting started - Grunt: The JavaScript Task...">
Getting started - Grunt: The JavaScript Task...
</option>
<option
value="Getting started - Vue js: The JavaScript Task...">
Getting started - Vue js: The JavaScript Task...
</option>
</select>
</div>
<div class="col-xl-2 col-lg-2 col-md-4 col-12 mb-2 mb-lg-0">
<select class="custom-select choiceSelect">
<option value="">Rating</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-12 mb-2 mb-lg-0">
<select class="custom-select choiceSelect">
<option value="">Sort</option>
<option value="Newest">Newest</option>
<option value="Oldest">Oldest</option>
</select>
</div>
</form>
<!-- List Group -->
<ul class="list-group list-group-flush border-top">
<!-- List Group Item -->
<li class="list-group-item px-0 py-4">
<div class="d-flex">
<img src="../assets/images/avatar/avatar-9.jpg" alt=""
class="rounded-circle avatar-lg" />
<div class="ms-3 mt-2">
<div
class="d-flex align-items-center justify-content-between">
<div>
<h4 class="mb-0">Eleanor Pena</h4>
<span class="text-muted fs-6">2
hour ago</span>
</div>
<div>
<a href="#" data-bs-toggle="tooltip"
data-placement="top"
title="Report Abuse"><i
class="fe fe-flag"></i></a>
</div>
</div>
<div class="mt-2">
<span class="me-1">
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star mb-2 text-warning fs-6"></i>
</span>
<span class="me-1">for</span>
<span class="h5">How to easily create a
website with WordPress</span>
<p class="mt-2">
The course is very interesting and
insightful. I think it should have more
downloadable resources for 'points to
remember' or 'key learnings' kind of
document for later reference after
finishing each section.
</p>
<a href="#"
class="btn btn-outline-secondary btn-sm">Respond</a>
</div>
</div>
</div>
</li>
<!-- List Group Item -->
<li class="list-group-item px-0 py-4">
<div class="d-flex">
<img src="../assets/images/avatar/avatar-4.jpg" alt=""
class="rounded-circle avatar-lg" />
<div class="ms-3 mt-2">
<div
class="d-flex align-items-center justify-content-between">
<div>
<h4 class="mb-0">Jenny Wilson</h4>
<span class="text-muted fs-6">2
hour ago</span>
</div>
<div>
<a href="#" data-bs-toggle="tooltip"
data-placement="top"
title="Report Abuse"><i
class="fe fe-flag"></i></a>
</div>
</div>
<div class="mt-2">
<span class="me-1">
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star mb-2-half-alt text-warning fs-6"></i>
</span>
<span class="me-1">for</span>
<span class="h5">Getting started - Grunt:
The JavaScript Task...</span>
<p class="mt-2">
Quisque semper aliquet lacinia. Ut
molestie felis nec consectetur
hendrerit. Aliquam eu viverra velit. In
non leo ornare, ornare lorem elementum,
efficitur urna. Curabitur fringilla
nulla ac odio dignissim viverra.
</p>
<a href="#"
class="btn btn-outline-secondary btn-sm">Respond</a>
</div>
</div>
</div>
</li>
<!-- List Group Item -->
<li class="list-group-item px-0 py-4">
<div class="d-flex">
<img src="../assets/images/avatar/avatar-7.jpg" alt=""
class="rounded-circle avatar-lg" />
<div class="ms-3 mt-2">
<div
class="d-flex align-items-center justify-content-between">
<div>
<h4 class="mb-0">Brooklyn Simmons</h4>
<span class="text-muted fs-6">2
hour ago</span>
</div>
<div>
<a href="#" data-bs-toggle="tooltip"
data-placement="top"
title="Report Abuse"><i
class="fe fe-flag"></i></a>
</div>
</div>
<div class="mt-2">
<span class="me-1">
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star mb-2-half-alt text-warning fs-6"></i>
</span>
<span class="me-1">for</span>
<span class="h5">Getting started - Vue js:
The JavaScript Task...</span>
<p class="mt-2">
Nulla eu cursus lacus. Vestibulum
imperdiet accumsan tempor. Vivamus
lacinia posuere augue ac mollis. Integer
ornare purus ac hendrerit vehicula. In
condimentum efficitur quam, sed
porta turpis lobortis sit amet.
</p>
<a href="#"
class="btn btn-outline-secondary btn-sm">Respond</a>
</div>
</div>
</div>
</li>
<!-- List Group Item -->
<li class="list-group-item px-0 py-4">
<div class="d-flex">
<img src="../assets/images/avatar/avatar-1.jpg" alt=""
class="rounded-circle avatar-lg" />
<div class="ms-3 mt-2">
<div
class="d-flex align-items-center justify-content-between">
<div>
<h4 class="mb-0">John Deo</h4>
<span class="text-muted fs-6">1
hour ago</span>
</div>
<div>
<a href="#" data-bs-toggle="tooltip"
data-placement="top"
title="Report Abuse"><i
class="fe fe-flag"></i></a>
</div>
</div>
<div class="mt-2">
<span class="me-1">
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star mb-2 text-light"></i>
</span>
<span class="me-1">for</span>
<span class="h5">Getting started - Gulp: The
JavaScript Task...</span>
<p class="mt-2">
Suspendisse mauris lectus, posuere et
quam eu, auctor interdum turpis.
Maecenas gravida libero vitae risus
sodales dictu llentesque tristique mi ut
lectus luctus, eu hendrerit felis
accumsan. Nam eget felis porttitor,
volutpat nisi id, aliquam purus.
</p>
<a href="#"
class="btn btn-outline-secondary btn-sm">Respond</a>
</div>
</div>
</div>
</li>
<!-- List Group Item -->
<li class="list-group-item px-0 pt-4 pb-0">
<div class="d-flex">
<img src="../assets/images/avatar/avatar-8.jpg" alt=""
class="rounded-circle avatar-lg" />
<div class="ms-3 mt-2">
<div
class="d-flex align-items-center justify-content-between">
<div>
<h4 class="mb-0">Simons Xolaa</h4>
<span class="text-muted fs-6">3
hour ago</span>
</div>
<div>
<a href="#" data-bs-toggle="tooltip"
data-placement="top"
title="Report Abuse"><i
class="fe fe-flag"></i></a>
</div>
</div>
<div class="mt-2">
<span class="me-1">
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star me-n1 mb-2 text-warning fs-6"></i>
<i
class="mdi mdi-star mb-2 text-warning fs-6"></i>
</span>
<span class="me-1">for</span>
<span class="h5">Getting started - HTML: The
Foundations Task...</span>
<p class="mt-2">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed euismod nulla orci,
sed varius metus tincidunt consequat.
Maecenas in purus non nisi luctus
pulvinar vitae eu lacus. Nam
magna ipsum, fermentum in commodo ut,
tristique ut mauris.
</p>
<a href="#"
class="btn btn-outline-secondary btn-sm">Respond</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>