Compare commits
2 Commits
tufail-dev
...
a0034abfb1
| Author | SHA1 | Date | |
|---|---|---|---|
|
a0034abfb1 | ||
|
|
6f578d1162 |
27
assests/images/ask-adv-card-bg.svg
Normal file
27
assests/images/ask-adv-card-bg.svg
Normal file
@@ -0,0 +1,27 @@
|
||||
<svg width="268" height="355" viewBox="0 0 268 355" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_213_910)">
|
||||
<rect width="268" height="356" transform="translate(0 -0.985596)" fill="#004A5D"/>
|
||||
<path d="M-27.5364 305.791L-413.859 -68.6042H391.279L390.626 218.921L-28.1892 719.963L-27.5364 305.791Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M368.46 210.835L-11.1865 664.783L-10.6227 290.119L-359.557 -48.0422H369.053L368.46 210.835Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M346.295 202.711L5.78801 609.606L6.32216 274.448L-305.282 -27.5168H346.829L346.295 202.711Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M324.129 194.622L22.7918 554.424L23.2369 258.774L-250.979 -6.95728H324.574L324.129 194.622Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M301.962 186.5L39.7649 499.247L40.1506 243.104L-196.676 13.6077H302.348L301.962 186.5Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M279.797 178.374L56.7686 444.105L57.095 227.431L-142.372 34.1301H280.123L279.797 178.374Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M257.599 170.288L73.7402 388.926L74.0073 211.759L-88.1006 54.6921H257.866L257.599 170.288Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M235.432 162.163L90.743 333.746L90.921 196.086L-33.7979 75.2542H235.64L235.432 162.163Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M213.267 154.075L107.717 278.566L107.836 180.452L20.5059 95.7771H213.415L213.267 154.075Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M191.1 145.953L124.69 223.389L124.779 164.783L74.8086 116.342H191.159L191.1 145.953Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M141.692 168.245V149.108L129.081 136.901H168.933V137.825L141.692 168.245Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<rect x="-306.667" y="-103.544" width="575.029" height="693.926" fill="url(#paint0_linear_213_910)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_213_910" x1="0.999762" y1="378.015" x2="367.062" y2="192.736" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#004A5D"/>
|
||||
<stop offset="0.489094" stop-color="#004A5D" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#004A5D" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_213_910">
|
||||
<rect width="268" height="356" fill="white" transform="translate(0 -0.985596)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -1,15 +1,20 @@
|
||||
|
||||
<nav class="navbar navbar-expand-lg ">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="mobile-adj">
|
||||
<a class="navbar-brand d-flex align-items-center" href="">
|
||||
<img src="./assests/images/ask-mutual-fund-logo.svg" alt="My Logo" height="40">
|
||||
<img
|
||||
src="./assests/images/ask-mutual-fund-logo.svg"
|
||||
alt="My Logo"
|
||||
height="40"
|
||||
/>
|
||||
</a>
|
||||
<!-- Toggle Button -->
|
||||
<button class="navbar-toggler" type="button">
|
||||
<span class="open-icon">☰</span> <!-- hamburger -->
|
||||
<span class="close-icon d-none">×</span> <!-- close icon -->
|
||||
<span class="open-icon">☰</span>
|
||||
<!-- hamburger -->
|
||||
<span class="close-icon d-none">×</span>
|
||||
<!-- close icon -->
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -17,11 +22,19 @@
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<div class="d-flex w-100 justify-content-between align-items-center">
|
||||
<!-- Center Links -->
|
||||
<ul class="navbar-nav gap-menu text-center">
|
||||
<li class="nav-item"><a class="nav-link" href="#/our-fund">Our Fund</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#/our-team">Our Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#/about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#/contact">Contact</a></li>
|
||||
<ul class="navbar-nav gap-menu mx-auto text-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#/our-fund">Our Fund</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#/our-team">Our Team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#/about">About Us</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#/contact">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Right Buttons -->
|
||||
@@ -35,37 +48,45 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="topbar-mobile ">
|
||||
<div class="topbar-mobile">
|
||||
<div class="mobile-call">
|
||||
|
||||
<a href="tel:(+91) 93256 07030" class="color-b">
|
||||
<i class="bi bi-telephone " style="width: 20px; height: 20px; color: #B18C4A;"></i> (+91) 93256 07030
|
||||
<i
|
||||
class="bi bi-telephone"
|
||||
style="width: 20px; height: 20px; color: #b18c4a"
|
||||
></i>
|
||||
(+91) 93256 07030
|
||||
</a>
|
||||
<a href="mailto:askdb@gmail.com" class="color-b">
|
||||
<i class="bi bi-envelope" style="width: 20px; height: 20px; color: #B18C4A;"></i> askdb@gmail.com
|
||||
<i
|
||||
class="bi bi-envelope"
|
||||
style="width: 20px; height: 20px; color: #b18c4a"
|
||||
></i>
|
||||
askdb@gmail.com
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="topbar py-2 ">
|
||||
<div class="topbar py-2">
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<a href="tel:(+91) 93256 07030" class="color-a">
|
||||
<i class="bi bi-telephone me-2" style="width: 16px; height: 16px;"></i> (+91) 93256 07030
|
||||
<i class="bi bi-telephone me-2" style="width: 16px; height: 16px"></i>
|
||||
(+91) 93256 07030
|
||||
</a>
|
||||
<a href="mailto:askdb@gmail.com" class="color-a">
|
||||
<i class="bi bi-envelope ms-3 me-1" style="width: 16px; height: 16px;"></i> askdb@gmail.com
|
||||
<i
|
||||
class="bi bi-envelope ms-3 me-1"
|
||||
style="width: 16px; height: 16px"
|
||||
></i>
|
||||
askdb@gmail.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="./js/navbar.js"></script>
|
||||
<script src="./js/navbar.js"></script>
|
||||
|
||||
356
css/contact.css
356
css/contact.css
@@ -1,11 +1,11 @@
|
||||
/* Base setup */
|
||||
:root {
|
||||
--font-primary: 'Open Sans', sans-serif;
|
||||
/* default body font */
|
||||
--font-secondary: 'Larken', serif;
|
||||
/* decorative font */
|
||||
--font-tertiary: 'Inter', sans-serif;
|
||||
/* for headings or special text */
|
||||
--font-primary: "Open Sans", sans-serif;
|
||||
/* default body font */
|
||||
--font-secondary: "Larken", serif;
|
||||
/* decorative font */
|
||||
--font-tertiary: "Inter", sans-serif;
|
||||
/* for headings or special text */
|
||||
}
|
||||
|
||||
.contact-banner {
|
||||
@@ -16,8 +16,12 @@
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
/* .contact-banner .container{
|
||||
padding: 60px 0 72px 0;
|
||||
} */
|
||||
|
||||
.contac-back-color {
|
||||
background: #F5F5F5;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.contact-aling {
|
||||
@@ -30,50 +34,50 @@
|
||||
}
|
||||
|
||||
.contact-tittle-banner {
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 50px;
|
||||
line-height: 60px;
|
||||
color: #fff;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 50px;
|
||||
line-height: 60px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
p.contact-text-banner {
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.invest-contact {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 280px;
|
||||
justify-content: center;
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 280px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invest-contact a {
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.map-section .button-to {
|
||||
margin-top: 35px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.view-top {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.contact-cards {
|
||||
@@ -98,122 +102,122 @@ p.contact-text-banner {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact-card h4 {
|
||||
color: #033A49;
|
||||
margin-bottom: 15px;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
color: #033a49;
|
||||
margin-bottom: 15px;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.contact-card p:first-child {
|
||||
font-size: 21px;
|
||||
}
|
||||
.contact-card p {
|
||||
color: #3E3F3F;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
color: #3e3f3f;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
flex: 1 1 55%;
|
||||
|
||||
overflow: hidden;
|
||||
flex: 1 1 55%;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-container iframe {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
flex: 1 1 40%;
|
||||
flex: 1 1 40%;
|
||||
}
|
||||
|
||||
.location-info h3 {
|
||||
color: #033A49;
|
||||
margin-bottom: 20px;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
color: #033a49;
|
||||
margin-bottom: 20px;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.location-info strong {
|
||||
color: #B18C4B;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 0.5px;
|
||||
color: #b18c4b;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.location-info p {
|
||||
color: #3E3F3F;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 0.5px;
|
||||
color: #3e3f3f;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.invest-contact2 {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 220px;
|
||||
justify-content: center;
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 220px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invest-contact2 a {
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.View {
|
||||
text-transform: uppercase;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.view-arrow {
|
||||
height: 11px !important;
|
||||
width: 17px !important;
|
||||
height: 11px !important;
|
||||
width: 17px !important;
|
||||
}
|
||||
|
||||
.location-info.none-desktop {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.hide-details-conne-mobile {
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contact-cards {
|
||||
flex-direction: column;
|
||||
}
|
||||
.contact-cards {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
flex-direction: column;
|
||||
@@ -226,95 +230,85 @@ p.contact-text-banner {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.location-info.none-desktop {
|
||||
display: block;
|
||||
}
|
||||
.location-info.none-desktop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contact-banner {
|
||||
background-image: url("../assests/images/mobile-contact.svg");
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.contact-banner {
|
||||
background-image: url("../assests/images/mobile-contact.svg");
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.invest-contact {
|
||||
.invest-contact {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
width: 95%;
|
||||
.contact-card h4 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
}
|
||||
p.size-mobile {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.contact-card h4 {
|
||||
.location-info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
font-size: 21px;
|
||||
.map-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.invest-contact2 {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 20px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
p.size-mobile {
|
||||
font-size: 14px;
|
||||
}
|
||||
.invest-contact {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 20px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 95% !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
.location-info p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
.view-top {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
h3.none-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
.map-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.invest-contact2 {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 20px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invest-contact {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 20px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 95% !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.location-info p {
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.view-top {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3.none-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hide-details-conne-dest {
|
||||
display: none;
|
||||
}
|
||||
.hide-details-conne-mobile {
|
||||
display: flex
|
||||
;
|
||||
.hide-details-conne-dest {
|
||||
display: none;
|
||||
}
|
||||
.hide-details-conne-mobile {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.contact-banner {
|
||||
@@ -325,4 +319,4 @@ p.contact-text-banner {
|
||||
padding: 0px 20px;
|
||||
height: 70vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
246
css/style.css
246
css/style.css
@@ -19,7 +19,7 @@ a {
|
||||
}
|
||||
|
||||
a.nav-link:hover {
|
||||
color: #b58b4b;
|
||||
color: #b58b4b;
|
||||
}
|
||||
/* Logo styling */
|
||||
.navbar-brand img {
|
||||
@@ -47,7 +47,7 @@ a.nav-link:hover {
|
||||
|
||||
.nav-link:focus,
|
||||
.nav-link:hover {
|
||||
color: #fff;
|
||||
color: #b58b4b;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
@@ -146,10 +146,10 @@ span.banner-desc {
|
||||
color: #fff;
|
||||
}
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leftslider-line {
|
||||
@@ -162,25 +162,23 @@ span.banner-desc {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.right-border {
|
||||
border-left: 2px solid #b58b4b;
|
||||
padding-left: 20px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-left: 2px solid #b58b4b;
|
||||
padding-left: 20px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.right-new
|
||||
|
||||
{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.right-new {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invest-btn:hover {
|
||||
@@ -361,7 +359,6 @@ a.color-a {
|
||||
|
||||
/* home */
|
||||
.Slider-back {
|
||||
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
@@ -370,10 +367,8 @@ a.color-a {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.carousel-indicators [data-bs-target] {
|
||||
box-sizing: content-box;
|
||||
flex: 0 1 auto;
|
||||
@@ -452,7 +447,6 @@ a.color-a {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
.advantage-box {
|
||||
border-top: 2.4px solid #b18c4a;
|
||||
padding-top: 45px;
|
||||
@@ -461,14 +455,15 @@ a.color-a {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
gap: 20px;
|
||||
display: flex
|
||||
;
|
||||
flex-direction: column;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.advantage-box:hover {
|
||||
background-color: #004a5d;
|
||||
background-image: url("../assests/images/ask-adv-card-bg.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 90% 0%;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
border-top: 0px solid #b18c4a;
|
||||
transform: translateY(2px);
|
||||
@@ -521,7 +516,6 @@ a.color-a {
|
||||
letter-spacing: 0%;
|
||||
vertical-align: middle;
|
||||
color: #3e3f3f;
|
||||
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
@@ -654,14 +648,14 @@ span.banner-desc2 {
|
||||
}
|
||||
|
||||
.ask-advantage-blog {
|
||||
padding: 80px 0px;
|
||||
padding: 80px 0px;
|
||||
}
|
||||
.ask-advantage-blog2 {
|
||||
padding: 0px 0px 80px 0px;
|
||||
padding: 0px 0px 80px 0px;
|
||||
}
|
||||
.img-fluid {
|
||||
width: 100% !important;
|
||||
height: auto;
|
||||
width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tittle-blog {
|
||||
@@ -765,25 +759,28 @@ span.textaccor {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.accordion-button {
|
||||
padding: 24px 0px;
|
||||
padding: 24px 0px;
|
||||
}
|
||||
.accordion-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.col-6:hover {
|
||||
background-color: rgba(155, 155, 155, 0.26);
|
||||
border-radius: 10px;
|
||||
}
|
||||
/* out-team */
|
||||
.team-section {
|
||||
padding: 80px 0 30px 0;
|
||||
background-color: #F6F6F6;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.team-spac {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 50px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
|
||||
.team-section h2 {
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
@@ -801,8 +798,8 @@ padding: 24px 0px;
|
||||
color: #004a5d !important;
|
||||
}
|
||||
.team-img {
|
||||
width: 362px;
|
||||
height: 340px;
|
||||
width: 362px;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
@@ -869,6 +866,10 @@ padding: 24px 0px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* .g-80 {
|
||||
gap: 80px;
|
||||
} */
|
||||
|
||||
.team-card {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
@@ -1038,65 +1039,60 @@ padding: 24px 0px;
|
||||
}
|
||||
|
||||
.descktop-marging-new {
|
||||
margin-left: 30px;
|
||||
gap: 50px;
|
||||
margin-left: 30px;
|
||||
gap: 50px;
|
||||
}
|
||||
.padding-icon {
|
||||
width: 20%;
|
||||
padding: 30px 25px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 30px 25px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon1 {
|
||||
width: 20%;
|
||||
padding: 30px 24px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 30px 24px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon1:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon2 {
|
||||
width: 20%;
|
||||
padding: 30px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 30px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon2:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.padding-icon3 {
|
||||
width: 20%;
|
||||
padding: 30px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 30px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon3:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon4 {
|
||||
width: 20%;
|
||||
padding: 30px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 30px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon4:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.gy-4 {
|
||||
--bs-gutter-y: 2.5rem;
|
||||
@@ -1312,7 +1308,7 @@ padding: 24px 0px;
|
||||
|
||||
.history_animation {
|
||||
background: #131313;
|
||||
padding: 60px 0;
|
||||
padding: 60px 0 140px 0;
|
||||
}
|
||||
|
||||
.history_animation .container .title {
|
||||
@@ -1582,6 +1578,7 @@ padding: 24px 0px;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
margin-right: 32px;
|
||||
width: 55%;
|
||||
@@ -1590,9 +1587,20 @@ padding: 24px 0px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-content .tittle-blog {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .gap-menu {
|
||||
.blog-content .desc-blog {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.blog-card .tittle-blog {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-expand-lg .gap-menu {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 25px 25px 12px 25px;
|
||||
@@ -1628,25 +1636,24 @@ padding: 24px 0px;
|
||||
}
|
||||
|
||||
.Slider-back {
|
||||
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.leftslider-line {
|
||||
/* border-left: 2px solid #b18c4a; */
|
||||
padding-left: 20px;
|
||||
/* border-left: 2px solid #b18c4a; */
|
||||
padding-left: 20px;
|
||||
|
||||
margin-bottom: 20px;
|
||||
background-image: url("../assests/images/mobile-banner.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
margin-bottom: 20px;
|
||||
background-image: url("../assests/images/mobile-banner.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
span.banner-tittle {
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
@@ -1731,11 +1738,11 @@ padding: 24px 0px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.ask-advantage h2 {
|
||||
.ask-advantage h2 {
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
|
||||
.ask-advantage p.lead {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
@@ -1761,12 +1768,12 @@ padding: 24px 0px;
|
||||
}
|
||||
.arrang-back {
|
||||
background: #fff;
|
||||
}
|
||||
.d-block {
|
||||
}
|
||||
.d-block {
|
||||
display: block !important;
|
||||
overflow: hidden;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.advantage-card::before {
|
||||
content: "";
|
||||
@@ -1859,12 +1866,11 @@ padding: 24px 0px;
|
||||
padding-left: 13px;
|
||||
padding-right: 13px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.team-section h2 {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
|
||||
}
|
||||
|
||||
.team-info {
|
||||
@@ -1872,12 +1878,12 @@ padding: 24px 0px;
|
||||
display: inline-grid;
|
||||
align-content: space-around;
|
||||
height: 100%;
|
||||
gap: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
.team-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.team-info h5 {
|
||||
font-size: 14px;
|
||||
@@ -1937,11 +1943,10 @@ padding: 24px 0px;
|
||||
|
||||
.descktop {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
}
|
||||
.mobile {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.padding-icon {
|
||||
padding: 30px 15px;
|
||||
@@ -2078,7 +2083,7 @@ padding: 24px 0px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile about-page */
|
||||
.hero_banner {
|
||||
@@ -2176,8 +2181,6 @@ padding: 24px 0px;
|
||||
|
||||
.about-as-of-date {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
/* border: 1px solid black; */
|
||||
}
|
||||
.history_animation {
|
||||
width: 100%;
|
||||
@@ -2431,20 +2434,19 @@ padding: 24px 0px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
.ask-advantage {
|
||||
padding: 60px 25px !important;
|
||||
}
|
||||
|
||||
.ask-advantage-home {
|
||||
.ask-advantage-home {
|
||||
padding: 40px 0px 40px 25px !important;
|
||||
}
|
||||
.ask-advantage-blog {
|
||||
padding: 60px 25px !important;
|
||||
}
|
||||
.ask-advantage-blog2 {
|
||||
}
|
||||
.ask-advantage-blog2 {
|
||||
padding: 0px 0px 60px 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
padding: 40px 25px !important;
|
||||
|
||||
107
js/main.js
107
js/main.js
@@ -36,64 +36,64 @@ const routes = {
|
||||
// ===============================
|
||||
const timelineData = {
|
||||
1983: {
|
||||
icon: "../assests/images/1983-Icon.svg",
|
||||
icon: "./assests/images/1983-Icon.svg",
|
||||
heading: "The beginning",
|
||||
sub1: "Set up by Mr. Asit Koticha and Mr. Sameer Koticha,",
|
||||
sub2: "ASK Group offers research-based Investment advisory",
|
||||
sub3: "",
|
||||
},
|
||||
1991: {
|
||||
icon: "../assests/images/1991-Icon.svg",
|
||||
icon: "./assests/images/1991-Icon.svg",
|
||||
heading: "ASK Raymond James",
|
||||
sub1: "ASK Group and Raymond James",
|
||||
sub2: "Financial enter into a Partnership",
|
||||
sub3: "",
|
||||
},
|
||||
2007: {
|
||||
icon: "../assests/images/2007-Icon.svg",
|
||||
icon: "./assests/images/2007-Icon.svg",
|
||||
heading: "Launch of ASK Wealth Advisors",
|
||||
sub1: "Raymond James Financial partnership exits.",
|
||||
sub2: "",
|
||||
sub3: "",
|
||||
},
|
||||
2008: {
|
||||
icon: "../assests/images/2008-Icon.svg",
|
||||
icon: "./assests/images/2008-Icon.svg",
|
||||
heading: "Launch of ASK multi-family office",
|
||||
sub1: "",
|
||||
sub2: "",
|
||||
sub3: "",
|
||||
},
|
||||
2013: {
|
||||
icon: "../assests/images/2013-Icon.svg",
|
||||
icon: "./assests/images/2013-Icon.svg",
|
||||
heading: "License from SEBI",
|
||||
sub1: "ASK Wealth Advisors receives an",
|
||||
sub2: "Investment Advisor License from SEBI.",
|
||||
sub3: "",
|
||||
},
|
||||
2015: {
|
||||
icon: "../assests/images/2015-Icon.svg",
|
||||
icon: "./assests/images/2015-Icon.svg",
|
||||
heading: "ASK Wealth Advisors adjudged",
|
||||
sub1: ` "the best Independent Wealth Advisor, 2015" `,
|
||||
sub2: "by Wealth Briefing, Asia.",
|
||||
sub3: "",
|
||||
},
|
||||
2016: {
|
||||
icon: "../assests/images/2016-Icon.svg",
|
||||
mobileIcon: "../assests/images/2016-Mobile-Icon.svg",
|
||||
icon: "./assests/images/2016-Icon.svg",
|
||||
mobileIcon: "./assests/images/2016-Mobile-Icon.svg",
|
||||
heading: "",
|
||||
sub1: "Advert International acquires minority ",
|
||||
sub2: "stake in ASK Group.",
|
||||
sub3: "",
|
||||
},
|
||||
2017: {
|
||||
icon: "../assests/images/2015-Icon.svg",
|
||||
icon: "./assests/images/2015-Icon.svg",
|
||||
heading: "ASK Wealth Advisors adjudged",
|
||||
sub1: `"One to Watch - Wealth Manager - India Domestic" - Distinction, 2017"`,
|
||||
sub2: "by Asian Private Banker.",
|
||||
sub3: "",
|
||||
},
|
||||
2018: {
|
||||
icon: "../assests/images/2015-Icon.svg",
|
||||
icon: "./assests/images/2015-Icon.svg",
|
||||
heading:
|
||||
"ASK launches its first offshore fund - ASK Global Strategies Fund",
|
||||
sub1: "TWICE IN A ROW:",
|
||||
@@ -101,21 +101,21 @@ const timelineData = {
|
||||
sub3: `"Best Performing Financial Advisor"-Wealth 2016-17 by UTI MF & CNBC TV18.`,
|
||||
},
|
||||
2019: {
|
||||
icon: "../assests/images/1983-Icon.svg",
|
||||
icon: "./assests/images/1983-Icon.svg",
|
||||
heading: "Hall of Fame",
|
||||
sub1: `ASK Wealth Advisors inducted into the "Hall of Fame"`,
|
||||
sub2: "at the Financial Advisor Awards for the Years ",
|
||||
sub3: "2018-19 and 2019-20 by UTI MF & CNBC TV18.",
|
||||
},
|
||||
2020: {
|
||||
icon: "../assests/images/2015-Icon.svg",
|
||||
icon: "./assests/images/2015-Icon.svg",
|
||||
heading: "Outstanding Private Bank",
|
||||
sub1: "Outstanding Private Bank for UNHW clients ",
|
||||
sub2: "at the Private Banker International Global",
|
||||
sub3: "Wealth Summit & Awards 2020, Singapore.",
|
||||
},
|
||||
2022: {
|
||||
icon: "../assests/images/2022-Icon.svg",
|
||||
icon: "./assests/images/2022-Icon.svg",
|
||||
heading: "Blackstone Acquisition",
|
||||
sub1: "Blackstone acquires majority stake in ",
|
||||
sub2: "ASK Group, Advert International exits.",
|
||||
@@ -338,19 +338,22 @@ function initGsapStackScroll() {
|
||||
cards = Array.from(section.querySelectorAll(".card-scroll"));
|
||||
if (!cards.length) return;
|
||||
|
||||
// Hide all cards initially, show the first one
|
||||
// Initial setup
|
||||
gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
|
||||
gsap.set(cards[0], { opacity: 1, y: "0px", zIndex: 4 });
|
||||
gsap.set(cards[0], { opacity: 1, y: "60px", zIndex: 5 });
|
||||
currentIndex = 0;
|
||||
|
||||
// Section hover control
|
||||
section.addEventListener("mouseenter", () => (isInsideSection = true));
|
||||
section.addEventListener("mouseleave", () => (isInsideSection = false));
|
||||
|
||||
// Remove previous wheel listener if any
|
||||
window.removeEventListener("wheel", window._gsapStackHandler);
|
||||
|
||||
// Add new wheel scroll handler
|
||||
window._gsapStackHandler = function (e) {
|
||||
if (!isInsideSection) return;
|
||||
if (!isInsideSection || animating) return;
|
||||
e.preventDefault();
|
||||
if (animating) return;
|
||||
|
||||
if (e.deltaY > 0) {
|
||||
showNextGsapCard();
|
||||
@@ -364,6 +367,7 @@ function initGsapStackScroll() {
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ Show next card
|
||||
function showNextGsapCard() {
|
||||
if (currentIndex >= cards.length - 1) return;
|
||||
animating = true;
|
||||
@@ -371,37 +375,36 @@ function showNextGsapCard() {
|
||||
const current = cards[currentIndex];
|
||||
const next = cards[currentIndex + 1];
|
||||
|
||||
// Animate current card (move it to previous stack position)
|
||||
// Animate current slightly up/back
|
||||
gsap.to(current, {
|
||||
y: "40px",
|
||||
scale: 0.95,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => current.classList.add("previous"),
|
||||
});
|
||||
|
||||
// Animate next card (slide in from below and become active)
|
||||
gsap.set(next, { zIndex: 5 }); // Active card gets highest z-index
|
||||
// Animate next card into view
|
||||
gsap.set(next, { zIndex: 5 });
|
||||
gsap.fromTo(
|
||||
next,
|
||||
{ y: "100%", opacity: 0, scale: 1 },
|
||||
{
|
||||
y: "60px", // Active card position
|
||||
y: "60px",
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => {
|
||||
adjustPreviousCards();
|
||||
currentIndex++;
|
||||
adjustVisibleCards();
|
||||
animating = false;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
currentIndex++;
|
||||
}
|
||||
|
||||
// ✅ Show previous card
|
||||
function showPrevGsapCard() {
|
||||
if (currentIndex <= 0) return;
|
||||
animating = true;
|
||||
@@ -409,38 +412,36 @@ function showPrevGsapCard() {
|
||||
const current = cards[currentIndex];
|
||||
const prev = cards[currentIndex - 1];
|
||||
|
||||
// Hide current card (slide it down)
|
||||
// Hide current card (slide down)
|
||||
gsap.to(current, {
|
||||
y: "100%",
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => current.classList.remove("previous"),
|
||||
});
|
||||
|
||||
// Bring back previous card as active
|
||||
gsap.set(prev, { zIndex: 5 }); // Active card gets highest z-index
|
||||
// Bring previous card back as active
|
||||
gsap.set(prev, { zIndex: 5 });
|
||||
gsap.to(prev, {
|
||||
y: "60px", // Active card position
|
||||
y: "60px",
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => {
|
||||
adjustPreviousCards();
|
||||
currentIndex--;
|
||||
adjustVisibleCards();
|
||||
animating = false;
|
||||
},
|
||||
});
|
||||
|
||||
currentIndex--;
|
||||
}
|
||||
|
||||
// 🪄 Adjust visible cards (up to 4-layer stack including active card)
|
||||
function adjustPreviousCards() {
|
||||
// Reset all cards to default state
|
||||
// ✅ Maintain only 3 visible cards in stack
|
||||
function adjustVisibleCards() {
|
||||
// Reset all first
|
||||
gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
|
||||
|
||||
// Always show the current active card
|
||||
// Active card
|
||||
if (cards[currentIndex]) {
|
||||
gsap.set(cards[currentIndex], {
|
||||
y: "60px",
|
||||
@@ -450,13 +451,13 @@ function adjustPreviousCards() {
|
||||
});
|
||||
}
|
||||
|
||||
// Show up to 3 previous cards in the stack
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
// Show only 2 previous cards (total 3 visible)
|
||||
for (let i = 1; i <= 2; i++) {
|
||||
const prevIndex = currentIndex - i;
|
||||
if (prevIndex >= 0) {
|
||||
const yOffset = 60 - i * 30; // 60px, 40px, 20px, 0px
|
||||
const scale = 1 - i * 0.05; // 1, 0.95, 0.9, 0.85
|
||||
const zIndex = 5 - i; // 5, 4, 3, 2
|
||||
const yOffset = 60 - i * 25; // e.g., 60px, 35px
|
||||
const scale = 1 - i * 0.05; // e.g., 1, 0.95, 0.9
|
||||
const zIndex = 5 - i;
|
||||
|
||||
gsap.set(cards[prevIndex], {
|
||||
y: `${yOffset}px`,
|
||||
@@ -466,8 +467,20 @@ function adjustPreviousCards() {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Hide any card older than the last 3 visible
|
||||
const hideIndex = currentIndex - 3;
|
||||
if (hideIndex >= 0 && cards[hideIndex]) {
|
||||
gsap.to(cards[hideIndex], {
|
||||
opacity: 0,
|
||||
y: "100%",
|
||||
duration: 0.6,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize after DOM load
|
||||
document.addEventListener("DOMContentLoaded", initGsapStackScroll);
|
||||
|
||||
// ===============================
|
||||
@@ -483,6 +496,16 @@ function loadPage() {
|
||||
document.getElementById("page-content").innerHTML = html;
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
|
||||
// ✅ Hide footer for #/our-fund route
|
||||
const footer = document.getElementById("footer");
|
||||
if (footer) {
|
||||
if (hash === "#/our-fund") {
|
||||
footer.style.display = "none";
|
||||
} else {
|
||||
footer.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
// Init all components after content load
|
||||
initSwiper();
|
||||
initTimelineSwiper();
|
||||
|
||||
Reference in New Issue
Block a user