diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index c07a8e7e8c9661e3ebfdbbbb50e3e244e7cedb32..c3a7ba64ce8a76d063504865ff03579e927cd61c 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -414,7 +414,7 @@ section {
inset: 0;
padding: 50px 0 10px 0;
margin: 0;
- background: rgba(27, 47, 69, 0.9);
+ background: rgba(255, 255, 255, 0.9);
overflow-y: auto;
transition: 0.3s;
z-index: 9998;
diff --git a/public/assets/js/main.js b/public/assets/js/main.js
index 4a4017c3edc73a519e053515e0f7a44c99500a9b..1afad350df02c97040ef383b6d546419dcbcb112 100644
--- a/public/assets/js/main.js
+++ b/public/assets/js/main.js
@@ -34,6 +34,7 @@ document.addEventListener('DOMContentLoaded', () => {
const mobileNavHide = document.querySelector('.mobile-nav-hide');
document.querySelectorAll('.mobile-nav-toggle').forEach(el => {
+ console.log(el)
el.addEventListener('click', function(event) {
event.preventDefault();
mobileNavToogle();
diff --git a/public/index.html b/public/index.html
index 4d1b6a3b5997906f8ca881f2e3089d772dd17914..1ea06f7a23d3c531cb8bc630c65872a84a74ae80 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,8 +10,8 @@
<meta content="" name="keywords">
<!-- Favicons -->
- <link href="assets/img/logo.png" rel="icon">
- <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
+ <link href="./assets/img/logo.png" rel="icon">
+ <link href="./assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -21,15 +21,15 @@
rel="stylesheet">
<!-- Vendor CSS Files -->
- <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
- <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
- <link href="assets/vendor/aos/aos.css" rel="stylesheet">
- <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
- <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
- <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
+ <link href="./assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+ <link href="./assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
+ <link href="./assets/vendor/aos/aos.css" rel="stylesheet">
+ <link href="./assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
+ <link href="./assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
+ <link href="./assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<!-- Template Main CSS File -->
- <link href="assets/css/main.css" rel="stylesheet">
+ <link href="./assets/css/main.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Nova - v1.3.0
@@ -59,15 +59,15 @@
<div id="preloader"></div>
<!-- Vendor JS Files -->
- <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
- <script src="assets/vendor/aos/aos.js"></script>
- <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
- <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
- <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
- <script src="assets/vendor/php-email-form/validate.js"></script>
+ <script src="./assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+ <script src="./assets/vendor/aos/aos.js"></script>
+ <script src="./assets/vendor/glightbox/js/glightbox.min.js"></script>
+ <script src="./assets/vendor/swiper/swiper-bundle.min.js"></script>
+ <script src="./assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
+ <script src="./assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
- <script src="assets/js/main.js"></script>
+ <script src="./assets/js/main.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/src/Components/TopNav.js b/src/Components/TopNav.js
index 8f924974e26b7fd24227b15d5839d9d8ca9cbd79..dc6372837c7d4d6f72505569919a648f8a2fd7ad 100644
--- a/src/Components/TopNav.js
+++ b/src/Components/TopNav.js
@@ -1,6 +1,7 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react'
import { Link } from "react-router-dom";
+import './navigation'
export default function TopNav() {
return (
@@ -13,8 +14,8 @@ export default function TopNav() {
<h1 className="d-flex align-items-center" style={{ color: '#013E7B' }}>Novisync</h1>
</Link>
- <i className="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
- <i className="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
+ <i style={{ color: '#013E7B' }} className="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
+ <i style={{ color: '#013E7B' }} className="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
<nav id="navbar" className="navbar" >
<ul>
diff --git a/src/Components/navigation.js b/src/Components/navigation.js
new file mode 100644
index 0000000000000000000000000000000000000000..553a3b2517feee06615d92f78aaf694354535426
--- /dev/null
+++ b/src/Components/navigation.js
@@ -0,0 +1,41 @@
+
+
+ /**
+ * Mobile nav toggle
+ */
+ const mobileNavShow = document.querySelector('.mobile-nav-show');
+ const mobileNavHide = document.querySelector('.mobile-nav-hide');
+
+ document.querySelectorAll('.mobile-nav-toggle').forEach(el => {
+ el.addEventListener('click', function(event) {
+ event.preventDefault();
+ mobileNavToogle();
+ })
+ });
+
+ function mobileNavToogle() {
+ document.querySelector('body').classList.toggle('mobile-nav-active');
+ mobileNavShow.classList.toggle('d-none');
+ mobileNavHide.classList.toggle('d-none');
+ }
+
+ /**
+ * Toggle mobile nav dropdowns
+ */
+ const navDropdowns = document.querySelectorAll('.navbar .dropdown > a');
+
+ navDropdowns.forEach(el => {
+ el.addEventListener('click', function(event) {
+ if (document.querySelector('.mobile-nav-active')) {
+ event.preventDefault();
+ this.classList.toggle('active');
+ this.nextElementSibling.classList.toggle('dropdown-active');
+
+ let dropDownIndicator = this.querySelector('.dropdown-indicator');
+ dropDownIndicator.classList.toggle('bi-chevron-up');
+ dropDownIndicator.classList.toggle('bi-chevron-down');
+ }
+ })
+ });
+
+
\ No newline at end of file
diff --git a/src/Screens/blog.js b/src/Screens/blog.js
index 72b426b88968c10aaf6b8c83a605111cbe6ff998..d1575833c14a22e3a36180f14d28da03cd0fbe02 100644
--- a/src/Screens/blog.js
+++ b/src/Screens/blog.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/iframe-has-title */
import React from "react";
import Footer from "../Components/Footer";
import TopNav from "../Components/TopNav";
diff --git a/src/Screens/home.js b/src/Screens/home.js
index 46056f8fd72733090b1525893fdbdd0d55854989..2463fa4dcbf493450459deb9f3f77582db4d72b3 100644
--- a/src/Screens/home.js
+++ b/src/Screens/home.js
@@ -81,63 +81,62 @@ export default function Home() {
<section id="services-list" className="services-list">
<div className="container" data-aos="fade-up">
-
<div className="section-header">
<h2>Partners</h2>
</div>
- <div className="row gy-5">
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="row gy-5 d-flex">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client1.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client2.jpg'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client3.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client4.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client5.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client6.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client7.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client8.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client9.jpg'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client10.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client11.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client12.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client13.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client14.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client15.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client16.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client17.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client18.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
{/* <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
@@ -146,28 +145,28 @@ export default function Home() {
{/* <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client20.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div> */}
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client21.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
{/* <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client22.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div> */}
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client23.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
{/* <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client24.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div> */}
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client25.jpg'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client26.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client27.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
- <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+ <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
<img src={'assets/img/partners/client28.jpg'} alt="Patners" style={{ width: '170px', height: '70px' }} />
</div>
</div>