From 762458c88d859b83641a27bca75b8a6c6c381175 Mon Sep 17 00:00:00 2001 From: Patryk Hegenberg Date: Thu, 12 Jan 2023 16:20:32 +0100 Subject: [PATCH] Updated the page style --- scripts/web.js | 30 +++ styles/style.css | 528 +++++++++++++++++++++++++++++++++++++- views/index.view.php | 191 ++++++-------- views/login.view.php | 70 +++-- views/partials/footer.php | 15 +- views/partials/head.php | 16 +- views/partials/nav.php | 54 ++-- views/profile.view.php | 30 +-- views/register.view.php | 4 +- 9 files changed, 738 insertions(+), 200 deletions(-) create mode 100644 scripts/web.js diff --git a/scripts/web.js b/scripts/web.js new file mode 100644 index 0000000..aeb7b63 --- /dev/null +++ b/scripts/web.js @@ -0,0 +1,30 @@ +!(function () { + const e = document, + t = e.documentElement, + n = e.body, + i = e.getElementById("lights-toggle"), + s = (window.sr = ScrollReveal()); + function a() { + let e = i.parentNode.querySelector(".label-text"); + i.checked + //? (n.classList.remove("lights-off"), e && (e.innerHTML = "dark")) + ? (n.classList.add("lights-off"), e && (e.innerHTML = "light")) + : (n.classList.add("lights-off"), e && (e.innerHTML = "light")); + } + t.classList.remove("no-js"), + t.classList.add("js"), + window.addEventListener("load", function () { + n.classList.add("is-loaded"); + }), + n.classList.contains("has-animations") && + window.addEventListener("load", function () { + s.reveal(".feature", { + duration: 600, + distance: "20px", + easing: "cubic-bezier(0.215, 0.61, 0.355, 1)", + origin: "right", + viewFactor: 0.2, + }); + }), + i && (window.addEventListener("load", a), i.addEventListener("change", a)); +})(); diff --git a/styles/style.css b/styles/style.css index ff9f88e..6686823 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,4 +1,530 @@ +html { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} body { - background-color: #4a313c; + margin: 0; + color: #8595ae; } + +footer, +header, +nav, +section { + display: block; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} +figcaption, +figure, +main { + display: block; +} + +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; +} + +img { + border-style: none; +} + +html { + box-sizing: border-box; +} + +body { + background: #fff; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +img { + height: 120px; + max-width: 100%; + vertical-align: middle; +} +.site-header img{ + height: 60px; +} + +img, +svg { + display: block; +} + +html { + font-size: 20px; + line-height: 30px; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + clear: both; + color: #2e1e26; + font-weight: 600; +} +h1, +.h1 { + font-size: 38px; + line-height: 48px; + letter-spacing: -0.1px; +} + +h2, +.h2 { + font-size: 32px; + line-height: 42px; + letter-spacing: -0.1px; +} + +h3, +.h3, +blockquote { + font-size: 24px; + line-height: 34px; + letter-spacing: -0.1px; +} + +.text-sm { + font-size: 18px; + line-height: 27px; + letter-spacing: -0.1px; +} + +h1, +h2, +.h1, +.h2 { + margin-top: 48px; + margin-bottom: 16px; +} +h3, +.h3 { + margin-top: 36px; + margin-bottom: 12px; +} + +p { + margin-top: 0; + margin-bottom: 24px; +} + +.container, +.container-sm { + width: 100%; + margin: 0 auto; + padding-left: 16px; + padding-right: 16px; +} + +.container { + max-width: 1128px; +} +.container-sm { + max-width: 848px; +} +.container .container-sm { + max-width: 800px; + padding-left: 0; + padding-right: 0; +} + +.text-center { + text-align: center; +} + +.has-top-divider { + position: relative; +} + +.has-bottom-divider { + position: relative; +} + +.site-header { + position: relative; + padding: 24px 0; + z-index: 2; +} +.site-header-inner { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; +} + +.hero { + flex: auto; + text-align: center; + padding-top: 48px; + padding-bottom: 88px; + background-image: url("./../../images/HeroBanner.png"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +footer img { + height: 60px; +} + +.hero-copy { + position: relative; +} +.hero-paragraph { + margin-bottom: 32px; +} +.hero-cta { + max-width: 400px; + margin-left: auto; + margin-right: auto; + margin-bottom: 80px; +} +.lights-toggle { + color: rgba(107, 122, 144, 0.64); +} + +@media (min-width: 641px) { + .hero { + text-align: left; + padding-top: 88px; + padding-bottom: 120px; + } + .hero-inner { + display: flex; + justify-content: space-between; + } + .hero-copy { + padding-top: 40px; + padding-right: 48px; + min-width: 448px; + max-width: 512px; + z-index: 1; + } + .hero-title { + margin-bottom: 16px; + } + .hero-paragraph { + margin-bottom: 32px; + } + .hero-cta { + display: flex; + align-items: center; + margin: 0; + } + .hero-cta .button { + min-width: 170px; + } + .hero-cta .button:first-child { + margin-right: 32px; + } + .header-illustration { + display: block; + } + .hero-media { + z-index: 0; + } + .hero-media img, + .hero-media svg { + max-width: none; + } + .header-illustration-image { + display: block; + position: absolute; + top: -168px; + left: -722px; + width: 1440px; + height: 324px; + } +} +.features-wrap { + max-width: 540px; + margin: 0 auto; +} + +.feature { + text-align: center; + margin-bottom: 48px; +} +.feature:last-of-type { + margin-bottom: 0; +} +.feature-icon { + display: inline-flex; + margin-bottom: 16px; +} +.feature-icon img, +.feature-icon svg { + max-width: none; +} +.feature-title { + position: relative; + margin-bottom: 26px; +} +.feature-title::after { + content: ''; + width: 32px; + height: 2px; + position: absolute; + bottom: -14px; + left: calc(50% - 16px); + background: #e9edf3; +} + .feature-title::after { + background: #3f2a34; +} +@media (min-width: 641px) { + .features { + position: relative; + } + .features .section-inner { + padding-bottom: 100px; + } + .features .section-paragraph { + padding-left: 72px; + padding-right: 72px; + } + .features::before { + content: ''; + width: 100%; + height: 300px; + position: absolute; + left: 0; + top: 168px; + background: linear-gradient( + to bottom, + #3f2a34, + #3f2a34 + ); + } + .features::before { + display: none; + } + .feature { + text-align: left; + } + .feature-inner { + display: flex; + } + .feature-icon { + display: block; + margin-top: 8px; + margin-right: 32px; + margin-bottom: 0; + } + .feature-title::after { + left: 0; + } +} +.cta { + position: relative; +} +.cta .section-inner { + padding-bottom: 64px; +} +.cta .section-paragraph { + margin-bottom: 32px; +} +.cta::before { + content: ''; + position: absolute; + bottom: -32px; + left: calc(50% - 720px); + height: 263px; + width: 1440px; +} +.cta-cta { + max-width: 400px; + margin-left: auto; + margin-right: auto; +} +@media (max-width: 639px) { + .cta-cta .button { + display: flex; + } +} +@media (min-width: 641px) { + .cta .section-inner { + padding-bottom: 128px; + } + .cta .section-paragraph { + margin-bottom: 40px; + padding-left: 72px; + padding-right: 72px; + } + .cta::before { + bottom: 0; + } +} +.is-boxed { + background: #e9edf3; +} +.body-wrap { + background: #fff; + overflow: hidden; + display: flex; + flex-direction: column; + min-height: 100vh; +} +.boxed-container { + max-width: 1440px; + margin: 0 auto; + box-shadow: 0 16px 48px rgba(255, 255, 255, 0.5); +} +main { + flex: 1 0 auto; +} +.section-inner { + position: relative; + padding-top: 48px; + padding-bottom: 48px; +} + +.site-footer { + font-size: 14px; + line-height: 20px; + letter-spacing: 0px; + background: #2e1e26; + color: #6b7a90; +} + +.site-footer-inner { + position: relative; + display: flex; + flex-wrap: wrap; + padding-top: 48px; + padding-bottom: 48px; +} + +.nes-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.footer-copyright { + flex: none; + width: 100%; + display: inline-flex; + justify-content: center; +} +.register { + height: 1000px; +} + +.login { + height: 1000px; +} +.container .login { + justify-content: center; + align-items: center; +} +.asset-dark { + visibility: hidden; + opacity: 0; +} +.is-loaded .asset-dark { + visibility: visible; + opacity: 1; +} +.asset-dark { + display: none; +} + { + +} + + .asset-dark { + display: block; +} + a { + color: #8595ae; +} + h1, + h2, + h3, + h4, + h5, + h6, + .h1, + .h2, + .h3, + .h4, + .h5, + .h6 { + color: #fff !important; +} +.is-boxed { + background: #3f2a34; +} + .body-wrap { + background: #2e1e26; +} + .boxed-container { + box-shadow: 0 16px 48px #3f2a34; +} + + .has-top-divider { + position: relative; +} + .has-top-divider::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + display: block; + height: 1px; + background: #3f2a34; +} + .has-bottom-divider { + position: relative; +} + .has-bottom-divider::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + display: block; + height: 1px; + background: #3f2a34; +} +body, +a, +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + transition: color 0.25s ease; +} + +.boxed-container { + transition: box-shadow 0.15s ease; +} \ No newline at end of file diff --git a/views/index.view.php b/views/index.view.php index 439c241..c52cd72 100644 --- a/views/index.view.php +++ b/views/index.view.php @@ -1,123 +1,94 @@ - - -
-
-
-
-
-
-
- - + \ No newline at end of file diff --git a/views/login.view.php b/views/login.view.php index fe59a62..0ae4992 100644 --- a/views/login.view.php +++ b/views/login.view.php @@ -1,41 +1,39 @@ -
-
-
-
-

Melde dich mit deinem Konto an.

-

- Oder - font-medium text-indigo-600 hover:text-indigo-500">registriere dich noch Heute -

-
-
- - + -
- + \ No newline at end of file diff --git a/views/partials/footer.php b/views/partials/footer.php index e92b11b..ee9ec5e 100644 --- a/views/partials/footer.php +++ b/views/partials/footer.php @@ -1,4 +1,17 @@ -
+
+
+
+
+ + Logo + +
+
© 2018 Patryk Hegenberg, all rights reserved
+
+
+
+
+ \ No newline at end of file diff --git a/views/partials/head.php b/views/partials/head.php index 5473262..58058b6 100644 --- a/views/partials/head.php +++ b/views/partials/head.php @@ -1,14 +1,14 @@ - + - - -The Math Wizard - + + + + The Math Wizard + - diff --git a/views/partials/nav.php b/views/partials/nav.php index 000158d..2253c39 100644 --- a/views/partials/nav.php +++ b/views/partials/nav.php @@ -1,27 +1,27 @@ - -
-
-
- -
-
+ +
+
+
+ +
+
\ No newline at end of file diff --git a/views/profile.view.php b/views/profile.view.php index c065c21..0820df8 100644 --- a/views/profile.view.php +++ b/views/profile.view.php @@ -1,28 +1,28 @@ -
-
-
-
-
- -
+
+
+
+
+
+ +

Hallo schön das du da bist.

-
+
-

Was möchtest du tun?

+

Was möchtest du tun?

-
- nes-btn">Lernen +
-
+
Dein Fortschritt Du bist aktuell Level:
@@ -39,11 +39,11 @@
-
+
- + \ No newline at end of file diff --git a/views/register.view.php b/views/register.view.php index 0fc7a98..c4b1221 100644 --- a/views/register.view.php +++ b/views/register.view.php @@ -1,7 +1,7 @@ -
-
+
+