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

[edit] responsive design

Browse Source
et#10
tribikram 2 years ago
parent 19ee0065fb
commit f0f2b19a78
8 changed files with 142 additions and 74 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. 135
      public/frontend/css/style.css
  2. BIN
      public/frontend/icons/email.png
  3. 3
      public/frontend/icons/email.svg
  4. BIN
      public/frontend/icons/phone.png
  5. 4
      resources/views/about.blade.php
  6. 7
      resources/views/contact.blade.php
  7. 11
      resources/views/layout/app.blade.php
  8. 30
      resources/views/welcome.blade.php

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

@ -37,7 +37,7 @@ h2{
.navbar-brand-img img{
width: 75%;
padding: 20px 0;
padding: 12px 0;
}
.navbar-list {
@ -53,7 +53,7 @@ h2{
.nav-link{
text-decoration: none;
font-weight: 500;
font-size: 18px;
font-size: 17px;
line-height: 22px;
color: #2B2A29 !important;
}
@ -211,7 +211,7 @@ Responsive Codes
font-size: 14px;
transition: all 0.5s;
color: #fff;
padding: 0 6rem;
padding: 0.2rem 6rem;
}
.contact-info, .social-links {
display: flex;
@ -220,6 +220,11 @@ Responsive Codes
justify-content: center;
justify-items: center;
}
.contact-info-icons{
display: flex;
align-items: center;
gap: 8px;
}
.contact-info a{
color: #326CBF;
text-decoration: none;
@ -231,6 +236,15 @@ Responsive Codes
color: #000000;
margin-right: 6rem;
}
.top-socials{
display: flex;
align-items: center;
gap: 1.5rem;
color: #000000;
}
.top-socials a{
font-size: 24px;
}
.top-links a{
text-decoration: none;
font-weight: 400;
@ -240,7 +254,6 @@ Responsive Codes
}
.social-links .fa-brands{
color: #326CBF;
margin-bottom: 16px;
}
/* Header css */
/* banner slider css */
@ -378,29 +391,26 @@ Responsive Codes
line-height: 29px;
text-align: center;
color: #326CBF;
margin-bottom: 0;
}
.high-visa{
.high-visa,
.certified-counselor,
.marn-agent,
.partners{
height: 100%;
padding: 20px;
padding: 35px 20px;
text-align: center;
}
.high-visa{
background: #E7F1FF;
}
.certified-counselor{
height: 100%;
padding: 20px;
text-align: center;
background: #F1F7FF;
}
.marn-agent{
height: 100%;
padding: 20px;
text-align: center;
background: #FBF1FF;
}
.partners{
height: 100%;
padding: 20px;
text-align: center;
background: #FFF1FC;
}
/* homepage service section css */
@ -473,7 +483,7 @@ Responsive Codes
.services-slider{
display: flex !important;
flex-direction: column;
gap: 2rem;
gap: 0.5rem;
}
.service-card{
display: flex;
@ -482,7 +492,7 @@ Responsive Codes
align-items: center;
text-align: center;
padding: 20px;
width: 90%;
margin: 0.5rem 0.8rem;
min-height: 350px;
background: #FFFFFF;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
@ -516,6 +526,7 @@ Responsive Codes
.why-us-lists{
display: flex;
gap: 2rem;
margin-bottom: 1rem;
}
.why-us-desc h1,
.testimonials-desc h1,
@ -535,9 +546,20 @@ Responsive Codes
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 2.8rem;
color: #1E1C1C;
}
.lists-icons{
padding: 10px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
border-radius: 50%;
background: #296AC7;
}
.list-des h3{
font-weight: 500;
}
/* testimonials section css */
.testimonials-section{
padding: 2rem 6rem;
@ -577,7 +599,7 @@ Responsive Codes
gap: 20px;
}
.review-card{
min-height: 25pc;
min-height: 30pc;
margin: 0 10px;
padding: 20px;
gap: 20px;
@ -1496,9 +1518,6 @@ Responsive Codes
.footer-link:hover{
color: #E22899;
}
.fa-brands{
margin-top: 18px;
}
.fa-facebook:hover{
color: #4267B2;
}
@ -1545,6 +1564,7 @@ Responsive Codes
}
.footer-text p{
font-size: 12px;
margin-bottom: 0;
}
.footer-text a{
color: #FFFFFF;
@ -1612,7 +1632,10 @@ Responsive Codes
.blog-header h1,
.our-values-section h1,
.studyabroad-banner-header h1,
.contact-left-top h1{
.contact-left-top h1,
.about-banner-header h1,
.overseas-section h1,
.why-et-header h1{
font-size: 28px;
line-height: 38px;
margin-bottom: 0.8rem;
@ -1638,11 +1661,18 @@ Responsive Codes
.footer-top,
.our-values-section,
.lets-chat-section,
.blog-banner{
.blog-banner,
.overseas-section{
padding: 2rem;
}
.contact-form-section{
.contact-form-section,
.about-banner-header p,
.overseas-section p, .why-et-header p{
padding: 0;
}
.scholarship-img{
padding: 0;
margin-bottom: 1rem;
}
.contact-form,
.form-sec {
@ -1672,9 +1702,6 @@ Responsive Codes
padding: 0;
margin-bottom: 1rem;
}
.service-card{
width: 100%;
}
.footer-text,
.footer-links{
margin: 0 !important;
@ -1712,6 +1739,12 @@ Responsive Codes
.contact-offices h5{
font-size: 15px;
}
.why-us-lists{
gap: 1rem;
}
.lists-icons{
width: 80px;
}
}
/* mobile view css end */
/* ipad, tablets screen css */
@ -1747,12 +1780,16 @@ Responsive Codes
.slider-content h1{
margin-bottom: 1.6rem;
}
.slider-content p{
.slider-content p,
.overseas-img{
display: none;
}
.why-us-img,
.blog-header p,
.lets-chat-section p{
.lets-chat-section p,
.overseas-section p,
.why-et-header p,
.about-banner-header p{
padding: 0;
margin-bottom: 1rem;
}
@ -1778,12 +1815,10 @@ Responsive Codes
.footer-top,
.lets-chat-section,
.our-values-section,
.blog-banner{
.blog-banner,
.overseas-section{
padding: 3rem;
}
.service-card{
width: 100%;
}
.services-content h1,
.why-us-desc h1,
.testimonials-desc h1,
@ -1829,6 +1864,9 @@ Responsive Codes
.form-sec {
border-radius: 0;
}
.about-banner-img{
top: 80%;
}
}
/* ipad, tablets screen css ends */
/* Small screens, laptops css */
@ -1868,15 +1906,14 @@ Responsive Codes
.testimonials-section,
.footer-top,
.lets-chat-section,
.our-values-section{
.our-values-section,
.overseas-section{
padding: 3rem;
}
.why-us-section::before{
.why-us-section::before,
.overseas-img{
display: none;
}
.service-card{
width: 100%;
}
.services-content,
.testimonials-desc ,
.contact-offices {
@ -1905,6 +1942,13 @@ Responsive Codes
.contact-form .row .col-md-8{
width: 100%;
}
.overseas-section p,
.why-et-header p,
.about-banner-header p,
.lets-chat-section p{
padding: 0;
margin-bottom: 1rem;
}
}
/* Small screens, laptops css ends */
/* Desktops, large screens css */
@ -1936,3 +1980,16 @@ Responsive Codes
}
}
/* Extra large screens, TV css ends */
@media only screen and (min-width: 1201px) and (max-width: 1440px) {
.navbar-list{
gap: 1rem;
}
.review-card{
min-height: 37pc;
}
}
@media only screen and (min-width: 1440px) and (max-width: 1560px) {
.review-card{
min-height: 37pc;
}
}

BIN
public/frontend/icons/email.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 478 B

3
public/frontend/icons/email.svg
Unescape View File

@ -1,4 +1,3 @@
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="16" height="12" rx="2" fill="#7E869E" fill-opacity="0.25" stroke="#326CBF" stroke-width="1.2"/>
<path d="M8.10557 7.55279L1 4V11C1 12.1046 1.89543 13 3 13H15C16.1046 13 17 12.1046 17 11V4L9.89443 7.55279C9.33137 7.83431 8.66863 7.83431 8.10557 7.55279Z" fill="#326CBF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0132028 4.15129C-3.38676e-10 4.69022 0 5.30205 0 6V8C0 10.8284 0 12.2426 0.87868 13.1213C1.75736 14 3.17157 14 6 14H12C14.8284 14 16.2426 14 17.1213 13.1213C18 12.2426 18 10.8284 18 8V6C18 5.30205 18 4.69022 17.9868 4.15129L9.97129 8.60436C9.36724 8.93994 8.63276 8.93994 8.02871 8.60436L0.0132028 4.15129ZM0.242967 2.02971C0.325845 2.05052 0.407399 2.08237 0.485643 2.12584L9 6.85604L17.5144 2.12584C17.5926 2.08237 17.6742 2.05052 17.757 2.02971C17.6271 1.55619 17.4276 1.18491 17.1213 0.87868C16.2426 0 14.8284 0 12 0H6C3.17157 0 1.75736 0 0.87868 0.87868C0.572448 1.18491 0.372942 1.55619 0.242967 2.02971Z" fill="#296AC7"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 399 B

After

Width:  |  Height:  |  Size: 784 B

BIN
public/frontend/icons/phone.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 429 B

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

@ -105,9 +105,7 @@
</section>
<section class="lets-chat-section">
<h1>Let's Chat</h1>
<p>Thinking about starting a team? Need to augment your existing team?
We’re here to help. We work with US based companies to help them grow!
</p>
<p>Answers to every education & migration query.Talk to our Expert!</p>
<div class="text-center">
<a href="contact">Consult with us <i class="fa-solid fa-arrow-right fa-2xs ms-1"></i></a>
</div>

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

@ -184,12 +184,7 @@
return false;
}
else{
Swal.fire(
'Good job!',
'You clicked the button!',
'success'
)
// $('#contactModal').modal('show');
return true;
}
}

11
resources/views/layout/app.blade.php
Unescape View File

@ -46,16 +46,15 @@
<!-- Top section -->
<section id="topbar" class="d-flex justify-content-center justify-content-md-between align-items-center">
<div class="contact-info">
@if($email != '')
<div>
<img src="{{url('frontend/icons/email.svg')}}" class="img-fluid"/>
<div class="contact-info-icons">
<img src="{{url('frontend/icons/email.png')}}" class="img-fluid"/>
<span><a href="mailto:{{$email}}" class="text-decoration-none">{{$email}}</a></span></i>
</div>
@endif
@if($phone != '')
<div>
<img src="{{url('frontend/icons/phone.svg')}}" class="img-fluid"/>
<div class="contact-info-icons">
<img src="{{url('frontend/icons/phone.png')}}" class="img-fluid"/>
<span><a href="tel:{{$phone}}" class="text-decoration-none">{{$phone}}</a></span></i>
</div>
@endif
@ -64,6 +63,7 @@
<div class="top-links">
<a href="/login" target="_blank">login</a> | <a href="/signup" target="_blank">Signup</a>
</div>
<div class="top-socials">
<!-- <a href="#" class="twitter"><i class="bi bi-twitter"></i></a> -->
@if($facebook != '')
<a href="{{$facebook}}" target="_blank" class="facebook"><i class="fa-brands fa-facebook"></i></a>
@ -76,6 +76,7 @@
@endif
<!-- <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></i></a> -->
</div>
</div>
</section>
<!-- Top section -->
<!-- Header section -->

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

@ -173,20 +173,38 @@
<p>a remarkable number of Nepalese students from across the world, from diverse backgrounds, have achieved their international education goals successfully through us, the best Study Abroad Consultants in Nepal.</p>
<div class="why-us-lists">
<div class="lists-icons">
<img src="{{url('frontend/icons/bulb.png')}}" class="img-fluid" alt="">
<img src="{{url('frontend/icons/bulb.svg')}}" class="img-fluid" alt="">
</div>
<div class="list-des">
<h3>Countless opportunities</h3>
<p>Start your overseas education journey with the best overseas education consultant.</p>
<h3>Certified and Registered Counsellors</h3>
<p>To conduct your process in accordance with industry standards.</p>
</div>
</div>
<div class="why-us-lists">
<div class="lists-icons">
<img src="{{url('frontend/icons/brightness.png')}}" class="img-fluid" alt="">
<img src="{{url('frontend/icons/brightness.svg')}}" class="img-fluid" alt="">
</div>
<div class="list-des">
<h3>One Stop Solution</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<h3>Convenient Location and Affordable services</h3>
<p>To facilitate services conveniently and at reasonable amount.</p>
</div>
</div>
<div class="why-us-lists">
<div class="lists-icons">
<img src="{{url('frontend/icons/brightness.svg')}}" class="img-fluid" alt="">
</div>
<div class="list-des">
<h3>Most Trusted Migration Agent</h3>
<p>Reach our Facebook page and find the testimonials. You’d know it all.</p>
</div>
</div>
<div class="why-us-lists">
<div class="lists-icons">
<img src="{{url('frontend/icons/brightness.svg')}}" class="img-fluid" alt="">
</div>
<div class="list-des">
<h3>Assistance for wide ranging Courses and Visa</h3>
<p>To help you provide all the options available for your study or migration pathway.</p>
</div>
</div>
<div class="mt-4">

Write Preview
Loading…
Cancel
Save