diff --git a/100_projects/82-explore-developer-website/imgs/bg.png b/100_projects/82-explore-developer-website/imgs/bg.png new file mode 100644 index 0000000..80523e3 Binary files /dev/null and b/100_projects/82-explore-developer-website/imgs/bg.png differ diff --git a/100_projects/82-explore-developer-website/imgs/girl.png b/100_projects/82-explore-developer-website/imgs/girl.png new file mode 100644 index 0000000..501a7c2 Binary files /dev/null and b/100_projects/82-explore-developer-website/imgs/girl.png differ diff --git a/100_projects/82-explore-developer-website/imgs/left.png b/100_projects/82-explore-developer-website/imgs/left.png new file mode 100644 index 0000000..7d1ad62 Binary files /dev/null and b/100_projects/82-explore-developer-website/imgs/left.png differ diff --git a/100_projects/82-explore-developer-website/imgs/right.png b/100_projects/82-explore-developer-website/imgs/right.png new file mode 100644 index 0000000..1aeaf4a Binary files /dev/null and b/100_projects/82-explore-developer-website/imgs/right.png differ diff --git a/100_projects/82-explore-developer-website/imgs/rock.png b/100_projects/82-explore-developer-website/imgs/rock.png new file mode 100644 index 0000000..b874ddd Binary files /dev/null and b/100_projects/82-explore-developer-website/imgs/rock.png differ diff --git a/100_projects/82-explore-developer-website/index.html b/100_projects/82-explore-developer-website/index.html new file mode 100644 index 0000000..e18173b --- /dev/null +++ b/100_projects/82-explore-developer-website/index.html @@ -0,0 +1,49 @@ + + + + + + + document + + + + +
+ +
+

Explore.

+ bg + girl + rock +
+
+
+
+ 1 +

lorem

+

Mountains of lorem

+
+
+ 2 +

lorem

+

Mountains of lorem

+
+
+
+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere neque + consequuntur a nisi, illo quia cupiditate fuga et eos minima +

+
+
+
+ + + + + + diff --git a/100_projects/82-explore-developer-website/script.js b/100_projects/82-explore-developer-website/script.js new file mode 100644 index 0000000..781a402 --- /dev/null +++ b/100_projects/82-explore-developer-website/script.js @@ -0,0 +1,19 @@ +let controller = new ScrollMagic.Controller(); +let timeline = new TimelineMax(); + +timeline + .to(".rock", 10, { y: -300 }) + .to(".girl", 10, { y: -200 }, "-=10") + .fromTo(".bg1", { y: -50 }, { y: 0, duration: 10 }, "-=10") + .to(".content", 10, { top: "0%" }, "-=10") + .fromTo(".content-images", { opacity: 0 }, { opacity: 1, duration: 3 }) + .fromTo(".text", { opacity: 0 }, { opacity: 1, duration: 3 }); + +let scene = new ScrollMagic.Scene({ + triggerElement: "section", + duration: "300%", + triggerHook: 0, +}) + .setTween(timeline) + .setPin("section") + .addTo(controller); \ No newline at end of file diff --git a/100_projects/82-explore-developer-website/style.css b/100_projects/82-explore-developer-website/style.css new file mode 100644 index 0000000..a8cb589 --- /dev/null +++ b/100_projects/82-explore-developer-website/style.css @@ -0,0 +1,86 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + color: #fff; + font-family: "Poppins", sans-serif; +} +nav { + position: absolute; + width: 100%; + display: flex; + align-items: center; + justify-content: space-around; + padding-top: 30px; +} +nav h3{ + font-size: 23px; +} +nav .button{ + border: 3px double rgba(255, 255, 255, .5); + padding: 7px 15px; + transition: .3s; + cursor: pointer; +} +nav .button:hover{ + background-color: #fff; + color: black; +} +.container { + height: 100vh; +} +.container img { + width: 100%; + position: absolute; + height: 110vh; + object-fit: cover; + z-index: -1; +} +.main-title { + position: absolute; + top: 35%; + left: 50%; + font-size: 5.5rem; + transform: translate(-50%, -30%); +} +.content { + width: 100%; + background: rgb(24, 24, 24); + min-height: 100vh; + z-index: 2; + position: absolute; +} +.content-images { + display: flex; + justify-content: space-around; + align-items: center; + align-content: center; + text-align: center; + min-height: 60vh; +} +.content-images div img{ + max-width: 100%; + border: 3px double rgba(255, 255, 255, .3); +} +.text{ + display: flex; + justify-content: center; + align-items: center; +} +.text p { + text-align: center; + padding: 1rem 5rem; + font-size: 1.1rem; +} +@media(max-width:767px){ + .content-images{ + flex-direction: column; + gap: 25px; + } + .text{ + flex-direction: column; + } + .content-images div img{ + width: 320px; + } +} \ No newline at end of file