diff --git a/css/_fonts.scss b/css/_fonts.scss
new file mode 100644
index 0000000..0c2fd8d
--- /dev/null
+++ b/css/_fonts.scss
@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: "Outfit", "Noto Color Emoji", sans-serif;
+}
+
+p, a, label, button, input {
+ font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+}
\ No newline at end of file
diff --git a/css/_reset.scss b/css/_reset.scss
new file mode 100644
index 0000000..22c532d
--- /dev/null
+++ b/css/_reset.scss
@@ -0,0 +1,4 @@
+* {
+ padding: 0;
+ margin: 0;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index b062d37..55b80fd 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,78 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
padding: 0;
margin: 0;
}
+h1, h2, h3, h4, h5, h6 {
+ font-family: "Outfit", "Noto Color Emoji", sans-serif;
+}
+
+p, a, label, button, input {
+ font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+}
+
+body {
+ background: #f8fafc;
+}
+
+.container {
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+.pageHero {
+ background: #6366f1;
+ color: #fff;
+ height: 30svh;
+}
+.pageHero > .container {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.pageNav {
+ width: 100svw;
+ background: #f1f5f9;
+}
+.pageNav > .container {
+ padding: 16px 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+.pageNav > .container > ul {
+ list-style: none;
+ display: flex;
+ gap: 8px;
+}
+.pageNav > .container > ul > li > a {
+ color: #0f172a;
+ text-decoration: none;
+ padding: 8px 16px;
+ border-radius: 32px;
+}
+.pageNav > .container > ul > li > a:hover, .pageNav > .container > ul > li > a.active {
+ background: rgba(15, 23, 42, 0.1);
+}
+.pageNav > .container > ul > li > a.buttonPrimary {
+ background: #6366f1;
+ color: #fff;
+}
+
+.pageFooter {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+.pageFooter > .left {
+ display: flex;
+ flex-direction: column;
+}
+
/*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
index 5030c67..25727d9 100644
--- a/css/style.css.map
+++ b/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACE;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["_fonts.scss","_reset.scss","style.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;;;ADAF;EACE;;;AAGF;EACE;;;AEJF;EACE;;;AAGF;EACE;EAEA;;;AAGF;EACE;EACA;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;;AAIJ;EACE;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;EAEA;;AAGE;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAQZ;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/css/style.scss b/css/style.scss
index 22c532d..a65bb04 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,4 +1,91 @@
-* {
- padding: 0;
- margin: 0;
+@import "reset";
+@import "fonts";
+
+body {
+ background: #f8fafc;
+}
+
+.container {
+ max-width: 1100px;
+
+ margin: 0 auto;
+}
+
+.pageHero {
+ background: #6366f1;
+ color: #fff;
+
+ height: 30svh;
+
+ > .container {
+ height: 100%;
+
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.pageNav {
+ width: 100svw;
+
+ background: #f1f5f9;
+
+ > .container {
+ padding: 16px 0;
+
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+ justify-content: space-between;
+
+ > ul {
+ list-style: none;
+
+ display: flex;
+
+ gap: 8px;
+
+ > li {
+ > a {
+ color: #0f172a;
+
+ text-decoration: none;
+
+ padding: 8px 16px;
+
+ border-radius: 32px;
+
+ &:hover, &.active {
+ background: rgba(15, 23, 42, 0.1);
+ }
+
+ &.buttonPrimary {
+ background: #6366f1;
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
+}
+
+.pageFooter {
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+ justify-content: space-between;
+
+ > .left {
+ display: flex;
+ flex-direction: column;
+ }
+
+ > .right {
+
+ }
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7e73f82..8bf14b3 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,67 @@
- CRSS
+
+
+
Clyde's Real Survival SMP
+
+
+ Online: /
+
+
+