312 lines
24 KiB
PHP

<div class="mb-4">
<h4 class="fw-semibold fs-3 mb-4">Latest Property <span class="font-caveat text-primary">Reviews</span></h4>
<div class="border p-4 mb-5 rounded-4">
<div class="row g-4 align-items-center">
<div class="col-sm-auto">
<div class="rating-block text-center">
<!-- start title -->
<h5 class="font-caveat fs-4 mb-4">Average user rating</h5>
<!-- end /. title -->
<!-- Start Rating Point -->
<div class="rating-point position-relative ml-auto mr-auto">
<!-- Start Svg Icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width=".5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star text-primary">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"> </polygon>
</svg>
<!-- /.End Svg Icon -->
<h3 class="position-absolute mb-0 fs-18 text-primary">4.3</h3>
</div>
<!-- End Rating Point -->
<span class="fs-13">2,525 Ratings &amp;</span><br>
<span class="fs-13">293 Reviews</span>
</div>
</div>
<div class="col">
<div class="rating-position">
<!-- start title -->
<h5 class="font-caveat fs-4 mb-4">Rating breakdown</h5>
<!-- end /. title -->
<!-- Start Rating Point -->
<!-- start rating dimension -->
<div class="align-items-center d-flex mb-2 rating-dimension gap-2">
<!-- start rating quantity -->
<div class="d-flex align-items-center gap-2">
<span class="fs-14 fw-semibold rating-points">5</span>
<div class="d-flex align-items-center text-primary rating-stars">
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
</div>
</div>
<!-- end /. rating quantity -->
<!-- Start Progress -->
<div class="progress flex-grow-1 me-2">
<div class="progress-bar bg-primary" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- /.End Progress -->
<!-- Start User Rating -->
<div class="bg-dark fs-11 fw-medium px-2 py-1 rounded-pill text-white user-rating">4.5</div>
<!-- /.End User Rating -->
</div>
<!-- end /. rating dimension -->
<!-- start rating dimension -->
<div class="align-items-center d-flex mb-2 rating-dimension gap-2">
<!-- start rating quantity -->
<div class="d-flex align-items-center gap-2">
<span class="fs-14 fw-semibold rating-points">5</span>
<div class="d-flex align-items-center text-primary rating-stars">
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon half"></i>
<i class="fa-star-icon none"></i>
</div>
</div>
<!-- end /. rating quantity -->
<!-- start progress -->
<div class="progress flex-grow-1 me-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- end /. progress -->
<!-- start user rating -->
<div class="bg-dark fs-11 fw-medium px-2 py-1 rounded-pill text-white user-rating">3.5</div>
<!-- end /. user rating -->
</div>
<!-- end /. rating dimension -->
<!-- start rating dimension -->
<div class="align-items-center d-flex mb-2 rating-dimension gap-2">
<!-- start rating quantity -->
<div class="d-flex align-items-center gap-2">
<span class="fs-14 fw-semibold rating-points">3</span>
<div class="d-flex align-items-center text-primary rating-stars">
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon half"></i>
<i class="fa-star-icon none"></i>
<i class="fa-star-icon none"></i>
</div>
</div>
<!-- end /. rating quantity -->
<!-- start progress -->
<div class="progress flex-grow-1 me-2">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- end /. progress -->
<!-- start user rating -->
<div class="bg-dark fs-11 fw-medium px-2 py-1 rounded-pill text-white user-rating">1.5</div>
<!-- end /. user rating -->
</div>
<!-- end /. rating dimension -->
<!-- start rating dimension -->
<div class="align-items-center d-flex mb-2 rating-dimension gap-2">
<!-- start rating quantity -->
<div class="d-flex align-items-center gap-2">
<span class="fs-14 fw-semibold rating-points">3</span>
<div class="d-flex align-items-center text-primary rating-stars">
<i class="fa-star-icon"></i>
<i class="fa-star-icon half"></i>
<i class="fa-star-icon none"></i>
<i class="fa-star-icon none"></i>
<i class="fa-star-icon none"></i>
</div>
</div>
<!-- end /. rating quantity -->
<!-- start progress -->
<div class="progress flex-grow-1 me-2">
<div class="progress-bar bg-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- end /. progress -->
<!-- start user rating -->
<div class="bg-dark fs-11 fw-medium px-2 py-1 rounded-pill text-white user-rating">5.2</div>
<!-- end /. user rating -->
</div>
<!-- end /. rating dimension -->
<!-- start rating dimension -->
<div class="align-items-center d-flex mb-2 rating-dimension gap-2">
<!-- start rating quantity -->
<div class="d-flex align-items-center gap-2">
<span class="fs-14 fw-semibold rating-points">1</span>
<div class="d-flex align-items-center text-primary rating-stars">
<i class="fa-star-icon"></i>
<i class="fa-star-icon none"></i>
<i class="fa-star-icon none"></i>
<i class="fa-star-icon none"></i>
<i class="fa-star-icon none"></i>
</div>
</div>
<!-- end /. rating quantity -->
<!-- start progress -->
<div class="progress flex-grow-1 me-2">
<div class="progress-bar text-bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- end /. progress -->
<!-- start user rating -->
<div class="bg-dark fs-11 fw-medium px-2 py-1 rounded-pill text-white user-rating">6.9</div>
<!-- end /. user rating -->
</div>
<!-- end /. rating dimension -->
</div>
</div>
</div>
</div>
<div class="d-flex mb-4 border-bottom pb-4">
<div class="flex-shrink-0">
<img src="assets/images/avatar/01.jpg" alt="..." height="70" width="70" class="object-fit-cover rounded-circle">
</div>
<div class="flex-grow-1 ms-4">
<div class="comment-header d-flex flex-wrap gap-2 mb-3">
<div>
<h4 class="fs-18 mb-0">- Ethan Blackwood</h4>
<div class="comment-datetime fs-12 text-muted">25 Oct 2023 at 12.27 pm</div>
</div>
<!-- start rating -->
<div class="d-flex align-items-center gap-2 ms-auto">
<div class="d-flex align-items-center text-primary rating-stars">
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon half"></i>
<i class="fa-star-icon none"></i>
</div>
<span class="fs-14 fw-semibold rating-points">3.5/5</span>
</div>
<!-- end /. rating -->
</div>
<div class="fs-15">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which.</div>
<!-- start review -->
<a href="#" class="btn btn-light btn-sm mt-4 px-3 rounded-pill gap-2 d-inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
<path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
</svg>
Helpful Review
<div class="vr d-none d-sm-inline-block"></div>
<span class="fw-semibold">16</span>
</a>
<!-- end /. review -->
<div class="row mt-3 g-2 review-image zoom-gallery">
<div class="col-auto">
<a href="assets/images/listing-details/review-image-02.jpg" class="galary-overlay-hover dark-overlay position-relative d-block overflow-hidden rounded-3">
<img src="assets/images/listing-details/review-image-02.jpg" alt="" class="img-fluid rounded-3 object-fit-cover" height="70" width="112">
<div class="galary-hover-element h-100 position-absolute start-50 top-50 translate-middle w-100">
<i class="fa-solid fa-expand text-white position-absolute top-50 start-50 translate-middle bg-primary rounded-1 p-2 lh-1"></i>
</div>
</a>
</div>
<div class="col-auto">
<a href="assets/images/listing-details/review-image-03.jpg" class="galary-overlay-hover dark-overlay position-relative d-block overflow-hidden rounded-3">
<img src="assets/images/listing-details/review-image-03.jpg" alt="" class="img-fluid rounded-3 object-fit-cover" height="70" width="112">
<div class="galary-hover-element h-100 position-absolute start-50 top-50 translate-middle w-100">
<i class="fa-solid fa-expand text-white position-absolute top-50 start-50 translate-middle bg-primary rounded-1 p-2 lh-1"></i>
</div>
</a>
</div>
<div class="col-auto">
<a href="assets/images/listing-details/review-image-04.jpg" class="galary-overlay-hover dark-overlay position-relative d-block overflow-hidden rounded-3">
<img src="assets/images/listing-details/review-image-04.jpg" alt="" class="img-fluid rounded-3 object-fit-cover" height="70" width="112">
<div class="galary-hover-element h-100 position-absolute start-50 top-50 translate-middle w-100">
<i class="fa-solid fa-expand text-white position-absolute top-50 start-50 translate-middle bg-primary rounded-1 p-2 lh-1"></i>
</div>
</a>
</div>
</div>
<div class="d-flex mt-4 border-top pt-4">
<div class="flex-shrink-0">
<img src="assets/images/avatar/06.jpg" alt="..." height="60" width="60" class="object-fit-cover rounded-circle">
</div>
<div class="flex-grow-1 ms-3">
<div class="comment-header d-flex flex-wrap gap-2 mb-3">
<div>
<h4 class="fs-18 mb-0">- Gabriel North</h4>
<div class="comment-datetime fs-12 text-muted">25 Oct 2023 at 12.27 pm</div>
</div>
</div>
<div class="fs-15"> This is some content from a media component. You can replace this with any content and adjust it as needed.</div>
<!-- start review -->
<a href="#" class="btn btn-light btn-sm mt-4 px-3 rounded-pill gap-2 d-inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
<path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
</svg>
Helpful Review
<div class="vr d-none d-sm-inline-block"></div>
<span class="fw-semibold">16</span>
</a>
<!-- end /. review -->
</div>
</div>
</div>
</div>
<div class="d-flex mb-4 border-bottom pb-4">
<div class="flex-shrink-0">
<img src="assets/images/avatar/04.jpg" alt="..." height="70" width="70" class="object-fit-cover rounded-circle">
</div>
<div class="flex-grow-1 ms-3">
<div class="comment-header d-flex flex-wrap gap-2 mb-3">
<div>
<h4 class="fs-18 mb-0">- Pranoti Deshpande</h4>
<div class="comment-datetime fs-12 text-muted">25 Oct 2023 at 12.27 pm</div>
</div>
<!-- start rating -->
<div class="d-flex align-items-center gap-2 ms-auto">
<div class="d-flex align-items-center text-primary rating-stars">
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon half"></i>
<i class="fa-star-icon none"></i>
</div>
<span class="fs-14 fw-semibold rating-points">3.5/5</span>
</div>
<!-- end /. rating -->
</div>
<div class="fs-15">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </div>
<!-- start review -->
<a href="#" class="btn btn-light btn-sm mt-4 px-3 rounded-pill gap-2 d-inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
<path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
</svg>
Helpful Review
<div class="vr d-none d-sm-inline-block"></div>
<span class="fw-semibold">16</span>
</a>
<!-- end /. review -->
</div>
</div>
<div class="d-flex mb-4">
<div class="flex-shrink-0">
<img src="assets/images/avatar/05.jpg" alt="..." height="70" width="70" class="object-fit-cover rounded-circle">
</div>
<div class="flex-grow-1 ms-3">
<div class="comment-header d-flex flex-wrap gap-2 mb-3">
<div>
<h4 class="fs-18 mb-0">- Marcus Knight</h4>
<div class="comment-datetime fs-12 text-muted">25 Oct 2023 at 12.27 pm</div>
</div>
<!-- start rating -->
<div class="d-flex align-items-center gap-2 ms-auto">
<div class="d-flex align-items-center text-primary rating-stars">
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon"></i>
<i class="fa-star-icon half"></i>
<i class="fa-star-icon none"></i>
</div>
<span class="fs-14 fw-semibold rating-points">3.5/5</span>
</div>
<!-- end /. rating -->
</div>
<div class="fs-15"> This is some content from a media component. You can replace this with any content and adjust it as needed.</div>
<!-- start review -->
<a href="#" class="btn btn-light btn-sm mt-4 px-3 rounded-pill gap-2 d-inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
<path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
</svg>
Helpful Review
<div class="vr d-none d-sm-inline-block"></div>
<span class="fw-semibold">16</span>
</a>
<!-- end /. review -->
</div>
</div>
</div>