[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;
color: #FFFFFF;
}
.abroad-banner-section .breadcrumb-item.active{
color: #FFFFFF;
}
.studyabroad-banner-header{
position: absolute;
margin-bottom: 0;
@ -895,6 +898,7 @@ Responsive Codes
.et-cards{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
margin-top: 4rem;
}
.et-card{
display: flex;
@ -915,13 +919,15 @@ Responsive Codes
}
.lets-chat-section{
background: #E8F2FF;
padding: 3rem 6rem;
padding: 6rem;
}
.lets-chat-section h1{
text-align: center;
}
.lets-chat-section p{
text-align: center;
padding: 0 30%;
line-height: 1.7rem;
margin-bottom: 35px;
}
.lets-chat-section a{
@ -933,6 +939,45 @@ Responsive Codes
border-radius: 6px;
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 */
.visa-table ul{
@ -1027,6 +1072,13 @@ Responsive Codes
line-height: 34px;
color: #296AC7;
}
.why-us-desc a{
color: #FFFFFF;
background: #296AC7;
text-decoration: none;
padding: 10px 20px;
border-radius: 25px;
}
/* Footer Css */
.footer{
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>
</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">
<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>
<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>
</section>
@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')
@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="robots" content="index, follow" />
<meta property="og:url" content="" />
@ -13,7 +13,7 @@
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<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>
</nav>
<div class="studyabroad-banner-header">
@ -79,4 +79,7 @@
</div>
</div>
</section>
<section class="blog-banner">
</section>
@endsection

@ -13,7 +13,7 @@
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<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>
</nav>
<div class="studyabroad-banner-header">

@ -13,7 +13,7 @@
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<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>
</nav>
<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>
</div>
</div>
<div class="mt-4">
<a href="">Learn More</a>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save