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
Split 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 {
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 */

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

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="">
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="">

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>
</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

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."/>
@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>

Write Preview
Loading…
Cancel
Save