444 lines
13 KiB
HTML
444 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Nunito', 'Segoe UI', Trebuchet MS, sans-serif;
|
||
|
|
background: linear-gradient(160deg, #a8d8f0 0%, #c5ecd8 35%, #b8e4f7 65%, #d4f0e8 100%);
|
||
|
|
min-height: 100vh;
|
||
|
|
overflow-x: hidden;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Ambient blobs */
|
||
|
|
body::before {
|
||
|
|
content: '';
|
||
|
|
position: fixed;
|
||
|
|
width: 600px; height: 600px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%);
|
||
|
|
top: -100px; left: -150px;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
body::after {
|
||
|
|
content: '';
|
||
|
|
position: fixed;
|
||
|
|
width: 400px; height: 400px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(180,240,220,0.4) 0%, transparent 70%);
|
||
|
|
bottom: -80px; right: -80px;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page {
|
||
|
|
max-width: 860px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2.5rem 1.5rem 3rem;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* NAV */
|
||
|
|
.nav {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.35));
|
||
|
|
border: 1px solid rgba(255,255,255,0.8);
|
||
|
|
border-radius: 50px;
|
||
|
|
padding: 0.6rem 1.2rem;
|
||
|
|
backdrop-filter: blur(12px);
|
||
|
|
margin-bottom: 2.5rem;
|
||
|
|
box-shadow: 0 4px 24px rgba(100,180,210,0.2), inset 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
}
|
||
|
|
.nav-logo {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #1a7a9a;
|
||
|
|
text-shadow: 0 1px 2px rgba(255,255,255,0.8);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
.logo-orb {
|
||
|
|
width: 28px; height: 28px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: linear-gradient(135deg, #5ecfee, #34b89e);
|
||
|
|
box-shadow: 0 2px 8px rgba(70,190,210,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
|
||
|
|
}
|
||
|
|
.nav-links {
|
||
|
|
display: flex;
|
||
|
|
gap: 0.2rem;
|
||
|
|
}
|
||
|
|
.nav-link {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: #2a8aaa;
|
||
|
|
padding: 0.35rem 0.9rem;
|
||
|
|
border-radius: 50px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.nav-link:hover {
|
||
|
|
background: rgba(255,255,255,0.6);
|
||
|
|
color: #155f7a;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* HERO */
|
||
|
|
.hero {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 2.5rem;
|
||
|
|
}
|
||
|
|
.hero h1 {
|
||
|
|
font-size: 2.8rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #0d5c78;
|
||
|
|
text-shadow: 0 2px 8px rgba(255,255,255,0.7), 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
line-height: 1.15;
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
}
|
||
|
|
.hero h1 span {
|
||
|
|
background: linear-gradient(135deg, #1aaccf, #1dc9a0);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
.hero p {
|
||
|
|
font-size: 1.05rem;
|
||
|
|
color: #2a7a94;
|
||
|
|
max-width: 480px;
|
||
|
|
margin: 0 auto 1.5rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* GLASS BUTTONS */
|
||
|
|
.btn-group {
|
||
|
|
display: flex;
|
||
|
|
gap: 0.75rem;
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
padding: 0.7rem 1.8rem;
|
||
|
|
border-radius: 50px;
|
||
|
|
border: none;
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
font-weight: 700;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.btn::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0; left: 0; right: 0;
|
||
|
|
height: 50%;
|
||
|
|
background: rgba(255,255,255,0.3);
|
||
|
|
border-radius: 50px 50px 0 0;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.btn-primary {
|
||
|
|
background: linear-gradient(160deg, #3acce0 0%, #1aa8a0 100%);
|
||
|
|
color: white;
|
||
|
|
box-shadow: 0 4px 16px rgba(40,180,200,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
|
||
|
|
text-shadow: 0 1px 2px rgba(0,80,100,0.3);
|
||
|
|
}
|
||
|
|
.btn-primary:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 8px 24px rgba(40,180,200,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
|
||
|
|
}
|
||
|
|
.btn-glass {
|
||
|
|
background: linear-gradient(160deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
|
||
|
|
color: #1a7a9a;
|
||
|
|
box-shadow: 0 4px 16px rgba(100,180,210,0.2), inset 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
border: 1px solid rgba(255,255,255,0.75);
|
||
|
|
}
|
||
|
|
.btn-glass:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
|
||
|
|
}
|
||
|
|
.btn:active { transform: translateY(0); }
|
||
|
|
|
||
|
|
/* CARDS */
|
||
|
|
.cards {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
|
||
|
|
border: 1px solid rgba(255,255,255,0.8);
|
||
|
|
border-radius: 20px;
|
||
|
|
padding: 1.4rem 1.2rem;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
box-shadow: 0 4px 24px rgba(80,170,210,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
.card:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
box-shadow: 0 12px 36px rgba(80,170,210,0.25), inset 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
}
|
||
|
|
.card-icon {
|
||
|
|
width: 48px; height: 48px;
|
||
|
|
border-radius: 14px;
|
||
|
|
margin-bottom: 0.85rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.card-icon::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0; left: 0; right: 0;
|
||
|
|
height: 50%;
|
||
|
|
background: rgba(255,255,255,0.35);
|
||
|
|
border-radius: 14px 14px 0 0;
|
||
|
|
}
|
||
|
|
.icon-blue { background: linear-gradient(135deg, #5ecfee, #2aa8d4); box-shadow: 0 3px 12px rgba(70,190,220,0.4); }
|
||
|
|
.icon-green { background: linear-gradient(135deg, #5de0b0, #1abf88); box-shadow: 0 3px 12px rgba(50,200,160,0.4); }
|
||
|
|
.icon-purple { background: linear-gradient(135deg, #b09cef, #8870dd); box-shadow: 0 3px 12px rgba(140,120,220,0.4); }
|
||
|
|
.icon-orange { background: linear-gradient(135deg, #f0c060, #e0903a); box-shadow: 0 3px 12px rgba(220,150,60,0.4); }
|
||
|
|
.card h3 {
|
||
|
|
font-size: 1rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #0d5c78;
|
||
|
|
margin-bottom: 0.35rem;
|
||
|
|
}
|
||
|
|
.card p {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: #3a8aaa;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* GLASS PANEL */
|
||
|
|
.panel {
|
||
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(220,245,255,0.4));
|
||
|
|
border: 1px solid rgba(255,255,255,0.8);
|
||
|
|
border-radius: 24px;
|
||
|
|
padding: 1.8rem;
|
||
|
|
backdrop-filter: blur(12px);
|
||
|
|
box-shadow: 0 6px 32px rgba(80,170,210,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
.panel-title {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #3a9ab8;
|
||
|
|
letter-spacing: 0.12em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
.progress-rows { display: flex; flex-direction: column; gap: 0.8rem; }
|
||
|
|
.progress-item { display: flex; align-items: center; gap: 0.8rem; }
|
||
|
|
.progress-label { font-size: 0.85rem; color: #1a6a88; font-weight: 600; min-width: 80px; }
|
||
|
|
.progress-bar-bg {
|
||
|
|
flex: 1;
|
||
|
|
height: 14px;
|
||
|
|
border-radius: 50px;
|
||
|
|
background: rgba(255,255,255,0.5);
|
||
|
|
border: 1px solid rgba(255,255,255,0.7);
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: inset 0 1px 4px rgba(0,80,120,0.1);
|
||
|
|
}
|
||
|
|
.progress-bar {
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50px;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.progress-bar::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0; left: 0; right: 0;
|
||
|
|
height: 55%;
|
||
|
|
background: rgba(255,255,255,0.45);
|
||
|
|
border-radius: 50px;
|
||
|
|
}
|
||
|
|
.bar-teal { background: linear-gradient(90deg, #4cd8b8, #1ab89a); box-shadow: 0 0 8px rgba(40,200,170,0.4); }
|
||
|
|
.bar-blue { background: linear-gradient(90deg, #5cc8e8, #1aa0cc); box-shadow: 0 0 8px rgba(40,170,220,0.4); }
|
||
|
|
.bar-purple { background: linear-gradient(90deg, #b090f0, #8860d8); box-shadow: 0 0 8px rgba(140,110,220,0.4); }
|
||
|
|
.bar-green { background: linear-gradient(90deg, #80d860, #50b830); box-shadow: 0 0 8px rgba(80,190,60,0.4); }
|
||
|
|
.progress-val { font-size: 0.82rem; color: #1a7090; font-weight: 700; min-width: 34px; text-align: right; }
|
||
|
|
|
||
|
|
/* BUBBLES */
|
||
|
|
.bubbles {
|
||
|
|
display: flex;
|
||
|
|
gap: 0.6rem;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
.bubble {
|
||
|
|
padding: 0.4rem 1rem;
|
||
|
|
border-radius: 50px;
|
||
|
|
font-size: 0.82rem;
|
||
|
|
font-weight: 700;
|
||
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45));
|
||
|
|
border: 1px solid rgba(255,255,255,0.8);
|
||
|
|
color: #1a7898;
|
||
|
|
box-shadow: 0 2px 8px rgba(80,170,210,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.15s;
|
||
|
|
}
|
||
|
|
.bubble:hover {
|
||
|
|
transform: translateY(-1px) scale(1.04);
|
||
|
|
box-shadow: 0 4px 14px rgba(80,170,210,0.25), inset 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
}
|
||
|
|
.bubble.active {
|
||
|
|
background: linear-gradient(135deg, #3acce0, #1aaa9c);
|
||
|
|
color: white;
|
||
|
|
border-color: rgba(255,255,255,0.5);
|
||
|
|
text-shadow: 0 1px 2px rgba(0,60,80,0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* FLOATING ORBS */
|
||
|
|
.orbs {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.orb {
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
opacity: 0.25;
|
||
|
|
animation: floatOrb linear infinite;
|
||
|
|
}
|
||
|
|
@keyframes floatOrb {
|
||
|
|
0% { transform: translateY(0) translateX(0) scale(1); }
|
||
|
|
33% { transform: translateY(-30px) translateX(15px) scale(1.04); }
|
||
|
|
66% { transform: translateY(-15px) translateX(-10px) scale(0.97); }
|
||
|
|
100% { transform: translateY(0) translateX(0) scale(1); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* FOOTER */
|
||
|
|
.footer-note {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: #4a9ab5;
|
||
|
|
margin-top: 2.5rem;
|
||
|
|
font-weight: 600;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- Floating ambient orbs -->
|
||
|
|
<div class="orbs">
|
||
|
|
<div class="orb" style="width:280px;height:280px;top:5%;left:60%;background:radial-gradient(circle,#a0e8f0,transparent);animation-duration:11s;"></div>
|
||
|
|
<div class="orb" style="width:200px;height:200px;top:45%;left:5%;background:radial-gradient(circle,#90e8d0,transparent);animation-duration:14s;"></div>
|
||
|
|
<div class="orb" style="width:160px;height:160px;top:70%;left:75%;background:radial-gradient(circle,#c0d8f8,transparent);animation-duration:9s;"></div>
|
||
|
|
<div class="orb" style="width:120px;height:120px;top:25%;left:30%;background:radial-gradient(circle,#b0f0e0,transparent);animation-duration:16s;"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="page">
|
||
|
|
|
||
|
|
<!-- NAV -->
|
||
|
|
<nav class="nav">
|
||
|
|
<div class="nav-logo">
|
||
|
|
<div class="logo-orb"></div>
|
||
|
|
AeroOS
|
||
|
|
</div>
|
||
|
|
<div class="nav-links">
|
||
|
|
<div class="nav-link">Home</div>
|
||
|
|
<div class="nav-link">Gallery</div>
|
||
|
|
<div class="nav-link">About</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- HERO -->
|
||
|
|
<div class="hero">
|
||
|
|
<h1>Welcome to<br><span>Frutiger Aero</span></h1>
|
||
|
|
<p>Clean interfaces, glossy surfaces, and the feeling of a better internet. Nature-inspired. Hopeful. Alive.</p>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button class="btn btn-primary">Get Started</button>
|
||
|
|
<button class="btn btn-glass">Learn More</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- FEATURE CARDS -->
|
||
|
|
<div class="cards">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-icon icon-blue">🫧</div>
|
||
|
|
<h3>Glass surfaces</h3>
|
||
|
|
<p>Translucent layers, soft blur, and light refracting through everything.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-icon icon-green">🌿</div>
|
||
|
|
<h3>Nature-inspired</h3>
|
||
|
|
<p>Aqua, teal, and lush greens borrowed from the world outside your screen.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-icon icon-purple">✨</div>
|
||
|
|
<h3>Glossy shine</h3>
|
||
|
|
<p>Every surface catches the light. Buttons glow. Progress bars gleam.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-icon icon-orange">☀️</div>
|
||
|
|
<h3>Optimistic Y2K</h3>
|
||
|
|
<p>The aesthetic of a future that felt bright, connected, and full of wonder.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- GLASS PANEL with progress bars -->
|
||
|
|
<div class="panel">
|
||
|
|
<div class="panel-title">System Vitals</div>
|
||
|
|
<div class="progress-rows">
|
||
|
|
<div class="progress-item">
|
||
|
|
<div class="progress-label">Serenity</div>
|
||
|
|
<div class="progress-bar-bg"><div class="progress-bar bar-teal" style="width:88%"></div></div>
|
||
|
|
<div class="progress-val">88%</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-item">
|
||
|
|
<div class="progress-label">Glossiness</div>
|
||
|
|
<div class="progress-bar-bg"><div class="progress-bar bar-blue" style="width:97%"></div></div>
|
||
|
|
<div class="progress-val">97%</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-item">
|
||
|
|
<div class="progress-label">Vibes</div>
|
||
|
|
<div class="progress-bar-bg"><div class="progress-bar bar-purple" style="width:74%"></div></div>
|
||
|
|
<div class="progress-val">74%</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-item">
|
||
|
|
<div class="progress-label">Nature</div>
|
||
|
|
<div class="progress-bar-bg"><div class="progress-bar bar-green" style="width:91%"></div></div>
|
||
|
|
<div class="progress-val">91%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tag bubbles -->
|
||
|
|
<div class="bubbles" id="bubbles">
|
||
|
|
<div class="bubble active" onclick="toggleBubble(this)">Aero</div>
|
||
|
|
<div class="bubble" onclick="toggleBubble(this)">Y2K</div>
|
||
|
|
<div class="bubble" onclick="toggleBubble(this)">Glassmorphism</div>
|
||
|
|
<div class="bubble" onclick="toggleBubble(this)">Aqua</div>
|
||
|
|
<div class="bubble" onclick="toggleBubble(this)">Vista</div>
|
||
|
|
<div class="bubble" onclick="toggleBubble(this)">Web 2.0</div>
|
||
|
|
<div class="bubble" onclick="toggleBubble(this)">Skeuomorphic</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer-note">Made with glass, gradients, and good vibes ✦</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function toggleBubble(el) {
|
||
|
|
el.classList.toggle('active');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|