+
What is MBot?
+
MBot is a Discord bot powered by Discord.js to help the user in moderation of their server, this bot can help ban, kick any user (as long as it has permission to do so) to help fight off anyone who could be doing anything against what the server goes for! It can also clear messages incase any big chunks of unwanted messages appear. If you want music for your server this is the bot for that! This bot is able to play about any music you want as long as it is a public link.
+
{{ end }}
diff --git a/src/styles/home.css b/src/styles/home.css
index 83e5502..e7fe746 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -1,5 +1,71 @@
header {
- h1 {
- margin-top: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ left: 0;
+ top: 0;
+ margin: -20px -20px 0;
+ width: calc(100% + 40px);
+ height: 600px;
+ background-image: url(/src/assets/home/background.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+
+ #header-wrapped-content {
+ display: flex;
+ position: relative;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 1920px;
+ width: 100%;
+ padding: 20px 100px;
+
+ img {
+ float: right;
+ }
+ }
+
+ #header-wrapped-text {
+ max-width: 600px;
+
+ h1 {
+ font-size: 3rem;
+ }
+ p{
+ font-size: 1.3rem;
+ }
+ }
+
+ #header-wrapped-profile {
+ border-radius: 50% !important;
+ overflow: hidden;
+ height: 300px !important;
+ width: 300px !important;
+ border-style: solid;
+ border-color: white;
+ border-width: 3px;
+ aspect-ratio: 1 / 1;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ image-rendering: pixelated;
+ }
}
}
+
+#what-about {
+ margin-top: 30px;
+
+ h2 {
+ font-size: 3rem;
+ }
+ p{
+ font-size: 1.3rem;
+ max-width: 800px;
+ }
+}
diff --git a/src/styles/main.css b/src/styles/main.css
index 6169412..be2c295 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,3 +1,25 @@
+@font-face {
+ font-family: Poppins;
+ src: url(/src/fonts/poppins/Poppins-Medium.ttf);
+ font-weight: 500;
+}
+
+@font-face {
+ font-family: Poppins;
+ src: url(/src/fonts/poppins/Poppins-Light.ttf);
+ font-weight: 200;
+}
+
+@font-face {
+ font-family: Poppins;
+ src: url(/src/fonts/poppins/Poppins-Bold.ttf);
+ font-weight: 800;
+}
+
+:root {
+ --font: 'Poppins', sans-serif;
+}
+
* {
box-sizing: border-box;
padding: 0;
@@ -12,6 +34,10 @@ body {
margin: auto;
padding: 20px;
min-height: 100vh;
+ background-color: #121212;
+ color: white;
+ font-family: var(--font);
+ font-weight: 500;
}
a {
@@ -20,24 +46,41 @@ a {
}
nav {
+ position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
+ z-index: 999;
+ width: calc(100% - 40px);
+
+ h1 {
+ font-size: 2rem;
+ }
ul {
+ display: flex;
list-style: none;
float: right;
+ gap: 10px;
li {
display: inline;
cursor: pointer;
- margin-left: 10px;
+ font-weight: 200;
}
}
}
footer {
+ position: relative;
margin-top: auto;
+ padding-top: 20px;
width: 100%;
- text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ p {
+ float: right;
+ }
}