[edit] contact us responsive design

et#6
tribikram 2 years ago
parent 738c8ed441
commit 5366733ef1
  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

@ -74,8 +74,8 @@ h2{
}
.mobile-nav-icon {
width: 3rem;
height: 3rem;
width: 2.5rem;
height: 2.5rem;
color: #212529;
}
@ -106,8 +106,8 @@ h2{
Responsive Codes
======================================= */
/* 1024px */
@media (max-width: 64em) {
/* 1200px */
@media (max-width: 75em) {
html {
overflow-x: hidden;
}
@ -180,7 +180,6 @@ Responsive Codes
/* top bar */
#topbar{
background: #FFFFFF;
height: 50px;
font-size: 14px;
transition: all 0.5s;
color: #fff;
@ -223,7 +222,7 @@ Responsive Codes
.slider-content{
padding: 3rem 6rem;
position: absolute;
top: 30%;
top: 20%;
width: 60%;
}
.slider-content h2{
@ -244,13 +243,96 @@ Responsive Codes
.slider-content p{
margin-bottom: 3rem;
}
.slider-content p,
.slider-content h2,
.slideDown,
.slideUp{
position: relative;
opacity: 0;
}
.slider-content a{
background: rgba(216, 51, 162, 0.8);
border: 2px solid #EC3AB0;
border-radius: 25px;
padding: 10px 20px;
text-decoration: none;
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 */
@ -355,6 +437,10 @@ Responsive Codes
color: #FFF1FC;
border-radius: 0 20px 0 20px;
text-decoration: none;
display: inline-block;
align-items: center;
position: relative;
transition: 0.5s;
}
.services-slider{
display: flex !important;
@ -538,11 +624,11 @@ Responsive Codes
line-height: 1.8rem;
letter-spacing: 0.001em;
color: #000000;
transition: color 2s;
transition: color 1.5s;
}
.blog-card:hover h2,
.blog-card:hover p{
color: #326CBF;
color: #E22899;
}
.blog-desc p{
font-weight: 400;
@ -945,6 +1031,12 @@ Responsive Codes
text-align: center;
border-radius: 6px;
padding: 10px 40px;
transition: .6s;
}
.lets-chat-section a:hover{
background: #326CBF;
border: 1px solid #326CBF;
color: #FFFFFF;
}
.our-values-section{
padding: 3rem 6rem;
@ -1087,6 +1179,10 @@ Responsive Codes
text-decoration: none;
padding: 10px 20px;
border-radius: 25px;
display: inline-block;
align-items: center;
position: relative;
transition: 0.5s;
}
.blog-banner{
@ -1393,8 +1489,71 @@ Responsive Codes
/* mobile view css */
@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{
grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr;
}
.services-section,
.blog-section,
@ -1408,23 +1567,42 @@ Responsive Codes
.why-et,
.student-visa-section,
.blogs-section, .why-et,
.blog-detail-section,
.faq-section,
.why-us-section,
.testimonials-section,
.footer-top{
.footer-top,
.our-values-section,
.lets-chat-section,
.blog-banner{
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,
.testimonials-desc {
.testimonials-desc,
.contact-offices {
margin-right: 0;
margin-bottom: 1rem;
}
.footer-description{
margin: 1rem 0 !important;
/* margin-bottom: 0 !important; */
}
.why-us-section::before{
display: none;
}
.why-us-img,
.blog-header p{
.blog-header p,
.lets-chat-section p{
padding: 0;
margin-bottom: 1rem;
}
@ -1435,10 +1613,83 @@ Responsive Codes
.footer-links{
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 */
/* ipad, tablets screen css */
@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{
grid-template-columns: 1fr 1fr;
}
@ -1458,24 +1709,78 @@ Responsive Codes
.faq-section,
.why-us-section,
.testimonials-section,
.footer-top{
.footer-top,
.lets-chat-section,
.our-values-section,
.blog-banner{
padding: 3rem;
}
.service-card{
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{
display: none;
}
.services-content,
.testimonials-desc {
.testimonials-desc ,
.contact-offices {
margin-right: 0;
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 */
/* Small screens, laptops css */
@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{
grid-template-columns: 1fr 1fr;
}
@ -1495,7 +1800,9 @@ Responsive Codes
.faq-section,
.why-us-section,
.testimonials-section,
.footer-top{
.footer-top,
.lets-chat-section,
.our-values-section{
padding: 3rem;
}
.why-us-section::before{
@ -1505,19 +1812,61 @@ Responsive Codes
width: 100%;
}
.services-content,
.testimonials-desc {
.testimonials-desc ,
.contact-offices {
margin-right: 0;
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 */
/* Desktops, large screens css */
@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 */
/* 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 */

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

@ -11,21 +11,21 @@
@section('content')
<section class="about-header-section">
<div class="about-banner-header">
{!!$about->description!!}
{!!$about->description ?? '' !!}
</div>
<div class="about-banner-img">
<img src="{{url('frontend/images/about-banner.png')}}" class="img-fluid" alt="">
</div>
</section>
<section class="overseas-section">
{!!$about->sub_description!!}
{!!$about->sub_description ?? '' !!}
<div class="overseas-img">
<img src="{{url('frontend/images/australia-map.png')}}" class="img-fluid" alt="">
</div>
</section>
<section class="why-et">
<div class="why-et-header">
{!!$about->bottom_description!!}
{!!$about->bottom_description ?? '' !!}
</div>
<div class="et-cards">
<!-- <div class="et-card">
@ -75,7 +75,7 @@
high-performing talent. We connect that talent with our partners, providing mutual growth opportunities.
</p>
<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>
@ -109,7 +109,7 @@
We’re here to help. We work with US based companies to help them grow!
</p>
<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>
</section>
@endsection

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

@ -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>
</section>
@endsection
@section('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>
@ -161,3 +161,4 @@
})
}
</script>
@endsection

@ -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."/>
@endsection
@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">
@foreach($sliders as $slider)
<img src="{{url($slider->image)}}" class="w-100" alt="">
<div class="slider-content">
<h2>{{$slider->title1}}</h2>
<h2 class="slideDown">{{$slider->title1}}</h2>
<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>
</div>
@endforeach
</div>
</section>
</section> --}}
<section class="about-icons-section">
<div class="high-visa">
@ -158,7 +191,7 @@
</div>
</div>
<div class="mt-4">
<a href="">Learn More</a>
<a href="about">Learn More</a>
</div>
</div>
</div>

Loading…
Cancel
Save