[add] image change on click

et#4
tribikram 2 years ago
parent 4f9efa097a
commit 0f4e3eadcb
  1. 54
      public/frontend/css/style.css
  2. BIN
      public/frontend/images/attractive-man.png
  3. BIN
      public/frontend/images/our-values-background.png
  4. 55
      resources/views/about.blade.php
  5. 7
      resources/views/blogs.blade.php
  6. 2
      resources/views/study-abroad.blade.php
  7. 2
      resources/views/visa.blade.php
  8. 3
      resources/views/welcome.blade.php

@ -620,6 +620,9 @@ Responsive Codes
text-decoration: none; text-decoration: none;
color: #FFFFFF; color: #FFFFFF;
} }
.abroad-banner-section .breadcrumb-item.active{
color: #FFFFFF;
}
.studyabroad-banner-header{ .studyabroad-banner-header{
position: absolute; position: absolute;
margin-bottom: 0; margin-bottom: 0;
@ -895,6 +898,7 @@ Responsive Codes
.et-cards{ .et-cards{
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
margin-top: 4rem;
} }
.et-card{ .et-card{
display: flex; display: flex;
@ -915,13 +919,15 @@ Responsive Codes
} }
.lets-chat-section{ .lets-chat-section{
background: #E8F2FF; background: #E8F2FF;
padding: 3rem 6rem; padding: 6rem;
} }
.lets-chat-section h1{ .lets-chat-section h1{
text-align: center; text-align: center;
} }
.lets-chat-section p{ .lets-chat-section p{
text-align: center; text-align: center;
padding: 0 30%;
line-height: 1.7rem;
margin-bottom: 35px; margin-bottom: 35px;
} }
.lets-chat-section a{ .lets-chat-section a{
@ -933,6 +939,45 @@ Responsive Codes
border-radius: 6px; border-radius: 6px;
padding: 10px 40px; padding: 10px 40px;
} }
.our-values-section{
padding: 3rem 6rem;
background: url('../images/our-values-background.png');
background-repeat: no-repeat;
background-size: cover;
}
.our-values-section h1{
text-align: center;
color: #326CBF;
margin-bottom: 45px;
}
.values-left p{
color: #000000;
margin-bottom: 35px;
}
.values-lists a{
text-decoration: none;
cursor: pointer;
padding: 20px 20px 20px 0;
line-height: 33px;
border-bottom: 1px solid #A0A0A0;
}
.values-lists h2{
color: #296AC7;
font-weight: 500;
font-size: 22px;
}
.values-lists a:last-child{
border-bottom: none;
}
.values-lists{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.link-active h2{
color: #E22899 !important;
}
/* about us css ends */ /* about us css ends */
.visa-table ul{ .visa-table ul{
@ -1027,6 +1072,13 @@ Responsive Codes
line-height: 34px; line-height: 34px;
color: #296AC7; color: #296AC7;
} }
.why-us-desc a{
color: #FFFFFF;
background: #296AC7;
text-decoration: none;
padding: 10px 20px;
border-radius: 25px;
}
/* Footer Css */ /* Footer Css */
.footer{ .footer{
background: #296AC7; background: #296AC7;

Binary file not shown.

After

Width:  |  Height:  |  Size: 412 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

@ -76,13 +76,66 @@
</div> </div>
</div> </div>
</section> </section>
<section class="our-values-section">
<h1>We are our values</h1>
<div class="row gx-5">
<div class="col-md-6">
<div class="values-left">
<p>We are passionate about creating a calm, inspiring work environment that attracts very
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="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="values-lists">
<a onclick="changeImg('{{url('frontend/images/attractive-man.png')}}','{{1}}')" id="values-link{{1}}" class="link-active">
<h2>Committed</h2>
</a>
<a onclick="changeImg('','{{2}}')" id="values-link{{2}}">
<h2>Develop relationship & Deliver Results</h2>
</a>
<a onclick="changeImg('','{{3}}')" id="values-link{{3}}">
<h2>Committed</h2>
</a>
<a onclick="changeImg('','{{4}}')" id="values-link{{4}}">
<h2>Develop relationship & Deliver Results</h2>
</a>
<a onclick="changeImg('','{{5}}')" id="values-link{{5}}">
<h2>Committed</h2>
</a>
<a onclick="changeImg('{{url('frontend/images/attractive-man.png')}}','{{6}}')" id="values-link{{6}}">
<h2>Develop relationship & Deliver Results</h2>
</a>
</div>
</div>
</div>
</section>
<section class="lets-chat-section"> <section class="lets-chat-section">
<h1>Let's Chat</h1> <h1>Let's Chat</h1>
<p>Thinking about starting a team? Need to augment your existing team? <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! 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</a> <a href="">Consult with us <i class="fa-solid fa-arrow-right fa-2xs ms-1"></i></a>
</div> </div>
</section> </section>
@endsection @endsection
@section('script')
<script>
function changeImg(img, id){
if ($('.link-active').length > 0) {
pre_id = $('.link-active')[0]['id'];
myId = document.getElementById(pre_id);
myId.classList.remove("link-active");
}
var link = document.getElementById("values-link"+ id);
link.classList.add("link-active")
var image = document.getElementById('values-img');
image.src=img
}
</script>
@endsection

@ -1,6 +1,6 @@
@extends('layout.app') @extends('layout.app')
@section('title') @section('title')
<title>About Us</title> <title>Blogs</title>
<meta name="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 name="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 name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<meta property="og:url" content="" /> <meta property="og:url" content="" />
@ -13,7 +13,7 @@
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li> <li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">name</li> <li class="breadcrumb-item active" aria-current="page">Blogs</li>
</ol> </ol>
</nav> </nav>
<div class="studyabroad-banner-header"> <div class="studyabroad-banner-header">
@ -79,4 +79,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="blog-banner">
</section>
@endsection @endsection

@ -13,7 +13,7 @@
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li> <li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">name</li> <li class="breadcrumb-item active" aria-current="page">Study Abroad</li>
</ol> </ol>
</nav> </nav>
<div class="studyabroad-banner-header"> <div class="studyabroad-banner-header">

@ -13,7 +13,7 @@
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li> <li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">name</li> <li class="breadcrumb-item active" aria-current="page">Visa</li>
</ol> </ol>
</nav> </nav>
<div class="studyabroad-banner-header"> <div class="studyabroad-banner-header">

@ -157,6 +157,9 @@
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
</div> </div>
</div> </div>
<div class="mt-4">
<a href="">Learn More</a>
</div>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save