From 3fb3efc450b69ad5552b3a2713f11e4b75c8a21d Mon Sep 17 00:00:00 2001 From: "Inija.A.Nataraj" Date: Fri, 25 Oct 2024 06:58:07 +0530 Subject: [PATCH 1/2] added a new website based on js --- Tourism_website/index.html | 112 ++++++++++++ Tourism_website/main.js | 37 ++++ Tourism_website/style.css | 347 +++++++++++++++++++++++++++++++++++++ 3 files changed, 496 insertions(+) create mode 100644 Tourism_website/index.html create mode 100644 Tourism_website/main.js create mode 100644 Tourism_website/style.css 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 @@ + + + + + + + + + + + Responsive Vertical Slider with Animated Clip Path + + +
+
+
+
+

Hallstatt, Austria

+

+ 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. +

+
+
+
+ +
+
+

Paris, France

+

+ 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. +

+
+
+
+ +
+
+

Amsterdam, Netherlands

+

+ 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. +

+
+
+
+ +
+
+

Kyoto, Japan

+

+ 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. +

+
+
+
+ +
+
+

New York, USA

+

+ 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. +

+
+
+
+
+
+
+ +
+
+ +
+

Accommodation

+ 5 days +
+
+
+
+ +
+

Live guide

+ available +
+
+
+
+ +
+

Easy cancellation

+ cancel before 48 hours +
+
+
+ +
+ + \ 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; + } +} From ac5bf0fd9747619bcf52a2069008d200034ecb68 Mon Sep 17 00:00:00 2001 From: "Inija.A.Nataraj" Date: Fri, 25 Oct 2024 20:30:32 +0530 Subject: [PATCH 2/2] added a new animation --- Blend-hero-section/main.js | 246 ++++++++++++++++++++++ Blend-hero-section/style.css | 341 +++++++++++++++++++++++++++++++ Blend-hero-section/template.html | 113 ++++++++++ 3 files changed, 700 insertions(+) create mode 100644 Blend-hero-section/main.js create mode 100644 Blend-hero-section/style.css create mode 100644 Blend-hero-section/template.html 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 @@ + + + + + + + + + + + + + Blend-Mode hero section + + +
+
+
+
+ + +
+
+
+
+
+
+
+

+ build your digital success with us. +

+ + +
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+

+ Where Creativity +
+ & Strategy Meet +

+
+
+
+
+
+
+
+
+ + + + + + + + + +