Saturn/saturn.gay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

about page

Browse Source
This commit is contained in:
aze
2025-09-05 21:10:51 +02:00
parent ff5d02a5b1
commit f0ff67a0c6
2 changed files with 83 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
about.html
View File

@@ -8,6 +8,19 @@
<title>Saturn</title> <title>Saturn</title>
</head> </head>
<body> <body>
<div class="about-container">
<h1>Saturn</h1>
<p>Three developers, one team since 2022.</p>
<p>Saturn is where we showcase the projects we’ve created.</p>
<br>
<div class="members">
<a href="https://example.com/wildy" target="_blank">WILDY</a>
<a href="https://example.com/aze" target="_blank">AZE</a>
<a href="https://example.com/fulgur" target="_blank">FULGUR</a>
</div>
</div>
<div class="navbar"> <div class="navbar">
<a href="index.html">HOME</a> <a href="index.html">HOME</a>
<a href="about.html">ABOUT</a> <a href="about.html">ABOUT</a>

77
assets/css/styles.css
View File

@@ -14,11 +14,19 @@
color: black; color: black;
} }
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.rbottom { .rbottom {
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; /* aligns items to the right */ align-items: flex-end;
right: 20px; right: 20px;
bottom: 20px; bottom: 20px;
padding: 10px; padding: 10px;
@@ -27,12 +35,12 @@
} }
.rbottom p { .rbottom p {
margin: 0; /* remove default spacing */ margin: 0;
} }
.rbottom img { .rbottom img {
max-width: 120px; max-width: 120px;
margin-top: -30px; /* pulls the image up */ margin-top: -30px;
} }
@@ -57,12 +65,67 @@
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 0; /* start with zero width */ width: 0;
height: 2px; /* thickness of underline */ height: 2px;
background-color: black; background-color: black;
transition: width 0.3s ease; /* smooth slide animation */ transition: width 0.3s ease;
} }
.navbar a:hover::after { .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);
} }