Viewing file:  review.blade.php (9.34 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.frontLayout')
@section('title') {{get_settings('app_name')}} -{{trans('admin.review')}} @endsection
@section('css')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
<style>
.slick-list {
max-width: 700px;
margin: 0 auto;
}
.slick-list .slick-slide {
/* font-size: 30px; */
text-align: center;
padding: 0px 20px;
line-height: 2;
font-weight: 700;
}
.slick-list .slick-slide:nth-child(even) {
background-color: #1E1E1E;
}
.slick-list .slick-slide:nth-child(odd) {
background-color: #1E1E1E;
}
.slick-arrow {
z-index: 1;
width: 40px;
height: 40px;
}
.slick-arrow:before {
font-size: 30px;
}
.slick-next {
right: 0;
}
.slick-prev {
left: 0;
}
.btn-wrap {
text-align: center;
width: 100%;
}
button {
background-color: #ddd;
border: none;
padding: 10px 20px;
border-radius: 5px;
margin: 10px;
font-size: 18px;
font-weight: 600;
transition: all 0.5s;
}
button.slick-disabled {
opacity: 0.6;
}
.reviewer-info-sec {
display: flex;
align-items: center;
margin: 0px !important;
}
</style>
@endsection
@section('content')
@php $template = json_decode(get_settings('template')); @endphp
<section class="review-banner-sec">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="review-banner-img-sec">
<img src="{{asset('images/review-banner.png')}}" class="review-banner-img" alt="">
</div>
</div>
</div>
</div>
</section>
<section class="review-content-sec">
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="review-content-title">
MadMuscles Reviews
</div>
</div>
<div class="col-md-8 m-auto">
<div class="review-content-subtitle">
Read MadMuscles app reviews from customers who've already reached their muscle-building goals!
</div>
<div class="review-content-btn">
<a href="">
<div class="review-lets-btn">
<div>Let's go</div>
<div class="arrow-icon-sec">
<i class="fa fa-long-arrow-right choose-right-icon" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="customer-review-sec">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="customer-review-title">
Take a Look at MadMuscles Customer Review
</div>
<div class="customer-review-sub-title">
Become inspired by true story
</div>
</div>
<div class="col-md-12">
<div class="video-content">
<iframe width="850" height="450" src="https://www.youtube.com/embed/214VLBOnczM"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<section class="customer-review-slider">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="front-review-section">
<div class="slick-list">
<div>
<div class="reviewer-info-sec">
<div class="reviewer-img-sec">
<img src="{{asset('images/reviewer-img.png')}}" alt="">
</div>
<div class="reviewer-name">
Alex
</div>
</div>
<div class="reviewer-review-sec">
<div class="reviewer-review-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias esse sit saepe,
dolorem deserunt facere excepturi odit suscipit quos corporis!
</div>
</div>
</div>
<div>
<div class="reviewer-info-sec">
<div class="reviewer-img-sec">
<img src="{{asset('images/reviewer-img.png')}}" alt="">
</div>
<div class="reviewer-name">
Alex
</div>
</div>
<div class="reviewer-review-sec">
<div class="reviewer-review-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias esse sit saepe,
dolorem deserunt facere excepturi odit suscipit quos corporis!
</div>
</div>
</div>
<div>
<div class="reviewer-info-sec">
<div class="reviewer-img-sec">
<img src="{{asset('images/reviewer-img.png')}}" alt="">
</div>
<div class="reviewer-name">
Alex
</div>
</div>
<div class="reviewer-review-sec">
<div class="reviewer-review-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias esse sit saepe,
dolorem deserunt facere excepturi odit suscipit quos corporis!
</div>
</div>
</div>
<div>
<div class="reviewer-info-sec">
<div class="reviewer-img-sec">
<img src="{{asset('images/reviewer-img.png')}}" alt="">
</div>
<div class="reviewer-name">
Alex
</div>
</div>
<div class="reviewer-review-sec">
<div class="reviewer-review-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias esse sit saepe,
dolorem deserunt facere excepturi odit suscipit quos corporis!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="join-now-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="join-now-content">
<h2 class="join-now-title">Join Now</h2>
<a href="">
<div class="choose-btn-sec">
<div>Choose A Program</div>
<div class="arrow-icon-sec">
<i class="fa fa-long-arrow-right choose-right-icon" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('js')
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
"use strict";
$(document).ready(function () {
$(".slick-list").slick({
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
infinite: false,
autoplay: false
});
$(".prev-btn").click(function () {
$(".slick-list").slick("slickPrev");
});
$(".next-btn").click(function () {
$(".slick-list").slick("slickNext");
});
$(".prev-btn").addClass("slick-disabled");
$(".slick-list").on("afterChange", function () {
if ($(".slick-prev").hasClass("slick-disabled")) {
$(".prev-btn").addClass("slick-disabled");
} else {
$(".prev-btn").removeClass("slick-disabled");
}
if ($(".slick-next").hasClass("slick-disabled")) {
$(".next-btn").addClass("slick-disabled");
} else {
$(".next-btn").removeClass("slick-disabled");
}
});
});
</script>
@endsection
|