From 940a7336bda89be459a6ab3b42d26de0d64939dd Mon Sep 17 00:00:00 2001 From: Bateyjosue Date: Sat, 3 Jun 2023 18:52:20 +0200 Subject: [PATCH 1/4] Add Lens Section --- lens.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 lens.html diff --git a/lens.html b/lens.html new file mode 100644 index 0000000..ba072cc --- /dev/null +++ b/lens.html @@ -0,0 +1,18 @@ + + + + + + + + Document + + +
+
+

Our Lens on Life

+ +
+
+ + \ No newline at end of file From 477709fde31a60ede1bf017ff77eb08aa0720328 Mon Sep 17 00:00:00 2001 From: Bateyjosue Date: Sat, 3 Jun 2023 18:52:42 +0200 Subject: [PATCH 2/4] Add Slider --- lens.html | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/lens.html b/lens.html index ba072cc..2507d50 100644 --- a/lens.html +++ b/lens.html @@ -11,7 +11,40 @@

Our Lens on Life

- +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
From ebd8f48e476e51128d358d4f11c50ad4952fa816 Mon Sep 17 00:00:00 2001 From: Bateyjosue Date: Sat, 3 Jun 2023 18:54:16 +0200 Subject: [PATCH 3/4] Add Style to Lens --- assets/css/lens.css | 86 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 assets/css/lens.css diff --git a/assets/css/lens.css b/assets/css/lens.css new file mode 100644 index 0000000..38a6281 --- /dev/null +++ b/assets/css/lens.css @@ -0,0 +1,86 @@ +* { + box-sizing: border-box; +} + +.lens__on__life__container { + padding: 1rem 0rem; +} + +.lens__on__life__container h2 { + text-align: center; + font-size: 28px; + text-decoration: underline; + text-underline-offset: 1.5rem; + text-decoration-line: underline; + text-decoration-thickness: .3rem; + margin-bottom: 6rem; +} + +.slider { + background: white; + height: 400px; + margin: auto; + overflow: hidden; + position: relative; + width: 100%; +} + +.slider::before, .slider::after { + content: ""; + height: 100%; + position: absolute; + width: 100px; + z-index: 2; +} + +.slider::after { + right: 0; + top: 0; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); +} + +.slider::before { + left: 0; + top: 0; +} + +.slider .slide-track { + height: 100%; + animation: scroll 80s linear infinite; + display: flex; + gap:3rem; + width: calc(400px * 11); + padding: 1rem 0rem; +} + +/* .slider .slide-track:hover { + animation-play-state: paused; +} */ + +.slider .slide { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2rem; + overflow: hidden; +} + +.slider .slide:nth-child(even) { + transform: rotate(5deg); +} + +.slider .slide:nth-child(odd) { + transform: rotate(-5deg); +} + +.slider .slide:hover { + transform: rotate(0deg); + transform: scale(1.1); +} + +.slider .slide:hover { +} + From 43e18854d3b40a70df88554f89a471d70cdde01e Mon Sep 17 00:00:00 2001 From: Bateyjosue Date: Sat, 3 Jun 2023 18:54:39 +0200 Subject: [PATCH 4/4] Animate the slider --- assets/css/lens.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/css/lens.css b/assets/css/lens.css index 38a6281..da25430 100644 --- a/assets/css/lens.css +++ b/assets/css/lens.css @@ -84,3 +84,16 @@ .slider .slide:hover { } +@keyframes scroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(calc(-250px * 9)); + } +} + +.slide img { + width:100%; + height:100%; +} \ No newline at end of file