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

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

@@ -33,6 +33,12 @@ p {
word-spacing: 1px; word-spacing: 1px;
} }
.semi-grey-para {
color: #d3d3d3e8;
font-size: clamp(15px, 1.33333vw, 16px);
word-spacing: 1px;
}
.dark-grey-para { .dark-grey-para {
color: #A7A7A7; color: #A7A7A7;
font-size: clamp(15px, 1.33333vw, 16px); font-size: clamp(15px, 1.33333vw, 16px);

262
assets/css/style.css
View File

@@ -227,10 +227,10 @@ img {
.header .nav_bar .drop_down>.nav_link { .header .nav_bar .drop_down>.nav_link {
padding: 5px; padding: 10px 5px;
color: var(--white); color: var(--white);
transition: .3s; transition: .3s;
font-weight: normal; font-weight: normal !important;
position: relative; position: relative;
font-size: 0.95rem; font-size: 0.95rem;
} }
@@ -320,37 +320,65 @@ img.arrow_up {
} }
/* Common styles for dropdown_content */
.header .nav_bar .dropdown_content { .header .nav_bar .dropdown_content {
position: absolute; position: absolute;
top: calc(100% + 0px); top: calc(100% + -32px);
opacity: 0; opacity: 0;
pointer-events: none; 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); transform: translateY(-10px);
-webkit-transform: translateY(-10px); -webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px); -moz-transform: translateY(-10px);
-ms-transform: translateY(-10px); -ms-transform: translateY(-10px);
-o-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; opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
pointer-events: auto; pointer-events: auto;
transform: translateX(-50px); 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 { .grid_btns {
gap: 40px; /* padding: 20px; */
padding: 20px;
position: relative; position: relative;
transition: top .2s; transition: top .2s;
-webkit-transition: top .2s; -webkit-transition: top .2s;
@@ -360,11 +388,17 @@ img.arrow_up {
top: 0px; top: 0px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background: #1F1F1F; /* background: #1F1F1F; */
display: flex; display: flex;
flex-direction: column; 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 button,
.grid_btns a { .grid_btns a {
@@ -385,30 +419,143 @@ img.arrow_up {
font-weight: normal; font-weight: normal;
font-size: 15px; font-size: 15px;
transition: color 0.3s ease; 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 { .grid_btns .nav-link:hover {
color: var(--orange); 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 { .grid_btns .nav-link.active {
color: var(--orange); color: var(--orange);
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
} }
.single_line_drop .grid_btns .buttons_width { .single_line_drop .grid_btns .buttons_width {
width: 100%; width: 100%;
} }
.single_line_drop .grid_btns .nav-link.active a, .single_line_drop .grid_btns .nav-link.active a,
.single_line_drop .grid_btns .nav-link:hover a { .single_line_drop .grid_btns .nav-link:hover a {
color: var(--white); color: var(--white);
} }
.cross_btn { .cross_btn {
position: absolute; position: absolute;
top: 15px; 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) { @media (max-width: 1130px) {
.head_inner .nav_bar .drop_down.active>.nav_link+.dropdown_content { .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 { .head_inner .nav_bar .drop_down.active>.nav_link+.dropdown_content {
transform: translateX(0px); transform: translateX(0px) !important;
} }
.header .head_inner .nav_bar { .header .head_inner .nav_bar {
@@ -2125,13 +2288,70 @@ button.pdf.btn {
.grid_btns .nav-link, .grid_btns .nav-link,
.grid_btns .nav-link:hover { .grid_btns .nav-link:hover {
padding: 10px 8px; padding: 10px 8px;
font-size: 13px; font-size: 14px;
} }
.nav_link svg path { .nav_link svg path {
fill: #000; 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;
}
} }

141
assets/js/custom.js
View File

@@ -1,40 +1,70 @@
// header navbar start //***** header navbar start
document.addEventListener("click", (e) => { // Function to check if the screen is small
const isDropdownButton = e.target.matches("[data_dropdown_button]"); function isSmallScreen() {
return window.innerWidth <= 1111; // Adjust this breakpoint if needed
}
// If click is inside an active dropdown, do nothing // Function to initialize dropdowns
if (!isDropdownButton && e.target.closest("[data_dropdown]") != null) return; function initializeDropdowns() {
document.querySelectorAll("[data_dropdown]").forEach((dropdown) => {
const dropdownButton = dropdown.querySelector("[data_dropdown_button]");
if (!dropdownButton) return;
let currentDropdown; // Remove previous event listeners by replacing the element
if (isDropdownButton) { const newDropdown = dropdown.cloneNode(true);
currentDropdown = e.target.closest("[data_dropdown]"); dropdown.parentNode.replaceChild(newDropdown, dropdown);
// Toggle the 'active' class on the clicked dropdown const newDropdownButton = newDropdown.querySelector("[data_dropdown_button]");
currentDropdown.classList.toggle("active");
// Remove 'active' class from other dropdowns if (isSmallScreen()) {
document.querySelectorAll(".single_line_drop.active").forEach((dropdown) => { // Small screen: Use click events
if (dropdown !== currentDropdown) { newDropdownButton.addEventListener("click", (e) => {
dropdown.classList.remove("active"); 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) // Update styles
updateParentLinkColor();
updateHeadInnerBackdrop(); updateHeadInnerBackdrop();
} });
} else {
// Large screen: Use hover events
newDropdown.addEventListener("mouseenter", () => {
newDropdown.classList.add("active");
// Ensure only one dropdown is active at a time // Remove active class from other dropdowns
document.querySelectorAll(".single_line_drop.active").forEach((dropdown) => { document.querySelectorAll(".single_line_drop.active").forEach((otherDropdown) => {
if (dropdown !== currentDropdown) { if (otherDropdown !== newDropdown) {
dropdown.classList.remove("active"); otherDropdown.classList.remove("active");
} }
}); });
// Update parent link color after closing or toggling dropdowns // Update styles
updateParentLinkColor();
updateHeadInnerBackdrop();
});
newDropdown.addEventListener("mouseleave", () => {
newDropdown.classList.remove("active");
// Update styles
updateParentLinkColor(); updateParentLinkColor();
}); });
}
});
}
// Function to update parent link color
function updateParentLinkColor() { function updateParentLinkColor() {
// Reset all parent nav_link styles // Reset all parent nav_link styles
document.querySelectorAll("[data_dropdown_button]").forEach((button) => { document.querySelectorAll("[data_dropdown_button]").forEach((button) => {
@@ -49,17 +79,29 @@ function updateParentLinkColor() {
const parentButton = parentDropdown.querySelector("[data_dropdown_button]"); const parentButton = parentDropdown.querySelector("[data_dropdown_button]");
if (parentButton) { if (parentButton) {
parentButton.style.color = "#e5195e"; // Apply active color 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 // Function to update the backdrop
document.addEventListener("DOMContentLoaded", updateParentLinkColor); 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 // sticky header start
@@ -180,6 +222,7 @@ $(document).ready(function () {
// *********** solution tabs end // *********** solution tabs end
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const tabs = document.querySelectorAll('.solution-tab .nav-link'); const tabs = document.querySelectorAll('.solution-tab .nav-link');
const navContainer = document.querySelector('.solution-tab .nav'); const navContainer = document.querySelector('.solution-tab .nav');
@@ -238,9 +281,9 @@ document.addEventListener("DOMContentLoaded", function () {
}); });
}); });
// *********** solution tabs end // *********** solution tabs end
// *********** Portfolio slider start // *********** Portfolio slider start
$(document).ready(function () { $(document).ready(function () {
@@ -361,7 +404,6 @@ updateSliderProgress();
// *********** Countdown start // *********** Countdown start
function animateCountUp(element, target, duration) { function animateCountUp(element, target, duration) {
let start = 0; let start = 0;
const increment = Math.ceil(target / (duration / 16)); const increment = Math.ceil(target / (duration / 16));
@@ -411,5 +453,48 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
// *********** Countdown end // *********** 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> </a>
<div class="rates"> <div class="rates">
<div class="rating"> <div class="rating">
<Span>5.0</Span> <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>
<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> </div>
<h3>WDIPL rating on clutch</h3> <h3>WDIPL rating on clutch</h3>
</div> </div>

214
components/header.php
View File

@@ -5,7 +5,8 @@
$current_page = basename($_SERVER['PHP_SELF'], ".php"); $current_page = basename($_SERVER['PHP_SELF'], ".php");
// Define arrays for dropdown categories // 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']; $product_development_pages = ['product-developmentt', 'ai-mll', 'app-modernizationn', 'ui-uxx', 'complete-digital-transformationn'];
$company_pages = ['company-about-uss', 'project-managementt', 'portfolioo']; $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> <i class="nav_cross_btn">✕</i>
</div> </div>
<ul> <ul>
<!-- Mobile Apps -->
<li class="drop_down single_line_drop <?php echo (in_array($current_page, $mobile_apps_pages)) ? 'active' : ''; ?>" <!-- Services Dropdown -->
data_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>Mobile Apps <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"> <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" /> <path d="M4 5L7.89711 0.5H0.102886L4 5Z" />
</svg> </svg>
</button> </button>
<div class="dropdown_content"> <div class="dropdown_content type-one">
<div class="grid_btns"> <div class="grid_btns">
<div class=""> <a class="nav-link transparent-elem"></a>
<a class="nav-link <?php echo ($current_page === 'mobile-app-development') ? 'active' : ''; ?>" <div class="grid_btns-inn">
href="mobile-app-development.php">Mobile App Development</a> <h3 class="mid-para py-3">Services We Offer</h3>
<a class="nav-link <?php echo ($current_page === 'ios') ? 'active' : ''; ?>" <div class="drop_down">
href="ios.php">iOS App Development</a> <!-- Mobile App Development Dropdown -->
<a class="nav-link <?php echo ($current_page === 'android') ? 'active' : ''; ?>" <div class="for-view">
href="android.php">Android App Development</a> <a class="nav-link active-parent" onclick="toggleDropdown('mobileApp')">
<a class="nav-link <?php echo ($current_page === 'hybrid') ? 'active' : ''; ?>" Mobile App Development
href="hybrid.php">Hybrid App Development</a> <div class="for-arr-in-nav"></div>
<a class="nav-link <?php echo ($current_page === 'native') ? 'active' : ''; ?>" </a>
href="native.php">Native App Development</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> </div>
</div> </div>
</li> </li>
<!-- <li class="drop_down single_line_drop <?php echo ($current_page === 'mobile-app-development') ? 'active' : ''; ?>"
data_dropdown> <!-- Hire Developers -->
<a class="nav_link" href="mobile-app-development.php">Mobile Apps</a> <li class="drop_down single_line_drop <?php echo (in_array($current_page, $hire_developers)) ? 'active' : ''; ?>" data_dropdown>
</li> --> <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 --> <!-- Web Apps -->
<li class="drop_down single_line_drop <?php echo ($current_page === 'web-app-development') ? 'active' : ''; ?>" <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> <a class="nav_link" href="web-app-development.php">Web Apps</a>
</li> </li>
<!-- Product Development --> <!-- Product Development Dropdown -->
<li class="drop_down single_line_drop <?php echo (in_array($current_page, $product_development_pages)) ? 'active' : ''; ?>" <li class="drop_down single_line_drop <?php echo (in_array($current_page, $product_development_pages)) ? 'active' : ''; ?>" data_dropdown>
data_dropdown>
<button class="nav_link" data_dropdown_button>Product Development <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"> <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" fill="white" fill-opacity="0.67" /> <path d="M4 5L7.89711 0.5H0.102886L4 5Z" />
</svg> </svg>
</button> </button>
<div class="dropdown_content"> <div class="dropdown_content type-two">
<div class="grid_btns"> <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' : ''; ?>" <a class="nav-link <?php echo ($current_page === 'product-development') ? 'active' : ''; ?>"
href="product-development.php">Product Development</a> href="product-development.php">Product Development</a>
<a class="nav-link <?php echo ($current_page === 'ai-ml') ? 'active' : ''; ?>" <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" /> <path d="M4 5L7.89711 0.5H0.102886L4 5Z" fill="white" fill-opacity="0.67" />
</svg> </svg>
</button> </button>
<div class="dropdown_content"> <div class="dropdown_content type-two">
<div class="grid_btns"> <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' : ''; ?>" <a class="nav-link <?php echo ($current_page === 'company-about-us') ? 'active' : ''; ?>"
href="company-about-us.php">About Us</a> href="company-about-us.php">About Us</a>
<a class="nav-link <?php echo ($current_page === 'project-management') ? 'active' : ''; ?>" <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"> <section class="collaborate-with-sec section">
<div class="container"> <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 <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> 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="container">
<div class="row"> <div class="row">
<div class="col-md-7 banner-col"> <div class="col-md-7 banner-col">
<p>Hire Web App Developer</p> <p>Hire Mobile App Developers</p>
<h1 class="head"><span class="gr-txt">Hire </span> Website Developers <h1 class="head"><span class="gr-txt">Hire </span> UI/UX Developers
</p> </h1>
<p class="grey-para">Our talented team of developers, designers, and engineers has consistently <br> <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 demonstrated a dedication to pushing the boundaries of what is possible in the <br> digital
landscape.</p> landscape.</p>
@@ -148,7 +148,7 @@
<img class="bann_img" loading="lazy" src="../assets/images/new-img/leverage_banner.webp" alt="leverage_banner"> <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="comm_padd_sec section">
<div class="container"> <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" <sup> <img loading="lazy" src="../assets/images/new-img/gemini.webp"
alt="colored_gemini_icon"></sup> alt="colored_gemini_icon"></sup>
</p> </p>
@@ -338,7 +338,7 @@
<div class="mobile-banner-content"> <div class="mobile-banner-content">
<div class="row"> <div class="row">
<div class="col-md-5"> <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> </p>
</div> </div>
<div class="col-md-7"> <div class="col-md-7">
@@ -418,7 +418,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-7"> <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 <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. 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 Every step from the custom iOS development process to App Store deployment is planned to bring
@@ -456,7 +456,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/regroup.webp" alt=""> <img src="../assets/images/new-img/imgs/regroup.webp" alt="">
</div> </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="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 <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 and teams and lets you communicate, collaborate, and keep track of events in one active
@@ -471,7 +471,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/woka.webp" alt=""> <img src="../assets/images/new-img/imgs/woka.webp" alt="">
</div> </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="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 <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 content to interactive video games and engaging web series, every feature is meant to
@@ -486,7 +486,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/seezun.webp" alt=""> <img src="../assets/images/new-img/imgs/seezun.webp" alt="">
</div> </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="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 <p class="grey-para">Step into a new way of buying. Rent, buy or sell South Asian clothing
from others. from others.
@@ -502,7 +502,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/simpletend.webp" alt=""> <img src="../assets/images/new-img/imgs/simpletend.webp" alt="">
</div> </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="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 <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 control of their prescriptions, monitor their health, and stay on top of their wellness
@@ -517,7 +517,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/gsf.webp" style="width:170px;" alt=""> <img src="../assets/images/new-img/imgs/gsf.webp" style="width:170px;" alt="">
</div> </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="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 <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> achieve holistic fitness with customized workouts and wellness insights.</p>
@@ -531,7 +531,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/tanami.webp" alt=""> <img src="../assets/images/new-img/imgs/tanami.webp" alt="">
</div> </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="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 <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. tracking and easy portfolio management put you effortlessly in control of your assets.
@@ -546,7 +546,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/prosperty.webp" alt=""> <img src="../assets/images/new-img/imgs/prosperty.webp" alt="">
</div> </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="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 <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 invest in portions of properties, making portfolio diversification smarter and more
@@ -561,7 +561,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/sai-service.webp" alt=""> <img src="../assets/images/new-img/imgs/sai-service.webp" alt="">
</div> </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="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 <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, range of services under one roof. Specializing in car sales, after-sales support,
@@ -577,7 +577,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/good-times.webp" alt=""> <img src="../assets/images/new-img/imgs/good-times.webp" alt="">
</div> </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="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 <p class="grey-para">From casual hangouts to special celebrations, Good Times makes browsing
and booking a breeze, so you never miss out.</p> and booking a breeze, so you never miss out.</p>
@@ -591,7 +591,7 @@
<div class="logo"> <div class="logo">
<img src="../assets/images/new-img/imgs/tc.webp" alt=""> <img src="../assets/images/new-img/imgs/tc.webp" alt="">
</div> </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="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 <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 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"> <section class="award-rec-sec section bg_animate">
<div class="container"> <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. <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 Winning for outstanding mobile app development <br> to delivering over 2,000 successful projects
worldwide worldwide
@@ -702,7 +702,7 @@
<section class="collaborate-with-sec section"> <section class="collaborate-with-sec section">
<div class="container"> <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 <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> are dedicated to pushing the boundaries of innovation. </p>

1
pages/homepage.php
View File

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