diff --git a/static/css/style.css b/static/css/style.css
index cbba6df8..eed54437 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -198,9 +198,7 @@ body.side-menu.active {
.content-open:before {
position: absolute;
top: 0;
- right: 0;
- left: 0;
- bottom: -2000000000px;
+ bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
@@ -223,38 +221,27 @@ body.side-menu.active {
overflow: hidden;
}
-.carousel-slider{
+.carousel-slider {
width: 100%;
- height: 130px;
overflow: hidden;
}
-.carousel-slider .carousel-list{
+
+.carousel-list {
display: flex;
+ flex-wrap: nowrap;
+ transition: transform 0.5s ease-in-out;
width: 100%;
- min-width: calc(100px * 16);
- position: relative;
}
-.carousel-slider .carousel-list .carousel-item{
- width: 100px;
- height: 100px;
- position: absolute;
- left: 100%;
- animation: autoRun 16s linear infinite;
- animation-delay: calc((16s / 16) * (var(--position) - 1));
-}
- .carousel-slider .carousel-list .carousel-item img{
- width: 100%;
- }
- @keyframes autoRun {
- from{
- left: 100%;
- }to{
- left: calc(100px * -1);
+.carousel-item {
+ width: calc(100% / 6);
+ flex: 0 0 calc(100% / 6);
+ text-align: center;
+}
+
+@media only screen and (max-width: 768px) {
+ .carousel-item {
+ width: calc(100% / 3);
+ flex: 0 0 calc(100% / 3);
}
- }
-
- .carousel-slider:hover .carousel-item{
- animation-play-state: paused!important;
- }
-
+}
\ No newline at end of file
diff --git a/static/js/carousel.js b/static/js/carousel.js
new file mode 100644
index 00000000..663241c1
--- /dev/null
+++ b/static/js/carousel.js
@@ -0,0 +1,11 @@
+function moveCarousel() {
+ const carouselSlider = document.querySelector('.carousel-slider');
+ const carouselList = document.querySelector('.carousel-list');
+ const carouselItems = document.querySelectorAll('.carousel-item');
+
+ const firstItem = carouselItems[0];
+ carouselList.removeChild(firstItem);
+ carouselList.appendChild(firstItem);
+}
+
+setInterval(moveCarousel, 3000);
\ No newline at end of file
diff --git a/static/js/index.js b/static/js/index.js
new file mode 100644
index 00000000..1307a562
--- /dev/null
+++ b/static/js/index.js
@@ -0,0 +1,49 @@
+ document.addEventListener('DOMContentLoaded', function() {
+ const sideToggle = document.querySelector('.side-toggle');
+ const sideMenu = document.querySelector('.side-menu');
+ const sideCloseButtons = document.querySelectorAll('.side-close');
+ const content = document.querySelector('.content');
+ const headermove = document.getElementById('header');
+ const body = document.body;
+ const footermove = document.getElementById('footer');
+
+ sideToggle.addEventListener('click', function() {
+ sideMenu.classList.toggle('active');
+ this.classList.toggle('menu-opened');
+ content.classList.toggle('content-open');
+ headermove.classList.toggle('header-move');
+ body.classList.toggle('block-scroll');
+ footermove.classList.toggle('header-move');
+ });
+
+ sideCloseButtons.forEach(button => {
+ button.addEventListener('click', function() {
+ sideMenu.classList.remove('active');
+ sideToggle.classList.remove('menu-opened');
+ content.classList.remove('content-open');
+ headermove.classList.remove('header-move');
+ body.classList.remove('block-scroll');
+ footermove.classList.remove('header-move');
+ });
+ });
+ })
+
+
+ var prevScrollPos = window.pageYOffset;
+
+ window.onscroll = function() {
+ var currentScrollPos = window.pageYOffset;
+ const getHeaderHeight = document.getElementById('header')
+ const headerPosition = header.offsetTop + header.offsetHeight;
+
+ if (prevScrollPos < currentScrollPos && currentScrollPos > headerPosition ) {
+ document.getElementById("header").classList.add("header-hidden");
+ document.getElementById("header").classList.remove("header-visible");
+ }
+ else {
+ document.getElementById("header").classList.add("header-visible");
+ document.getElementById("header").classList.remove("header-hidden");
+ }
+
+ prevScrollPos = currentScrollPos;
+ };
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index d99f9208..3cdfe678 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,15 +6,8 @@
{% block title %}Saburly - {{ self.title }}{% endblock %}
-
-
+
-
{% load static %}
@@ -31,58 +24,7 @@
{% include 'footer.html' %}
-
-
-
+
+
\ No newline at end of file
diff --git a/templates/services/services_page.html b/templates/services/services_page.html
index 3a8a250a..0de8bab6 100644
--- a/templates/services/services_page.html
+++ b/templates/services/services_page.html
@@ -85,10 +85,9 @@
{{ page.section_four_img|richtext }}
-
-