diff --git a/Blend-hero-section/main.js b/Blend-hero-section/main.js
new file mode 100644
index 0000000..4220af6
--- /dev/null
+++ b/Blend-hero-section/main.js
@@ -0,0 +1,246 @@
+$( "#nav-btn" ).on( "click", function() {
+    $('#takeover-nav').toggleClass("shown");
+    $('.sticky-nav').toggleClass("difference");
+  });
+  
+  
+  
+  ///Initiation Variables
+  var icon_1 = document.getElementById("nav-btn");
+  var topLine_1 = document.getElementById("top-line-1");
+  var middleLine_1 = document.getElementById("middle-line-1");
+  var bottomLine_1 = document.getElementById("bottom-line-1");
+  var state_1 = "menu";  // can be "menu" or "arrow"
+  var topLineY_1;
+  var middleLineY_1;
+  var bottomLineY_1;
+  var topLeftY_1;
+  var topRightY_1;
+  var bottomLeftY_1;
+  var bottomRightY_1;
+  var topLeftX_1;
+  var topRightX_1;
+  var bottomLeftX_1;
+  var bottomRightX_1;
+  
+  ///Animation Variables
+  var segmentDuration_1 = 15;
+  var menuDisappearDurationInFrames_1 = segmentDuration_1;
+  var arrowAppearDurationInFrames_1 = segmentDuration_1;
+  var arrowDisappearDurationInFrames_1 = segmentDuration_1;
+  var menuAppearDurationInFrames_1 = segmentDuration_1;
+  var menuDisappearComplete_1 = false;
+  var arrowAppearComplete_1 = false;
+  var arrowDisappearComplete_1 = false;
+  var menuAppearComplete_1 = false;
+  var currentFrame_1 = 1;
+  
+  ///Menu Disappear 
+  function menuDisappearAnimation_1() {
+      currentFrame_1++;
+      if ( currentFrame_1 <= menuDisappearDurationInFrames_1 ) {
+          window.requestAnimationFrame( ()=> { 
+              //top line
+              topLineY_1 = AJS.easeInBack( 37, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
+              topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
+              //bottom line
+              bottomLineY_1 = AJS.easeInBack( 63, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
+              bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
+              //recursion
+              menuDisappearAnimation_1();
+          });
+      } else {
+          middleLine_1.style.opacity = "0";
+          currentFrame_1 = 1;
+          menuDisappearComplete_1 = true;
+          openMenuAnimation_1();
+      }
+  }
+  
+  ///Cross Appear
+  function arrowAppearAnimation_1() {
+      currentFrame_1++;
+      if ( currentFrame_1 <= arrowAppearDurationInFrames_1 ) {
+          window.requestAnimationFrame( ()=> { 
+              //top line
+              topLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
+              topLeftY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
+              bottomRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
+              bottomRightY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
+              topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
+              //bottom line
+              bottomLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
+              bottomLeftY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
+              topRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
+              topRightY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
+              bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
+              //recursion
+              arrowAppearAnimation_1();
+          });
+      } else {
+          currentFrame_1 = 1;
+          arrowAppearComplete_1 = true;
+          openMenuAnimation_1();
+      }
+  }
+  
+  ///Combined Open Menu Animation
+  function openMenuAnimation_1() {
+      if ( !menuDisappearComplete_1 ) { 
+          menuDisappearAnimation_1();
+      } else if ( !arrowAppearComplete_1) {
+          arrowAppearAnimation_1();
+      }
+  }
+  
+  ///Cross Disappear
+  function arrowDisappearAnimation_1() {
+      currentFrame_1++;
+      if ( currentFrame_1 <= arrowDisappearDurationInFrames_1 ) {
+          window.requestAnimationFrame( ()=> {
+              //top line
+              topLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
+              topLeftY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
+              bottomRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
+              bottomRightY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
+              topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
+              //bottom line
+              bottomLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
+              bottomLeftY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
+              topRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
+              topRightY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
+              bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
+              //recursion
+              arrowDisappearAnimation_1();
+          });
+      } else {
+          middleLine_1.style.opacity = "1";
+          currentFrame_1 = 1;
+          arrowDisappearComplete_1 = true;
+          closeMenuAnimation_1();
+      }
+  }
+  
+  ///Menu Appear
+  function menuAppearAnimation_1() {
+      currentFrame_1++;
+      if ( currentFrame_1 <= menuAppearDurationInFrames_1 ) {
+          window.requestAnimationFrame( ()=> {
+              //top line
+              topLineY_1 = AJS.easeOutBack( 50, 37, menuDisappearDurationInFrames_1, currentFrame_1 );
+              topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
+              //bottom line
+              bottomLineY_1 = AJS.easeOutBack( 50, 63, menuDisappearDurationInFrames_1, currentFrame_1 );
+              bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
+              //recursion
+              menuAppearAnimation_1();
+          });
+      } else {
+          currentFrame_1 = 1;
+          menuAppearComplete_1 = true;
+          closeMenuAnimation_1();
+      }
+  }
+  
+  ///Close Menu Animation
+  function closeMenuAnimation_1() {
+      if ( !arrowDisappearComplete_1 ) {
+          arrowDisappearAnimation_1();
+      } else if ( !menuAppearComplete_1 ) {
+          menuAppearAnimation_1();
+      }
+  }
+  
+  ///Events
+  icon_1.addEventListener( "click", ()=> { 
+    if ( state_1 === "menu" ) {
+        openMenuAnimation_1();
+        state_1 = "arrow";
+        arrowDisappearComplete_1 = false;
+          menuAppearComplete_1 = false;
+    } else if ( state_1 === "arrow" ) {
+        closeMenuAnimation_1();
+        state_1 = "menu";
+        menuDisappearComplete_1 = false;
+          arrowAppearComplete_1 = false;
+    }
+  });
+  
+  
+  // Cursor
+  document.addEventListener("DOMContentLoaded", function(event) {
+    var cursor = document.querySelector(".custom-cursor");
+    var links = document.querySelectorAll("a, button, #nav-btn, input.btn");
+  
+    var initCursor = false;
+  
+    for (var i = 0; i < links.length; i++) {
+      var selfLink = links[i];
+  
+      selfLink.addEventListener("mouseover", function() {
+        cursor.classList.add("custom-cursor--link");
+      });
+      selfLink.addEventListener("mouseout", function() {
+        cursor.classList.remove("custom-cursor--link");
+      });
+    }
+  
+  
+    window.onmousemove = function(e) {
+      var mouseX = e.clientX;
+      var mouseY = e.clientY;
+  
+      if (!initCursor) {
+        // cursor.style.opacity = 1;
+        TweenLite.to(cursor, 0.5, {
+          opacity: 1
+        });
+        initCursor = true;
+      }
+  
+      TweenLite.to(cursor, 0, {
+        top: mouseY + "px",
+        left: mouseX + "px"
+      });
+    };
+    
+    window.ontouchmove = function(e) {
+      var mouseX = e.touches[0].clientX;
+      var mouseY = e.touches[0].clientY;
+      if (!initCursor) {
+        // cursor.style.opacity = 1;
+        TweenLite.to(cursor, 0.3, {
+          opacity: 1
+        });
+        initCursor = true;
+      }
+  
+      TweenLite.to(cursor, 0, {
+        top: mouseY + "px",
+        left: mouseX + "px"
+      });
+    };
+  
+    window.onmouseout = function(e) {
+      TweenLite.to(cursor, 0.3, {
+        opacity: 0
+      });
+      initCursor = false;
+    };
+  
+    window.ontouchstart = function(e) {
+      TweenLite.to(cursor, 0.3, {
+        opacity: 1
+      });
+    };
+    
+    window.ontouchend = function(e) {
+      setTimeout( function() {
+        TweenLite.to(cursor, 0.3, {
+          opacity: 0
+        });
+      }, 200);   
+    };
+    
+  });
+  
\ No newline at end of file
diff --git a/Blend-hero-section/style.css b/Blend-hero-section/style.css
new file mode 100644
index 0000000..3bf6bca
--- /dev/null
+++ b/Blend-hero-section/style.css
@@ -0,0 +1,341 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap");
+* {
+  box-sizing: border-box;
+  cursor: none;
+}
+
+html,
+body {
+  background: #efefef;
+  color: #212121;
+  font-family: "Montserrat", sans-serif;
+  font-size: 16px;
+  height: 100%;
+}
+
+::selection {
+  background: #efefef;
+  color: #212121;
+  mix-blend-mode: difference;
+}
+
+::-moz-selection {
+  background: #efefef;
+  color: #212121;
+}
+
+h1, h2, h3, h4, h5 {
+  font-weight: 900;
+}
+
+h1 {
+  font-size: 3em;
+}
+
+.hero-title {
+  font-size: 8vw;
+  line-height: 1em;
+  font-weight: 900;
+}
+
+.nav-title {
+  font-size: 4em;
+}
+
+a {
+  transition: all 0.25s ease-in-out;
+}
+
+.white, a.white {
+  color: #efefef;
+}
+
+.black {
+  color: #212121;
+}
+
+.pearl, a.pearl {
+  color: #fff;
+}
+
+.green, a.green {
+  color: #00BCD4;
+}
+
+.pink {
+  color: #b73b3b;
+}
+
+.blend {
+  mix-blend-mode: difference !important;
+  color: #efefef;
+  position: relative;
+  z-index: 2;
+}
+
+.bg-black {
+  background-color: #212121;
+}
+
+.bg-green {
+  background-color: #00BCD4;
+}
+
+.bg-topographic {
+  background-image: url(https://assets.codepen.io/319606/bg-topographic.svg);
+  background-size: 5000px;
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.custom-cursor {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+  mix-blend-mode: difference;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #00BCD4;
+  transition: transform 350ms ease;
+  transform: translate(-50%, -50%) scale(0.3);
+  z-index: 1000;
+}
+
+.custom-cursor--link {
+  transform: translate(-50%, -50%) scale(1.25);
+}
+
+.swoosh {
+  background-image: url("https://assets.codepen.io/319606/2023-logo-swoosh.svg");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  top: 20px;
+  left: 18px;
+  width: 230px;
+  height: 45px;
+  z-index: 1000;
+  background-position: left;
+}
+
+.sticky-nav {
+  top: 20px;
+  left: 20px;
+  position: fixed;
+  width: calc(100% - 40px);
+  z-index: 999;
+}
+.sticky-nav.difference {
+  background-repeat: no-repeat;
+  background-size: contain;
+  mix-blend-mode: difference;
+}
+.sticky-nav.difference #nav-btn {
+  filter: invert(0);
+}
+.sticky-nav .logo {
+  width: 220px;
+  height: 45px;
+  background-image: url(https://assets.codepen.io/319606/2023-logo-white.svg);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: left;
+  z-index: 998;
+}
+.sticky-nav #nav-btn {
+  width: 60px;
+  z-index: 999;
+  filter: invert(1);
+}
+.sticky-nav #nav-btn .icon {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke-width: 8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke: #fff;
+}
+
+#takeover-nav {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  overflow-y: auto;
+  left: 0;
+  top: -200%;
+  transition: all 0.5s ease-in-out;
+  z-index: 996;
+}
+#takeover-nav.shown {
+  top: 0;
+}
+#takeover-nav .nav-col {
+  min-height: 100vh;
+}
+#takeover-nav .nav-col a {
+  color: #efefef;
+}
+#takeover-nav .nav-col a:hover {
+  color: #212121;
+}
+#takeover-nav .nav-contact .content {
+  max-width: 700px;
+}
+#takeover-nav .nav-items {
+  font-size: 2.5em;
+  font-weight: 700;
+}
+#takeover-nav .contact-items {
+  font-size: 1.25em;
+  font-weight: 700;
+}
+#takeover-nav .contact-items a:hover {
+  color: #00BCD4;
+}
+#takeover-nav .social {
+  font-size: 0.75em;
+}
+#takeover-nav .social a {
+  color: #00BCD4;
+}
+#takeover-nav .social a:hover {
+  color: #efefef;
+}
+
+.gradient-overlay {
+  bottom: 0;
+  height: 50%;
+  background: -moz-linear-gradient(top, rgba(33, 33, 33, 0) 0%, #212121 50%);
+  background: -webkit-linear-gradient(top, rgba(33, 33, 33, 0) 0%, #212121 50%);
+  background: linear-gradient(to bottom, rgba(33, 33, 33, 0) 0%, #212121 50%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00212121", endColorstr="#212121",GradientType=0 );
+  z-index: 1;
+  border-bottom-right-radius: 15vw;
+  pointer-events: none;
+}
+
+.video-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-bottom-right-radius: 15vw;
+  pointer-events: none;
+}
+
+#video-bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  min-width: 100%;
+  background-position: center center;
+  background-size: cover;
+  object-fit: cover;
+  transform: rotate(180deg);
+}
+
+section {
+  min-height: 800px;
+  height: 800px;
+  width: 100%;
+}
+section.hero {
+  background-color: #212121;
+  border-bottom-right-radius: 15vw;
+  position: relative;
+}
+section.hero:before {
+  content: "";
+  background-color: #212121;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 15vw;
+  height: 15vw;
+}
+section.hero:after {
+  content: "";
+  background-color: #efefef;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 15vw;
+  height: 15vw;
+  border-top-left-radius: 15vw;
+}
+section.two {
+  background-color: #efefef;
+}
+section.three {
+  background-color: #e8d1f6;
+}
+section.four {
+  background-color: #00BCD4;
+}
+section.five {
+  background-color: #29639c;
+}
+
+@media screen and (min-width: 1200px) {
+  .hero {
+    height: 75vh;
+  }
+  .hero #video-bg {
+    object-position: 0 5vw;
+  }
+}
+@media screen and (max-width: 1199px) {
+  .hero #video-bg {
+    object-position: 0 15vw;
+  }
+}
+@media screen and (max-width: 767px) {
+  #takeover-nav .nav-menu {
+    min-height: 500px;
+  }
+  #takeover-nav .nav-menu a {
+    color: #212121;
+  }
+  #takeover-nav .nav-menu a:hover {
+    color: #efefef;
+  }
+  #takeover-nav .nav-contact {
+    min-height: 600px;
+  }
+  #takeover-nav .nav-contact .nav-title {
+    font-size: 2.5em;
+  }
+}
+@media screen and (max-width: 575px) {
+  header .swoosh {
+    width: 165px;
+    height: 35px;
+    top: 10px;
+  }
+  header .sticky-nav {
+    top: 10px;
+  }
+  header .sticky-nav .logo {
+    width: 150px;
+    height: 35px;
+  }
+  header .sticky-nav #nav-btn {
+    width: 40px;
+  }
+  header #takeover-nav .contact-items {
+    font-size: 1em;
+  }
+
+  .hero {
+    min-height: 600px;
+    height: 600px;
+  }
+  .hero .hero-title {
+    font-size: 12vw;
+  }
+  .hero #video-bg {
+    object-position: 0 30vw;
+  }
+}
\ No newline at end of file
diff --git a/Blend-hero-section/template.html b/Blend-hero-section/template.html
new file mode 100644
index 0000000..cb3a0ca
--- /dev/null
+++ b/Blend-hero-section/template.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="style.css">
+  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js"></script>
+  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
+  <script defer src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/animateAnything.js"></script>
+  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
+  <script defer src="main.js"></script>
+  <title>Blend-Mode hero section</title>
+</head>
+<body>
+  <div class='page'>
+    <header>
+      <div class='position-fixed swoosh'></div>
+      <div class='d-flex difference justify-content-between sticky-nav'>
+        <div class='logo'></div>
+        <div class='box menu' id='nav-btn'>
+          <svg id="i1" class="icon" viewBox="20 30 60 40">
+          <path id="top-line-1"     d="M30,37 L70,37 Z"></path>
+          <path id="middle-line-1" 	d="M30,50 L70,50 Z"></path>
+          <path id="bottom-line-1" 	d="M30,63 L70,63 Z"></path>
+          </svg>
+        </div>
+      </div>
+      <div id='takeover-nav'>
+        <div class='container-fluid'>
+          <div class='row'>
+            <div class='align-items-center bg-black col-12 col-md-7 d-flex justify-content-center nav-col nav-contact order-1 order-md-0 position-relative px-3 py-5'>
+              <div class='bg-topographic h-100 position-absolute w-100'></div>
+              <div class='content position-relative'>
+                <h2 class='mb-5 nav-title white'>
+                  build your digital success with us<span class="d-inline green">&period;</span>
+                </h2>
+                <ul class='contact-items list-unstyled mb-5 white'>
+                  <li class='pb-4'>
+                    <a class='text-decoration-none' href='#'>+91 8902345678</a>
+                  </li>
+                  <li class='pb-4'>
+                    <a class='text-decoration-none' href='#'>sample@gmail.com</a>
+                  </li>
+                  <li>
+                    <a class='text-decoration-none' href='#'>India,Karnataka</a>
+                  </li>
+                </ul>
+                <div class='social'>
+                  <a class='green text-decoration-none' href='#'>linkedin</a>
+                  <span class='mx-2 white'>
+                    |
+                  </span>
+                  <a class='green text-decoration-none' href='#'>facebook</a>
+                  <span class='mx-2 white'>
+                    |
+                  </span>
+                  <a class='green text-decoration-none' href='#'>instagram</a>
+                </div>
+              </div>
+            </div>
+            <div class='align-items-center bg-green col-12 col-md-5 d-flex nav-col nav-menu order-0 order-md-1 pb-3 pb-md-5 pt-5 px-3 px-md-5'>
+              <ul class='list-unstyled nav-items'>
+                <li class='pb-3'>
+                  <a class='text-decoration-none' href='#'>services</a>
+                </li>
+                <li class='pb-3'>
+                  <a class='text-decoration-none' href='#'>portfolio</a>
+                </li>
+                <li class='pb-3'>
+                  <a class='text-decoration-none' href='#'>contact</a>
+                </li>
+                <li>
+                  <a class='text-decoration-none' href='#'>about</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+    <section class='align-items-center d-flex hero justify-content-center'>
+      <div class='video-wrap'>
+        <video autoplay="" playsinline="" loop="" muted="" id="video-bg">
+        <source src="https://tactusmarketing.com/wp-content/uploads/tactus-waves-hero.mp4" type="video/mp4">
+        <source src="https://tactusmarketing.com/wp-content/uploads/tactus-waves-hero.mp4" type="video/mp4">
+        </video>
+      </div>
+      <div class='gradient-overlay position-absolute w-100'></div>
+      <div class='content mb-5 position-relative text-center'>
+        <h1 class='blend hero-title'>
+          Where Creativity 
+          <br>
+          &amp; Strategy Meet
+        </h1>
+      </div>
+    </section>
+    <section class='two'></section>
+    <section class='three'></section>
+    <section class='four'></section>
+    <section class='five'></section>
+  </div>
+  <div class='custom-cursor'></div>
+</body>
+</html>
+
+
+
+
+
+
+
+
diff --git a/Tourism_website/index.html b/Tourism_website/index.html
new file mode 100644
index 0000000..8ce5499
--- /dev/null
+++ b/Tourism_website/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
+    <script defer src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+     <script defer src="main.js"></script>
+    <title>Responsive Vertical Slider with Animated Clip Path</title>
+</head>
+<body>
+    <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <div class="content" data-content="one">
+            <h1>Hallstatt, Austria</h1>
+            <p>
+              Visit Hallstatt, Austria, a beautiful village by a clear lake,
+              surrounded by tall mountains. Walk through old streets, see
+              ancient salt mines, and enjoy the peaceful views. This tour is
+              perfect for nature lovers and history fans.
+            </p>
+          </div>
+          <div class="background" data-item="one"></div>
+        </div>
+
+        <div class="swiper-slide">
+          <div class="content" data-content="two">
+            <h1>Paris, France</h1>
+            <p>
+              Explore Paris, the City of Light, known for its romance and famous
+              landmarks like the Eiffel Tower. Enjoy delicious food, visit the
+              Louvre, and stroll along the Seine River. Choose this tour to
+              experience the charm and culture of France.
+            </p>
+          </div>
+          <div class="background" data-item="two"></div>
+        </div>
+
+        <div class="swiper-slide">
+          <div class="content" data-content="three">
+            <h1>Amsterdam, Netherlands</h1>
+            <p>
+              Discover Amsterdam, a city full of canals, bicycles, and culture.
+              Visit the Van Gogh Museum, take a canal cruise, and explore lively
+              streets. This tour is great for those who love art, history, and a
+              vibrant city atmosphere.
+            </p>
+          </div>
+          <div class="background" data-item="three"></div>
+        </div>
+
+        <div class="swiper-slide">
+          <div class="content" data-content="four">
+            <h1>Kyoto, Japan</h1>
+            <p>
+              Travel to Kyoto, Japan, a city rich in tradition and beauty. Visit
+              ancient temples, enjoy beautiful gardens, and see colorful geisha
+              districts. This tour is perfect for those who want to experience
+              Japan's history and culture.
+            </p>
+          </div>
+          <div class="background" data-item="four"></div>
+        </div>
+
+        <div class="swiper-slide">
+          <div class="content" data-content="five">
+            <h1>New York, USA</h1>
+            <p>
+              Experience New York City, where excitement and adventure await at
+              every corner. See the Statue of Liberty, enjoy a Broadway show,
+              and taste food from around the world. This tour is ideal for those
+              who want to feel the energy of a big city.
+            </p>
+          </div>
+          <div class="background" data-item="five"></div>
+        </div>
+      </div>
+      <div class="swiper-pagination"></div>
+    </div>
+
+    <div class="footer">
+      <div class="feature">
+        <i class="fa-solid fa-house"></i>
+        <div>
+          <p>Accommodation</p>
+          <small>5 days</small>
+        </div>
+      </div>
+      <hr />
+      <div class="feature">
+        <i class="fa-solid fa-headphones"></i>
+        <div>
+          <p>Live guide</p>
+          <small>available</small>
+        </div>
+      </div>
+      <hr />
+      <div class="feature">
+        <i class="fa-solid fa-clock"></i>
+        <div>
+          <p>Easy cancellation</p>
+          <small>cancel before 48 hours</small>
+        </div>
+      </div>
+      <hr />
+      <button class="btn">Book Now</button>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tourism_website/main.js b/Tourism_website/main.js
new file mode 100644
index 0000000..69f0210
--- /dev/null
+++ b/Tourism_website/main.js
@@ -0,0 +1,37 @@
+const swiper = new Swiper(".swiper-container", {
+    direction: "vertical",
+    effect: "fade",
+    speed: 1000,
+    loop: true,
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+    mousewheel: {
+      invert: false,
+      forceToAxis: false,
+      thresholdDelta: 50,
+      sensitivity: 1,
+    },
+    on: {
+      init: function () {
+        let activeSlide = this.slides[this.activeIndex];
+        let background = activeSlide.querySelector(".background");
+        background.classList.add("animation");
+      },
+      slideChange: function () {
+        this.slides.forEach((slide) => {
+          let background = slide.querySelector(".background");
+          if (background) {
+            background.classList.remove("animation");
+          }
+        });
+        let activeSlide = this.slides[this.activeIndex];
+        let background = activeSlide.querySelector(".background");
+        if (background) {
+          background.classList.add("animation");
+        }
+      },
+    },
+  });
+  
\ No newline at end of file
diff --git a/Tourism_website/style.css b/Tourism_website/style.css
new file mode 100644
index 0000000..daf97d9
--- /dev/null
+++ b/Tourism_website/style.css
@@ -0,0 +1,347 @@
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Salsa&display=swap");
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  background: #232328;
+  font-family: "Quicksand", sans-serif;
+}
+
+.swiper-container {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.swiper-slide {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+}
+
+/* content */
+
+.content {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 14%;
+  left: 3%;
+  width: 40%;
+  height: max-content;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 20px;
+  opacity: 0;
+  z-index: 2;
+}
+
+.content h1 {
+  font-family: "Salsa", cursive;
+  font-size: clamp(2rem, 3vw, 6rem);
+  margin-bottom: 20px;
+  opacity: 0;
+}
+
+.content p {
+  font-family: inherit;
+  font-size: 1.2rem;
+  line-height: 1.4;
+  font-weight: 500;
+  opacity: 0;
+}
+
+.swiper-slide-active .content {
+  opacity: 1;
+}
+
+.swiper-slide-active .content h1 {
+  animation: moveDown 0.8s ease-in forwards;
+}
+
+.swiper-slide-active .content p {
+  animation: moveDown 1s ease-in forwards;
+  animation-delay: 1s;
+}
+
+@keyframes moveDown {
+  0% {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* background */
+
+.background[data-item="one"] {
+  background: url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/dd28eb02-d6b1-401e-bc10-aead024e9ebf);
+  background-size: cover;
+  background-position: 50% 40%;
+}
+
+.background[data-item="two"] {
+  background: url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/fc70e01c-17f9-4e74-a967-f039285524c5);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
+.background[data-item="three"] {
+  background: url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/4e3edcf1-1b68-408f-87e2-ee9fd477bf87);
+  background-size: cover;
+  background-position: 50% 40%;
+}
+
+.background[data-item="four"] {
+  background: url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/b772933f-6340-4c95-8d06-d809c4c9b739);
+  background-size: cover;
+  background-position: 50% 60%;
+}
+
+.background[data-item="five"] {
+  background: url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9f0fab6b-c28d-47e9-80f0-868e00562c3f);
+  background-size: cover;
+  background-position: 50% 40%;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  clip-path: circle(5%);
+  filter: brightness(90%);
+  overflow: hidden;
+  opacity: 0;
+  z-index: 1;
+}
+
+.animation {
+  animation: resizeClipPath 3s ease-in-out forwards;
+}
+
+@keyframes resizeClipPath {
+  0% {
+    clip-path: circle(5%);
+    opacity: 0;
+  }
+  100% {
+    clip-path: circle(71%);
+    opacity: 1;
+  }
+}
+
+/* pagination bullet */
+
+.swiper-pagination-bullet {
+  width: 16px;
+  height: 16px;
+  background-color: #a3a6a3;
+  border-radius: 50%;
+  transition: all 0.6s ease-in-out;
+}
+
+.swiper-pagination-bullet-active {
+  height: 32px;
+  background-image: linear-gradient(180deg, #f09819 0%, #ff512f 100%);
+  border-radius: 14px;
+}
+
+/* footer */
+
+.footer {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 20px;
+  bottom: 0;
+  left: 50%;
+  -ms-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+  width: max-content;
+  padding: 20px;
+  color: #f2f2f2;
+  border-radius: 8px 8px 0 0;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  z-index: 2;
+}
+
+.feature {
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+}
+
+.feature i {
+  font-size: 1.4rem;
+}
+
+.feature p {
+  font-weight: 700;
+}
+
+.btn {
+  display: block;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  color: #fff;
+  padding: 15px 20px;
+  border: 0;
+  border-radius: 10px;
+  box-shadow: 0px 0px 14px -7px #f09819;
+  background-image: linear-gradient(
+    45deg,
+    #ff512f 0%,
+    #f09819 51%,
+    #ff512f 100%
+  );
+  background-size: 200% auto;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  transition: 0.5s;
+}
+
+.btn:hover {
+  background-position: right center;
+}
+
+.btn:active {
+  transform: scale(0.95);
+}
+
+/* media queries */
+
+@media (max-width: 1200px) {
+  .content {
+    top: 18%;
+  }
+
+  .content[data-content="two"],
+  .content[data-content="three"] {
+    top: 5%;
+    width: 50%;
+  }
+}
+
+@media (max-width: 900px) {
+  .content,
+  .content[data-content="three"] {
+    top: 55%;
+    left: 2%;
+    width: 60%;
+  }
+
+  .content[data-content="two"] {
+    top: 10%;
+  }
+
+  .content h1 {
+    margin-bottom: 14px;
+  }
+
+  .content p {
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  .feature i {
+    font-size: 1.3rem;
+  }
+
+  .feature p {
+    font-size: 1rem;
+  }
+
+  .btn {
+    padding: 8px 16px;
+  }
+}
+
+@media (max-width: 790px) {
+  .footer {
+    column-gap: 10px;
+  }
+
+  .feature i {
+    font-size: 1.1rem;
+  }
+
+  .feature p {
+    font-size: 0.9rem;
+  }
+
+  .feature small {
+    font-size: 0.8rem;
+  }
+
+  .btn {
+    font-size: 0.8rem;
+    padding: 8px 12px;
+  }
+}
+
+@media (max-width: 660px) {
+  .content,
+  .content[data-content="two"],
+  .content[data-content="three"] {
+    top: unset;
+    left: 2%;
+    bottom: 3%;
+    width: 80%;
+  }
+
+  .content p {
+    font-size: 0.9rem;
+    line-height: 1.2;
+  }
+
+  .background[data-item="two"] {
+    background-position: 40% 50%;
+  }
+
+  .swiper-pagination-bullet {
+    width: 12px;
+    height: 12px;
+  }
+
+  .swiper-pagination-bullet-active {
+    height: 24px;
+  }
+
+  .footer {
+    column-gap: 0;
+    left: unset;
+    bottom: unset;
+    top: 20px;
+    right: -30px;
+    padding: 0;
+    border-radius: 0;
+    border: 0;
+    background-color: transparent;
+    box-shadow: unset;
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+  }
+
+  .feature,
+  hr {
+    display: none;
+  }
+}