add custom website animation and set foundation for pages animation transitions - go top - menu animations - sidebar menu - scroll down
This commit is contained in:
MohamedGad100
parent
ab3b7ac34a
commit
ab4235892f
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,125 @@
|
|||
odoo.define('odex_new_website.custom_scripts', function (require) {
|
||||
"use strict";
|
||||
|
||||
$(document).ready(function () {
|
||||
// TEMPORARY: Clear the 'firstVisit' flag for testing
|
||||
localStorage.removeItem('firstVisit');
|
||||
|
||||
// Hide the main content, header, and footer initially
|
||||
const mainContent = $('#main-content');
|
||||
const websiteHeader = $('#top');
|
||||
const websiteFooter = $('footer');
|
||||
|
||||
// Check if we are on the home page
|
||||
const isHomePage = window.location.pathname === '/';
|
||||
|
||||
// Only hide on home page
|
||||
if (isHomePage) {
|
||||
mainContent.hide();
|
||||
websiteHeader.hide();
|
||||
websiteFooter.hide();
|
||||
} else {
|
||||
websiteHeader.show();
|
||||
websiteFooter.show();
|
||||
mainContent.show();
|
||||
}
|
||||
|
||||
// First Visit Entrance Layer
|
||||
const firstVisit = localStorage.getItem('firstVisit');
|
||||
const entranceLayer = $('#entrance-layer');
|
||||
|
||||
if (!firstVisit) {
|
||||
// Show the entrance layer by setting display to 'flex'
|
||||
entranceLayer.css('display', 'flex');
|
||||
localStorage.setItem('firstVisit', 'true');
|
||||
|
||||
// GSAP Timeline for entrance animation
|
||||
const loader = gsap.timeline();
|
||||
loader.to('.inner-progress', { duration: 3.5, height: '100%' })
|
||||
.set(".slogan #logo-container .image #path-e, .slogan #logo-container .image #path-other", { opacity: 0, scale: 0.7, filter: "blur(10px)" }, .7)
|
||||
.to(".slogan #logo-container .image #path-e, .slogan #logo-container .image #path-other", { duration: 1, opacity: 1, scale: 1, filter: "blur(0px)", ease: "power1.out" }, .9)
|
||||
.fromTo(".our-slogan-title span",{ opacity: 0, y: 50, filter: "blur(10px)" }, { duration: 1, opacity: 1, y: 0, filter: "blur(0px)", stagger: 0.1 }, 1)
|
||||
.to('#logo-container', { duration: 1, opacity: 0, filter: "blur(10px)", x: 20 })
|
||||
.to('.our-slogan-title', { duration: 1, opacity: 0, filter: "blur(10px)", x: 20 }, '-=1')
|
||||
.to('.progress', { duration: 1, opacity: 0, filter: "blur(10px)", x: 20 }, '-=1')
|
||||
.eventCallback("onComplete", () => {
|
||||
// After the entrance animation completes, slide up the entrance layer
|
||||
setTimeout(() => {
|
||||
// Start fading in the main content, header, and footer during entrance animation
|
||||
mainContent.fadeIn(500);
|
||||
websiteHeader.fadeIn(500);
|
||||
websiteFooter.fadeIn(500);
|
||||
|
||||
// Slide up the entrance layer
|
||||
entranceLayer.slideUp(600);
|
||||
});
|
||||
});
|
||||
|
||||
} else {
|
||||
// If it's not the first visit, show the main content, header, and footer immediately
|
||||
if (isHomePage) {
|
||||
mainContent.show();
|
||||
websiteHeader.show();
|
||||
websiteFooter.show();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Function to manage visibility of header and footer on other pages
|
||||
function showHeaderFooter() {
|
||||
const websiteHeader = $('#top');
|
||||
const websiteFooter = $('footer');
|
||||
|
||||
// Show header and footer
|
||||
websiteHeader.fadeIn(500);
|
||||
websiteFooter.fadeIn(500);
|
||||
|
||||
// Debugging
|
||||
console.log('Header and footer displayed:', websiteHeader.css('display'), websiteFooter.css('display'));
|
||||
}
|
||||
|
||||
// Initialize Barba.js for Page Transitions
|
||||
if (typeof barba !== 'undefined') {
|
||||
barba.init({
|
||||
transitions: [{
|
||||
leave(data) {
|
||||
// Code for transition out animation can be added here if needed
|
||||
console.log('Leaving page:', data.current.url);
|
||||
},
|
||||
enter(data) {
|
||||
const entranceLayer = $('#entrance-layer');
|
||||
|
||||
// Always reset header and footer visibility at the beginning of the enter transition
|
||||
$('#top').css('display', 'block');
|
||||
$('footer').css('display', 'block');
|
||||
|
||||
// Show header and footer at the start of the transition
|
||||
showHeaderFooter();
|
||||
|
||||
console.log('Entering page:', data.next.url);
|
||||
|
||||
// Check if entering the home page
|
||||
if (data.next.url === '/') {
|
||||
entranceLayer.css('display', 'flex');
|
||||
|
||||
// Show the entrance layer for a short duration
|
||||
setTimeout(() => {
|
||||
// Start fading in main content, header, and footer during entrance animation
|
||||
$('#main-content').fadeIn(500);
|
||||
$('#top').fadeIn(500);
|
||||
$('footer').fadeIn(500);
|
||||
|
||||
// Slide up the entrance layer
|
||||
entranceLayer.slideUp(1000);
|
||||
}, 4000);
|
||||
} else {
|
||||
// For other pages, ensure main content is shown immediately
|
||||
$('#main-content').fadeIn(500);
|
||||
}
|
||||
}
|
||||
}]
|
||||
});
|
||||
} else {
|
||||
console.error('Barba.js is not defined. Make sure it is included in your project.');
|
||||
}
|
||||
});
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
$(document).ready(function () {
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Navbar // Hide Navbar Up
|
||||
const showAnim = gsap.from("nav.navbar", { yPercent: -100, paused: true, duration: 0.2 }).progress(1);
|
||||
|
||||
|
|
@ -21,17 +25,75 @@ $(document).ready(function () {
|
|||
lastScrollY = currentScrollY;
|
||||
});
|
||||
|
||||
gsap.to("nav.navbar", {
|
||||
backgroundColor: "initial",
|
||||
background: "linear-gradient(210.92deg, #0CB28B 10.45%, #0C3A5A 93.09%)",
|
||||
scrollTrigger: {
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Navbar // Animate Navbar Background Based on Page & Element Existence
|
||||
const navbar = document.querySelector("nav.navbar");
|
||||
|
||||
// Initial state
|
||||
gsap.set(navbar, {
|
||||
background: "transparent"
|
||||
});
|
||||
|
||||
// Function to check and update navbar background
|
||||
function updateNavbarBackground() {
|
||||
const scrollY = window.scrollY;
|
||||
const coursesContainer = document.querySelector('.courses_show_case_container');
|
||||
|
||||
if (coursesContainer && scrollY > coursesContainer.offsetTop - 100) {
|
||||
if ($('#entrance-layer').is(':hidden')) {
|
||||
gsap.to(navbar, {
|
||||
background: "linear-gradient(210.92deg, #0CB28B 10.45%, #0C3A5A 93.09%)",
|
||||
duration: 0.5
|
||||
});
|
||||
}
|
||||
} else {
|
||||
gsap.to(navbar, {
|
||||
background: "transparent",
|
||||
duration: 0.5
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (document.querySelector('.courses_show_case_container')) {
|
||||
ScrollTrigger.create({
|
||||
trigger: ".courses_show_case_container",
|
||||
start: "top-=100px top",
|
||||
end: "+=100px",
|
||||
scrub: true,
|
||||
// markers: true
|
||||
}
|
||||
});
|
||||
onEnter: () => {
|
||||
if ($('#entrance-layer').is(':hidden')) {
|
||||
gsap.to(navbar, {
|
||||
background: "linear-gradient(210.92deg, #0CB28B 10.45%, #0C3A5A 93.09%)",
|
||||
duration: 0.5
|
||||
});
|
||||
}
|
||||
},
|
||||
onEnterBack: () => {
|
||||
if ($('#entrance-layer').is(':hidden')) {
|
||||
gsap.to(navbar, {
|
||||
background: "transparent",
|
||||
duration: 0.5
|
||||
});
|
||||
}
|
||||
},
|
||||
onLeaveBack: () => {
|
||||
gsap.to(navbar, {
|
||||
background: "transparent",
|
||||
duration: 0.5
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
$(window).on('scroll', updateNavbarBackground);
|
||||
} else {
|
||||
gsap.set(navbar, {
|
||||
background: "linear-gradient(210.92deg, #0CB28B 10.45%, #0C3A5A 93.09%)",
|
||||
duration: 0
|
||||
});
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Mobile Menu // Menu Icon & Mobile Popup Menu
|
||||
|
||||
|
|
@ -44,7 +106,6 @@ $(document).ready(function () {
|
|||
.to('.popup-overlay', { duration: .2, x: 0, ease: "expo.inOut" }, 0)
|
||||
.to('.popup-menu', { duration: .5, x: 0, ease: "expo.inOut" }, .3)
|
||||
.to(mobileMenuOverlayTransition, { duration: 1, width: "0px", ease: "expo.inOut" }, .3)
|
||||
// .from('.sequence', { stagger: .1, y: 20, opacity: 0 })
|
||||
|
||||
|
||||
// Open / Close Popup Menu
|
||||
|
|
@ -77,6 +138,7 @@ $(document).ready(function () {
|
|||
});
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Footer // set the contact call number
|
||||
var footerCallLink = document.getElementById('call-link');
|
||||
|
|
@ -86,6 +148,8 @@ $(document).ready(function () {
|
|||
console.error("Element with ID 'call-link' not found.");
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Scroll To Top
|
||||
|
||||
let scrollToTop = document.querySelector(".scroll-top");
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -67,23 +67,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -172,8 +180,10 @@
|
|||
filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination {
|
||||
width: auto;
|
||||
bottom: 80px;
|
||||
text-align: center;
|
||||
text-align: start;
|
||||
padding-inline-start: 30px;
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination .swiper-pagination-bullet, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next-next {
|
||||
background: rgba(255, 255, 255, 0.6980392157) !important;
|
||||
|
|
@ -512,22 +522,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -955,22 +974,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -1059,7 +1087,7 @@
|
|||
filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination {
|
||||
bottom: 90px;
|
||||
bottom: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination .swiper-pagination-bullet, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next-next {
|
||||
|
|
@ -1398,23 +1426,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -1503,8 +1539,10 @@
|
|||
filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination {
|
||||
bottom: 60px;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
bottom: 70px;
|
||||
text-align: start;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination .swiper-pagination-bullet, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next-next {
|
||||
background: rgba(255, 255, 255, 0.6980392157) !important;
|
||||
|
|
@ -1842,22 +1880,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -1946,7 +1993,7 @@
|
|||
filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination {
|
||||
bottom: 130px;
|
||||
bottom: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination .swiper-pagination-bullet, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next-next {
|
||||
|
|
@ -2285,22 +2332,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -2720,22 +2776,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -2817,7 +2882,7 @@
|
|||
filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination {
|
||||
bottom: 100px;
|
||||
bottom: 120px;
|
||||
left: 0px;
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -3161,17 +3226,25 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -3260,9 +3333,10 @@
|
|||
filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination {
|
||||
bottom: 0px;
|
||||
bottom: 5px;
|
||||
width: auto;
|
||||
text-align: start;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination .swiper-pagination-bullet, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next-next {
|
||||
background: rgba(255, 255, 255, 0.6980392157) !important;
|
||||
|
|
@ -3607,17 +3681,25 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -3706,9 +3788,10 @@
|
|||
filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination {
|
||||
bottom: 0px;
|
||||
bottom: 6px;
|
||||
width: auto;
|
||||
text-align: start;
|
||||
padding-inline-start: 5px;
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination .swiper-pagination-bullet, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next-next {
|
||||
background: rgba(255, 255, 255, 0.6980392157) !important;
|
||||
|
|
@ -4053,17 +4136,25 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -4152,9 +4243,10 @@
|
|||
filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination {
|
||||
bottom: 0px;
|
||||
bottom: 6px;
|
||||
width: auto;
|
||||
text-align: start;
|
||||
padding-inline-start: 10px;
|
||||
}
|
||||
.header .swiper.cta .swiper-pagination .swiper-pagination-bullet, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next, .header .swiper.cta .swiper-pagination .swiper-pagination-bullet-active-next-next {
|
||||
background: rgba(255, 255, 255, 0.6980392157) !important;
|
||||
|
|
@ -4493,22 +4585,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -4927,22 +5028,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 27px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -5361,22 +5471,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 27px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -5794,22 +5913,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -6227,22 +6355,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 8px 12px;
|
||||
height: 30px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -6660,22 +6797,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 8px 12px;
|
||||
height: 30px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -7093,22 +7239,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 10px 14px;
|
||||
height: 35px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 2px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 3px;
|
||||
height: 10px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -7526,22 +7681,31 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
bottom: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header .scroll_container .scroll {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
.header .scroll_container .mouse_element {
|
||||
width: 3px;
|
||||
padding: 20px 24px;
|
||||
height: 45px;
|
||||
border: 4px solid #fff;
|
||||
border-radius: 35px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.header .scroll_container span {
|
||||
width: 4px;
|
||||
height: 55px;
|
||||
background-color: white;
|
||||
.header .scroll_container .mouse_element .scroller {
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
border-radius: 35%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.header .swiper.cta {
|
||||
width: 100%;
|
||||
|
|
@ -7943,4 +8107,17 @@
|
|||
text-align: start;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(15px);
|
||||
opacity: 0;
|
||||
}
|
||||
}/*# sourceMappingURL=index.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -15,22 +15,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
span{
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -118,9 +126,10 @@
|
|||
}
|
||||
}
|
||||
.swiper-pagination{
|
||||
width: auto;
|
||||
bottom: 80px;
|
||||
// left: 0px;
|
||||
text-align: center;
|
||||
text-align: start;
|
||||
padding-inline-start: 30px;
|
||||
.swiper-pagination-bullet, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next{
|
||||
background: #FFFFFFB2!important;
|
||||
width: 8px!important;
|
||||
|
|
@ -462,21 +471,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
span{
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -907,21 +925,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
span{
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -1009,8 +1036,7 @@
|
|||
}
|
||||
}
|
||||
.swiper-pagination{
|
||||
bottom: 90px;
|
||||
// left: 0px;
|
||||
bottom: 120px;
|
||||
text-align: center;
|
||||
.swiper-pagination-bullet, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next{
|
||||
background: #FFFFFFB2!important;
|
||||
|
|
@ -1352,22 +1378,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
span{
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -1455,9 +1489,10 @@
|
|||
}
|
||||
}
|
||||
.swiper-pagination{
|
||||
bottom: 60px;
|
||||
// left: 0px;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
bottom: 70px;
|
||||
text-align: start;
|
||||
padding-inline-start: 20px;
|
||||
.swiper-pagination-bullet, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next{
|
||||
background: #FFFFFFB2!important;
|
||||
width: 10px!important;
|
||||
|
|
@ -1798,21 +1833,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
span{
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -1900,8 +1944,7 @@
|
|||
}
|
||||
}
|
||||
.swiper-pagination{
|
||||
bottom: 130px;
|
||||
// left: 0px;
|
||||
bottom: 150px;
|
||||
text-align: center;
|
||||
.swiper-pagination-bullet, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next{
|
||||
background: #FFFFFFB2!important;
|
||||
|
|
@ -2243,21 +2286,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
span{
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -2679,21 +2731,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
span{
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -2774,7 +2835,7 @@
|
|||
}
|
||||
}
|
||||
.swiper-pagination{
|
||||
bottom: 100px;
|
||||
bottom: 120px;
|
||||
left: 0px;
|
||||
text-align: start;
|
||||
.swiper-pagination-bullet, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next{
|
||||
|
|
@ -3121,16 +3182,24 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
span{
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -3218,9 +3287,10 @@
|
|||
}
|
||||
}
|
||||
.swiper-pagination{
|
||||
bottom: 0px;
|
||||
bottom: 5px;
|
||||
width: auto;
|
||||
text-align: start;
|
||||
padding-inline-start: 20px;
|
||||
.swiper-pagination-bullet, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next{
|
||||
background: #FFFFFFB2!important;
|
||||
width: 8px!important;
|
||||
|
|
@ -3568,16 +3638,24 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
span{
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -3665,9 +3743,10 @@
|
|||
}
|
||||
}
|
||||
.swiper-pagination{
|
||||
bottom: 0px;
|
||||
bottom: 6px;
|
||||
width: auto;
|
||||
text-align: start;
|
||||
padding-inline-start: 5px;
|
||||
.swiper-pagination-bullet, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next{
|
||||
background: #FFFFFFB2!important;
|
||||
width: 8px!important;
|
||||
|
|
@ -4015,16 +4094,24 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
span{
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 6px 10px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -4112,9 +4199,10 @@
|
|||
}
|
||||
}
|
||||
.swiper-pagination{
|
||||
bottom: 0px;
|
||||
bottom: 6px;
|
||||
width: auto;
|
||||
text-align: start;
|
||||
padding-inline-start: 10px;
|
||||
.swiper-pagination-bullet, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next{
|
||||
background: #FFFFFFB2!important;
|
||||
width: 8px!important;
|
||||
|
|
@ -4458,21 +4546,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
span{
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -4893,21 +4990,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
span{
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 27px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -5328,21 +5434,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
span{
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 27px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -5762,21 +5877,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
span{
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 7px 11px;
|
||||
height: 28px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -6196,21 +6320,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
span{
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 8px 12px;
|
||||
height: 30px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -6630,21 +6763,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
span{
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 8px 12px;
|
||||
height: 30px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -7064,21 +7206,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
bottom: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
span{
|
||||
width: 2px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 10px 14px;
|
||||
height: 35px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 3px;
|
||||
height: 10px;
|
||||
border-radius: 25%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -7498,21 +7649,30 @@
|
|||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
bottom: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.scroll{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
span{
|
||||
width: 4px;
|
||||
height: 55px;
|
||||
background-color: white;
|
||||
.mouse_element{
|
||||
width: 3px;
|
||||
padding: 20px 24px;
|
||||
height: 45px;
|
||||
border: 4px solid #fff;
|
||||
border-radius: 35px;
|
||||
opacity: 1;
|
||||
box-sizing: content-box;
|
||||
.scroller{
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
border-radius: 35%;
|
||||
background-color: #fff;
|
||||
animation-name: scroll;
|
||||
animation-duration: 2.2s;
|
||||
animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper.cta{
|
||||
|
|
@ -7916,3 +8076,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mouse Animation Inside Header
|
||||
@keyframes scroll{
|
||||
0% { opacity: 0; }
|
||||
10% { transform: translateY(0); opacity: 1; }
|
||||
100% { transform: translateY(15px); opacity: 0;}
|
||||
}
|
||||
|
|
@ -68,8 +68,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<a href="/">
|
||||
<!-- <a href="/">
|
||||
<img src="/odex_new_website/static/img/logo.png" alt="" title=""/>
|
||||
</a> -->
|
||||
<a class="company-logo" href="">
|
||||
<svg id="logo" class="image" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 300">
|
||||
<g>
|
||||
<path id="path-e" style="opacity: 1; fill: #fefffe; stroke: #fefffe; stroke-width: 3;" d="M 123.5,8.5 C 150.664,7.33639 177.997,7.16973 205.5,8 C 244.667,47.1667 283.833,86.3333 323,125.5 C 330.167,118.333 337.333,111.167 344.5,104 C 371.5,103.333 398.5,103.333 425.5,104 C 404.833,124.667 384.167,145.333 363.5,166 C 400.347,202.68 437.014,239.514 473.5,276.5 C 446.506,277.667 419.506,277.833 392.5,277 C 369.32,253.653 345.986,230.486 322.5,207.5 C 300.374,230.126 278.041,252.626 255.5,275 C 228.167,275.667 200.833,275.667 173.5,275 C 209.68,238.986 245.68,202.82 281.5,166.5 C 229.146,113.479 176.479,60.8123 123.5,8.5 Z" />
|
||||
</g>
|
||||
<g>
|
||||
<path id="path-other" style="opacity: 1; fill: #fefffe; stroke: #fefffe; stroke-width: 3;" d="M 7.5,58.5 C 53.1679,58.3333 98.8345,58.5 144.5,59 C 165.195,80.0286 186.195,100.695 207.5,121 C 161.501,121.5 115.501,121.667 69.5,121.5 C 69.5,125.833 69.5,130.167 69.5,134.5 C 119.834,134.333 170.168,134.5 220.5,135 C 231.471,144.97 242.137,155.303 252.5,166 C 242.137,176.697 231.471,187.03 220.5,197 C 170.168,197.5 119.834,197.667 69.5,197.5 C 69.5,201.833 69.5,206.167 69.5,210.5 C 115.501,210.333 161.501,210.5 207.5,211 C 186.833,231.667 166.167,252.333 145.5,273 C 99.1679,273.5 52.8345,273.667 6.5,273.5 C 6.17011,201.762 6.50345,130.096 7.5,58.5 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="company-name">Expert Co. Ltd.</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="main_menu">
|
||||
|
|
|
|||
|
|
@ -3,286 +3,315 @@
|
|||
<template id="home" name="Home">
|
||||
<t t-call="website.layout">
|
||||
|
||||
<div class="oe_structure"/>
|
||||
<div id="wrap">
|
||||
<!--Page Code-->
|
||||
<div class="header">
|
||||
<div class="scroll_container">
|
||||
<img class="scroll" src="/odex_new_website/static/img/scroll-down.png" alt="" title=""/>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="swiper cta">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="content-home">
|
||||
<div class="call-to-action-headline">
|
||||
<h1 class="title">All Business Management Systems Solutions</h1>
|
||||
<h3 class="call-to-action-message">Khabir Co., Ltd. provides all solutions related to business management systems, application, development, training, integration, data migration and technical support.</h3>
|
||||
</div>
|
||||
<div class="call-to-action-buttons">
|
||||
<a class="cta_button" href="">Connect with the company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="call-to-action-img">
|
||||
<img src="/odex_new_website/static/img/slider-1.png" alt="" title=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="content-home">
|
||||
<div class="call-to-action-headline">
|
||||
<h1 class="title">Slide 2</h1>
|
||||
<h3 class="call-to-action-message">Khabir Co., Ltd. provides all solutions related to business management systems, application, development, training, integration, data migration and technical support.</h3>
|
||||
</div>
|
||||
<div class="call-to-action-buttons">
|
||||
<a class="cta_button" href="">Connect with the company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="call-to-action-img">
|
||||
<img src="/odex_new_website/static/img/slider-1.png" alt="" title=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="content-home">
|
||||
<div class="call-to-action-headline">
|
||||
<h1 class="title">Slide 3</h1>
|
||||
<h3 class="call-to-action-message">Khabir Co., Ltd. provides all solutions related to business management systems, application, development, training, integration, data migration and technical support.</h3>
|
||||
</div>
|
||||
<div class="call-to-action-buttons">
|
||||
<a class="cta_button" href="">Connect with the company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="call-to-action-img">
|
||||
<img src="/odex_new_website/static/img/slider-1.png" alt="" title=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="courses_show_case_container">
|
||||
<div class="section_title_container">
|
||||
<h2>Open Source Enterprise Management Systems Courses at King Saud University</h2>
|
||||
<h3>The courses are implemented by systems specialists at Khabeer Company Limited</h3>
|
||||
</div>
|
||||
<div class="courses_show_case">
|
||||
<div class="tab-buttons">
|
||||
<button class="tab-btn active">Most registered</button>
|
||||
<button class="tab-btn">Top Rated</button>
|
||||
<button class="tab-btn">Latest</button>
|
||||
</div>
|
||||
<!-- Tab content sections -->
|
||||
<div class="tab-content" id="tab1" style="display: flex;">
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<img class="ex_icon" src="/odex_new_website/static/img/ex.png" alt="" title=""/>
|
||||
<p class="view_more">View more courses</p>
|
||||
<a class="view_more_link" href=""><img src="/odex_new_website/static/img/all-courses.png" alt="" title=""/></a>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Technical Track Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/technical-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>advanced</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Career Path Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/career-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>Beginner</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content" id="tab2" style="display: none;">
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<img class="ex_icon" src="/odex_new_website/static/img/ex.png" alt="" title=""/>
|
||||
<p class="view_more">View more courses</p>
|
||||
<a class="view_more_link" href=""><img src="/odex_new_website/static/img/all-courses.png" alt="" title=""/></a>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Technical Track Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/technical-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>advanced</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Career Path Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/career-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>Beginner</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content" id="tab3" style="display: none;">
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<img class="ex_icon" src="/odex_new_website/static/img/ex.png" alt="" title=""/>
|
||||
<p class="view_more">View more courses</p>
|
||||
<a class="view_more_link" href=""><img src="/odex_new_website/static/img/all-courses.png" alt="" title=""/></a>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Technical Track Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/technical-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>advanced</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Career Path Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/career-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>Beginner</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="our_team_container">
|
||||
<h2>We have a professional team in multiple fields to ensure providing integrated services to our clients.</h2>
|
||||
<div class="our_team_sectors">
|
||||
<div class="sector">
|
||||
<img src="/odex_new_website/static/img/consultations.png" alt="" title=""/>
|
||||
<div class="sector_content">
|
||||
<h3>Consultations</h3>
|
||||
<span>Providing technical advice to help develop the organization's business and reduce costs.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sector">
|
||||
<img src="/odex_new_website/static/img/implementation.png" alt="" title=""/>
|
||||
<div class="sector_content">
|
||||
<h3>Implementation</h3>
|
||||
<span>With the help of our experts, implement the system step by step correctly.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sector">
|
||||
<img src="/odex_new_website/static/img/customization.png" alt="" title=""/>
|
||||
<div class="sector_content">
|
||||
<h3>Customization</h3>
|
||||
<span>Develop custom software procedures based on business needs.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sector">
|
||||
<img src="/odex_new_website/static/img/training.png" alt="" title=""/>
|
||||
<div class="sector_content">
|
||||
<h3>Training</h3>
|
||||
<span>Qualifying the organization’s cadres to keep pace with the organization’s digital transformation.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-top">
|
||||
<img src="/odex_new_website/static/img/top.png" alt="Scroll To Top" title=""/>
|
||||
</div>
|
||||
|
||||
<div id="entrance-layer">
|
||||
<div class="progress">
|
||||
<div class="inner-progress"></div>
|
||||
</div>
|
||||
<!-- <script src="/odex_new_website/static/js/aos.js"></script> -->
|
||||
<div class="slogan">
|
||||
<div id="logo-container">
|
||||
<svg id="logo" class="image" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 300">
|
||||
<g>
|
||||
<path id="path-e" style="opacity: 0; fill: #fefffe; stroke: #fefffe; stroke-width: 3;" d="M 123.5,8.5 C 150.664,7.33639 177.997,7.16973 205.5,8 C 244.667,47.1667 283.833,86.3333 323,125.5 C 330.167,118.333 337.333,111.167 344.5,104 C 371.5,103.333 398.5,103.333 425.5,104 C 404.833,124.667 384.167,145.333 363.5,166 C 400.347,202.68 437.014,239.514 473.5,276.5 C 446.506,277.667 419.506,277.833 392.5,277 C 369.32,253.653 345.986,230.486 322.5,207.5 C 300.374,230.126 278.041,252.626 255.5,275 C 228.167,275.667 200.833,275.667 173.5,275 C 209.68,238.986 245.68,202.82 281.5,166.5 C 229.146,113.479 176.479,60.8123 123.5,8.5 Z" />
|
||||
</g>
|
||||
<g>
|
||||
<path id="path-other" style="opacity: 0; fill: #fefffe; stroke: #fefffe; stroke-width: 3;" d="M 7.5,58.5 C 53.1679,58.3333 98.8345,58.5 144.5,59 C 165.195,80.0286 186.195,100.695 207.5,121 C 161.501,121.5 115.501,121.667 69.5,121.5 C 69.5,125.833 69.5,130.167 69.5,134.5 C 119.834,134.333 170.168,134.5 220.5,135 C 231.471,144.97 242.137,155.303 252.5,166 C 242.137,176.697 231.471,187.03 220.5,197 C 170.168,197.5 119.834,197.667 69.5,197.5 C 69.5,201.833 69.5,206.167 69.5,210.5 C 115.501,210.333 161.501,210.5 207.5,211 C 186.833,231.667 166.167,252.333 145.5,273 C 99.1679,273.5 52.8345,273.667 6.5,273.5 C 6.17011,201.762 6.50345,130.096 7.5,58.5 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="our-slogan">
|
||||
<p class="our-slogan-title">
|
||||
<span>Unleashing</span>
|
||||
<span>Your Potential</span>
|
||||
<span>with</span>
|
||||
<span>Expert</span>
|
||||
<span>Training</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main-content" style="display:none;">
|
||||
<div class="oe_structure"/>
|
||||
<div id="wrap">
|
||||
<!--Page Code-->
|
||||
<div class="header">
|
||||
<div class="scroll_container">
|
||||
<div class="mouse_element">
|
||||
<div class="scroller"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper cta">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="content-home">
|
||||
<div class="call-to-action-headline">
|
||||
<h1 class="title">All Business Management Systems Solutions</h1>
|
||||
<h3 class="call-to-action-message">Khabir Co., Ltd. provides all solutions related to business management systems, application, development, training, integration, data migration and technical support.</h3>
|
||||
</div>
|
||||
<div class="call-to-action-buttons">
|
||||
<a class="cta_button" href="">Connect with the company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="call-to-action-img">
|
||||
<img src="/odex_new_website/static/img/slider-1.png" alt="" title=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="content-home">
|
||||
<div class="call-to-action-headline">
|
||||
<h1 class="title">Slide 2</h1>
|
||||
<h3 class="call-to-action-message">Khabir Co., Ltd. provides all solutions related to business management systems, application, development, training, integration, data migration and technical support.</h3>
|
||||
</div>
|
||||
<div class="call-to-action-buttons">
|
||||
<a class="cta_button" href="">Connect with the company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="call-to-action-img">
|
||||
<img src="/odex_new_website/static/img/slider-1.png" alt="" title=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="content-home">
|
||||
<div class="call-to-action-headline">
|
||||
<h1 class="title">Slide 3</h1>
|
||||
<h3 class="call-to-action-message">Khabir Co., Ltd. provides all solutions related to business management systems, application, development, training, integration, data migration and technical support.</h3>
|
||||
</div>
|
||||
<div class="call-to-action-buttons">
|
||||
<a class="cta_button" href="">Connect with the company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="call-to-action-img">
|
||||
<img src="/odex_new_website/static/img/slider-1.png" alt="" title=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="courses_show_case_container">
|
||||
<div class="section_title_container">
|
||||
<h2>Open Source Enterprise Management Systems Courses at King Saud University</h2>
|
||||
<h3>The courses are implemented by systems specialists at Khabeer Company Limited</h3>
|
||||
</div>
|
||||
<div class="courses_show_case">
|
||||
<div class="tab-buttons">
|
||||
<button class="tab-btn active">Most registered</button>
|
||||
<button class="tab-btn">Top Rated</button>
|
||||
<button class="tab-btn">Latest</button>
|
||||
</div>
|
||||
<!-- Tab content sections -->
|
||||
<div class="tab-content" id="tab1" style="display: flex;">
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<img class="ex_icon" src="/odex_new_website/static/img/ex.png" alt="" title=""/>
|
||||
<p class="view_more">View more courses</p>
|
||||
<a class="view_more_link" href=""><img src="/odex_new_website/static/img/all-courses.png" alt="" title=""/></a>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Technical Track Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/technical-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>advanced</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Career Path Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/career-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>Beginner</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content" id="tab2" style="display: none;">
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<img class="ex_icon" src="/odex_new_website/static/img/ex.png" alt="" title=""/>
|
||||
<p class="view_more">View more courses</p>
|
||||
<a class="view_more_link" href=""><img src="/odex_new_website/static/img/all-courses.png" alt="" title=""/></a>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Technical Track Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/technical-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>advanced</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Career Path Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/career-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>Beginner</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content" id="tab3" style="display: none;">
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<img class="ex_icon" src="/odex_new_website/static/img/ex.png" alt="" title=""/>
|
||||
<p class="view_more">View more courses</p>
|
||||
<a class="view_more_link" href=""><img src="/odex_new_website/static/img/all-courses.png" alt="" title=""/></a>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Technical Track Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/technical-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>advanced</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course_element">
|
||||
<img class="course_bg" src="/odex_new_website/static/img/course-bg.png" alt="" title=""/>
|
||||
<h2>Career Path Course</h2>
|
||||
<img class="course_info_img" src="/odex_new_website/static/img/career-course.png" alt="" title=""/>
|
||||
<div class="course_info">
|
||||
<p><img src="/odex_new_website/static/img/calendar.png" alt="" title=""/>20 Septemper</p>
|
||||
<p><img src="/odex_new_website/static/img/duration.png" alt="" title=""/>9 Days</p>
|
||||
<p><img src="/odex_new_website/static/img/hours.png" alt="" title=""/>15 Hourse</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="course_actions">
|
||||
<div class="course_level_container">
|
||||
<div class="course_level">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<span>Beginner</span>
|
||||
</div>
|
||||
<a class="course_details" href="">Course details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="our_team_container">
|
||||
<h2>We have a professional team in multiple fields to ensure providing integrated services to our clients.</h2>
|
||||
<div class="our_team_sectors">
|
||||
<div class="sector">
|
||||
<img src="/odex_new_website/static/img/consultations.png" alt="" title=""/>
|
||||
<div class="sector_content">
|
||||
<h3>Consultations</h3>
|
||||
<span>Providing technical advice to help develop the organization's business and reduce costs.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sector">
|
||||
<img src="/odex_new_website/static/img/implementation.png" alt="" title=""/>
|
||||
<div class="sector_content">
|
||||
<h3>Implementation</h3>
|
||||
<span>With the help of our experts, implement the system step by step correctly.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sector">
|
||||
<img src="/odex_new_website/static/img/customization.png" alt="" title=""/>
|
||||
<div class="sector_content">
|
||||
<h3>Customization</h3>
|
||||
<span>Develop custom software procedures based on business needs.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sector">
|
||||
<img src="/odex_new_website/static/img/training.png" alt="" title=""/>
|
||||
<div class="sector_content">
|
||||
<h3>Training</h3>
|
||||
<span>Qualifying the organization’s cadres to keep pace with the organization’s digital transformation.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-top">
|
||||
<img src="/odex_new_website/static/img/top.png" alt="Scroll To Top" title=""/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</template>
|
||||
</odoo>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,14 @@
|
|||
<!-- <link rel="stylesheet" href="/odex_new_website/static/src/css/aos.css" /> -->
|
||||
<!-- <script src="/odex_new_website/static/js/aos.js"></script> -->
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
|
||||
|
||||
<!-- Lottie -->
|
||||
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
||||
|
||||
|
||||
|
||||
<!--GSAP-->
|
||||
<!-- <script src="/odex_new_website/static/js/gsap.min.js"></script>
|
||||
<script src="/odex_new_website/static/js/ScrollToPlugin.min.js"></script>
|
||||
|
|
@ -29,6 +37,7 @@
|
|||
<script src="/odex_new_website/static/js/hdr_footer.js"></script>
|
||||
<script src="/odex_new_website/static/js/index.js"></script>
|
||||
<script src="/odex_new_website/static/js/courses.js"></script>
|
||||
<script src="/odex_new_website/static/js/barba.js"></script>
|
||||
|
||||
</xpath>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue