From f0ff67a0c6a430796fdca7b668b3b14a3777d190 Mon Sep 17 00:00:00 2001 From: aze <226987740+azecx@users.noreply.github.com> Date: Fri, 5 Sep 2025 21:10:51 +0200 Subject: [PATCH] about page --- about.html | 13 ++++++++ assets/css/styles.css | 77 +++++++++++++++++++++++++++++++++++++++---- 2 files changed, 83 insertions(+), 7 deletions(-) diff --git a/about.html b/about.html index e25f696..6f32e1e 100644 --- a/about.html +++ b/about.html @@ -8,6 +8,19 @@ Saturn + +
+

Saturn

+

Three developers, one team since 2022.

+

Saturn is where we showcase the projects we’ve created.

+
+
+ WILDY + AZE + FULGUR +
+
+
HOME ABOUT diff --git a/assets/css/styles.css b/assets/css/styles.css index e04f4c4..ea49e69 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -14,11 +14,19 @@ color: black; } +body { + margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + .rbottom { position: fixed; display: flex; flex-direction: column; - align-items: flex-end; /* aligns items to the right */ + align-items: flex-end; right: 20px; bottom: 20px; padding: 10px; @@ -27,12 +35,12 @@ } .rbottom p { - margin: 0; /* remove default spacing */ + margin: 0; } .rbottom img { max-width: 120px; - margin-top: -30px; /* pulls the image up */ + margin-top: -30px; } @@ -57,12 +65,67 @@ position: absolute; left: 0; bottom: 0; - width: 0; /* start with zero width */ - height: 2px; /* thickness of underline */ + width: 0; + height: 2px; background-color: black; - transition: width 0.3s ease; /* smooth slide animation */ + transition: width 0.3s ease; } .navbar a:hover::after { - width: 100%; /* full width on hover */ + width: 100%; +} + +.about-container { + text-align: left; + margin: 0; + padding: 0; +} + +.about-container h1, +.about-container p { + margin: 0; + padding: 0; +} + +.about-container h1 { + margin-bottom: 10px; + font-size: 45px; +} + +.about-container p { + font-size: 20px; +} + +.about-container p + p { + margin-top: 5px; +} + +.members { + display: flex; + gap: 20px; +} + +.members a { + text-decoration: none; + color: black; + padding: 5px 10px; + position: relative; + transition: all 0.3s ease; + font-size: 20px; +} + +.members a::before { + content: ""; + position: absolute; + inset: 0; + border: 2px dashed black; + opacity: 0; + transform: scale(0.8); + transition: all 0.3s ease; + border-radius: 5px; +} + +.members a:hover::before { + opacity: 1; + transform: scale(1); }