From e6f63b62a31b1e85a078b7610336808271d645d3 Mon Sep 17 00:00:00 2001 From: miel775 Date: Mon, 13 Jan 2025 14:49:59 +0100 Subject: [PATCH] Margins toegepast en favicon Wat code geschreven en een voorzichtige plan voor de interactie #4 --- index.html | 53 ++++++++------- script/script.js | 5 ++ styles/style.css | 164 ++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 177 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index 6860deba..8d92438d 100644 --- a/index.html +++ b/index.html @@ -3,30 +3,35 @@ - Bread and Butter + Bread and Butter + + + -
- - + - - + +
@@ -53,9 +61,8 @@

Why accessiblity matters

Digital Accessibility improves the experience for all users, not just those with disabilities.

Tizian Fendt, UX designer at JUST

- - Tizian Fendt, UX Designer staat met een microfoon -
+ +

Why we need a minset shift

@@ -65,11 +72,11 @@

Why we need a minset shift

Ultimately, by embracing accessibility, you not only foster inclusivity but also enjoy higher conversion rates, as more users can engage seamlessly with your content or services.

-
+

Join our next events

Do you want to join our next Bread & Butter event? Leave your email and we’ll keep you up to date.

-
+
@@ -108,8 +115,8 @@

Join our next events

\ No newline at end of file diff --git a/script/script.js b/script/script.js index e69de29b..001ddbec 100644 --- a/script/script.js +++ b/script/script.js @@ -0,0 +1,5 @@ +const clicking = document.querySelector('.breadandbutter') + + clicking.addEventListener('click', function(){ + turn.classList.add('turning'); + }); \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 3761474f..a22f8fd8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -30,13 +30,16 @@ } * { - background-color: var(--background-color-dark); - margin: 1em; + text-decoration: none; } + body { font-family: Antique Legacy; background: transparent; + background-color: var(--background-color-dark); + margin: 1em; + } @@ -50,24 +53,52 @@ body { left: 5%; } + +.breadandbutter { + position: absolute; + min-width: 50em; + left: 30em; + top: 15em; + z-index: 2; + +} + +.blackspace { + position: absolute; + background-color: var(--background-color-dark); + min-width: 130em; + height: 13em; + z-index: -1; + top: 12em; + left: -50em; +} + .breadandbutter img:nth-child(1) { display: none; } -.breadandbutter { - display: flex; - top: 1em; - +.breadandbutter img:nth-child(2) { + display: block; + animation: turnaround var(--animation-duration) infinte; } -header { - height: 1vh; + +@keyframes turnaround { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360); + } } + header img { position: absolute; left: 2em; - top: 1em; + top: 2em; + z-index: 2; } .header button { @@ -144,15 +175,31 @@ header img { } .moonicon { - display:block; + display: block; position: absolute; z-index: 2; - width: 24px; - top: 10px; - right: 15px; + width: 20px; + top: 0.8em; + left: 0.9em; color: var(--color-3); } +.moonicon:hover { + animation: hovericon var(--animation-duration) ease-in-out; +} + +@keyframes hovericon { + 0% { + scale: 1; + } + + 100% { + scale: 1.2; + rotate: 15deg; + } + +} + .sunicon { display: none; } @@ -174,6 +221,16 @@ body section:nth-child(1) { align-items: center; } +body section:nth-of-type(2) p { + font-size: var(--f3); + margin-left: 2em; + margin-right: 2em; +} + +body section:nth-of-type(2) p:nth-of-type(2) { + font-size: var(--f4); +} + body section:nth-child(3) h1 { font-size: var(--f2); color: var(--color-2); @@ -200,13 +257,14 @@ h2 { h1 { color: var(--background-color-light); + margin: auto; } /* slideshow banner */ .banner { position: relative; - height: 25em; + height: 40em; width: 120%; left: -10em; top: -3em; @@ -220,7 +278,7 @@ h1 { .slideshowfront { position: absolute; width: 120%; - height: 100%; + height: 40em; background-size: cover; background-position: center; animation: slideshow 20s infinite; @@ -258,20 +316,82 @@ body section { background-color: var(--background-color-dark); } +section:nth-of-type(2) { + margin-left: 2em; +} + +section:nth-of-type(3) { + margin: 5em; +} + +section:nth-of-type(5) { + margin: 5em; +} + +section:nth-of-type(3) h2 { + color: var(--color-4); + font-size: var(--f3); +} + +section:nth-of-type(6) { + margin-left: 2em; +} + +section:nth-of-type(6) h2 { + font-size: var(--f1); + font-family: Parabole; + margin: auto; +} + .stickerselection { display: none; } -.quote { - position: fixed; - width: 20%; + +.quote h2 { + position: absolute; + margin-top: 4em; + margin-left: 3em; + width: 15em; + z-index: 2; } +.sample { + background-position: -400px -100px; + width: 100%; + height: 15em; + object-fit: cover; +} -.fotocarrousel img { - position: absolute; - width: 9em; - overflow: hidden; +.email { + display: flex; + margin-left: 1em; + font-size: var(--f3); + color: var(--color-2); +} + +.email input { + min-height: 2em; + min-width: 16em; + background-color: var(--background-color-dark); + border: 2px solid var(--color-3); + margin: 1em; +} + +footer { + margin-top: 5em; + height: 10em; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +footer a:nth-of-type(1) { + grid-column-start: 2; + text-align: center; +} + +footer a:nth-of-type(2) { + text-align: center; }