agency portfolio dark glassmorphism orbs masonry grid animated css gradient dark
Agency Dark Portfolio
Dark agency portfolio with animated gradient orbs, glassmorphic nav, and CSS grid project masonry.
dark Responsive Animated
Live Preview
Sections
navbarheroportfolioservicesprocessctafooter
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skyline — Creative Agency</title>
<meta name="description" content="We build beautiful and functional digital experiences that help you achieve your business goals.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Serif+Display:ital@1&display=swap');
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: 'DM Sans', system-ui, sans-serif;
background: #0E0E10;
color: #F0EEF0;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
overflow-x: hidden;
}
/* ── Orb animations ────────────────────────────────────────── */
@keyframes float-a {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.08); }
66% { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes float-b {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-50px, 30px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.orb { animation: none !important; }
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
.orb-purple {
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(168,85,247,0.35), transparent 70%);
animation: float-a 14s ease-in-out infinite;
}
.orb-magenta {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(236,72,153,0.28), transparent 70%);
animation: float-b 18s ease-in-out infinite;
}
.orb-orange {
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(249,115,22,0.2), transparent 70%);
animation: float-a 22s ease-in-out infinite reverse;
}
/* ── Glassmorphic nav ──────────────────────────────────────── */
.glass-nav {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 100; width: min(860px, calc(100vw - 32px));
display: flex; align-items: center; justify-content: space-between;
padding: 12px 20px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 100px;
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
}
/* ── Nav link ─────────────────────────────────────────────── */
.nav-link {
font-size: 13px; color: rgba(255,255,255,0.55);
text-decoration: none; padding: 4px 8px; border-radius: 100px;
transition: color 0.15s ease;
}
.nav-link:hover { color: rgba(255,255,255,0.9); }
.nav-link.active { color: #F0EEF0; }
/* ── Portfolio grid ────────────────────────────────────────── */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
gap: 16px;
}
.p-card-a { grid-column: span 5; grid-row: span 2; } /* tall left */
.p-card-b { grid-column: span 7; } /* wide top-right */
.p-card-c { grid-column: span 4; } /* mid right */
.p-card-d { grid-column: span 3; } /* small right */
.p-card-e { grid-column: span 7; } /* wide bottom */
.p-card-f { grid-column: span 5; } /* bottom right */
@media (max-width: 768px) {
.portfolio-grid { grid-template-columns: 1fr; }
[class*="p-card-"] { grid-column: span 1; grid-row: span 1; }
}
/* ── Project card ─────────────────────────────────────────── */
.project-card {
position: relative;
border-radius: 24px;
overflow: hidden;
min-height: 280px;
cursor: pointer;
}
.project-card-inner {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 24px;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
transition: background 0.3s ease;
}
.project-card:hover .project-card-inner {
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
.project-card-bg {
position: absolute; inset: 0;
transition: transform 0.5s ease;
}
.project-card:hover .project-card-bg { transform: scale(1.04); }
/* ── Arrow icon ───────────────────────────────────────────── */
.arrow-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
flex-shrink: 0;
transition: background 0.2s ease, transform 0.2s ease;
}
.project-card:hover .arrow-icon {
background: rgba(255,255,255,0.22);
transform: translate(3px, -3px);
}
/* ── Service pill ─────────────────────────────────────────── */
.service-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 18px; border-radius: 100px;
border: 1px solid rgba(255,255,255,0.12);
font-size: 13px; color: rgba(255,255,255,0.6);
transition: border-color 0.15s ease, color 0.15s ease;
}
.service-pill:hover {
border-color: rgba(255,255,255,0.3);
color: rgba(255,255,255,0.9);
}
/* ── Section label ────────────────────────────────────────── */
.section-label {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
color: rgba(255,255,255,0.35);
}
.section-label::before {
content: '';
display: inline-block; width: 24px; height: 1px;
background: rgba(255,255,255,0.3); margin-right: 10px;
}
/* ── Stat ─────────────────────────────────────────────────── */
.stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }
/* ── CTA button ───────────────────────────────────────────── */
.btn-outline {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 24px; border-radius: 100px;
border: 1px solid rgba(255,255,255,0.2);
font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.8);
text-decoration: none; background: rgba(255,255,255,0.04);
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-outline:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.35);
color: #F0EEF0;
}
.btn-solid {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 24px; border-radius: 100px;
background: #F0EEF0; color: #0E0E10;
font-size: 13px; font-weight: 500; text-decoration: none;
transition: opacity 0.15s ease;
}
.btn-solid:hover { opacity: 0.88; }
/* ── Process card ─────────────────────────────────────────── */
.process-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 20px;
padding: 28px;
transition: background 0.15s ease, border-color 0.15s ease;
}
.process-card:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.12);
}
</style>
</head>
<body>
<!-- ── Background orbs ──────────────────────────────────────────────────── -->
<div style="position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none" aria-hidden="true">
<div class="orb orb-purple" style="top:-100px;left:-80px"></div>
<div class="orb orb-magenta" style="top:30%;right:-100px"></div>
<div class="orb orb-orange" style="bottom:-80px;left:40%"></div>
</div>
<!-- ── Nav ──────────────────────────────────────────────────────────────── -->
<nav class="glass-nav" aria-label="Main navigation">
<a href="#" aria-label="Skyline homepage">
<span style="font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-size:17px;color:#F0EEF0">Skyline</span>
</a>
<div class="hidden sm:flex items-center gap-1">
<a href="#works" class="nav-link active">Works</a>
<a href="#services" class="nav-link">Services</a>
<a href="#process" class="nav-link">Process</a>
<a href="#about" class="nav-link">About</a>
</div>
<a href="#contact" class="btn-solid" style="padding:8px 18px;font-size:12px">Get in touch</a>
</nav>
<main style="position:relative;z-index:1">
<!-- ── Hero ─────────────────────────────────────────────────────────────── -->
<header class="max-w-5xl mx-auto px-6 pt-36 pb-16 sm:pt-44 sm:pb-20">
<span class="section-label">Creative Agency</span>
<div class="mt-6 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-8">
<h1 style="font-size:clamp(3rem,7vw,5.5rem);font-weight:300;letter-spacing:-.03em;line-height:1;max-width:580px">
Featured<br>
<em style="font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-weight:400">Works</em>
</h1>
<div style="max-width:320px">
<p style="font-size:15px;line-height:1.7;color:rgba(255,255,255,0.5);margin-bottom:20px">
We build beautiful and functional digital experiences that help you achieve your goals.
</p>
<a href="#works" class="btn-outline">
Explore works
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 11L11 3M11 3H5M11 3v6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</div>
<!-- Stats -->
<div class="flex items-center gap-8 mt-14 flex-wrap">
<div>
<p class="tabular-nums" style="font-size:2rem;font-weight:300;letter-spacing:-.04em">48+</p>
<p style="font-size:12px;color:rgba(255,255,255,0.35);margin-top:4px">Projects delivered</p>
</div>
<div class="stat-divider" aria-hidden="true"></div>
<div>
<p class="tabular-nums" style="font-size:2rem;font-weight:300;letter-spacing:-.04em">6</p>
<p style="font-size:12px;color:rgba(255,255,255,0.35);margin-top:4px">Years in business</p>
</div>
<div class="stat-divider" aria-hidden="true"></div>
<div>
<p class="tabular-nums" style="font-size:2rem;font-weight:300;letter-spacing:-.04em">100%</p>
<p style="font-size:12px;color:rgba(255,255,255,0.35);margin-top:4px">Client satisfaction</p>
</div>
</div>
</header>
<!-- ── Portfolio grid ─────────────────────────────────────────────────── -->
<section id="works" class="max-w-5xl mx-auto px-6 pb-24" aria-labelledby="works-heading">
<h2 id="works-heading" class="sr-only">Selected works</h2>
<div class="portfolio-grid">
<!-- Card A: Oldtech — tall left -->
<article class="project-card p-card-a" style="min-height:520px" aria-label="Oldtech — Technology project">
<div class="project-card-bg" style="background:linear-gradient(145deg,#1a0a2e 0%,#2d1b4e 40%,#4a1a6b 100%)">
<!-- Abstract visual -->
<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden">
<div style="width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,0.4),transparent 70%);position:absolute;top:10%;left:10%"></div>
<div style="width:180px;height:180px;border:1px solid rgba(168,85,247,0.2);border-radius:50%;position:absolute;top:20%;left:20%"></div>
<div style="width:100px;height:100px;border:1px solid rgba(168,85,247,0.3);border-radius:50%;position:absolute;top:30%;left:30%"></div>
<div style="font-size:5rem;opacity:.08;position:absolute;top:12%;right:15%;font-weight:700;letter-spacing:-.05em;color:white">01</div>
</div>
</div>
<div class="project-card-inner">
<div class="flex items-end justify-between">
<div>
<span style="font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:6px">Technology</span>
<h3 style="font-size:1.6rem;font-weight:300;letter-spacing:-.03em">Oldtech</h3>
</div>
<div class="arrow-icon" aria-label="View project">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 11L11 3M11 3H5M11 3v6" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
</article>
<!-- Card B: Creatify — wide top-right -->
<article class="project-card p-card-b" aria-label="Creatify — Graphic Design project">
<div class="project-card-bg" style="background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%)">
<div style="position:absolute;inset:0;overflow:hidden">
<div style="position:absolute;top:-20%;right:-10%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,0.35),transparent 70%)"></div>
<div style="font-size:6rem;opacity:.06;position:absolute;bottom:5%;left:5%;font-weight:700;letter-spacing:-.05em;color:white">02</div>
</div>
</div>
<div class="project-card-inner">
<div class="flex items-end justify-between">
<div>
<span style="font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:6px">Graphic Design</span>
<h3 style="font-size:1.4rem;font-weight:300;letter-spacing:-.03em">Creatify</h3>
</div>
<div class="arrow-icon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 11L11 3M11 3H5M11 3v6" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
</article>
<!-- Card C: Marquix -->
<article class="project-card p-card-c" aria-label="Marquix — New Tech project">
<div class="project-card-bg" style="background:linear-gradient(145deg,#2e0a0a 0%,#4e1a1a 50%,#6b1a1a 100%)">
<div style="position:absolute;inset:0;overflow:hidden">
<div style="position:absolute;bottom:-20%;left:10%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(239,68,68,0.4),transparent 70%)"></div>
<div style="font-size:5rem;opacity:.07;position:absolute;top:8%;right:8%;font-weight:700;letter-spacing:-.05em;color:white">03</div>
</div>
</div>
<div class="project-card-inner">
<div class="flex items-end justify-between">
<div>
<span style="font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:6px">New Tech</span>
<h3 style="font-size:1.4rem;font-weight:300;letter-spacing:-.03em">Marquix</h3>
</div>
<div class="arrow-icon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 11L11 3M11 3H5M11 3v6" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
</article>
<!-- Card D: Strategix -->
<article class="project-card p-card-d" aria-label="Strategix — Digital Marketing project">
<div class="project-card-bg" style="background:linear-gradient(145deg,#1a1400 0%,#3d2e00 50%,#5a4000 100%)">
<div style="position:absolute;inset:0;overflow:hidden">
<div style="position:absolute;top:10%;right:5%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,0.45),transparent 70%)"></div>
<div style="font-size:4.5rem;opacity:.07;position:absolute;bottom:5%;left:5%;font-weight:700;letter-spacing:-.05em;color:white">04</div>
</div>
</div>
<div class="project-card-inner">
<div>
<span style="font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:6px">Marketing</span>
<h3 style="font-size:1.2rem;font-weight:300;letter-spacing:-.03em">Strategix</h3>
</div>
</div>
</article>
<!-- Card E: Brandora — wide bottom -->
<article class="project-card p-card-e" aria-label="Brandora — Brand Strategy project">
<div class="project-card-bg" style="background:linear-gradient(135deg,#1a0a1e 0%,#2e1040 60%,#1a1040 100%)">
<div style="position:absolute;inset:0;overflow:hidden">
<div style="position:absolute;top:-10%;left:20%;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,0.25),transparent 70%)"></div>
<div style="position:absolute;bottom:-10%;right:10%;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,0.2),transparent 70%)"></div>
<div style="font-size:7rem;opacity:.05;position:absolute;top:5%;right:5%;font-weight:700;letter-spacing:-.05em;color:white">05</div>
</div>
</div>
<div class="project-card-inner">
<div class="flex items-end justify-between">
<div>
<span style="font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:6px">Brand Strategy</span>
<h3 style="font-size:1.6rem;font-weight:300;letter-spacing:-.03em">Brandora</h3>
</div>
<div class="arrow-icon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 11L11 3M11 3H5M11 3v6" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
</article>
<!-- Card F: More -->
<article class="p-card-f flex items-center justify-center" style="border:1px solid rgba(255,255,255,0.07);border-radius:24px;min-height:240px">
<a href="#" class="btn-outline" style="flex-direction:column;gap:12px;padding:32px;text-align:center;border:none;background:transparent">
<span style="font-size:2rem;opacity:.3">→</span>
<span>View all works</span>
</a>
</article>
</div>
</section>
<!-- ── Services ──────────────────────────────────────────────────────────── -->
<section id="services" class="max-w-5xl mx-auto px-6 py-20 sm:py-28" aria-labelledby="services-heading">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-14">
<div>
<span class="section-label">What we do</span>
<h2 id="services-heading" style="margin-top:12px;font-size:clamp(2rem,4vw,2.8rem);font-weight:300;letter-spacing:-.03em;line-height:1.1">
Full-spectrum<br>
<em style="font-family:'DM Serif Display',Georgia,serif;font-style:italic">digital craft</em>
</h2>
</div>
<a href="#contact" class="btn-outline self-start sm:self-auto">Start a project →</a>
</div>
<div class="flex flex-wrap gap-3">
<span class="service-pill">⬡ UI / UX Design</span>
<span class="service-pill">◈ Brand Identity</span>
<span class="service-pill">▲ Web Development</span>
<span class="service-pill">◉ Motion Design</span>
<span class="service-pill">◻ Digital Strategy</span>
<span class="service-pill">✦ Content Creation</span>
<span class="service-pill">⊞ Design Systems</span>
<span class="service-pill">○ SEO & Performance</span>
</div>
</section>
<!-- ── Process ────────────────────────────────────────────────────────── -->
<section id="process" class="max-w-5xl mx-auto px-6 py-20 sm:py-28" aria-labelledby="process-heading">
<span class="section-label">How we work</span>
<h2 id="process-heading" style="margin-top:12px;margin-bottom:40px;font-size:clamp(2rem,4vw,2.8rem);font-weight:300;letter-spacing:-.03em;line-height:1.1">
Our process
</h2>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px">
<div class="process-card">
<span style="font-size:11px;color:rgba(255,255,255,0.25);font-weight:500;letter-spacing:.1em">01</span>
<h3 style="margin-top:14px;font-size:1rem;font-weight:400">Discovery</h3>
<p style="margin-top:8px;font-size:13px;line-height:1.65;color:rgba(255,255,255,0.4)">We learn your business, goals, and audience through deep research and listening.</p>
</div>
<div class="process-card">
<span style="font-size:11px;color:rgba(255,255,255,0.25);font-weight:500;letter-spacing:.1em">02</span>
<h3 style="margin-top:14px;font-size:1rem;font-weight:400">Strategy</h3>
<p style="margin-top:8px;font-size:13px;line-height:1.65;color:rgba(255,255,255,0.4)">We define the roadmap, visual direction, and metrics that guide every decision.</p>
</div>
<div class="process-card">
<span style="font-size:11px;color:rgba(255,255,255,0.25);font-weight:500;letter-spacing:.1em">03</span>
<h3 style="margin-top:14px;font-size:1rem;font-weight:400">Design</h3>
<p style="margin-top:8px;font-size:13px;line-height:1.65;color:rgba(255,255,255,0.4)">Pixel-perfect interfaces built on solid design systems with room to scale.</p>
</div>
<div class="process-card">
<span style="font-size:11px;color:rgba(255,255,255,0.25);font-weight:500;letter-spacing:.1em">04</span>
<h3 style="margin-top:14px;font-size:1rem;font-weight:400">Build & Launch</h3>
<p style="margin-top:8px;font-size:13px;line-height:1.65;color:rgba(255,255,255,0.4)">Fast, accessible, and production-ready. We ship — and stay to optimize.</p>
</div>
</div>
</section>
<!-- ── CTA ────────────────────────────────────────────────────────────── -->
<section id="contact" class="max-w-5xl mx-auto px-6 py-20 sm:py-28" aria-labelledby="cta-heading">
<div style="border:1px solid rgba(255,255,255,0.08);border-radius:28px;padding:60px 48px;background:rgba(255,255,255,0.02);text-align:center;position:relative;overflow:hidden">
<div aria-hidden="true" style="position:absolute;inset:0;pointer-events:none">
<div style="position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:400px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,0.2),transparent 70%);filter:blur(40px)"></div>
</div>
<span class="section-label" style="position:relative">Let's work together</span>
<h2 id="cta-heading" style="position:relative;margin-top:16px;margin-bottom:12px;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:300;letter-spacing:-.03em;line-height:1.05">
Ready to build<br>
<em style="font-family:'DM Serif Display',Georgia,serif;font-style:italic">something great?</em>
</h2>
<p style="position:relative;margin-bottom:32px;font-size:15px;color:rgba(255,255,255,0.45)">Tell us about your project. We'll get back within 24 hours.</p>
<a href="mailto:hello@skyline.studio" class="btn-solid" style="position:relative">
hello@skyline.studio
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 11L11 3M11 3H5M11 3v6" stroke="#0E0E10" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</section>
<!-- ── Footer ─────────────────────────────────────────────────────────── -->
<footer class="max-w-5xl mx-auto px-6 py-10 flex flex-col sm:flex-row items-center justify-between gap-4" style="border-top:1px solid rgba(255,255,255,0.07)" role="contentinfo">
<span style="font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-size:16px;color:rgba(255,255,255,0.5)">Skyline</span>
<p style="font-size:12px;color:rgba(255,255,255,0.25)">© 2026 Skyline Studio. All rights reserved.</p>
<nav class="flex gap-5" aria-label="Footer">
<a href="#" style="font-size:12px;color:rgba(255,255,255,0.3);text-decoration:none;transition:color .15s" onmouseover="this.style.color='rgba(255,255,255,0.7)'" onmouseout="this.style.color='rgba(255,255,255,0.3)'">Twitter</a>
<a href="#" style="font-size:12px;color:rgba(255,255,255,0.3);text-decoration:none;transition:color .15s" onmouseover="this.style.color='rgba(255,255,255,0.7)'" onmouseout="this.style.color='rgba(255,255,255,0.3)'">Dribbble</a>
<a href="#" style="font-size:12px;color:rgba(255,255,255,0.3);text-decoration:none;transition:color .15s" onmouseover="this.style.color='rgba(255,255,255,0.7)'" onmouseout="this.style.color='rgba(255,255,255,0.3)'">LinkedIn</a>
</nav>
</footer>
</main>
</body>
</html>
Dark agency portfolio template with ambient animated orbs and glassmorphic navigation. Portfolio section uses a 12-column CSS grid for asymmetric card layouts with gradient-filled backgrounds. Responsive — collapses to single column on mobile.