new homepage

This commit is contained in:
2025-08-04 23:29:07 +02:00
parent bb9b66d077
commit 0a1e36ccc8
3 changed files with 61 additions and 14 deletions

BIN
www/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@@ -4,7 +4,8 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CWS</title>
<title>cws</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -12,10 +13,20 @@
</head>
<body>
<div>
<h1>Hello from <span class="highlight">CWS</span>!</h1>
<p>Open an image <a href="/cws.jpg" target="_blank">here</a>.</p>
</div>
<main>
<h1>Hello from <span class="highlight">cws</span>!</h1>
<p>
Open an image
<a href="/cws.jpg" target="_blank" rel="noopener noreferrer">here</a>.
</p>
</main>
<footer class="icon-credit">
<a target="_blank" href="https://icons8.com/icon/38796/linux">Linux</a>
icon by
<a target="_blank" href="https://icons8.com">Icons8</a>
</footer>
</body>
</html>

View File

@@ -2,11 +2,29 @@ body {
margin: 0;
height: 100vh;
font-family: "Montserrat", sans-serif;
background: linear-gradient(135deg, #ff6a6a, #ff9472);
background: linear-gradient(135deg, #3a8ddb, #6dd5fa);
display: flex;
justify-content: center;
align-items: center;
color: white;
animation: fadeIn 1s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
main {
text-align: center;
padding: 1rem;
}
h1 {
@@ -16,7 +34,7 @@ h1 {
}
.highlight {
color: #ffe678;
color: #d1b3ff;
}
p {
@@ -36,14 +54,32 @@ a:hover {
color: #ffe678;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
.icon-credit {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-size: 0.8rem;
color: #cccccc;
}
to {
opacity: 1;
transform: translateY(0);
.icon-credit a {
color: #cccccc;
text-decoration: none;
transition: color 0.3s;
}
.icon-credit a:hover {
color: #ffffff;
}
/* Mobile tweaks */
@media (max-width: 480px) {
h1 {
font-size: 2.2rem;
}
p {
font-size: 1rem;
}
}