[add] testiomonials and blog section

extrtech#1
tribikram 2 years ago
parent 229a2bd356
commit bc682831d6
  1. 193
      public/frontend/css/style.css
  2. 4
      public/frontend/icons/quote.svg
  3. BIN
      public/frontend/images/australia-map.png
  4. BIN
      public/frontend/images/opera-house.png
  5. BIN
      public/frontend/images/passport-img.png
  6. BIN
      public/frontend/images/pexels-andrea-piacquadio.png
  7. BIN
      public/frontend/images/testibg.png
  8. BIN
      public/frontend/images/user.png
  9. 200
      resources/views/welcome.blade.php

@ -240,11 +240,13 @@ Responsive Codes
background: #FFF1FC; background: #FFF1FC;
} }
/* homepage service section css */ /* homepage service section css */
.services-section{ .services-section,
.blog-section{
padding: 3rem 6rem; padding: 3rem 6rem;
} }
.services-section .row, .services-section .row,
.why-us-section .row{ .why-us-section .row,
.testimonials-section .row{
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -261,11 +263,13 @@ Responsive Codes
.services-content p{ .services-content p{
margin-bottom: 45px; margin-bottom: 45px;
} }
.services-slick .slick-dots li.slick-active button:before{ .services-slick .slick-dots li.slick-active button:before,
.review-cards .slick-dots li.slick-active button:before{
color: #E22899 !important; color: #E22899 !important;
border: 2px solid #E22899; border: 2px solid #E22899;
} }
.services-slick .slick-dots li button:before{ .services-slick .slick-dots li button:before,
.review-cards .slick-dots li button:before{
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
top: 20px; top: 20px;
@ -317,24 +321,195 @@ Responsive Codes
.why-us-section{ .why-us-section{
padding: 3rem 6rem; padding: 3rem 6rem;
background: #EBF3FF; background: #EBF3FF;
position: relative;
}
.why-us-section::before{
position: absolute;
content: url('../images/australia-map.png');
left: 3%;
top: -22%;
} }
.why-us-lists{ .why-us-lists{
display: flex; display: flex;
gap: 2rem; gap: 2rem;
} }
.why-us-desc h1{ .why-us-desc h1,
.testimonials-desc h1,
.blog-header h1{
font-weight: 600; font-weight: 600;
font-size: 44px; font-size: 44px;
line-height: 66px; line-height: 54px;
align-items: center; align-items: center;
margin-bottom: 1.4rem;
color: #296AC7; color: #296AC7;
} }
.why-us-desc p{ .why-us-img{
padding: 5rem 5rem 5rem 0;
}
.why-us-desc p,
.testimonials-desc p{
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
margin-bottom: 2.8rem;
color: #1E1C1C; color: #1E1C1C;
} }
/* testimonials section css */
.testimonials-section{
padding: 2rem 6rem;
background: url('../images/testibg.png');
background-repeat: no-repeat;
background-size: cover;
}
.testimonials-desc{
margin-right: 4rem;
}
.testimonials-desc a{
background: #D833A2;
border-radius: 25px;
padding: 10px 20px;
text-decoration: none;
color: #FFFFFF;
}
/* review card */
.quote-icon{
position: absolute;
background-color: #E22899;
padding: 12px;
display: inline-flex;
border-radius: 50%;
bottom: 0;
right: 0;
}
.review-profile{
position: relative;
width: 100px;
}
.review-profile img{
border-radius: 50%;
}
.review-cards{
display: flex;
gap: 20px;
}
.review-card{
min-height: 25pc;
margin: 0 10px;
padding: 20px;
gap: 20px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
box-shadow: 0px 1px 20px rgba(121, 120, 120, 0.06);
border-radius: 8px;
position: relative;
}
.review-title h1{
font-weight: 600;
font-size: 32px;
line-height: 48px;
color: #1E1C1C;
}
.review-title p{
font-weight: 600;
font-size: 22px;
line-height: 24px;
color: #1E1C1C;
}
.review-detail h4{
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: #1E1C1C;
}
.review-detail h6{
display: inline-block;
}
.review-detail h6::after{
content: '';
border-bottom: 2px solid #E22899;
width: 80%;
margin: 10%;
justify-content: center;
display: block;
}
/* review card */
/* blogs section css */
.blog-header p{
text-align: center;
padding: 0 30%;
line-height: 1.6rem;
margin-bottom: 2rem;
}
.blog-card{
background: #FFFFFF;
box-shadow: 0px 4px 18px rgba(121, 121, 121, 0.05);
border-radius: 12px;
transition: .4s;
}
.blog-card:hover{
transform: scale(1.03);
}
.blog-desc{
padding: 20px;
}
.blog-desc h5{
font-weight: 600;
font-size: 12px;
line-height: 1.6rem;
color: #BFBFBF;
}
.blog-desc h2{
font-weight: 700;
font-size: 20px;
line-height: 1.8rem;
letter-spacing: 0.001em;
color: #000000;
transition: color 2s;
}
.blog-card:hover h2,
.blog-card:hover p{
color: #326CBF;
}
.blog-desc p{
font-weight: 400;
font-size: 15px;
line-height: 1.6rem;
color: #606161;
transition: color 2s;
}
.blog-img{
position: relative;
width: 100%;
}
.blog-img img{
border-radius: 12px 12px 0 0;
}
.blog-date{
position: absolute;
right: 20px;
bottom: -35px;
display: inline-flex;
background: #326CBF;
border-radius: 50%;
padding: 20px 10px;
color: #FFF1FC;
border: 3px solid #7AA9EC;
}
.blog-date h5{
font-weight: 700;
font-size: 15px;
line-height: 155.5%;
text-align: center;
color: #FFFFFF;
margin-bottom: 0;
}
/* blog ection css end */
/* Footer Css */ /* Footer Css */
.footer{ .footer{
background: #296AC7; background: #296AC7;
@ -370,7 +545,7 @@ Responsive Codes
color: #FFFFFF; color: #FFFFFF;
} }
/* subscribe css */ /* subscribe css */
.custom-search { .final-content .custom-search {
position: relative; position: relative;
width: 260px; width: 260px;
} }
@ -383,7 +558,7 @@ Responsive Codes
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
} }
.custom-search-botton { .final-content .custom-search-botton {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;

@ -0,0 +1,4 @@
<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.3214 10.9893C4.45096 9.27463 4.6596 6.5468 4.45096 5.29979C4.31186 5.45566 3.75548 6.00122 2.99048 6.07916C1.25183 6.25629 0 4.83215 0 2.88371C0 1.09113 1.35812 0 2.78185 0C3.40775 0 6.25914 0.779381 5.98096 5.29979C5.70277 9.8202 2.36458 11.6128 1.73866 11.9245C1.0432 12.2709 0.695468 11.3322 1.3214 10.9893Z" fill="white"/>
<path d="M9.54163 10.9893C13.1928 9.27462 13.4362 6.5468 13.1928 5.29979C13.0305 5.45566 12.3814 6.00122 11.4889 6.07916C9.46047 6.25629 8 4.83215 8 2.88371C8 1.09113 9.58447 0 11.2455 0C11.9757 0 15.3023 0.779381 14.9778 5.29979C14.6532 9.8202 10.7587 11.6128 10.0284 11.9245C9.21706 12.2709 8.81138 11.3322 9.54163 10.9893Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 784 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

@ -118,7 +118,7 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="why-us-img"> <div class="why-us-img">
<img src="{{url('frontend/images/smiling-girls.png')}}" class="img-fluid" alt=""> <img src="{{url('frontend/images/smiling-girls.png')}}" class="w-100" alt="">
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@ -147,45 +147,173 @@
</div> </div>
</div> </div>
</section> </section>
<section class="testimonials-section">
<div class="row">
<div class="col-md-6">
<div class="testimonials-desc">
<h1>Words from Our Happy Customers</h1>
<p>We believe customer satisfaction is a great compliment so we always work hard to achieve your success.</p>
<a href="">View More</a>
</div>
</div>
<div class="col-md-6">
<div class="row g-4 review-row">
<div class="review-cards">
<div class="col-md-6">
<div class="review-card">
<div class="review-profile">
<img src="{{url('frontend/images/user.png')}}" class="img-fluid" alt="">
<div class="quote-icon">
<img src="{{url('frontend/icons/quote.svg')}}" class="img-fluid" alt="">
</div>
</div>
<div class="review-desc">
<p>The best, if not, one the best education and visa service providers for Australia along with expert, qualified and friendly staff.</p>
</div>
<div class="review-detail text-center">
<h4>Sujita Bhandari</h4>
<h6>Scholars, MIT</h6>
</div>
</div>
</div>
<div class="col-md-6">
<div class="review-card">
<div class="review-profile">
<img src="{{url('frontend/images/user.png')}}" class="img-fluid" alt="">
<div class="quote-icon">
<img src="{{url('frontend/icons/quote.svg')}}" class="img-fluid" alt="">
</div>
</div>
<div class="review-desc">
<p>The best, if not, one the best education and visa service providers for Australia along with expert, qualified and friendly staff.</p>
</div>
<div class="review-detail text-center">
<h4>Sujita Bhandari</h4>
<h6>Scholars, MIT</h6>
</div>
</div>
</div>
<div class="col-md-6">
<div class="review-card">
<div class="review-profile">
<img src="{{url('frontend/images/user.png')}}" class="img-fluid" alt="">
<div class="quote-icon">
<img src="{{url('frontend/icons/quote.svg')}}" class="img-fluid" alt="">
</div>
</div>
<div class="review-desc">
<p>The best, if not, one the best education and visa service providers for Australia along with expert, qualified and friendly staff.</p>
</div>
<div class="review-detail text-center">
<h4>Sujita Bhandari</h4>
<h6>Scholars, MIT</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blog-section">
<div class="blog-header text-center">
<h1>Recent Blogs</h1>
<p>Get the updates about moving to Australia with the right guidance and information from our experts.</p>
</div>
<div class="row">
<div class="col-md-4 col-sm-12">
<a href="" class="text-decoration-none">
<div class="blog-card">
<div class="blog-img">
<img src="{{url('frontend/images/opera-house.png')}}" class="w-100" alt="">
<div class="blog-date">
<h5>6 DEC</h5>
</div>
</div>
<div class="blog-desc">
<h5>EDUCATION | 5 MIN READING</h5>
<h2>Ten Reasons that make Australia the Best Destination </h2>
<p>If you want to study in a city surrounded by lush greenery and a pleasant atmosphere..</p>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-12">
<a href="" class="text-decoration-none">
<div class="blog-card">
<div class="blog-img">
<img src="{{url('frontend/images/pexels-andrea-piacquadio.png')}}" class="w-100" alt="">
<div class="blog-date">
<h5>6 DEC</h5>
</div>
</div>
<div class="blog-desc">
<h5>EDUCATION | 7 MIN READING</h5>
<h2>Top six benefits of studying in regional Australia  </h2>
<p>If you want to study in a city surrounded by lush greenery and a pleasant atmosphere..</p>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-12">
<a href="" class="text-decoration-none">
<div class="blog-card">
<div class="blog-img">
<img src="{{url('frontend/images/passport-img.png')}}" class="w-100" alt="">
<div class="blog-date">
<h5>6 DEC</h5>
</div>
</div>
<div class="blog-desc">
<h5>EDUCATION | 5 MIN READING</h5>
<h2>Best ways to Settle your career in Australia</h2>
<p>If you want to study in a city surrounded by lush greenery and a pleasant atmosphere..</p>
</div>
</div>
</a>
</div>
</div>
</section>
@endsection @endsection
@section('script') @section('script')
<script> <script>
var $serviceSlider = $('.services-slick'); var classlider = [('.services-slick'), ('.review-cards')];
$serviceSlider.slick({ classlider.forEach(function(className, index){
slidesToShow: 2, $(className).slick({
slidesToScroll: 1, slidesToShow: 2,
autoplay: true, slidesToScroll: 1,
autoplaySpeed: 4000, autoplay: true,
prevArrow: false, autoplaySpeed: 4000,
nextArrow: false, prevArrow: false,
dots: true, nextArrow: false,
centerMode: false, dots: true,
responsive: [ centerMode: false,
{ responsive: [
breakpoint: 1024, {
settings: { breakpoint: 1024,
slidesToShow: 2, settings: {
slidesToScroll: 1, slidesToShow: 2,
infinite: true, slidesToScroll: 1,
dots: false infinite: true,
} dots: false
}, }
{ },
breakpoint: 600, {
settings: { breakpoint: 600,
slidesToShow: 2, settings: {
slidesToScroll: 1 slidesToShow: 2,
} slidesToScroll: 1
}, }
{ },
breakpoint: 480, {
settings: { breakpoint: 480,
slidesToShow: 1, settings: {
slidesToScroll: 1 slidesToShow: 1,
slidesToScroll: 1
}
} }
} ]
] });
}); });
</script> </script>
@endsection @endsection
Loading…
Cancel
Save