- Swiper Slider
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
- 
-
-
-
- 
-
-
-
- 
-
-
-
-
Featured Projects
- -
-
+
+
-
-
-
-
\ No newline at end of file
+
+
-
-
-
-
-
-
-
-
-
-
- Evil Genius Games
-Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!
+
-
-
- 
+
+
- 
-
-
-
- 
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 22080c3..3dbc46e 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,44 +1,44 @@
-const partnersSlider = new Swiper('.partners-slider .swiper', {
- direction: 'horizontal',
- loop: true,
- autoplay: {
- delay: 800,
- disableOnInteraction: false,
- },
-});
+ const partnersSlider = new Swiper('.partners-slider .swiper', {
+ direction: 'horizontal',
+ loop: true,
+ autoplay: {
+ delay: 800,
+ disableOnInteraction: false,
+ },
+ });
-const partnersSliderElement = document.querySelector('.partners-slider .swiper');
-if (partnersSliderElement) {
- partnersSliderElement.addEventListener('mouseenter', () => partnersSlider.autoplay.stop());
- partnersSliderElement.addEventListener('mouseleave', () => partnersSlider.autoplay.start());
-}
+ const partnersSliderElement = document.querySelector('.partners-slider .swiper');
+ if (partnersSliderElement) {
+ partnersSliderElement.addEventListener('mouseenter', () => partnersSlider.autoplay.stop());
+ partnersSliderElement.addEventListener('mouseleave', () => partnersSlider.autoplay.start());
+ }
-const imageSlider = new Swiper(".image-slider", {
- loop: true,
- slidesPerView: 3,
- centeredSlides: true,
- effect: "coverflow",
- coverflowEffect: {
- rotate: 0,
- depth: 200,
- stretch: 30,
- modifier: 1,
- scale: 1,
- slideShadows: false,
- },
- grabCursor: true,
- allowTouchMove: true,
-});
+ const imageSlider = new Swiper(".image-slider", {
+ loop: true,
+ slidesPerView: 3,
+ centeredSlides: true,
+ effect: "coverflow",
+ coverflowEffect: {
+ rotate: 0,
+ depth: 200,
+ stretch: 30,
+ modifier: 1,
+ scale: 1,
+ slideShadows: false,
+ },
+ grabCursor: true,
+ allowTouchMove: true,
+ });
-const infoSlider = new Swiper(".info-slider", {
- loop: true,
- grabCursor: true,
- allowTouchMove: true,
- pagination: {
- el: '.swiper-pagination',
- clickable: true,
- },
-});
+ const infoSlider = new Swiper(".info-slider", {
+ loop: true,
+ grabCursor: true,
+ allowTouchMove: true,
+ pagination: {
+ el: '.swiper-pagination',
+ clickable: true,
+ },
+ });
-imageSlider.controller.control = infoSlider;
-infoSlider.controller.control = imageSlider;
\ No newline at end of file
+ imageSlider.controller.control = infoSlider;
+ infoSlider.controller.control = imageSlider;
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index b6a9afb..21100e7 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1,111 +1,112 @@
-body {
- display: flex;
- flex-direction: column;
- align-items: center;
- background-color: #f9f9f9;
- margin: 0;
- font-family: Arial, sans-serif;
-}
+ body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #f9f9f9;
+ margin: 0;
+ font-family: Arial, sans-serif;
+ }
-.slider-one-heading {
- text-align: center;
- margin: 20px 0;
-}
+ .slider-one-heading {
+ text-align: center;
+ margin: 20px 0;
+ }
-.slider-one-heading p {
- font-size: 24px;
- font-weight: bold;
- color: #333;
- margin: 0;
-}
+ .slider-one-heading p {
+ font-size: 24px;
+ font-weight: bold;
+ color: #333;
+ margin: 0;
+ }
-.swiper-container {
- width: 50%;
- height: auto;
-}
+ .swiper-container {
+ width: 50%;
+ height: auto;
+ cursor: pointer;
+ }
-.swiper {
- width: 100%;
- height: 300px;
- border-radius: 10px;
- overflow: hidden;
- background-color: #fff;
-}
+ .swiper {
+ width: 100%;
+ height: 300px;
+ border-radius: 10px;
+ overflow: hidden;
+ background-color: #fff;
+ }
-.swiper-slide {
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: transparent;
- width: 50%;
- height: 100%;
-}
+ .swiper-slide {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: transparent;
+ width: 50%;
+ height: 100%;
+ }
-.swiper-slide img {
- max-width: 100%;
- max-height: 100%;
- object-fit: contain;
- border-radius: 10px;
- padding: 50px;
-}
+ .swiper-slide img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ border-radius: 10px;
+ padding: 50px;
+ }
-.featured-projects-section {
- width: 70%;
- height: auto;
- margin: 0 auto;
- margin-top: 10px;
- padding: 10px 0;
-}
+ .featured-projects-section {
+ width: 70%;
+ height: auto;
+ margin: 0 auto;
+ margin-top: 10px;
+ padding: 10px 0;
+ }
-.project-title {
- font-size: 26px;
- margin-bottom: 20px;
- text-align: center;
-}
+ .project-title {
+ font-size: 26px;
+ margin-bottom: 20px;
+ text-align: center;
+ }
-.project-container {
- display: flex;
-}
+ .project-container {
+ display: flex;
+ }
-.image-slider .swiper-slide img {
- width: 100%;
- height: 100%;
- object-fit: contain;
- border-radius: 10px;
-
-}
+ .image-slider .swiper-slide img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ border-radius: 10px;
+
+ }
-.info-slider .swiper-slide {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- text-align: left;
- padding: 0px;
- background-color: #ffffff;
- width: 100%;
- /* opacity: 0.8; */
+ .info-slider .swiper-slide {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ text-align: left;
+ padding: 0px;
+ background-color: #ffffff;
+ width: 100%;
+ /* opacity: 0.8; */
-}
+ }
-.info-slider .swiper-slide h3 {
- font-size: 24px;
- margin-bottom: 10px;
- color: #333;
- margin-left: 50px;
- /* opacity: 0.8; */
-}
+ .info-slider .swiper-slide h3 {
+ font-size: 24px;
+ margin-bottom: 10px;
+ color: #333;
+ margin-left: 50px;
+ /* opacity: 0.8; */
+ }
-.info-slider .swiper-slide p {
- font-size: 16px;
- color: #555;
- margin-left: 50px;
+ .info-slider .swiper-slide p {
+ font-size: 16px;
+ color: #555;
+ margin-left: 50px;
-}
+ }
-.project-container .swiper {
- margin-top: 30px;
- width: 100%;
- height: 500px;
-}
+ .project-container .swiper {
+ margin-top: 30px;
+ width: 100%;
+ height: 500px;
+ }
Featured Projects
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+