From f04258e7bdf9c86e47630802dd5bff612fc3cb1e Mon Sep 17 00:00:00 2001 From: "Priyanshu.Vishwakarma" Date: Wed, 29 Jan 2025 15:26:37 +0530 Subject: [PATCH] header testing --- assets/css/style-new.css | 12 +- assets/css/style.css | 262 ++++++++++++++++++++++++++++--- assets/js/custom.js | 157 +++++++++++++----- components/footer.php | 17 +- components/header.php | 214 +++++++++++++++++++++---- pages/hire-uiux-developer.php | 2 +- pages/hire-website-developer.php | 36 ++--- pages/homepage.php | 1 - 8 files changed, 589 insertions(+), 112 deletions(-) diff --git a/assets/css/style-new.css b/assets/css/style-new.css index 15d1a51..446ab8c 100644 --- a/assets/css/style-new.css +++ b/assets/css/style-new.css @@ -33,6 +33,12 @@ p { word-spacing: 1px; } +.semi-grey-para { + color: #d3d3d3e8; + font-size: clamp(15px, 1.33333vw, 16px); + word-spacing: 1px; +} + .dark-grey-para { color: #A7A7A7; font-size: clamp(15px, 1.33333vw, 16px); @@ -286,7 +292,7 @@ p { -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); - transition: transform 0.3s ease-in; + transition: transform 0.3s ease-in; -webkit-transition: transform 0.3s ease-in; -moz-transition: transform 0.3s ease-in; -ms-transition: transform 0.3s ease-in; @@ -297,7 +303,7 @@ p { width: 88%; height: auto; margin-bottom: 16px; - transition: transform 0.3s ease-in; + transition: transform 0.3s ease-in; -webkit-transition: transform 0.3s ease-in; -moz-transition: transform 0.3s ease-in; -ms-transition: transform 0.3s ease-in; @@ -957,7 +963,7 @@ button.next_arrow { margin: 50px 0; } -.lets_talk{ +.lets_talk { margin-top: 30px; } diff --git a/assets/css/style.css b/assets/css/style.css index 70024fa..e9e99e3 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -227,10 +227,10 @@ img { .header .nav_bar .drop_down>.nav_link { - padding: 5px; + padding: 10px 5px; color: var(--white); transition: .3s; - font-weight: normal; + font-weight: normal !important; position: relative; font-size: 0.95rem; } @@ -320,37 +320,65 @@ img.arrow_up { } +/* Common styles for dropdown_content */ .header .nav_bar .dropdown_content { position: absolute; - top: calc(100% + 0px); + top: calc(100% + -32px); opacity: 0; pointer-events: none; + transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; + z-index: 99999; + padding: 0 25px; +} + +/* First Dropdown (Services) */ +.header .nav_bar .dropdown_content.type-one { + width: 100%; + left: 0; transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); - transition: opacity .3s ease-in-out, transform .3s ease-in-out; - -webkit-transition: opacity .3s ease-in-out, transform .3s ease-in-out; - -moz-transition: opacity .3s ease-in-out, transform .3s ease-in-out; - -ms-transition: opacity .3s ease-in-out, transform .3s ease-in-out; - -o-transition: opacity .3s ease-in-out, transform .3s ease-in-out; } -.head_inner .nav_bar .drop_down.active>.nav_link+.dropdown_content { +/* Second Dropdown*/ +.header .nav_bar .dropdown_content.type-two { + width: auto; + transform: translateY(-10px); + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; + -webkit-transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; +} + +/* When Active, Apply translateX */ +.head_inner .nav_bar .drop_down.active>.nav_link+.dropdown_content.type-two { opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); pointer-events: auto; transform: translateX(-50px); + -webkit-transform: translateX(-50px); + -moz-transform: translateX(-50px); + -ms-transform: translateX(-50px); + -o-transform: translateX(-50px); +} + + +/* Active state for dropdown_content */ +.head_inner .nav_bar .drop_down.active>.nav_link+.dropdown_content { + opacity: 1; + pointer-events: auto; + transform: translateY(0); +} + + +.transparent-elem { + height: 32px; + background: transparent; } .grid_btns { - gap: 40px; - padding: 20px; + /* padding: 20px; */ position: relative; transition: top .2s; -webkit-transition: top .2s; @@ -360,11 +388,17 @@ img.arrow_up { top: 0px; border-radius: 10px; overflow: hidden; - background: #1F1F1F; + /* background: #1F1F1F; */ display: flex; flex-direction: column; } +.grid_btns-inn { + padding: 15px 20px 20px; + background: #1F1F1F; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} .grid_btns button, .grid_btns a { @@ -385,30 +419,143 @@ img.arrow_up { font-weight: normal; font-size: 15px; transition: color 0.3s ease; + display: flex; + align-items: center; + gap: 40px; + justify-content: space-between; + position: relative; + max-width: 260px; } +.grid_btns .drop_down .nav-link { + border-bottom: 1px solid grey; + padding: 20px 0 20px; + max-width: 350px; + cursor: pointer; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + -o-transition: all 0.3s ease; +} + +.nav_link_inside { + color: #fff !important; + font-size: 15px !important; + font-weight: normal !important; + transition: color 0.3s ease; + -webkit-transition: color 0.3s ease; + -moz-transition: color 0.3s ease; + -ms-transition: color 0.3s ease; + -o-transition: color 0.3s ease; +} + +.nav_link_inside:hover { + color: var(--orange) !important; +} + +.for-view { + display: flex; + align-items: start; +} + +.inside_data-nav-items { + display: flex; + gap: 30px 40px; + position: absolute; + top: 30%; + left: 30%; + height: 250px; + flex-direction: column; + flex-wrap: wrap; + display: none; +} + +.inside_data-nav-items.flexsy { + display: flex !important; + /* When the class is added */ +} .grid_btns .nav-link:hover { color: var(--orange); } +.for-arr-in-nav { + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 7px solid rgba(255, 255, 255, 0.67); + position: relative; + transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); +} + + +.grid_btns .nav-link:hover .for-arr-in-nav { + border-top-color: var(--orange); + margin-left: 20px; +} + +.grid_btns .nav-link:hover .for-arr-in-nav::after { + content: ''; + position: absolute; + left: -1px; + width: 20px; + height: 1px; + background-color: var(--orange); + transform: rotate(90deg) translateY(9px); + -webkit-transform: rotate(90deg) translateY(9px); + -moz-transform: rotate(90deg) translateY(9px); + -ms-transform: rotate(90deg) translateY(9px); + -o-transform: rotate(90deg) translateY(9px); + top: -17px; +} + +/* for active also */ + +.grid_btns .nav-link.active-parent { + color: var(--orange); + font-weight: 500; + justify-content: space-around; +} + +.grid_btns .nav-link.active-parent .for-arr-in-nav { + border-top-color: var(--orange); + margin-left: 20px; +} + +.grid_btns .nav-link.active-parent .for-arr-in-nav::after { + content: ''; + position: absolute; + left: -1px; + width: 20px; + height: 1px; + background-color: var(--orange); + transform: rotate(90deg) translateY(9px); + top: -17px; + transition: all 0.3s ease; +} + .grid_btns .nav-link.active { color: var(--orange); font-weight: 500; font-size: 16px; } - .single_line_drop .grid_btns .buttons_width { width: 100%; } - .single_line_drop .grid_btns .nav-link.active a, .single_line_drop .grid_btns .nav-link:hover a { color: var(--white); } + .cross_btn { position: absolute; top: 15px; @@ -1970,6 +2117,22 @@ button.pdf.btn { } +@media (max-width: 1376px) { + + .inside_data-nav-items { + left: 33%; + } + +} + +@media (max-width: 1260px) { + + .inside_data-nav-items { + left: 36%; + } + +} + @media (max-width: 1130px) { .head_inner .nav_bar .drop_down.active>.nav_link+.dropdown_content { @@ -2022,7 +2185,7 @@ button.pdf.btn { } .head_inner .nav_bar .drop_down.active>.nav_link+.dropdown_content { - transform: translateX(0px); + transform: translateX(0px) !important; } .header .head_inner .nav_bar { @@ -2125,13 +2288,70 @@ button.pdf.btn { .grid_btns .nav-link, .grid_btns .nav-link:hover { padding: 10px 8px; - font-size: 13px; + font-size: 14px; } .nav_link svg path { fill: #000; } + + /* for mob start ? */ + .header .nav_bar .dropdown_content { + padding: 0; + } + + .transparent-elem { + height: 15px; + } + + .grid_btns-inn .mid-para { + padding: 0 !important; + } + + .for-view { + flex-direction: column; + padding-left: 12px; + } + + .inside_data-nav-items { + position: inherit; + max-height: 170px !important; + overflow-y: auto; + flex-wrap: nowrap; + width: 100%; + padding: 20px 0px 0px 25px; + gap: 20px; + scrollbar-width: thin; + scrollbar-color: #888 #f1f1f1; + } + + .inside_data-nav-items::-webkit-scrollbar { + width: 4px; + } + + .inside_data-nav-items::-webkit-scrollbar-thumb { + background-color: #888; + border-radius: 10px; + } + + .inside_data-nav-items::-webkit-scrollbar-track { + background-color: #f1f1f1; + } + + + .grid_btns-inn { + padding: 0 0px 15px; + } + + .nav_link_inside { + font-size: 13px !important; + } + + .grid_btns .nav-link.active-parent { + justify-content: space-between; + } + } diff --git a/assets/js/custom.js b/assets/js/custom.js index 1af7633..a8b1f5f 100644 --- a/assets/js/custom.js +++ b/assets/js/custom.js @@ -1,40 +1,70 @@ -// header navbar start +//***** header navbar start -document.addEventListener("click", (e) => { - const isDropdownButton = e.target.matches("[data_dropdown_button]"); +// Function to check if the screen is small +function isSmallScreen() { + return window.innerWidth <= 1111; // Adjust this breakpoint if needed +} - // If click is inside an active dropdown, do nothing - if (!isDropdownButton && e.target.closest("[data_dropdown]") != null) return; +// Function to initialize dropdowns +function initializeDropdowns() { + document.querySelectorAll("[data_dropdown]").forEach((dropdown) => { + const dropdownButton = dropdown.querySelector("[data_dropdown_button]"); + if (!dropdownButton) return; - let currentDropdown; - if (isDropdownButton) { - currentDropdown = e.target.closest("[data_dropdown]"); + // Remove previous event listeners by replacing the element + const newDropdown = dropdown.cloneNode(true); + dropdown.parentNode.replaceChild(newDropdown, dropdown); - // Toggle the 'active' class on the clicked dropdown - currentDropdown.classList.toggle("active"); + const newDropdownButton = newDropdown.querySelector("[data_dropdown_button]"); - // Remove 'active' class from other dropdowns - document.querySelectorAll(".single_line_drop.active").forEach((dropdown) => { - if (dropdown !== currentDropdown) { - dropdown.classList.remove("active"); - } - }); + if (isSmallScreen()) { + // Small screen: Use click events + newDropdownButton.addEventListener("click", (e) => { + e.stopPropagation(); // Prevent event propagation - // Update the backdrop (if applicable) - updateHeadInnerBackdrop(); - } + // Toggle the current dropdown + const isActive = newDropdown.classList.contains("active"); + newDropdown.classList.toggle("active", !isActive); - // Ensure only one dropdown is active at a time - document.querySelectorAll(".single_line_drop.active").forEach((dropdown) => { - if (dropdown !== currentDropdown) { - dropdown.classList.remove("active"); + // Remove active class from other dropdowns + document.querySelectorAll(".single_line_drop.active").forEach((otherDropdown) => { + if (otherDropdown !== newDropdown) { + otherDropdown.classList.remove("active"); + } + }); + + // Update styles + updateParentLinkColor(); + updateHeadInnerBackdrop(); + }); + } else { + // Large screen: Use hover events + newDropdown.addEventListener("mouseenter", () => { + newDropdown.classList.add("active"); + + // Remove active class from other dropdowns + document.querySelectorAll(".single_line_drop.active").forEach((otherDropdown) => { + if (otherDropdown !== newDropdown) { + otherDropdown.classList.remove("active"); + } + }); + + // Update styles + updateParentLinkColor(); + updateHeadInnerBackdrop(); + }); + + newDropdown.addEventListener("mouseleave", () => { + newDropdown.classList.remove("active"); + + // Update styles + updateParentLinkColor(); + }); } }); +} - // Update parent link color after closing or toggling dropdowns - updateParentLinkColor(); -}); - +// Function to update parent link color function updateParentLinkColor() { // Reset all parent nav_link styles document.querySelectorAll("[data_dropdown_button]").forEach((button) => { @@ -49,17 +79,29 @@ function updateParentLinkColor() { const parentButton = parentDropdown.querySelector("[data_dropdown_button]"); if (parentButton) { parentButton.style.color = "#e5195e"; // Apply active color - parentButton.style.fontWeight = "500"; // Apply active font weight + parentButton.style.setProperty("font-weight", "500", "important"); // Apply active font weight with !important } } }); } -// Run updateParentLinkColor on page load to set the correct state -document.addEventListener("DOMContentLoaded", updateParentLinkColor); +// Function to update the backdrop +function updateHeadInnerBackdrop() { + // Implement your backdrop logic here + // For example, showing or hiding a backdrop element +} + +// Add a resize event listener to reinitialize dropdowns on screen resize +window.addEventListener("resize", initializeDropdowns); + +// Initialize dropdowns on page load +document.addEventListener("DOMContentLoaded", () => { + initializeDropdowns(); + updateParentLinkColor(); // Set the correct state on page load +}); -// header navbar end +//***** header navbar end // sticky header start @@ -180,6 +222,7 @@ $(document).ready(function () { // *********** solution tabs end + document.addEventListener("DOMContentLoaded", function () { const tabs = document.querySelectorAll('.solution-tab .nav-link'); const navContainer = document.querySelector('.solution-tab .nav'); @@ -238,9 +281,9 @@ document.addEventListener("DOMContentLoaded", function () { }); }); - // *********** solution tabs end + // *********** Portfolio slider start $(document).ready(function () { @@ -361,7 +404,6 @@ updateSliderProgress(); // *********** Countdown start - function animateCountUp(element, target, duration) { let start = 0; const increment = Math.ceil(target / (duration / 16)); @@ -398,8 +440,8 @@ document.addEventListener("DOMContentLoaded", () => { (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { - startCounterAnimation(); - observer.unobserve(section); + startCounterAnimation(); + observer.unobserve(section); } }); }, @@ -411,5 +453,48 @@ document.addEventListener("DOMContentLoaded", () => { }); - // *********** Countdown end + + +//**** For Header inner navigaion + +function toggleDropdown(id) { + // Remove 'active-parent' class from all .nav-link elements + var allNavLinks = document.querySelectorAll('.nav-link'); + allNavLinks.forEach(function (navLink) { + navLink.classList.remove('active-parent'); + }); + + // Hide all dropdowns by removing the 'flexsy' class + var allDropdowns = document.querySelectorAll('.inside_data-nav-items'); + allDropdowns.forEach(function (dropdown) { + dropdown.classList.remove('flexsy'); + }); + + // Toggle the 'flexsy' class on the clicked dropdown + var element = document.getElementById(id); + if (!element.classList.contains('flexsy')) { + element.classList.add('flexsy'); + + // Add 'active-parent' class to the corresponding parent .nav-link + var parentNavLink = element.previousElementSibling; // Assuming .nav-link is the immediate sibling + if (parentNavLink && parentNavLink.classList.contains('nav-link')) { + parentNavLink.classList.add('active-parent'); + } + } +} + + +//***** For header type + +document.querySelectorAll('.dropdown_content').forEach((dropdown) => { + const parentLi = dropdown.closest('.drop_down'); + + // Check for content type and assign class + if (parentLi && parentLi.querySelector('h3')) { + dropdown.classList.add('type-one'); // First dropdown type + } else { + dropdown.classList.add('type-two'); // Second dropdown type + } +}); + diff --git a/components/footer.php b/components/footer.php index 954b4dd..efa5fca 100644 --- a/components/footer.php +++ b/components/footer.php @@ -303,12 +303,25 @@
- 5.0 - + 4.9 + + + + + + + + + + + +

WDIPL rating on clutch

diff --git a/components/header.php b/components/header.php index fa3bcd7..c020d3f 100644 --- a/components/header.php +++ b/components/header.php @@ -5,7 +5,8 @@ $current_page = basename($_SERVER['PHP_SELF'], ".php"); // Define arrays for dropdown categories -$mobile_apps_pages = ['mobile-app-developmentt', 'ioss', 'androidd', 'hybridd', 'nativee']; +$services = ['mobile-app-developmentt', 'ioss', 'androidd', 'hybridd', 'nativee']; +$hire_developers = ['android-developers', 'ios-developers', 'flutter-developers', 'react-native-developers']; $product_development_pages = ['product-developmentt', 'ai-mll', 'app-modernizationn', 'ui-uxx', 'complete-digital-transformationn']; $company_pages = ['company-about-uss', 'project-managementt', 'portfolioo']; ?> @@ -29,36 +30,188 @@ $company_pages = ['company-about-uss', 'project-managementt', 'portfolioo']; ✕