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

[edit] contact us responsive design

Browse Source
et#6
tribikram 2 years ago
parent 738c8ed441
commit 5366733ef1
6 changed files with 416 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 391
      public/frontend/css/style.css
  2. BIN
      public/images/slider/2023/01/31/5b9acc068e982a4036456dd759bffe38.png
  3. 10
      resources/views/about.blade.php
  4. 2
      resources/views/blogs.blade.php
  5. 3
      resources/views/contact.blade.php
  6. 43
      resources/views/welcome.blade.php

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

@ -74,8 +74,8 @@ h2{
} }
.mobile-nav-icon { .mobile-nav-icon {
width: 3rem; width: 2.5rem;
height: 3rem; height: 2.5rem;
color: #212529; color: #212529;
} }
@ -106,8 +106,8 @@ h2{
Responsive Codes Responsive Codes
======================================= */ ======================================= */
/* 1024px */ /* 1200px */
@media (max-width: 64em) { @media (max-width: 75em) {
html { html {
overflow-x: hidden; overflow-x: hidden;
} }
@ -180,7 +180,6 @@ Responsive Codes
/* top bar */ /* top bar */
#topbar{ #topbar{
background: #FFFFFF; background: #FFFFFF;
height: 50px;
font-size: 14px; font-size: 14px;
transition: all 0.5s; transition: all 0.5s;
color: #fff; color: #fff;
@ -223,7 +222,7 @@ Responsive Codes
.slider-content{ .slider-content{
padding: 3rem 6rem; padding: 3rem 6rem;
position: absolute; position: absolute;
top: 30%; top: 20%;
width: 60%; width: 60%;
} }
.slider-content h2{ .slider-content h2{
@ -244,13 +243,96 @@ Responsive Codes
.slider-content p{ .slider-content p{
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.slider-content p,
.slider-content h2,
.slideDown,
.slideUp{
position: relative;
opacity: 0;
}
.slider-content a{ .slider-content a{
background: rgba(216, 51, 162, 0.8); background: rgba(216, 51, 162, 0.8);
border: 2px solid #EC3AB0;
border-radius: 25px; border-radius: 25px;
padding: 10px 20px; padding: 10px 20px;
text-decoration: none; text-decoration: none;
color: #FFFFFF; color: #FFFFFF;
display: inline-block;
align-items: center;
position: relative;
transition: 0.5s;
}
.slider-content a::after,
.services-content a::after,
.why-us-desc a::after{
content: '\f101';
font-weight: 900;
font-family: "Font Awesome 5 Free";
position: absolute;
opacity: 0;
top: 10px;
right: -20px;
transition: 0.5s;
}
.slider-content a:hover,
.services-content a:hover{
background: #326CBF;
padding-right: 2rem;
padding-left: 1rem;
}
.why-us-desc a:hover{
background: #E22899;
padding-right: 2rem;
padding-left: 1rem;
}
.slider-content a:hover::after,
.services-content a:hover::after,
.why-us-desc a:hover::after{
opacity: 1;
right: 10px;
}
.slideUp {
top:40px;
left:10px;
animation: slideUp ease 1s forwards 1.6s;
}
.slideDown {
top:-40px;
left:5px;
animation: slideDown ease 1s forwards .6s;
}
@keyframes slideUp {
0% {transform: translateY(0);opacity:0.6;}
100% {transform: translateY(-40px);opacity:1;}
}
@keyframes slideDown {
0% {transform: translateY(0);opacity:0.6;}
100% {transform: translateY(40px);opacity:1;}
}
.carousel-control-next, .carousel-control-prev {
width: 5% !important;
}
.carousel-indicators [data-bs-target]:hover {
background:rgb(100%, 100%, 100%);
}
.carousel-indicators [data-bs-target]{
position:relative;
width:10px !important;
height:10px !important;
background: none !important;
border-radius:100% !important;
border: 2px solid #FFFFFF !important;
display:inline-block;
margin-right:7px;
cursor:pointer;
overflow:hidden;
}
.carousel-indicators [data-bs-target].active{
background:#326CBF !important;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
opacity: 0;
filter:alpha(opacity=0); /* IE support */
} }
/* banner slider css */ /* banner slider css */
@ -355,6 +437,10 @@ Responsive Codes
color: #FFF1FC; color: #FFF1FC;
border-radius: 0 20px 0 20px; border-radius: 0 20px 0 20px;
text-decoration: none; text-decoration: none;
display: inline-block;
align-items: center;
position: relative;
transition: 0.5s;
} }
.services-slider{ .services-slider{
display: flex !important; display: flex !important;
@ -538,11 +624,11 @@ Responsive Codes
line-height: 1.8rem; line-height: 1.8rem;
letter-spacing: 0.001em; letter-spacing: 0.001em;
color: #000000; color: #000000;
transition: color 2s; transition: color 1.5s;
} }
.blog-card:hover h2, .blog-card:hover h2,
.blog-card:hover p{ .blog-card:hover p{
color: #326CBF; color: #E22899;
} }
.blog-desc p{ .blog-desc p{
font-weight: 400; font-weight: 400;
@ -945,6 +1031,12 @@ Responsive Codes
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
padding: 10px 40px; padding: 10px 40px;
transition: .6s;
}
.lets-chat-section a:hover{
background: #326CBF;
border: 1px solid #326CBF;
color: #FFFFFF;
} }
.our-values-section{ .our-values-section{
padding: 3rem 6rem; padding: 3rem 6rem;
@ -1087,6 +1179,10 @@ Responsive Codes
text-decoration: none; text-decoration: none;
padding: 10px 20px; padding: 10px 20px;
border-radius: 25px; border-radius: 25px;
display: inline-block;
align-items: center;
position: relative;
transition: 0.5s;
} }
.blog-banner{ .blog-banner{
@ -1393,8 +1489,71 @@ Responsive Codes
/* mobile view css */ /* mobile view css */
@media only screen and (min-width: 320px) and (max-width: 480px) { @media only screen and (min-width: 320px) and (max-width: 480px) {
h1{
font-size: 28px;
line-height: 38px;
}
h2 {
font-weight: 600;
font-size: 22px;
line-height: 38px;
}
#topbar{
padding: 0.5rem 0;
}
.contact-info,
.article-card,
.blog-banner-content{
flex-direction: column;
gap: 10px;
}
.slider-content h2,
.slider-content h1,
.blog-banner-content h2,
.contact-offices h2{
font-size: 22px;
line-height: 2rem;
}
.blog-banner h5,
.studyabroad-banner-header h5{
font-size: 18px;
margin-top: 1rem;
line-height: 1.8rem;
text-align: center;
}
.slider-content {
padding: 1.3rem;
position: absolute;
top: 0;
width: 100%;
}
.slider-content h1{
margin-bottom: 1rem;
}
.slider-image img {
height: 200px;
}
.slider-content p,
.overseas-img{
display: none;
}
.slider-content a{
font-size: 14px;
padding: 5px 10px;
}
.services-content h1,
.why-us-desc h1,
.testimonials-desc h1,
.blog-header h1,
.our-values-section h1,
.studyabroad-banner-header h1,
.contact-left-top h1{
font-size: 28px;
line-height: 38px;
margin-bottom: 0.8rem;
}
.about-icons-section{ .about-icons-section{
grid-template-columns: 1fr; grid-template-columns: 1fr 1fr;
} }
.services-section, .services-section,
.blog-section, .blog-section,
@ -1408,23 +1567,42 @@ Responsive Codes
.why-et, .why-et,
.student-visa-section, .student-visa-section,
.blogs-section, .why-et, .blogs-section, .why-et,
.blog-detail-section,
.faq-section, .faq-section,
.why-us-section, .why-us-section,
.testimonials-section, .testimonials-section,
.footer-top{ .footer-top,
.our-values-section,
.lets-chat-section,
.blog-banner{
padding: 2rem; padding: 2rem;
} }
.contact-form-section{
padding: 0;
}
.contact-form,
.form-sec {
border-radius: 0;
padding: 1rem 0.8rem;
}
.blog-detail-section{
padding: 3rem;
}
.services-content, .services-content,
.testimonials-desc { .testimonials-desc,
.contact-offices {
margin-right: 0; margin-right: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.footer-description{
margin: 1rem 0 !important;
/* margin-bottom: 0 !important; */
}
.why-us-section::before{ .why-us-section::before{
display: none; display: none;
} }
.why-us-img, .why-us-img,
.blog-header p{ .blog-header p,
.lets-chat-section p{
padding: 0; padding: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -1435,10 +1613,83 @@ Responsive Codes
.footer-links{ .footer-links{
margin: 0 !important; margin: 0 !important;
} }
.our-values-section .row{
display: flex;
flex-direction: column-reverse;
}
.values-lists a{
padding: 5px 5px 5px 0;
}
.values-lists h2{
font-size: 18px;
line-height: 1.8rem;
}
.about-header-section {
height: 60vh;
}
.about-banner-img{
top: 85%;
}
.breadcrumb{
display: none;
}
.article-img{
width: 100%;
}
.blog-banner-desc{
margin: 0;
}
.blog-banner-content a{
padding: .5rem 2rem;
font-size: .8rem;
}
.contact-offices h5{
font-size: 15px;
}
} }
/* mobile view css end */ /* mobile view css end */
/* ipad, tablets screen css */ /* ipad, tablets screen css */
@media only screen and (min-width: 481px) and (max-width: 768px) { @media only screen and (min-width: 481px) and (max-width: 768px) {
h2 {
font-weight: 600;
font-size: 28px;
line-height: 42px;
}
#topbar{
padding: 0.5rem 3rem;
}
.header{
padding: 0 3rem;
}
.slider-content {
padding: 2rem;
top: 0%;
width: 80%;
}
.slider-content h1,
.slider-content h2,
.blog-banner-content h2{
font-size: 32px;
line-height: 48px;
}
.blog-banner h5{
font-size: 24px;
margin-top: 1rem;
line-height: 1.8rem;
text-align: center;
}
.slider-content h1{
margin-bottom: 1.6rem;
}
.slider-content p{
display: none;
}
.why-us-img,
.blog-header p,
.lets-chat-section p{
padding: 0;
margin-bottom: 1rem;
}
.about-icons-section{ .about-icons-section{
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
@ -1458,24 +1709,78 @@ Responsive Codes
.faq-section, .faq-section,
.why-us-section, .why-us-section,
.testimonials-section, .testimonials-section,
.footer-top{ .footer-top,
.lets-chat-section,
.our-values-section,
.blog-banner{
padding: 3rem; padding: 3rem;
} }
.service-card{ .service-card{
width: 100%; width: 100%;
} }
.services-content h1,
.why-us-desc h1,
.testimonials-desc h1,
.blog-header h1{
font-size: 32px;
line-height: 48px;
margin-bottom: 0.8rem;
}
.why-us-section::before{ .why-us-section::before{
display: none; display: none;
} }
.services-content, .services-content,
.testimonials-desc { .testimonials-desc ,
.contact-offices {
margin-right: 0; margin-right: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.our-values-section .row{
display: flex;
flex-direction: column-reverse;
}
.values-lists a{
padding: 5px 5px 5px 0;
}
.values-lists h2{
font-size: 18px;
line-height: 1.8rem;
}
.breadcrumb{
display: none;
}
.blog-banner-desc{
margin: 0;
}
.blog-banner-content{
flex-direction: column;
gap: 10px;
}
.contact-form-section{
padding: 0;
}
.contact-form,
.form-sec {
border-radius: 0;
}
} }
/* ipad, tablets screen css ends */ /* ipad, tablets screen css ends */
/* Small screens, laptops css */ /* Small screens, laptops css */
@media only screen and (min-width: 769px) and (max-width: 1024px) { @media only screen and (min-width: 769px) and (max-width: 1024px) {
#topbar,
.header{
padding: 0 3rem;
}
.slider-content {
padding: 2rem;
top: 0%;
width: 80%;
}
.slider-content h1{
margin-bottom: 1.6rem;
font-size: 38px;
line-height: 58px;
}
.about-icons-section{ .about-icons-section{
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
@ -1495,7 +1800,9 @@ Responsive Codes
.faq-section, .faq-section,
.why-us-section, .why-us-section,
.testimonials-section, .testimonials-section,
.footer-top{ .footer-top,
.lets-chat-section,
.our-values-section{
padding: 3rem; padding: 3rem;
} }
.why-us-section::before{ .why-us-section::before{
@ -1505,19 +1812,61 @@ Responsive Codes
width: 100%; width: 100%;
} }
.services-content, .services-content,
.testimonials-desc { .testimonials-desc ,
.contact-offices {
margin-right: 0; margin-right: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.values-lists a{
padding: 5px 5px 5px 0;
}
.values-lists h2{
font-size: 18px;
line-height: 1.8rem;
}
.contact-form-section{
padding: 0;
}
.contact-form,
.form-sec {
border-radius: 0;
}
.contact-form .row{
display: flex;
flex-direction: column;
}
.contact-form .row .col-md-4,
.contact-form .row .col-md-8{
width: 100%;
}
} }
/* Small screens, laptops css ends */ /* Small screens, laptops css ends */
/* Desktops, large screens css */ /* Desktops, large screens css */
@media only screen and (min-width: 1025px) and (max-width: 1200px) { @media only screen and (min-width: 1025px) and (max-width: 1200px) {
.slider-content {
padding: 3rem 6rem;
top: 0%;
width: 80%;
}
.footer-top{
padding: 3rem;
}
.header,
#topbar{
padding: 0 3rem;
}
.contact-form-section{
padding: 0;
}
.contact-form{
border-radius: 0;
}
} }
/* Desktops, large screens css ends */ /* Desktops, large screens css ends */
/* Extra large screens, TV css */ /* Extra large screens, TV css */
@media screen and (min-width: 1201px) { @media only screen and (min-width: 1201px) and (max-width: 1220px) {
.navbar-list{
gap: 1rem;
}
} }
/* Extra large screens, TV css ends */ /* Extra large screens, TV css ends */

BIN
public/images/slider/2023/01/31/5b9acc068e982a4036456dd759bffe38.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

10
resources/views/about.blade.php
Unescape View File

@ -11,21 +11,21 @@
@section('content') @section('content')
<section class="about-header-section"> <section class="about-header-section">
<div class="about-banner-header"> <div class="about-banner-header">
{!!$about->description!!} {!!$about->description ?? '' !!}
</div> </div>
<div class="about-banner-img"> <div class="about-banner-img">
<img src="{{url('frontend/images/about-banner.png')}}" class="img-fluid" alt=""> <img src="{{url('frontend/images/about-banner.png')}}" class="img-fluid" alt="">
</div> </div>
</section> </section>
<section class="overseas-section"> <section class="overseas-section">
{!!$about->sub_description!!} {!!$about->sub_description ?? '' !!}
<div class="overseas-img"> <div class="overseas-img">
<img src="{{url('frontend/images/australia-map.png')}}" class="img-fluid" alt=""> <img src="{{url('frontend/images/australia-map.png')}}" class="img-fluid" alt="">
</div> </div>
</section> </section>
<section class="why-et"> <section class="why-et">
<div class="why-et-header"> <div class="why-et-header">
{!!$about->bottom_description!!} {!!$about->bottom_description ?? '' !!}
</div> </div>
<div class="et-cards"> <div class="et-cards">
<!-- <div class="et-card"> <!-- <div class="et-card">
@ -75,7 +75,7 @@
high-performing talent. We connect that talent with our partners, providing mutual growth opportunities. high-performing talent. We connect that talent with our partners, providing mutual growth opportunities.
</p> </p>
<div class="values-img"> <div class="values-img">
<img src="{{url('frontend/images/attractive-man.png')}}" id="values-img" alt=""> <img src="{{url('frontend/images/attractive-man.png')}}" class="img-fluid" id="values-img" alt="">
</div> </div>
</div> </div>
</div> </div>
@ -109,7 +109,7 @@
We’re here to help. We work with US based companies to help them grow! We’re here to help. We work with US based companies to help them grow!
</p> </p>
<div class="text-center"> <div class="text-center">
<a href="">Consult with us <i class="fa-solid fa-arrow-right fa-2xs ms-1"></i></a> <a href="contact">Consult with us <i class="fa-solid fa-arrow-right fa-2xs ms-1"></i></a>
</div> </div>
</section> </section>
@endsection @endsection

2
resources/views/blogs.blade.php
Unescape View File

@ -26,7 +26,7 @@
<img src="{{url('frontend/icons/side-bars.svg')}}" class="me-2" alt=""> <img src="{{url('frontend/icons/side-bars.svg')}}" class="me-2" alt="">
Latest Articles Latest Articles
</h2> </h2>
<div class="row"> <div class="row g-5">
<div class="col-md-5"> <div class="col-md-5">
<div class="featured-article"> <div class="featured-article">
<img src="{{url('frontend/images/sydney-opera-house.png')}}" class="w-100" alt=""> <img src="{{url('frontend/images/sydney-opera-house.png')}}" class="w-100" alt="">

3
resources/views/contact.blade.php
Unescape View File

@ -109,7 +109,7 @@
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3309.0069665910596!2d151.10355791583234!3d-33.966660431577246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b12b9bd323606ad%3A0xf85fba58b6ff7bd6!2sSuite%20132%20%26%20133%2C%20Level%2F3%20Park%20Rd%2C%20Hurstville%20NSW%202220%2C%20Australia!5e0!3m2!1sen!2snp!4v1674634288627!5m2!1sen!2snp" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3309.0069665910596!2d151.10355791583234!3d-33.966660431577246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b12b9bd323606ad%3A0xf85fba58b6ff7bd6!2sSuite%20132%20%26%20133%2C%20Level%2F3%20Park%20Rd%2C%20Hurstville%20NSW%202220%2C%20Australia!5e0!3m2!1sen!2snp!4v1674634288627!5m2!1sen!2snp" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section> </section>
@endsection @endsection
@section('script')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
@ -161,3 +161,4 @@
}) })
} }
</script> </script>
@endsection

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

@ -9,19 +9,52 @@
<meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/> <meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/>
@endsection @endsection
@section('content') @section('content')
<section class="slider-section"> <!-- Slider -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
@foreach($sliders as $slider)
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{$loop->index}}" class="{{$loop->first ? 'active' : ''}}" aria-current="{{$loop->first ? 'true' : ''}}"></button>
@endforeach
</div>
<div class="carousel-inner">
@foreach($sliders as $slider)
<div class="carousel-item {{$loop->first ? 'active' : ''}}">
<div class="slider-image">
<img src="{{url($slider->image)}}" class="d-block w-100" alt="...">
</div>
<div class="slider-content">
<h2 class="slideDown">{{$slider->title1}}</h2>
<h1>{{$slider->title2}}</h1>
<p class="slideUp">{{strip_tags($slider->description)}}</p>
<a href="{{$slider->link}}">Book an Appointment</a>
</div>
</div>
@endforeach
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Slider -->
{{-- <section class="slider-section">
<div class="slider-banner"> <div class="slider-banner">
@foreach($sliders as $slider) @foreach($sliders as $slider)
<img src="{{url($slider->image)}}" class="w-100" alt=""> <img src="{{url($slider->image)}}" class="w-100" alt="">
<div class="slider-content"> <div class="slider-content">
<h2>{{$slider->title1}}</h2> <h2 class="slideDown">{{$slider->title1}}</h2>
<h1>{{$slider->title2}}</h1> <h1>{{$slider->title2}}</h1>
<p>{{strip_tags($slider->description)}}</p> <p class="slideUp">{{strip_tags($slider->description)}}</p>
<a href="{{$slider->link}}">Book an Appointment</a> <a href="{{$slider->link}}">Book an Appointment</a>
</div> </div>
@endforeach @endforeach
</div> </div>
</section> </section> --}}
<section class="about-icons-section"> <section class="about-icons-section">
<div class="high-visa"> <div class="high-visa">
@ -158,7 +191,7 @@
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<a href="">Learn More</a> <a href="about">Learn More</a>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save