diff --git a/assests/images/1983-Icon.png b/assests/images/1983-Icon.png new file mode 100644 index 0000000..f5c795a Binary files /dev/null and b/assests/images/1983-Icon.png differ diff --git a/assests/images/1991-Icon.png b/assests/images/1991-Icon.png new file mode 100644 index 0000000..29ad184 Binary files /dev/null and b/assests/images/1991-Icon.png differ diff --git a/assests/images/2007-Icon.png b/assests/images/2007-Icon.png new file mode 100644 index 0000000..7c294ef Binary files /dev/null and b/assests/images/2007-Icon.png differ diff --git a/assests/images/2008-Icon.png b/assests/images/2008-Icon.png new file mode 100644 index 0000000..3b92b98 Binary files /dev/null and b/assests/images/2008-Icon.png differ diff --git a/assests/images/2013-Icon.png b/assests/images/2013-Icon.png new file mode 100644 index 0000000..35209cc Binary files /dev/null and b/assests/images/2013-Icon.png differ diff --git a/assests/images/2015-Icon.png b/assests/images/2015-Icon.png new file mode 100644 index 0000000..ea7f898 Binary files /dev/null and b/assests/images/2015-Icon.png differ diff --git a/assests/images/2016-Icon.png b/assests/images/2016-Icon.png new file mode 100644 index 0000000..7a0fe1b Binary files /dev/null and b/assests/images/2016-Icon.png differ diff --git a/assests/images/2022-Icon.png b/assests/images/2022-Icon.png new file mode 100644 index 0000000..1122d70 Binary files /dev/null and b/assests/images/2022-Icon.png differ diff --git a/assests/images/mobile-about-banner.png b/assests/images/mobile-about-banner.png new file mode 100644 index 0000000..8190fae Binary files /dev/null and b/assests/images/mobile-about-banner.png differ diff --git a/css/style.css b/css/style.css index 4527827..0b6a654 100644 --- a/css/style.css +++ b/css/style.css @@ -1055,7 +1055,7 @@ span.textaccor { font-size: 24px; line-height: 30px; font-weight: 600; - color: #dcdcdc; + color: white; font-family: var(--font-primary); margin-top: 18px; } @@ -1153,6 +1153,200 @@ span.textaccor { font-family: var(--font-secondary); } +/* =========================== + Timeline +=========================== */ +.timeline { + display: flex; + justify-content: space-between; + padding: 0 10px; + margin: 80px auto; + list-style: none; + position: relative; +} + +.timeline::before { + content: ""; + position: absolute; + top: 50%; + left: 10px; + right: 10px; + height: 1px; + background: #b18b4a65; + transform: translateY(-50%); + z-index: 0; +} + +.timeline-item { + position: relative; + z-index: 1; +} + +.timeline li::before { + content: attr(data-year); + position: absolute; + top: -40px; + left: 50%; + transform: translateX(-50%); + font-size: 16px; + color: #3E3F3F; + font-weight: 400; + white-space: nowrap; + font-family: var(--font-primary); +} + + +/* =========================== + Kite Style +=========================== */ +.timeline-item .kite { + display: block; + width: 6px; + height: 6px; + background: #000; + border: 1px solid gray; + transform: rotate(45deg); + opacity: 0.5; + transition: opacity 0.3s ease; +} + +/* Active kite (fade-in) */ +.timeline-item.active .kite { + background: #b18c4a; + opacity: 1; + animation: fadeIn 0.4s ease forwards; +} + +.timeline li.active::before { + color: #b18c4a; +} + +/* Inactive kite (fade-out) */ +.timeline-item:not(.active) .kite { + animation: fadeOut 0.4s ease forwards; +} + +@keyframes fadeIn { + from { + opacity: 0; + background: #000; + } + to { + opacity: 1; + background: #b18c4a; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + background: #b18c4a; + } + to { + opacity: 1; + background: #000; + } +} + +/* =========================== + Line Fill +=========================== */ +.line-fill { + position: absolute; + top: 50%; + left: 60px; + height: 2px; + background: #b18c4a; + z-index: 0; + transform-origin: left; + width: 0; + transition: width 0.5s linear; +} + +/* =========================== + Swiper Container +=========================== */ +.swiper { + width: 100%; + height: 300px; + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding: 0 60px; + box-sizing: border-box; +} + +.swiper-wrapper { + display: flex; + align-items: center; + gap: 1px; /* added subtle gap between slides */ +} + +.swiper-slide { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background: #131313; + gap: 2px; /* reduced gap between slide elements */ +} + +.swiper-slide img { + width: 82px; + height: 82px; + object-fit: contain; + display: block; + margin: 0 auto 2px; /* small bottom margin to reduce space */ +} + +.swiper-slide h2 { + font-size: 40px; + color: #b18c4a; + margin: 0 0 10px 0; /* small margin below heading */ +} + +.swiper-slide .heading { + color: #b18c4a; + text-align: center; + line-height: 1.3; /* tighter line height */ + margin: 0 0 2px 0; /* small margin below heading */ +} + +.swiper-slide .sub-heading-container { + width: 420px; + display: flex; + flex-direction: column; + margin: 0 auto; +} + +.swiper-slide .sub-heading-container p { + color: #fff; + margin: 0; /* remove default margin */ + line-height: 1.4; /* tighter line height */ +} + + +/* =========================== + Swiper Navigation +=========================== */ +.swiper-button-prev, +.swiper-button-next { + top: 50%; + transform: translateY(-50%); + color: #fff; +} + +.swiper-button-prev { + left: 10px; +} + +.swiper-button-next { + right: 10px; +} + + /* blog */ .blog-banner { @@ -1599,6 +1793,14 @@ span.textaccor { .links a { font-size: 12px; } + + + /* mobile about-page */ + + + /* */ + + .blog-tittle-banner { font-size: 40px; } diff --git a/js/script.js b/js/script.js index e69de29..e273662 100644 --- a/js/script.js +++ b/js/script.js @@ -0,0 +1,132 @@ + + // =============================== + // Timeline Data + // =============================== +alert("Hello World") + + const timelineData = { + 1983: { + icon: "../assests/images/1983-Icon.png", + heading: "The beginning", + sub: "The beginning — Set up by Mr. Asit Koticha and Mr. Sameer Koticha, ASK Group offers research-based Investment advisory." + }, + 1991: { + icon: "../assests/images/1991-Icon.png", + heading: "ASK Raymond James", + sub: "ASK Group and Raymond James Financial enter into a Partnership." + }, + 2007: { + icon: "../assests/images/2007-Icon.png", + heading: "Launch of ASK Wealth Advisors", + sub: "Raymond James Financial partnership exits." + }, + 2008: { + icon: "../assests/images/2008-Icon.png", + heading: "Launch of ASK multi-family office", + sub: "" + }, + 2013: { + icon: "../assests/images/2013-Icon.png", + heading: "License from SEBI", + sub: "ASK Wealth Advisors receives an Investment Advisor License from SEBI." + }, + 2015: { + icon: "../assests/images/2015-Icon.png", + heading: "Best Independent Wealth Advisor", + sub: "ASK Wealth Advisors adjudged 'the best Independent Wealth Advisor, 2015' by Wealth Briefing, Asia." + }, + 2016: { + icon: "../assests/images/2016-Icon.png", + heading: "", + sub: "Advent International acquires minority stake in ASK Group." + }, + 2017: { + icon: "../assests/images/2015-Icon.png", + heading: "", + sub: "ASK Wealth Advisors adjudged 'One to Watch - Wealth Manager - India Domestic' - Distinction, 2017 by Asian Private Banker." + }, + 2018: { + icon: "../assests/images/2015-Icon.png", + heading: "ASK launches its first offshore fund - ASK Global Strategies Fund", + sub: "TWICE IN A ROW: ASK Wealth advisors adjudged 'Best Performing Financial Advisor' - Wealth 2016-17 by UTI MF & CNBC TV18." + }, + 2019: { + icon: "../assests/images/1983-Icon.png", + heading: "Hall of Fame", + sub: "ASK Wealth Advisors inducted into the 'Hall of Fame' at the Financial Advisor Awards for the Years 2018-19 and 2019-20 by UTI MF & CNBC TV18." + }, + 2020: { + icon: "../assests/images/2015-Icon.png", + heading: "Outstanding Private Bank", + sub: "Outstanding Private Bank for UNHW clients at the Private Banker International Global Wealth Summit & Awards 2020, Singapore." + }, + 2022: { + icon: "../assests/images/2022-icon.png", + heading: "Blackstone Acquisition", + sub: "Blackstone acquires majority stake in ASK Group. Advent International exits." + } + }; + + // =============================== + // Generate Swiper Slides + // =============================== + const swiperWrapper = document.querySelector(".swiper-wrapper"); + const timelineItems = document.querySelectorAll(".timeline-item"); + + timelineItems.forEach((item) => { + const year = item.dataset.year; + const content = timelineData[year] || { icon: "", heading: "", sub: "" }; + + const slide = document.createElement("div"); + slide.classList.add("swiper-slide"); + + slide.innerHTML = ` + ${content.icon ? `icon` : ""} +

${year}

+ ${content.heading ? `

${content.heading}

` : ""} + ${content.sub ? `

${content.sub}

` : ""} + `; + + swiperWrapper.appendChild(slide); + }); + + // =============================== + // Timeline Line Fill + // =============================== + const lineFill = document.querySelector(".line-fill"); + const totalKites = timelineItems.length; + + function updateTimeline(index) { + timelineItems.forEach((item, i) => { + item.classList.toggle("active", i === index); + }); + + const timelineWidth = document.querySelector(".timeline").offsetWidth - 40; // adjust for padding + const newWidth = (timelineWidth / (totalKites - 1)) * index; + lineFill.style.width = newWidth + "px"; + } + + // =============================== + // Initialize Swiper + // =============================== + const swiper = new Swiper(".mySwiper", { + spaceBetween: 20, + centeredSlides: true, + effect: "fade", + autoplay: { + delay: 2500, + disableOnInteraction: false + }, + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev" + } + }); + + // Update timeline on slide change + swiper.on("slideChange", () => { + updateTimeline(swiper.realIndex); + }); + + // Initial timeline update + updateTimeline(0); \ No newline at end of file diff --git a/pages/about.html b/pages/about.html index dee81d3..29a970e 100644 --- a/pages/about.html +++ b/pages/about.html @@ -1,3 +1,20 @@ + + + + + + + + + + + + + + + + +