Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>S Y S T E M S | Gold Edition</title>

<style>

/* * CORE VARIABLES & RESET

* Concept: Deep Black Luxury & Metallic Engineering Gold

*/

:root {

--bg-color: #050505;

--surface-color: #0f0f0f;

--surface-hover: #141414;

/* Typography */

--text-primary: #f0f0f0;

--text-secondary: #999999;

--text-muted: #555555;

/* THE GOLD STANDARD */

--accent-color: #D4AF37; /* Metallic Gold */

--accent-glow: rgba(212, 175, 55, 0.3);

--accent-dim: #8a7020;

--border-color: #222222;

--border-light: #333333;

--font-main: system-ui, -apple-system, sans-serif;

--font-mono: "SF Mono", "Fira Code", Consolas, monospace;

--container-width: 1200px;

--transition-speed: 0.4s;

--nav-height: 80px;

}

*, *::before, *::after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

html {

scroll-behavior: smooth;

}

body {

background-color: var(--bg-color);

color: var(--text-primary);

font-family: var(--font-main);

line-height: 1.6;

overflow-x: hidden;

}

a {

text-decoration: none;

color: inherit;

transition: color var(--transition-speed) ease;

}

img {

max-width: 100%;

display: block;

}

/* * TYPOGRAPHY & UTILS */

h1, h2, h3, h4 {

font-weight: 400;

letter-spacing: -0.03em;

line-height: 1.1;

}

h1 {

font-size: clamp(3rem, 6vw, 5.5rem);

background: linear-gradient(to right, #ffffff, #aaaaaa);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

h2 {

font-size: clamp(2rem, 4vw, 3rem);

margin-bottom: 1rem;

}

h3 {

font-size: 1.5rem;

color: var(--text-primary);

}

.mono {

font-family: var(--font-mono);

font-size: 0.75rem;

text-transform: uppercase;

letter-spacing: 0.1em;

color: var(--accent-color);

display: block;

margin-bottom: 1rem;

}

.container {

max-width: var(--container-width);

margin: 0 auto;

padding: 0 2rem;

}

section {

padding: 8rem 0;

border-bottom: 1px solid var(--border-color);

position: relative;

}

/* * NAVIGATION (Updated) */

.navbar {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: var(--nav-height);

background-color: rgba(5, 5, 5, 0.9);

backdrop-filter: blur(15px);

z-index: 1000;

border-bottom: 1px solid rgba(212, 175, 55, 0.1); /* Subtle gold border */

display: flex;

align-items: center;

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

width: 100%;

}

.logo {

font-family: var(--font-mono);

font-weight: 700;

font-size: 1.1rem;

letter-spacing: 0.1em;

color: var(--text-primary);

}

.logo span {

color: var(--accent-color);

}

.nav-menu {

display: flex;

gap: 3rem;

align-items: center;

}

.nav-link {

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 0.05em;

color: var(--text-secondary);

font-weight: 500;

position: relative;

}

.nav-link::after {

content: '';

position: absolute;

width: 0;

height: 1px;

bottom: -5px;

left: 0;

background-color: var(--accent-color);

transition: width 0.3s;

}

.nav-link:hover {

color: var(--text-primary);

}

.nav-link:hover::after {

width: 100%;

}

.btn-gold {

background: transparent;

color: var(--accent-color);

border: 1px solid var(--accent-color);

padding: 0.8rem 1.8rem;

font-size: 0.85rem;

text-transform: uppercase;

letter-spacing: 0.1em;

transition: all 0.3s ease;

cursor: pointer;

position: relative;

overflow: hidden;

}

.btn-gold:hover {

background: var(--accent-color);

color: var(--bg-color);

box-shadow: 0 0 20px var(--accent-glow);

}

/* * MOBILE MENU (HAMBURGER) */

.hamburger {

display: none;

cursor: pointer;

z-index: 1100;

}

.hamburger rect {

fill: var(--text-primary);

transition: 0.3s;

}

.hamburger:hover rect {

fill: var(--accent-color);

}

/* * HERO SECTION WITH IMAGE */

#hero {

height: 100vh;

display: flex;

align-items: center;

position: relative;

overflow: hidden;

border-bottom: none;

}

/* Background Image with Gold Tint Overlay */

.hero-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop');

background-size: cover;

background-position: center;

opacity: 0.4;

filter: grayscale(100%) contrast(120%);

z-index: 0;

transition: transform 10s ease;

}

#hero:hover .hero-bg {

transform: scale(1.05);

}

.hero-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(180deg, rgba(5,5,5,0.7) 0%, rgba(5,5,5,0.9) 80%, rgba(5,5,5,1) 100%);

z-index: 1;

}

.hero-content {

position: relative;

z-index: 2;

max-width: 900px;

}

.hero-buttons {

margin-top: 3rem;

display: flex;

gap: 1.5rem;

}

/* * SYSTEMS (PROJECTS) WITH IMAGES */

.systems-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));

gap: 2rem;

margin-top: 3rem;

}

.system-card {

background-color: var(--surface-color);

position: relative;

height: 500px;

overflow: hidden;

group: cursor;

border: 1px solid var(--border-color);

}

.system-img {

width: 100%;

height: 100%;

object-fit: cover;

opacity: 0.6;

transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s;

filter: grayscale(100%);

}

.system-card:hover .system-img {

transform: scale(1.1);

opacity: 0.2; /* Fade out image to show details */

filter: grayscale(0%);

}

.system-info {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

padding: 2.5rem;

background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);

transform: translateY(20px);

transition: transform 0.4s ease;

}

.system-card:hover .system-info {

transform: translateY(0);

}

.system-title {

font-size: 1.8rem;

color: var(--text-primary);

margin-bottom: 0.5rem;

position: relative;

display: inline-block;

}

.system-desc {

color: var(--text-secondary);

margin-bottom: 1.5rem;

opacity: 0;

transform: translateY(10px);

transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;

}

.system-card:hover .system-desc {

opacity: 1;

transform: translateY(0);

}

.system-arrow {

color: var(--accent-color);

font-family: var(--font-mono);

font-size: 0.9rem;

opacity: 0;

transition: opacity 0.4s 0.2s;

}

.system-card:hover .system-arrow {

opacity: 1;

}

/* * STATISTICS (GOLD ACCENT) */

.stats-container {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 2rem;

margin-top: 4rem;

border-top: 1px solid var(--border-color);

padding-top: 3rem;

}

.stat-item h3 {

font-size: 3.5rem;

color: var(--accent-color);

line-height: 1;

margin-bottom: 0.5rem;

}

.stat-item p {

font-family: var(--font-mono);

color: var(--text-secondary);

font-size: 0.85rem;

}

/* * SERVICES - MINIMAL */

.services-list {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 1px;

background: var(--border-color); /* Grid border effect */

border: 1px solid var(--border-color);

}

.service-item {

background: var(--bg-color);

padding: 3rem;

transition: background 0.3s;

}

.service-item:hover {

background: var(--surface-color);

}

.service-icon {

color: var(--accent-color);

margin-bottom: 1.5rem;

width: 40px;

height: 40px;

}

/* * CONTACT FORM */

.contact-wrapper {

display: grid;

grid-template-columns: 1fr 1.5fr;

gap: 5rem;

}

.form-group {

margin-bottom: 2rem;

position: relative;

}

.form-control {

width: 100%;

background: transparent;

border: none;

border-bottom: 1px solid var(--border-color);

padding: 1rem 0;

color: var(--text-primary);

font-family: var(--font-main);

font-size: 1.1rem;

transition: border-color 0.3s;

border-radius: 0;

}

.form-control:focus {

outline: none;

border-color: var(--accent-color);

}

.form-label {

position: absolute;

top: 1rem;

left: 0;

color: var(--text-muted);

pointer-events: none;

transition: 0.3s;

}

.form-control:focus + .form-label,

.form-control:not(:placeholder-shown) + .form-label {

top: -10px;

font-size: 0.8rem;

color: var(--accent-color);

}

/* * FOOTER */

footer {

border-top: 1px solid var(--border-color);

padding: 4rem 0;

text-align: center;

background: var(--surface-color);

}

.footer-logo {

font-family: var(--font-mono);

color: var(--accent-color);

margin-bottom: 2rem;

display: inline-block;

font-size: 1.5rem;

}

/* * RESPONSIVE & MOBILE MENU */

@media (max-width: 900px) {

h1 { font-size: 3.5rem; }

.contact-wrapper { grid-template-columns: 1fr; }

.stats-container { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 768px) {

.navbar { padding: 0 1.5rem; }

.nav-menu {

position: fixed;

top: 0;

right: -100%;

width: 85%;

height: 100vh;

background-color: #000000;

flex-direction: column;

justify-content: center;

align-items: flex-start;

padding: 4rem;

transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1);

border-left: 1px solid var(--accent-dim);

z-index: 1050;

box-shadow: -10px 0 30px rgba(0,0,0,0.8);

}

.nav-menu.active {

right: 0;

}

.nav-link {

font-size: 1.5rem;

margin-bottom: 2rem;

color: var(--text-primary);

}

.nav-link:hover {

color: var(--accent-color);

}

.hamburger { display: block; }

.close-menu {

position: absolute;

top: 2rem;

right: 2rem;

color: var(--text-secondary);

font-size: 2rem;

cursor: pointer;

display: block; /* Visible inside mobile menu */

}

.hero-buttons { flex-direction: column; }

.btn-gold { width: 100%; text-align: center; }

}

/* Animations */

.fade-in-up {

opacity: 0;

transform: translateY(30px);

transition: opacity 0.8s, transform 0.8s;

}

.fade-in-up.visible {

opacity: 1;

transform: translateY(0);

}

</style>

</head>

<body>

<a href="#" class="logo">SYSTEMS<span>_ENG</span></a>

</svg>

</div>

<a href="#hero" class="nav-link">Studio</a>

<a href="#projects" class="nav-link">Systems</a>

<a href="#services" class="nav-link">Capabilities</a>

<a href="#journal" class="nav-link">Journal</a>

<a href="#contact" class="btn-gold">Initiate Project</a>

</div>

</nav>

<span class="mono">Since 2014 — Architectural Precision</span>

<h1>Engineering<br>The Future Infrastructure</h1>

We build high-performance, scalable software systems for the world's most demanding industries.

Where reliability meets golden standards.

</p>

<a href="#projects" class="btn-gold">View Deployments</a>

<a href="#contact" style="padding: 0.8rem 1.8rem; color: #fff; border: 1px solid #333; text-transform:uppercase; font-size:0.85rem; letter-spacing:0.1em;">Our Philosophy</a>

</div>

</section>

<span class="mono">// Selected Works</span>

<h2>Deployed Architectures</h2>

<span class="mono" style="margin-bottom:0.5rem; color:var(--accent-color);">Fintech Core</span>

<h3 class="system-title">Ledger Node V4</h3>

<p class="system-desc">High-frequency trading engine optimized for microsecond latency using Rust.</p>

<span class="system-arrow">Explore Case Study →</span>

</div>

<h3 class="system-title">Neural Analytics</h3>

<p class="system-desc">Real-time processing pipeline visualizing 40TB of daily telemetry data.</p>

<span class="system-arrow">Explore Case Study →</span>

</div>

<span class="mono" style="margin-bottom:0.5rem; color:var(--accent-color);">Infrastructure</span>

<h3 class="system-title">Grid Control</h3>

<p class="system-desc">Distributed IoT management system for renewable energy storage arrays.</p>

<span class="system-arrow">Explore Case Study →</span>

</div>

</section>

<span class="mono">// The Metric</span>

<h2>Performance by Design</h2>

We don't chase trends. We adhere to computer science fundamentals to create software that withstands the test of time and scale.

</p>

<p>SYSTEM UPTIME</p>

</div>

<p>APIS DEPLOYED</p>

</div>

<p>TRANSACTIONS PROCESSED</p>

</div>

<p>TECHNICAL DEBT</p>

</div>

</section>

<span class="mono">// Engineering Capabilities</span>

<h2 style="margin-bottom: 3rem;">Technical Expertise</h2>

</svg>

<h3>Backend Systems</h3>

<p style="color:var(--text-secondary); margin-top:1rem;">Microservices, monolithic architecture, and API design focused on scalability.</p>

</div>

</svg>

<h3>Cloud Infrastructure</h3>

<p style="color:var(--text-secondary); margin-top:1rem;">AWS/Azure architecture, Kubernetes orchestration, and automated CI/CD pipelines.</p>

</div>

</svg>

<h3>System Security</h3>

<p style="color:var(--text-secondary); margin-top:1rem;">Penetration testing, encrypted data flow, and zero-trust architecture implementation.</p>

</div>

</section>

<span class="mono">// Start Transmission</span>

<h2>Ready to Scale?</h2>

We partner with ambitious companies to solve hard engineering problems.

Describe your system requirements below.

</p>

<h4 style="color:var(--accent-color); margin-bottom:0.5rem;">Secure Office</h4>

<p style="color:var(--text-secondary); font-size:0.9rem;">1010 Silicon Ave, Suite 400<br>San Francisco, CA 94000</p>

</div>

</div>

<label class="form-label">Corporate Email</label>

</div>

<label class="form-label">Project Type</label>

</div>

<button type="submit" class="btn-gold" style="width: 100%; margin-top: 1rem;">Initialize Request</button>

</form>

</div>

</section>

<a href="#" class="footer-logo">SYSTEMS</a>

<a href="#" style="color: var(--text-secondary); font-size: 0.8rem;">LINKEDIN</a>

<a href="#" style="color: var(--text-secondary); font-size: 0.8rem;">GITHUB</a>

<a href="#" style="color: var(--text-secondary); font-size: 0.8rem;">TWITTER</a>

</div>

</footer>

// * INTERACTION LOGIC

document.addEventListener('DOMContentLoaded', () => {

// Intersection Observer for Fade In

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('visible');

}

});

}, { threshold: 0.1 });

document.querySelectorAll('.fade-in-up').forEach(el => observer.observe(el));

// Mobile Menu Logic

const hamburger = document.getElementById('hamburgerBtn');

const navMenu = document.getElementById('navMenu');

const closeBtn = document.getElementById('closeMenuBtn');

const navLinks = document.querySelectorAll('.nav-link, .btn-gold');

function toggleMenu() {

navMenu.classList.toggle('active');

if (window.innerWidth <= 768) {

closeBtn.style.display = navMenu.classList.contains('active') ? 'block' : 'none';

}

hamburger.addEventListener('click', toggleMenu);

closeBtn.addEventListener('click', toggleMenu);

// Close menu when clicking a link

navLinks.forEach(link => {

link.addEventListener('click', () => {

if (navMenu.classList.contains('active')) {

toggleMenu();

}

});

// Smooth Scroll for anchor links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

// Form Submission Effect

const form = document.getElementById('contactForm');

form.addEventListener('submit', (e) => {

e.preventDefault();

const btn = form.querySelector('button');

const originalText = btn.textContent;

btn.textContent = "Processing...";

btn.style.opacity = "0.7";

setTimeout(() => {

btn.textContent = "Request Sent Successfully";

btn.style.backgroundColor = "#4ade80"; // Success Green

btn.style.color = "#000";

btn.style.borderColor = "#4ade80";

form.reset();

setTimeout(() => {

btn.textContent = originalText;

btn.style.backgroundColor = "transparent";

btn.style.color = "var(--accent-color)";

btn.style.borderColor = "var(--accent-color)";

btn.style.opacity = "1";

}, 3000);

}, 1500);

});

</script>

</body>

</html>

Metehan

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS