footer, root module nav, and main page done

2024-10-09 01:14:02 +03:00 · 2024-10-09 01:14:02 +03:00 · 23719ec405
commit 23719ec405
parent cd1226e333
17 changed files with 519 additions and 34 deletions
--- a/src/styles/main-page.css
+++ b/src/styles/main-page.css
@ -0,0 +1,127 @@
+.main-page_hero {
+  position: relative;
+  margin-block: 9rem 4rem;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.main-page_hero-text {
+  color: hsl(var(--secondary-400));
+
+  & h2 {
+    font-size: 2rem;
+    letter-spacing: 0.018rem;
+    margin-bottom: 1.117rem;
+    text-wrap: pretty;
+
+    & em {
+      all: unset;
+
+      &:first-child {
+        color: hsl(var(--blue) 66 60);
+      }
+
+      &:last-child {
+        color: hsl(var(--accent-400));
+      }
+    }
+  }
+
+  & h3 {
+    font-size: 1.5rem;
+    letter-spacing: 0.015rem;
+    color: hsla(var(--secondary-400) / 0.8);
+    margin-bottom: 1.5rem;
+  }
+}
+
+.main-page_links {
+  position: relative;
+  display: flex;
+  width: 75%;
+  flex-wrap: wrap;
+  gap: 2rem;
+}
+
+.main-page_link-card {
+  all: unset;
+  position: relative;
+  width: 100%;
+  height: 9.67rem;
+  border-radius: 9px;
+  text-align: center;
+  overflow: hidden;
+  border: 1px solid transparent;
+  transition: border-color 0.3s;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    filter: blur(1.5rem) saturate(150%);
+    transition: filter 0.3s;
+    z-index: 1;
+  }
+
+  &:nth-child(1),
+  &:nth-child(2) {
+    &::before {
+      background: linear-gradient(115deg,
+          hsla(var(--green) 20 15 / 0.7) 25%,
+          hsla(var(--green) 25 25 / 0.8) 50%,
+          hsla(var(--green) 60 60 / 0.6) 80%);
+    }
+
+    &:hover {
+      border-color: hsl(var(--accent-600));
+
+      &::before {
+        filter: blur(0.9rem) saturate(200%);
+      }
+    }
+  }
+
+  &:nth-child(3),
+  &:nth-child(4) {
+    &::before {
+      background: linear-gradient(115deg,
+          hsla(var(--blue) 10 15 / 0.7) 25%,
+          hsla(var(--blue) 15 25 / 0.8) 50%,
+          hsla(var(--blue) 60 60 / 0.6) 80%);
+    }
+
+    &:hover {
+      border-color: hsl(var(--blue) 90 40);
+
+      &::before {
+        filter: blur(0.9rem) saturate(200%);
+      }
+    }
+  }
+
+  & h3 {
+    z-index: 2;
+  }
+}
+
+@media (min-width: 768px) {
+  .main-page_hero-text {
+    text-align: end;
+  }
+
+  .main-page_links {
+    justify-content: center;
+  }
+
+  .main-page_link-card {
+    max-width: 21.33rem;
+  }
+}