diff --git a/assests/images/Mobile-Footer.svg b/assests/images/Mobile-Footer.svg new file mode 100644 index 0000000..c079b8b --- /dev/null +++ b/assests/images/Mobile-Footer.svg @@ -0,0 +1,32 @@ + diff --git a/assests/images/footer-back.svg b/assests/images/footer-back.svg new file mode 100644 index 0000000..23aa121 --- /dev/null +++ b/assests/images/footer-back.svg @@ -0,0 +1,27 @@ + diff --git a/assests/images/icon1.svg b/assests/images/icon1.svg new file mode 100644 index 0000000..53335d8 --- /dev/null +++ b/assests/images/icon1.svg @@ -0,0 +1,11 @@ + diff --git a/assests/images/icon2.svg b/assests/images/icon2.svg new file mode 100644 index 0000000..8213a8a --- /dev/null +++ b/assests/images/icon2.svg @@ -0,0 +1,3 @@ + diff --git a/assests/images/icon3.svg b/assests/images/icon3.svg new file mode 100644 index 0000000..a099bbc --- /dev/null +++ b/assests/images/icon3.svg @@ -0,0 +1,6 @@ + diff --git a/assests/images/icon4.svg b/assests/images/icon4.svg new file mode 100644 index 0000000..2d4962d --- /dev/null +++ b/assests/images/icon4.svg @@ -0,0 +1,4 @@ + diff --git a/assests/images/mobile-banner.svg b/assests/images/mobile-banner.svg new file mode 100644 index 0000000..1075a67 --- /dev/null +++ b/assests/images/mobile-banner.svg @@ -0,0 +1,14 @@ + diff --git a/assests/images/slider-back.svg b/assests/images/slider-back.svg new file mode 100644 index 0000000..d93a200 --- /dev/null +++ b/assests/images/slider-back.svg @@ -0,0 +1,14 @@ + diff --git a/components/footer.html b/components/footer.html index 0b25e23..84c2bbf 100644 --- a/components/footer.html +++ b/components/footer.html @@ -29,7 +29,7 @@
diff --git a/css/style.css b/css/style.css index 64734a1..4962abb 100644 --- a/css/style.css +++ b/css/style.css @@ -39,8 +39,9 @@ } +.nav-link:focus, .nav-link:hover { - color: #ffffff; + color: #fff; } .text-white { @@ -71,6 +72,66 @@ } +.invest-btn2 { + background-color: #b58b4b; + clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%); + transition: all 0.3s ease; + padding: 15px 20px; + height: 100%; + display: flex; + width: 150px; +} + +.invest-btn2 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; +} + +.button-to { + margin-top: 25px; +} + +span.banner-tittle { + font-family: var(--font-secondary); + font-weight: 400; + font-style: Regular; + font-size: 40px; + line-height: 100%; + vertical-align: middle; + text-transform: capitalize; + color: #fff; +} + +.desc-top { + margin-top: 17px; +} + +span.banner-desc { + font-family: Open Sans; + font-weight: 600; + font-size: 14px; + line-height: 100%; + text-transform: capitalize; + color: #fff; +} + +.carousel-item { + border-left: 2px solid #B18C4A; + padding-left: 20px; + padding-top: 5px; + padding-bottom: 5px; + margin-bottom: 20px; +} + + + .invest-btn:hover { background-color: #b58b4b; color: #fff; @@ -88,7 +149,9 @@ a.color-a { text-align: center; -}.topbar-mobile{ +} + +.topbar-mobile { display: none; } @@ -99,66 +162,75 @@ a.color-a { /* Remove default border and shadow */ .navbar-toggler { - border: none; - background: transparent; - padding: 0; + border: none; + background: transparent; + padding: 0; } .navbar-toggler:focus { - outline: none; - box-shadow: none; + outline: none; + box-shadow: none; } .navbar-collapse { - display: none; - transition: max-height 0.3s ease-out, opacity 0.3s ease-out; - overflow: hidden; - max-height: 0; - opacity: 0; + display: none; + transition: max-height 0.3s ease-out, opacity 0.3s ease-out; + overflow: hidden; + max-height: 0; + opacity: 0; } .navbar-collapse.show { - display: block; - max-height: 500px; /* enough for your menu */ - opacity: 1; + display: block; + max-height: 500px; + /* enough for your menu */ + opacity: 1; } /* White close icon */ -.open-icon, .close-icon { - font-size: 22px; - color: #fff; /* or your preferred color */ +.open-icon, +.close-icon { + font-size: 22px; + color: #fff; + /* or your preferred color */ } /* Footer */ .footer-section { - background-color: #022b36; - position: relative; - overflow: hidden; + background-image: url("/assests/images/footer-back.svg"); + /* your image path */ + background-repeat: no-repeat; + background-size: cover; + /* or "contain" based on your design */ + background-position: center; + position: relative; + overflow: hidden; } /* Subtle pattern lines (optional like your image) */ .footer-section::after { - content: ""; - position: absolute; - right: -100px; - top: 0; - width: 600px; - height: 100%; - background: url('pattern-lines.png') no-repeat right center; - background-size: contain; - opacity: 0.1; + content: ""; + position: absolute; + right: -100px; + top: 0; + width: 600px; + height: 100%; + background: url('pattern-lines.png') no-repeat right center; + background-size: contain; + opacity: 0.1; } .footer-desc { color: #C4C4C4; - font-family: var(--font-primary); + font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 140%; text-align: left; } -.social-links{ + +.social-links { text-align: left; } @@ -192,22 +264,24 @@ a.color-a { } .footer-links a:hover { - color: #ffffff; + color: #ffffff; } .social-links a { - font-size: 1.3rem; - color: #b7c4c7; - transition: color 0.3s; + font-size: 1.3rem; + color: #b7c4c7; + transition: color 0.3s; } .social-links a:hover { - color: #ffffff; + color: #ffffff; } .footer-line { - border-color: #fff; + border-color: #fff; + opacity: 1; } + .text-adjust { font-family: var(--font-primary); font-weight: 400; @@ -218,7 +292,7 @@ a.color-a { } .footer-bottom-links a { - color: #fff; + color: #fff; text-decoration: none; font-family: var(--font-primary); font-weight: 600; @@ -229,121 +303,468 @@ a.color-a { } .footer-bottom-links a:hover { - color: #ffffff; + color: #ffffff; } +/* home */ +.Slider-back { + background-image: url("/assests/images/slider-back.svg"); + /* your image path */ + background-repeat: no-repeat; + background-size: cover; + /* or "contain" based on your design */ + background-position: center; + height: 80vh; + +} + +.height-banner { + height: 100%; + align-items: center; + justify-content: center; + display: flex; +} + + + +.carousel-indicators [data-bs-target] { + box-sizing: content-box; + flex: 0 1 auto; + width: 8px; + height: 8px; + padding: 0; + margin-right: 3px; + margin-left: 3px; + text-indent: -999px; + cursor: pointer; + background-color: #fff; + background-clip: padding-box; + border: 0; + border-top: 0px solid transparent; + border-bottom: 0px solid transparent; + + transition: opacity .6s ease; + border-radius: 50px; +} + +.ask-advantage { + padding: 60px 0; + +} + +.ask-advantage h2 { + font-family: var(--font-secondary); + font-weight: 400; + font-style: Regular; + font-size: 40px; + line-height: 100%; + letter-spacing: 0%; + color: #033A49; + +} + +.ask-advantage p.lead { + font-family: var(--font-primary); + font-weight: 400; + font-size: 18px; + line-height: 100%; + letter-spacing: 0%; + color: #3E3F3F; + margin-bottom: 40px; + margin-top: 15px; +} + +.advantage-box { + border-top: 2.4px solid #B18C4A; + padding-top: 45px; + transition: all 0.5s ease; + padding-bottom: 30px; + padding-left: 15px; + padding-right: 15px; + +} + +.advantage-box:hover { + background-color: #004A5D; + color: #fff; + border-top: 0px solid #B18C4A; + transform: translateY(2px); +} + +.advantage-box:hover .advantage-title, +.advantage-box:hover .advantage-text { + color: #fff !important; +} + + +.advantage-icon { + color: #b18b4b; + font-size: 32px; + margin-bottom: 15px; +} +.icone1{ + width: 53px; + height: 53.5px; + +} +.icone2{ + width: 60px; + height: 42.66666793823242px; + + + +} +.icone3{ + width: 56.5px; +height: 46.4052734375px; + + + +} +.icone4{ + width: 50.6652946472168px; +height: 50.667842864990234px; + + + +} + +.advantage-title { + margin-bottom: 8px; + font-family: var(--font-primary); + font-weight: 600; + font-size: 21px; + line-height: 30px; + vertical-align: middle; + color: #3E3F3F; + + +} + +.advantage-text { + font-family: var(--font-primary); + font-weight: 400; + font-size: 14px; + line-height: 25px; + letter-spacing: 0%; + vertical-align: middle; + color: #3E3F3F; + margin-top: 15px; +} + +.stats-section { + background-color: rgba(241, 223, 184, 0.25); /* soft cream */ + padding: 60px 0px; +} + +.stat-box h3 { + color: #B18C4A; + margin-bottom: 0.3rem; + font-family: var(--font-secondary); + font-weight: 400; + font-size: 40px; + line-height: 60px; +} +.width-count { + width: 23%; + text-align: left; +} +.width-count2 { + width: 29%; + padding-left: 58px; +} +.width-count3 { + width: 23%; + padding-left: 60px; +} +.width-count4 { + width: 23%; + padding-left: 55px; +} + +.stat-box p { + letter-spacing: 0.8px; + color: #3E3F3F; + margin: 0; + font-family: var(--font-primary); + font-weight: 600; + font-size: 14px; + line-height: 28px; + text-transform: uppercase; +} + +.stat-box { + text-align: left; +} +.stat-border { + position: relative; +} + +.stat-border::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 80px; + background-color: #B18C4A; /* gold tone line */ +} + +/* ✅ Remove divider for first item */ +.row .col-md-3:first-child::before { + display: none; +} + +.as-of-date { + text-align: center; + font-family: var(--font-primary); + font-weight: 400; + font-style: Italic; + font-size: 16px; + line-height: 28px; + color: #929197; +} + + @media (max-width: 768px) { - + /* Logo styling */ -.navbar-brand img { - width: 120px; - height: 24px; + .navbar-brand img { + width: 120px; + height: 24px; + } + + .container { + padding: 0 25px 0 25px; + } + + .footer-line { + border-color: #fff; + margin-top: 15px !important; + + } + + .footer-bottom-links { + + flex-direction: column; + gap: 15px; + } + + .footer-section { + background-image: url("/assests/images/Mobile-Footer.svg"); + /* your image path */ + + } + + .Slider-back { + background-image: url(/assests/images/mobile-banner.svg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 90vh; + } + + span.banner-tittle { + font-family: var(--font-secondary); + font-weight: 400; + vertical-align: middle; + color: #fff; + font-size: 36px; + line-height: 44px; + text-transform: capitalize; + } + .mobile-resp-count { + flex-direction: column; +} +.stat-border::before + + { + content: ""; + position: absolute; + left: 50%; + top: -115%; + width: 1px; + height: 130px; + background-color: #B18C4A; + transform: rotate(90deg); +} +.width-count { + width: 100%; + + padding-left: 0px; + padding-right: 0px; +} +.width-count2 { + width: 100%; + padding-left: 0px; + padding-right: 0px; +} +.width-count3 { + width: 100%; + padding-left: 0px; + padding-right: 0px; +} +.width-count4 { + width: 100%; + padding-left: 0px; + padding-right: 0px; +} +.stat-box { + text-align: center; +} +.stat-box h3 + + { + + font-size: 24px; + line-height: 42px; +} +.stat-box p { + + line-height: 16px; + } -.container{ - padding: 0 25px 0 25px; } -} + + + @media (max-width: 991px) { - .topbar { + .topbar { display: none; } - -.navbar { - background-color: #033a4900; - padding: 0 0; - border-bottom: 1px solid #033A49; -} -.container, .container-md, .container-sm { + + .navbar { + background-color: #033a4900; + padding: 0 0; + border-bottom: 1px solid #033A49; + } + + .container, + .container-md, + .container-sm { max-width: 100%; padding: 0; } - .navbar-brand{ - padding: 0; - } - .mobile-adj { - width: 100%; - display: flex; - align-items: center; - background: #033A49; - justify-content: space-between; - padding: 20px 25px; -} -.d-flex - { - display: block !important; -} -.nav-link { - font-family: var(--font-primary); - font-weight: 600; - font-size: 18px; - line-height: 120%; - text-align: left; - color: #033A49; - border-bottom: 1px solid #E6E7E8; - padding-bottom: 15px; -} -.navbar-expand-lg .gap-menu - { - flex-direction: column; - gap: 12px; - padding: 25px 25px 12px 25px; -} -.nav-link:hover + .navbar-brand { + padding: 0; + } - { - color: #033A49 !important; -} -.ms-auto + .mobile-adj { + width: 100%; + display: flex; + align-items: center; + background: #033A49; + justify-content: space-between; + padding: 20px 25px; + } - { - margin-left: auto !important; - padding: 0 25px 20px 25px; -} -.text-white{ + .d-flex { + display: block !important; + } - font-family: var(--font-primary); - font-weight: 600; - font-size: 18px; - line-height: 120%; - text-align: left; - color: #033A49 !important; - border-bottom: 1px solid #E6E7E8; - padding-bottom: 15px; - width: 100%; - display: block; -} -.invest-btn{ - display: none; -} -i.bi.bi-chevron-down { - display: none; -} -.mobile-call { - display: flex; - flex-direction: column; - gap: 12px; - padding: 0 25px 25px 25px; -} -a.color-b { - gap: 10px; - text-decoration: none; - display: flex; - color: #3E3F3F; - font-family: var(--font-primary); - font-weight: 600; - font-size: 18px; + .nav-link { + font-family: var(--font-primary); + font-weight: 600; + font-size: 18px; + line-height: 120%; + text-align: left; + color: #033A49; + border-bottom: 1px solid #E6E7E8; + padding-bottom: 15px; + } -} -.topbar-mobile{ - display: block; -} -} + .navbar-expand-lg .gap-menu { + flex-direction: column; + gap: 12px; + padding: 25px 25px 12px 25px; + } + .nav-link:hover { + color: #033A49 !important; + } + .ms-auto { + margin-left: auto !important; + padding: 0 25px 20px 25px; + } + .text-white { + + font-family: var(--font-primary); + font-weight: 600; + font-size: 18px; + line-height: 120%; + text-align: left; + color: #033A49 !important; + border-bottom: 1px solid #E6E7E8; + padding-bottom: 15px; + width: 100%; + display: block; + } + + .invest-btn { + display: none; + } + + i.bi.bi-chevron-down { + display: none; + } + + .mobile-call { + display: flex; + flex-direction: column; + gap: 12px; + padding: 0 25px 25px 25px; + } + + a.color-b { + gap: 10px; + text-decoration: none; + display: flex; + color: #3E3F3F; + font-family: var(--font-primary); + font-weight: 600; + font-size: 18px; + + } + + .topbar-mobile { + display: block; + } + + .footer-section { + padding: 0 25px; + + } + + .text-adjust { + + text-align: left; + + } + + .footer-bottom-links { + + margin-bottom: 30px; + } + + .Slider-back { + + padding-left: 25px; + padding-right: 25px; + } + .ask-advantage { + padding: 60px 25px !important; + } + .stats-section { + + padding: 40px 25px !important; +} +} \ No newline at end of file diff --git a/index.html b/index.html index 76e75a7..a6399a8 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + @@ -26,6 +26,7 @@ + diff --git a/js/main.js b/js/main.js index 48a3350..fac2446 100644 --- a/js/main.js +++ b/js/main.js @@ -20,6 +20,7 @@ const routes = { "#/": "pages/home.html", "#/our-fund": "pages/our-fund.html", + "#/our-team": "pages/our-team.html", "#/about": "pages/about.html", "#/contact": "pages/contact.html", }; diff --git a/pages/home.html b/pages/home.html index 55d5a04..b77b0e7 100644 --- a/pages/home.html +++ b/pages/home.html @@ -1,6 +1,134 @@ -We blend expert management and a personalized approach to help you grow wealth with confidence.
+Benefit from our seasoned fund managers’ decades of market expertise.
+Combine the power of disciplined investing with expert-designed portfolios for consistent growth.
+Our equity strategies focus on high-quality businesses with long-term growth potential.
+Invest globally and locally through ETFs with sectoral, thematic, and international options.
+This is the Home page. No Home link in the navbar!
+Years of Expertise
+Assets Under Management
+Clients
+Equity Experience
+