[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. 136
      resources/views/welcome.blade.php

@ -240,11 +240,13 @@ Responsive Codes
background: #FFF1FC;
}
/* homepage service section css */
.services-section{
.services-section,
.blog-section{
padding: 3rem 6rem;
}
.services-section .row,
.why-us-section .row{
.why-us-section .row,
.testimonials-section .row{
display: flex;
align-items: center;
}
@ -261,11 +263,13 @@ Responsive Codes
.services-content p{
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;
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;
line-height: 16px;
top: 20px;
@ -317,24 +321,195 @@ Responsive Codes
.why-us-section{
padding: 3rem 6rem;
background: #EBF3FF;
position: relative;
}
.why-us-section::before{
position: absolute;
content: url('../images/australia-map.png');
left: 3%;
top: -22%;
}
.why-us-lists{
display: flex;
gap: 2rem;
}
.why-us-desc h1{
.why-us-desc h1,
.testimonials-desc h1,
.blog-header h1{
font-weight: 600;
font-size: 44px;
line-height: 66px;
line-height: 54px;
align-items: center;
margin-bottom: 1.4rem;
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-size: 16px;
line-height: 24px;
margin-bottom: 2.8rem;
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{
background: #296AC7;
@ -370,7 +545,7 @@ Responsive Codes
color: #FFFFFF;
}
/* subscribe css */
.custom-search {
.final-content .custom-search {
position: relative;
width: 260px;
}
@ -383,7 +558,7 @@ Responsive Codes
box-sizing: border-box;
outline: none;
}
.custom-search-botton {
.final-content .custom-search-botton {
position: absolute;
right: 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="col-md-6">
<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 class="col-md-6">
@ -147,12 +147,139 @@
</div>
</div>
</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
@section('script')
<script>
var $serviceSlider = $('.services-slick');
$serviceSlider.slick({
var classlider = [('.services-slick'), ('.review-cards')];
classlider.forEach(function(className, index){
$(className).slick({
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
@ -187,5 +314,6 @@
}
]
});
});
</script>
@endsection
Loading…
Cancel
Save