Optimize directory structure. Optimize Slogan.

src/assets/css/pages/header.scss

@@ -0,0 +1,93 @@
+@use "../mixins" as mixins;
+
+.nav {
+  display: flex;
+  position: fixed;
+  align-items: center;
+  z-index: 1;
+  width: 100%;
+  height: 70px;
+  min-width: 900px;
+  background-color: white;
+  border: {
+    bottom: {
+      width: 1px;
+      style: solid;
+      color: rgba(204, 204, 204, .33);
+    }
+  }
+  animation: .5s ease both;
+
+  @include mixins.unique-keyframes {
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  .logo {
+    padding: 0 40px;
+
+    .title {
+      font-size: 2.8em;
+      font-family: century gothic, texgyreadventor, stheiti, sans-serif;
+    }
+  }
+
+  nav {
+    display: flex;
+    justify-content: end;
+    flex: 1;
+    transition: {
+      property: all;
+      duration: .5s;
+    };
+
+    .menu {
+      padding: 0 30px;
+
+      .item {
+        display: inline-block;
+        font-size: 1.5em;
+        transition: {
+          property: all;
+          duration: .3s;
+        };
+
+        a {
+          padding: 5px 20px;
+          color: rgba(102, 102, 102, .8);
+        }
+      }
+
+      .active {
+        border: {
+          bottom: {
+            width: 2px;
+            style: solid;
+            color: #CCC;
+          };
+        };
+      }
+
+      :hover {
+        transform: translateY(-5px);
+      }
+    }
+  }
+}
+
+.nav.hide {
+  animation: .5s ease both;
+
+  @include mixins.unique-keyframes {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-100%);
+    }
+  }
+}

src/assets/css/pages/login.scss

@@ -0,0 +1,63 @@
+.login-background {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  justify-content: center;
+  align-items: center;
+  background-color: #B3E5FC;
+}
+
+.login-box {
+  display: flex;
+  width: 800px;
+  height: 450px;
+  background-color: #448AFF;
+}
+
+.login-box-left {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  flex: 2;
+}
+
+.login-box-left-text {
+  font-size: 3rem;
+  color: white;
+  font-weight: bold;
+
+  > div:last-child {
+    font-size: 1.8rem;
+    font-weight: normal;
+  }
+}
+
+.login-box-right {
+  position: relative;
+  height: 100%;
+  flex: 3;
+  background-color: white;
+}
+
+.login-from-text {
+  position: absolute;
+  top: 60px;
+  left: 40px;
+  font-weight: bold;
+  font-size: 2rem;
+}
+
+.login-from {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30px;
+  width: 100%;
+  height: 100%;
+}
+
+.login-from-item {
+  width: 80%;
+}