diff --git a/src/assets/home/background.svg b/src/assets/home/header-background.svg similarity index 100% rename from src/assets/home/background.svg rename to src/assets/home/header-background.svg diff --git a/src/assets/home/invite-banner.svg b/src/assets/home/invite-banner.svg new file mode 100644 index 0000000..7047c8f --- /dev/null +++ b/src/assets/home/invite-banner.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/fonts/poppins/Poppins-Black.ttf b/src/fonts/poppins/Poppins-Black.ttf deleted file mode 100644 index 71c0f99..0000000 Binary files a/src/fonts/poppins/Poppins-Black.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-BlackItalic.ttf b/src/fonts/poppins/Poppins-BlackItalic.ttf deleted file mode 100644 index 7aeb58b..0000000 Binary files a/src/fonts/poppins/Poppins-BlackItalic.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-BoldItalic.ttf b/src/fonts/poppins/Poppins-BoldItalic.ttf deleted file mode 100644 index e61e8e8..0000000 Binary files a/src/fonts/poppins/Poppins-BoldItalic.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-ExtraBold.ttf b/src/fonts/poppins/Poppins-ExtraBold.ttf deleted file mode 100644 index df70936..0000000 Binary files a/src/fonts/poppins/Poppins-ExtraBold.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-ExtraBoldItalic.ttf b/src/fonts/poppins/Poppins-ExtraBoldItalic.ttf deleted file mode 100644 index 14d2b37..0000000 Binary files a/src/fonts/poppins/Poppins-ExtraBoldItalic.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-ExtraLight.ttf b/src/fonts/poppins/Poppins-ExtraLight.ttf deleted file mode 100644 index e76ec69..0000000 Binary files a/src/fonts/poppins/Poppins-ExtraLight.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-ExtraLightItalic.ttf b/src/fonts/poppins/Poppins-ExtraLightItalic.ttf deleted file mode 100644 index 89513d9..0000000 Binary files a/src/fonts/poppins/Poppins-ExtraLightItalic.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-Italic.ttf b/src/fonts/poppins/Poppins-Italic.ttf deleted file mode 100644 index 12b7b3c..0000000 Binary files a/src/fonts/poppins/Poppins-Italic.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-LightItalic.ttf b/src/fonts/poppins/Poppins-LightItalic.ttf deleted file mode 100644 index 9e70be6..0000000 Binary files a/src/fonts/poppins/Poppins-LightItalic.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-MediumItalic.ttf b/src/fonts/poppins/Poppins-MediumItalic.ttf deleted file mode 100644 index be67410..0000000 Binary files a/src/fonts/poppins/Poppins-MediumItalic.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-Regular.ttf b/src/fonts/poppins/Poppins-Regular.ttf deleted file mode 100644 index 9f0c71b..0000000 Binary files a/src/fonts/poppins/Poppins-Regular.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-SemiBold.ttf b/src/fonts/poppins/Poppins-SemiBold.ttf deleted file mode 100644 index 74c726e..0000000 Binary files a/src/fonts/poppins/Poppins-SemiBold.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-SemiBoldItalic.ttf b/src/fonts/poppins/Poppins-SemiBoldItalic.ttf deleted file mode 100644 index 3e6c942..0000000 Binary files a/src/fonts/poppins/Poppins-SemiBoldItalic.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-Thin.ttf b/src/fonts/poppins/Poppins-Thin.ttf deleted file mode 100644 index 03e7366..0000000 Binary files a/src/fonts/poppins/Poppins-Thin.ttf and /dev/null differ diff --git a/src/fonts/poppins/Poppins-ThinItalic.ttf b/src/fonts/poppins/Poppins-ThinItalic.ttf deleted file mode 100644 index e26db5d..0000000 Binary files a/src/fonts/poppins/Poppins-ThinItalic.ttf and /dev/null differ diff --git a/src/pages/home.tmpl b/src/pages/home.tmpl index 0efa04d..24d8545 100644 --- a/src/pages/home.tmpl +++ b/src/pages/home.tmpl @@ -12,24 +12,25 @@

MBot is a new Discord bot that allows you do powerful moderation, play music with your friends, and is built to do way more in the future! This project is currentaly in alpha and MBot is very limited, please wait paintely for new updates comming your way! 😎

- + Bot Profile
+ + +
+

Invite our bot!

+

Invite our bot to your server today!

+
+ Invite now! + Our Git! +
+
{{ end }} diff --git a/src/styles/home.css b/src/styles/home.css index a957ce9..765fc47 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -7,7 +7,7 @@ header { margin-bottom: 0; width: calc(100% + 2 * var(--pad)); height: 600px; - background: #103161 no-repeat center / cover url(/src/assets/home/background.svg); + background: #103161 no-repeat center / cover url(/src/assets/home/header-background.svg); #header-wrapped-content { display: flex; @@ -46,7 +46,6 @@ header { height: 100%; object-fit: cover; image-rendering: pixelated; - user-select: none; } } } @@ -61,7 +60,7 @@ header { display: flex; align-items: center; justify-content: space-between; - margin-top: 180px; + margin: 90px 0; gap: 200px; div { @@ -75,12 +74,51 @@ header { img { border-radius: 20px; border: #fff solid 3px; - user-select: none; - width: 400px; + max-width: 100%; + height: auto; } } } +#invite-banner { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 350px; + background: #1e7ebf no-repeat center / cover url(/src/assets/home/invite-banner.svg); + border-radius: 20px; + text-align: center; + + h2 { + font-size: 3rem; + } + p { + font-size: 1.3rem; + margin-bottom: 20px; + } + div { + display: flex; + flex-direction: row; + gap: 10px; + } + a { + display: flex; + align-items: center; + justify-content: center; + background-color: #0f2952; + border-radius: 10px; + min-width: 110px; + min-height: 50px; + cursor: pointer; + transition: border 0.3s; + } + a:hover { + border: #fff solid 2px; + } +} + .shift-right { margin-left: auto; } @@ -89,6 +127,10 @@ header { margin: auto; } +.row-reverse { + flex-direction: row-reverse; +} + @media only screen and (max-width: 1100px) { header { height: 750px; @@ -100,4 +142,38 @@ header { #header-wrapped-profile { margin-bottom: 30px; } -} + #what-about { + li { + gap: 100px; + } + } +} + +@media only screen and (max-width: 815px) { + #what-about { + li { + flex-direction: column; + text-align: center; + margin: 50px 0; + gap: 50px; + } + } +} + +@media only screen and (max-width: 600px) { + header { + height: 900px; + + #header-wrapped-content { + padding: 20px 50px; + } + } +} + +@media only screen and (max-width: 420px) { + header { + #header-wrapped-content { + padding: 20px 20px; + } + } +} diff --git a/src/styles/main.css b/src/styles/main.css index 3a15754..81dc4cc 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -46,6 +46,11 @@ a { text-decoration: none; } +img { + pointer-events: none; + user-select: none; +} + nav { position: absolute; display: flex;