tribikram
/
ET-VISA
1
0
Fork 0
Code Issues 24 Pull Requests 15 Packages Projects 1 Releases Wiki Activity

[add] testiomonials and blog section

Browse Source
extrtech#1
tribikram 2 years ago
parent 229a2bd356
commit bc682831d6
9 changed files with 352 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

193
public/frontend/css/style.css
Unescape View File

@ -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;

4
public/frontend/icons/quote.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 784 B

BIN
public/frontend/images/australia-map.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
public/frontend/images/opera-house.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
public/frontend/images/passport-img.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 KiB

BIN
public/frontend/images/pexels-andrea-piacquadio.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
public/frontend/images/testibg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/frontend/images/user.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

136
resources/views/welcome.blade.php
Unescape View File

@ -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
Write Preview
Loading…
Cancel
Save