PriyanshuVishwakarma/wdipl-redesign
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

header testing

Browse Source
This commit is contained in:
Priyanshu Vishwakarma
2025-01-29 15:26:37 +05:30
parent 9591a56cd7
commit f04258e7bd
8 changed files with 589 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/style-new.css
View File

@@ -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);
@@ -957,7 +963,7 @@ button.next_arrow {
margin: 50px 0;
}
.lets_talk{
.lets_talk {
margin-top: 30px;
}

262
assets/css/style.css
View File

@@ -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;
}
}

153
assets/js/custom.js
View File

@@ -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
// Toggle the current dropdown
const isActive = newDropdown.classList.contains("active");
newDropdown.classList.toggle("active", !isActive);
// Remove active class from other dropdowns
document.querySelectorAll(".single_line_drop.active").forEach((otherDropdown) => {
if (otherDropdown !== newDropdown) {
otherDropdown.classList.remove("active");
}
});
// Update the backdrop (if applicable)
updateHeadInnerBackdrop();
}
// Ensure only one dropdown is active at a time
document.querySelectorAll(".single_line_drop.active").forEach((dropdown) => {
if (dropdown !== currentDropdown) {
dropdown.classList.remove("active");
}
});
// Update parent link color after closing or toggling dropdowns
// 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();
});
}
});
}
// 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));
@@ -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
}
});

17
components/footer.php
View File

@@ -303,12 +303,25 @@
</a>
<div class="rates">
<div class="rating">
<Span>5.0</Span>
<i class="fa fa-star" aria-hidden="true"></i>
<Span>4.9</Span>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<!-- <i class="fa fa-star" aria-hidden="true"></i> -->
<svg height="14" width="14" viewBox="125 120 80 82" fill="url(#g)">
<polygon points="165,185 188.511,197.361 184.021,171.18 203.042,152.639
176.756,148.82 165,125 153.244,148.82 126.958,152.639
145.979,171.18 141.489,197.361 165,185" style="stroke: #FE3D2E;" />
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
<!-- 90% filled with red -->
<stop stop-color="#FE3D2E" offset="70%" />
<!-- Remaining 10% uncolored -->
<stop stop-color="white" offset="70%" />
</linearGradient>
</defs>
</svg>
</div>
<h3>WDIPL rating on clutch</h3>
</div>

214
components/header.php
View File

@@ -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'];
<i class="nav_cross_btn">✕</i>
</div>
<ul>
<!-- Mobile Apps -->
<li class="drop_down single_line_drop <?php echo (in_array($current_page, $mobile_apps_pages)) ? 'active' : ''; ?>"
data_dropdown>
<button class="nav_link" data_dropdown_button>Mobile Apps
<!-- Services Dropdown -->
<li class="drop_down single_line_drop <?php echo (in_array($current_page, $services)) ? 'active' : ''; ?>" data_dropdown>
<button class="nav_link" data_dropdown_button>Services
<svg width="8" height="5" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5L7.89711 0.5H0.102886L4 5Z" />
</svg>
</button>
<div class="dropdown_content">
<div class="dropdown_content type-one">
<div class="grid_btns">
<div class="">
<a class="nav-link <?php echo ($current_page === 'mobile-app-development') ? 'active' : ''; ?>"
href="mobile-app-development.php">Mobile App Development</a>
<a class="nav-link <?php echo ($current_page === 'ios') ? 'active' : ''; ?>"
href="ios.php">iOS App Development</a>
<a class="nav-link <?php echo ($current_page === 'android') ? 'active' : ''; ?>"
href="android.php">Android App Development</a>
<a class="nav-link <?php echo ($current_page === 'hybrid') ? 'active' : ''; ?>"
href="hybrid.php">Hybrid App Development</a>
<a class="nav-link <?php echo ($current_page === 'native') ? 'active' : ''; ?>"
href="native.php">Native App Development</a>
<a class="nav-link transparent-elem"></a>
<div class="grid_btns-inn">
<h3 class="mid-para py-3">Services We Offer</h3>
<div class="drop_down">
<!-- Mobile App Development Dropdown -->
<div class="for-view">
<a class="nav-link active-parent" onclick="toggleDropdown('mobileApp')">
Mobile App Development
<div class="for-arr-in-nav"></div>
</a>
<div id="mobileApp" class="inside_data-nav-items flexsy" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'mobile-app-development') ? 'active' : ''; ?>" href="mobile-app-development.php">Mobile App Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'ios') ? 'active' : ''; ?>" href="ios.php">iOS App Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'android') ? 'active' : ''; ?>" href="android.php">Android App Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'hybrid') ? 'active' : ''; ?>" href="hybrid.php">Hybrid App Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'native') ? 'active' : ''; ?>" href="native.php">Native App Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'native') ? 'active' : ''; ?>" href="native.php">Custom App Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'native') ? 'active' : ''; ?>" href="native.php">Cross Platform Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'native') ? 'active' : ''; ?>" href="native.php">Progressive Web App Services</a>
</div>
</div>
<!-- Website Development Dropdown -->
<div class="for-view">
<a class="nav-link" onclick="toggleDropdown('websiteDev')">
Website Development
<div class="for-arr-in-nav"></div>
</a>
<div id="websiteDev" class="inside_data-nav-items" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'website-development-services') ? 'active' : ''; ?>" href="website-development-services.php">Website Development Services</a>
<a class="nav_link_inside <?php echo ($current_page === 'cms-development') ? 'active' : ''; ?>" href="cms-development.php">CMS Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'ecommerce-website-development') ? 'active' : ''; ?>" href="ecommerce-website-development.php">eCommerce Website Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'wordpress-website-customization') ? 'active' : ''; ?>" href="wordpress-website-customization.php">WordPress Website Customization</a>
</div>
</div>
<!-- Custom Software Development Dropdown -->
<div class="for-view">
<a class="nav-link" onclick="toggleDropdown('customSoftware')">
Custom Software Development
<div class="for-arr-in-nav"></div>
</a>
<div id="customSoftware" class="inside_data-nav-items" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'custom-software-development') ? 'active' : ''; ?>" href="custom-software-development.php">Custom Software Development</a>
<a class="nav_link_inside <?php echo ($current_page === 'crm-software') ? 'active' : ''; ?>" href="crm-software.php">CRM Software</a>
<a class="nav_link_inside <?php echo ($current_page === 'erp-software') ? 'active' : ''; ?>" href="erp-software.php">ERP Software</a>
</div>
</div>
<!-- Design Thinking Dropdown -->
<div class="for-view">
<a class="nav-link" onclick="toggleDropdown('designThinking')">
Design Thinking
<div class="for-arr-in-nav"></div>
</a>
<div id="designThinking" class="inside_data-nav-items" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'wireframe-design') ? 'active' : ''; ?>" href="wireframe-design.php">Wireframe Design</a>
<a class="nav_link_inside <?php echo ($current_page === 'prototype-design') ? 'active' : ''; ?>" href="prototype-design.php">Prototype Design</a>
<a class="nav_link_inside <?php echo ($current_page === 'ui-design') ? 'active' : ''; ?>" href="ui-design.php">User Interface Design - UI</a>
<a class="nav_link_inside <?php echo ($current_page === 'ux-design') ? 'active' : ''; ?>" href="ux-design.php">User Interface Design - UX</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- <li class="drop_down single_line_drop <?php echo ($current_page === 'mobile-app-development') ? 'active' : ''; ?>"
data_dropdown>
<a class="nav_link" href="mobile-app-development.php">Mobile Apps</a>
</li> -->
<!-- Hire Developers -->
<li class="drop_down single_line_drop <?php echo (in_array($current_page, $hire_developers)) ? 'active' : ''; ?>" data_dropdown>
<button class="nav_link" data_dropdown_button>Hire Developers
<svg width="8" height="5" viewBox="0 0 8 5" fill="#ababab" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5L7.89711 0.5H0.102886L4 5Z" fill="white" fill-opacity="0.67" />
</svg>
</button>
<div class="dropdown_content type-one">
<div class="grid_btns">
<a class="nav-link transparent-elem"></a>
<div class="grid_btns-inn">
<h3 class="mid-para py-3">Hire Developers for Your Projects</h3>
<div class="drop_down">
<!-- Hire Mobile App Developers -->
<div class="for-view">
<a class="nav-link" onclick="toggleDropdown('mobileDevelopers')">
Hire Mobile App Developers
<div class="for-arr-in-nav"></div>
</a>
<div id="mobileDevelopers" class="inside_data-nav-items" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'hire-mobile-app-developers') ? 'active' : ''; ?>" href="hire-mobile-app-developers.php">Hire Mobile App Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'hire-native-app-developers') ? 'active' : ''; ?>" href="hire-native-app-developers.php">Hire Native App Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'hire-xamarin-developers') ? 'active' : ''; ?>" href="hire-xamarin-developers.php">Hire Xamarin Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'hire-android-developers') ? 'active' : ''; ?>" href="hire-android-developers.php">Hire Android Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'hire-flutter-developers') ? 'active' : ''; ?>" href="hire-flutter-developers.php">Hire Flutter App Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'hire-ionic-developers') ? 'active' : ''; ?>" href="hire-ionic-developers.php">Hire Ionic Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'hire-ios-developers') ? 'active' : ''; ?>" href="hire-ios-developers.php">Hire iOS Developers</a>
</div>
</div>
<!-- Hire Website Developers -->
<div class="for-view">
<a class="nav-link" onclick="toggleDropdown('websiteDevelopers')">
Hire Website Developers
<div class="for-arr-in-nav"></div>
</a>
<div id="websiteDevelopers" class="inside_data-nav-items" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'frontend-developers') ? 'active' : ''; ?>" href="frontend-developers.php">Hire Frontend Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'backend-developers') ? 'active' : ''; ?>" href="backend-developers.php">Hire Backend Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'fullstack-developers') ? 'active' : ''; ?>" href="fullstack-developers.php">Hire Full Stack Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'cms-developers') ? 'active' : ''; ?>" href="cms-developers.php">Hire CMS Developers</a>
</div>
</div>
<!-- Hire UI/UX Designers -->
<div class="for-view">
<a class="nav-link" onclick="toggleDropdown('uiUxDesigners')">
Hire UI/UX Designers
<div class="for-arr-in-nav"></div>
</a>
<div id="uiUxDesigners" class="inside_data-nav-items" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'ux-designers') ? 'active' : ''; ?>" href="ux-designers.php">Hire UX Designers</a>
<a class="nav_link_inside <?php echo ($current_page === 'ui-designers') ? 'active' : ''; ?>" href="ui-designers.php">Hire UI Designers</a>
<a class="nav_link_inside <?php echo ($current_page === 'graphic-designers') ? 'active' : ''; ?>" href="graphic-designers.php">Hire Graphic Designers</a>
</div>
</div>
<!-- Hire Software Testers -->
<div class="for-view">
<a class="nav-link" onclick="toggleDropdown('softwareTesters')">
Hire Software Testers
<div class="for-arr-in-nav"></div>
</a>
<div id="softwareTesters" class="inside_data-nav-items" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'manual-testers') ? 'active' : ''; ?>" href="manual-testers.php">Hire Manual Testers</a>
<a class="nav_link_inside <?php echo ($current_page === 'automation-testers') ? 'active' : ''; ?>" href="automation-testers.php">Hire Automation Testers</a>
<a class="nav_link_inside <?php echo ($current_page === 'qa-leads') ? 'active' : ''; ?>" href="qa-leads.php">Hire QA Leads</a>
</div>
</div>
<!-- Hire Software Developers -->
<div class="for-view">
<a class="nav-link" onclick="toggleDropdown('softwareDevelopers')">
Hire Software Developers
<div class="for-arr-in-nav"></div>
</a>
<div id="softwareDevelopers" class="inside_data-nav-items" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'frontend-developers') ? 'active' : ''; ?>" href="frontend-developers.php">Hire Frontend Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'backend-developers') ? 'active' : ''; ?>" href="backend-developers.php">Hire Backend Developers</a>
<a class="nav_link_inside <?php echo ($current_page === 'fullstack-developers') ? 'active' : ''; ?>" href="fullstack-developers.php">Hire Full-stack Developers</a>
</div>
</div>
<!-- Hire Business Analyst -->
<div class="for-view">
<a class="nav-link" onclick="toggleDropdown('businessAnalyst')">
Hire Business Analyst
<div class="for-arr-in-nav"></div>
</a>
<div id="businessAnalyst" class="inside_data-nav-items" style="display: none;">
<a class="nav_link_inside <?php echo ($current_page === 'business-analyst') ? 'active' : ''; ?>" href="business-analyst.php">Hire Business Analyst</a>
<a class="nav_link_inside <?php echo ($current_page === 'data-analyst') ? 'active' : ''; ?>" href="data-analyst.php">Hire Data Analyst</a>
<a class="nav_link_inside <?php echo ($current_page === 'product-manager') ? 'active' : ''; ?>" href="product-manager.php">Hire Product Manager</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- Web Apps -->
<li class="drop_down single_line_drop <?php echo ($current_page === 'web-app-development') ? 'active' : ''; ?>"
@@ -66,17 +219,17 @@ $company_pages = ['company-about-uss', 'project-managementt', 'portfolioo'];
<a class="nav_link" href="web-app-development.php">Web Apps</a>
</li>
<!-- Product Development -->
<li class="drop_down single_line_drop <?php echo (in_array($current_page, $product_development_pages)) ? 'active' : ''; ?>"
data_dropdown>
<!-- Product Development Dropdown -->
<li class="drop_down single_line_drop <?php echo (in_array($current_page, $product_development_pages)) ? 'active' : ''; ?>" data_dropdown>
<button class="nav_link" data_dropdown_button>Product Development
<svg width="8" height="5" viewBox="0 0 8 5" fill="#ababab" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5L7.89711 0.5H0.102886L4 5Z" fill="white" fill-opacity="0.67" />
<svg width="8" height="5" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5L7.89711 0.5H0.102886L4 5Z" />
</svg>
</button>
<div class="dropdown_content">
<div class="dropdown_content type-two">
<div class="grid_btns">
<div class="">
<a class="nav-link transparent-elem"></a>
<div class="grid_btns-inn">
<a class="nav-link <?php echo ($current_page === 'product-development') ? 'active' : ''; ?>"
href="product-development.php">Product Development</a>
<a class="nav-link <?php echo ($current_page === 'ai-ml') ? 'active' : ''; ?>"
@@ -117,9 +270,10 @@ $company_pages = ['company-about-uss', 'project-managementt', 'portfolioo'];
<path d="M4 5L7.89711 0.5H0.102886L4 5Z" fill="white" fill-opacity="0.67" />
</svg>
</button>
<div class="dropdown_content">
<div class="dropdown_content type-two">
<div class="grid_btns">
<div class="">
<a class="nav-link transparent-elem"></a>
<div class="grid_btns-inn">
<a class="nav-link <?php echo ($current_page === 'company-about-us') ? 'active' : ''; ?>"
href="company-about-us.php">About Us</a>
<a class="nav-link <?php echo ($current_page === 'project-management') ? 'active' : ''; ?>"

2
pages/hire-uiux-developer.php
View File

@@ -702,7 +702,7 @@
<section class="collaborate-with-sec section">
<div class="container">
<p class="mid-head">Collaborate With The developers oF WDI</p>
<p class="mid-head">Collaborate With The developers of WDI</p>
<p class="dark-grey-para">At WDI, we believe in assembling a team of talented and passionate individuals who
are dedicated to pushing the boundaries of innovation. </p>

36
pages/hire-website-developer.php
View File

@@ -12,9 +12,9 @@
<div class="container">
<div class="row">
<div class="col-md-7 banner-col">
<p>Hire Web App Developer</p>
<h1 class="head"><span class="gr-txt">Hire </span> Website Developers
</p>
<p>Hire Mobile App Developers</p>
<h1 class="head"><span class="gr-txt">Hire </span> UI/UX Developers
</h1>
<p class="grey-para">Our talented team of developers, designers, and engineers has consistently <br>
demonstrated a dedication to pushing the boundaries of what is possible in the <br> digital
landscape.</p>
@@ -148,7 +148,7 @@
<img class="bann_img" loading="lazy" src="../assets/images/new-img/leverage_banner.webp" alt="leverage_banner">
<div class="comm_padd_sec section">
<div class="container">
<h2 class="mid-head">How We Leverage <span class="gr-txt">AI in Your Favor</span>
<p class="mid-head">How We Leverage <span class="gr-txt">AI in Your Favor</span>
<sup> <img loading="lazy" src="../assets/images/new-img/gemini.webp"
alt="colored_gemini_icon"></sup>
</p>
@@ -338,7 +338,7 @@
<div class="mobile-banner-content">
<div class="row">
<div class="col-md-5">
<h2 class="mid-head">Scaling Up or Launching Your Startup
<p class="mid-head">Scaling Up or Launching Your Startup
</p>
</div>
<div class="col-md-7">
@@ -418,7 +418,7 @@
<div class="container">
<div class="row">
<div class="col-md-7">
<h2 class="mid-head">Let's Make Your Next Game-Changing iOS App</p>
<p class="mid-head">Let's Make Your Next Game-Changing iOS App</p>
<p class="grey-para">Your concept needs an iOS app to give results. Whether it is building a
breathtaking user experience or a secure, high-performing app, we turn your vision into reality.
Every step from the custom iOS development process to App Store deployment is planned to bring
@@ -456,7 +456,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/regroup.webp" alt="">
</div>
<h2 class="mid-head">Unite Sports Fans from Around the World with Regroup</p>
<p class="mid-head">Unite Sports Fans from Around the World with Regroup</p>
<p class="mini-head-para">Connect, Share, and Join Teams Around the World</p>
<p class="grey-para">Break all barriers in sports networking. Regroup aggregates sports fans
and teams and lets you communicate, collaborate, and keep track of events in one active
@@ -471,7 +471,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/woka.webp" alt="">
</div>
<h2 class="mid-head">Change the Way Kids Learn and Play with Woka</p>
<p class="mid-head">Change the Way Kids Learn and Play with Woka</p>
<p class="mini-head-para">Animated Shows, Video Games, and Web Series for Kids</p>
<p class="grey-para">Woka makes learning a fun and exciting experience. From animated
content to interactive video games and engaging web series, every feature is meant to
@@ -486,7 +486,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/seezun.webp" alt="">
</div>
<h2 class="mid-head">Revolutionize the way you shop South Asian Clothing with Seezun</p>
<p class="mid-head">Revolutionize the way you shop South Asian Clothing with Seezun</p>
<p class="mini-head-para">Rent, Buy, or Sell Old & New Clothes</p>
<p class="grey-para">Step into a new way of buying. Rent, buy or sell South Asian clothing
from others.
@@ -502,7 +502,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/simpletend.webp" alt="">
</div>
<h2 class="mid-head">Make Wellness Easy for Seniors with Simplitend</p>
<p class="mid-head">Make Wellness Easy for Seniors with Simplitend</p>
<p class="mini-head-para">Easy Prescription Management and Health Tracking</p>
<p class="grey-para">Transformed into a trusted, intuitive app that empowers seniors to take
control of their prescriptions, monitor their health, and stay on top of their wellness
@@ -517,7 +517,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/gsf.webp" style="width:170px;" alt="">
</div>
<h2 class="mid-head">GetSetFit Your Fitness Revolution</p>
<p class="mid-head">GetSetFit Your Fitness Revolution</p>
<p class="mini-head-para">GetSetFit Personalised Plans Tailored to Your Goals</p>
<p class="grey-para">Set your fitness goals and track your progress. GetSetFit helps you
achieve holistic fitness with customized workouts and wellness insights.</p>
@@ -531,7 +531,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/tanami.webp" alt="">
</div>
<h2 class="mid-head">Transform The Way You Grow Your Money with Tanami Capital</p>
<p class="mid-head">Transform The Way You Grow Your Money with Tanami Capital</p>
<p class="mini-head-para">Real-Time Investment Tracking, Seamless Portfolio Management</p>
<p class="grey-para">Remove the guesswork from growing your finances. Real-time investment
tracking and easy portfolio management put you effortlessly in control of your assets.
@@ -546,7 +546,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/prosperty.webp" alt="">
</div>
<h2 class="mid-head">Change the way you think about real estate investment with Prospert</p>
<p class="mid-head">Change the way you think about real estate investment with Prospert</p>
<p class="mini-head-para">Invest in pieces, diversify your portfolio</p>
<p class="grey-para">Break the barrier of real estate investing. With Prosperty, you can
invest in portions of properties, making portfolio diversification smarter and more
@@ -561,7 +561,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/sai-service.webp" alt="">
</div>
<h2 class="mid-head">Comprehensive Automotive Solutions</p>
<p class="mid-head">Comprehensive Automotive Solutions</p>
<p class="mini-head-para">One-Stop Shop for All Vehicle Needs</p>
<p class="grey-para">Sai Service Group is a leading automotive dealership offering a wide
range of services under one roof. Specializing in car sales, after-sales support,
@@ -577,7 +577,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/good-times.webp" alt="">
</div>
<h2 class="mid-head">Find Top Local Events with Good Times</p>
<p class="mid-head">Find Top Local Events with Good Times</p>
<p class="mini-head-para">Find events for any event, any time, effortless</p>
<p class="grey-para">From casual hangouts to special celebrations, Good Times makes browsing
and booking a breeze, so you never miss out.</p>
@@ -591,7 +591,7 @@
<div class="logo">
<img src="../assets/images/new-img/imgs/tc.webp" alt="">
</div>
<h2 class="mid-head">Empower India's Millennials & Gen Z with Smarter Investments</p>
<p class="mid-head">Empower India's Millennials & Gen Z with Smarter Investments</p>
<p class="mini-head-para">Seamless Investment, Ultra-personalized financial planning</p>
<p class="grey-para">Unlock a new dimension of investment decisions in the booming Indian
market. With every move handcrafted for your unique needs, Trader Circuit ensures every
@@ -662,7 +662,7 @@
<section class="award-rec-sec section bg_animate">
<div class="container">
<h2 class="mid-head">Awards and Recognition</p>
<p class="mid-head">Awards and Recognition</p>
<p class="dark-grey-para">Innovation and excellence have earned WDI the recognition of the industry leaders.
Winning for outstanding mobile app development <br> to delivering over 2,000 successful projects
worldwide
@@ -702,7 +702,7 @@
<section class="collaborate-with-sec section">
<div class="container">
<h2 class="mid-head">Collaborate With The developers oF WDI</p>
<p class="mid-head">Collaborate With The developers of WDI</p>
<p class="dark-grey-para">At WDI, we believe in assembling a team of talented and passionate individuals who
are dedicated to pushing the boundaries of innovation. </p>

1
pages/homepage.php
View File

@@ -110,7 +110,6 @@
<!-- what-do-we start -->
<section class="section what_do_we_section">