new design finished
This commit is contained in:
Ovidiu U
1028
brutalist-01/brutalist-01.html
Normal file
1028
brutalist-01/brutalist-01.html
Normal file
File diff suppressed because it is too large
Load Diff
64
brutalist-01/brutalist-01.md
Normal file
64
brutalist-01/brutalist-01.md
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
# Summary
|
||||||
|
|
||||||
|
A brutalist editorial design system for high-fashion, streetwear, or luxury brands. Featuring a raw, industrial aesthetic with massive typography, high-contrast photography, and utilitarian components. Key elements include a noise-grain texture overlay, a monochromatic palette with burnt orange and neon green accents, and asymmetrical layout grids. The style uses 'Clash Grotesk' for aggressive impact and 'General Sans' for technical clarity. Ideal for product launches, lookbooks, and fashion portfolios looking for a 'Raw Campaign' or 'Modern Brutalist' feel with scroll-triggered visual impact.
|
||||||
|
# Style
|
||||||
|
|
||||||
|
The style is defined by a 'Raw' aesthetic: a neutral beige background (#E3E2DE) paired with deep brownish-black (#1B0E0D) and burnt red (#C72A09) accents. A constant noise texture (0.08 opacity) is applied over the entire interface. Typography features heavy use of 'Clash Grotesk' for massive, tight-tracked headings and 'General Sans' or Mono fonts for technical metadata. Animations are swift and purposeful, including image scaling and neon-green hover states (#31EF07).
|
||||||
|
|
||||||
|
## Spec
|
||||||
|
|
||||||
|
Create a design with a 'Modern Brutalist' aesthetic. Use a background color of #E3E2DE and primary text in #1B0E0D. Apply a persistent noise texture overlay (SVG fractalNoise at 0.08 opacity, mix-blend-mode: multiply). Typography: Use 'Clash Grotesk' for display headings with font-weight: 700, letter-spacing: -0.04em, and leading: 0.85. For body and technical info, use 'General Sans' or a monospace font for price/data points. Accent colors: #C72A09 (Primary accent/Action) and #31EF07 (Neon Green for micro-interactions/hovers). Links should feature a custom hover animation using a 2px neon green underline that scales from 0 to 1 with cubic-bezier(0.165, 0.84, 0.44, 1). Images must be high-contrast, often grayscale, with a hover scale effect of 1.05.
|
||||||
|
|
||||||
|
# Layout & Structure
|
||||||
|
|
||||||
|
The layout uses a 12-column asymmetric grid. It features massive, screen-filling typography dividers and a mix of full-width blocks and offset product columns to create a sense of 'ordered chaos'.
|
||||||
|
|
||||||
|
## Navigation
|
||||||
|
|
||||||
|
Sticky top navigation using mix-blend-mode: difference to ensure legibility against any background. Left-aligned branding in uppercase bold (24px), centered text links (Shop, Editorial) with neon-green hover-underline animations, and right-aligned icons (Search, Cart) in 24px size. Text color should be #E3E2DE to work with the blend mode.
|
||||||
|
|
||||||
|
## Hero Section
|
||||||
|
|
||||||
|
Full-screen (100vh) hero section with a dark background (#1B0E0D). Background image should be grayscale and high-contrast at 60% opacity. Bottom-aligned content containing a thin #E3E2DE border, technical metadata in monospace tracking-widest, and a large burnt-orange (#C72A09) CTA button. The main headline must be massive (16vw on mobile, 13.5vw on desktop) using Clash Grotesk, with parts of the text indented (e.g., 20vw) to create negative space.
|
||||||
|
|
||||||
|
## Manifesto Section
|
||||||
|
|
||||||
|
A 12-column grid section. Columns 1-4 contain a small uppercase label (Manifesto) above a top border. Columns 5-12 contain large-scale editorial text (32px-48px) in uppercase font-medium with a significant paragraph indent (approx 3rem). Highlight key phrases in deep brown (#61220F).
|
||||||
|
|
||||||
|
## Category Divider
|
||||||
|
|
||||||
|
A full-width section bounded by top and bottom borders (#D9D9D9). Contains a single, massive heading 'OUTERWEAR' at 12vw size in #61220F. The text should have tight tracking and minimal vertical padding to create a 'ribbon' effect.
|
||||||
|
|
||||||
|
## Product Grid
|
||||||
|
|
||||||
|
An asymmetrical 12-column grid. Items should vary in width and vertical offset. Example: Product A (7 columns, aspect 4:5), Product B (5 columns, aspect 3:4 with a 128px top margin offset). Product details below images include a bold uppercase title and a monospace price tag separated by a border-bottom that changes to burnt orange (#C72A09) on hover. Include a 'Quick View' badge in neon green (#31EF07) that appears on hover.
|
||||||
|
|
||||||
|
## Footer
|
||||||
|
|
||||||
|
Multi-column layout (4 columns) on beige background. Section headers in bold uppercase (20px). Newsletter signup uses a dark block (#1B0E0D) with an integrated underline-style input and neon-green 'Send' button. The very bottom features a massive 'ghost' title of the brand (8vw) in light gray (#D9D9D9) for brand reinforcement.
|
||||||
|
|
||||||
|
# Special Components
|
||||||
|
|
||||||
|
## Neon Interaction Badge
|
||||||
|
|
||||||
|
A sharp-edged, high-visibility utility badge for product status or quick actions.
|
||||||
|
|
||||||
|
Rectangle component with zero border-radius. Background color: #31EF07. Text: 10px bold uppercase #1B0E0D. Positioned absolutely in the top-right of containers, appearing only on hover with a 300ms ease-in-out transition.
|
||||||
|
|
||||||
|
## Texture Overlay
|
||||||
|
|
||||||
|
Full-screen SVG noise grain that unifies the brutalist aesthetic.
|
||||||
|
|
||||||
|
Fixed 100vw/100vh div with pointer-events: none. Apply an SVG filter: feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'. Set opacity to 0.08 and mix-blend-mode to multiply. Ensure it sits at z-index: 50.
|
||||||
|
|
||||||
|
## Split-Indented Headline
|
||||||
|
|
||||||
|
A typography style for hero headers that utilizes large-scale indentation for visual tension.
|
||||||
|
|
||||||
|
Font: Clash Grotesk, 13.5vw. Line 1: Left-aligned. Line 2: Indented by 20vw. Color: Mix of burnt-red (#C72A09) and beige (#E3E2DE). Line-height: 0.75. Tracking: -0.05em.
|
||||||
|
|
||||||
|
## Preview
|
||||||
|
https://p.superdesign.dev/draft/10ecb2c3-19d7-405b-926e-3fa74e142661
|
||||||
|
|
||||||
|
## Preview source code
|
||||||
|
./brutalist-01.html
|
||||||
781
brutalist-01/index.html
Normal file
781
brutalist-01/index.html
Normal file
@@ -0,0 +1,781 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Ovidiu Ungureanu — Web Developer</title>
|
||||||
|
<link rel="preconnect" href="https://api.fontshare.com">
|
||||||
|
<link href="https://api.fontshare.com/v2/css?f[]=clash-grotesk@700,600,500,400&f[]=general-sans@700,600,500,400&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #E3E2DE;
|
||||||
|
--dark: #1B0E0D;
|
||||||
|
--mid: #61220F;
|
||||||
|
--accent: #C72A09;
|
||||||
|
--neon: #31EF07;
|
||||||
|
--border: #D9D9D9;
|
||||||
|
--clash: 'Clash Grotesk', sans-serif;
|
||||||
|
--general: 'General Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--general);
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--dark);
|
||||||
|
overflow-x: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
::selection { background: var(--accent); color: var(--bg); }
|
||||||
|
|
||||||
|
/* ── NOISE ──────────────────────────────────────── */
|
||||||
|
.noise {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 50;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
opacity: 0.08;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── NAV ────────────────────────────────────────── */
|
||||||
|
.nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
z-index: 40;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem 2.5rem;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
color: var(--bg);
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--scrolled {
|
||||||
|
mix-blend-mode: normal;
|
||||||
|
background: rgba(27,14,13,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 2.5rem;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px; left: 0;
|
||||||
|
width: 100%; height: 2px;
|
||||||
|
background: var(--neon);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: right;
|
||||||
|
transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
.nav-link:hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-cta {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── HERO ───────────────────────────────────────── */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
height: 70vh;
|
||||||
|
max-height: 650px;
|
||||||
|
min-height: 520px;
|
||||||
|
background-color: var(--dark);
|
||||||
|
background-image: radial-gradient(circle, rgba(227,226,222,0.055) 1px, transparent 1px);
|
||||||
|
background-size: 48px 48px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse at 50% 100%, transparent 40%, rgba(27,14,13,0.55) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 0 2.5rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(227,226,222,0.25);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: rgba(227,226,222,0.5);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta-btn {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg);
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
.hero-cta-btn:hover {
|
||||||
|
background: var(--neon);
|
||||||
|
color: var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-headline {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 13.5vw;
|
||||||
|
line-height: 0.75;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-top: 2.25rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-headline .line1 {
|
||||||
|
display: block;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.hero-headline .line2 {
|
||||||
|
display: block;
|
||||||
|
color: var(--bg);
|
||||||
|
margin-left: 20vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── MANIFESTO / ABOUT ──────────────────────────── */
|
||||||
|
.manifesto {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 6rem 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifesto-label-col {
|
||||||
|
grid-column: span 4;
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--mid);
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifesto-text-col {
|
||||||
|
grid-column: span 8;
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifesto-text {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: clamp(1.75rem, 3.2vw, 3rem);
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.15;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-indent: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifesto-text .hl { color: var(--mid); }
|
||||||
|
|
||||||
|
/* ── CATEGORY DIVIDER ───────────────────────────── */
|
||||||
|
.category-divider {
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding: 0 2.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-divider h2 {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 12vw;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
line-height: 0.95;
|
||||||
|
color: var(--mid);
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── SERVICES ───────────────────────────────────── */
|
||||||
|
.services {
|
||||||
|
border-top: 1px solid rgba(27,14,13,0.15);
|
||||||
|
padding: 0 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 2rem;
|
||||||
|
border-bottom: 1px solid rgba(27,14,13,0.15);
|
||||||
|
padding: 2.5rem 0;
|
||||||
|
margin: 0 -2.5rem;
|
||||||
|
padding-left: 2.5rem;
|
||||||
|
padding-right: 2.5rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: default;
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .service-row:hover { background: var(--dark); } */
|
||||||
|
|
||||||
|
.service-num {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent);
|
||||||
|
padding-top: 0.8rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3.5rem;
|
||||||
|
}
|
||||||
|
/* .service-row:hover .service-num { color: var(--neon); } */
|
||||||
|
|
||||||
|
.service-body { flex: 1; min-width: 0; }
|
||||||
|
|
||||||
|
.service-title {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: clamp(1.75rem, 3.2vw, 3rem);
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.15;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-indent: 3rem;
|
||||||
|
color: var(--dark);
|
||||||
|
margin-bottom: 1.1rem;
|
||||||
|
}
|
||||||
|
/* .service-row:hover .service-title { color: var(--bg); } */
|
||||||
|
|
||||||
|
.service-row--alt .service-title > span {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: var(--bg);
|
||||||
|
-webkit-box-decoration-break: clone;
|
||||||
|
box-decoration-break: clone;
|
||||||
|
padding: 0.04em 0.15em;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-tags {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-tag {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.07em;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border: 1px solid rgba(27,14,13,0.25);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: var(--mid);
|
||||||
|
}
|
||||||
|
/* .service-row:hover .service-tag {
|
||||||
|
border-color: rgba(227,226,222,0.25);
|
||||||
|
color: rgba(227,226,222,0.5);
|
||||||
|
} */
|
||||||
|
|
||||||
|
.service-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 2.25rem;
|
||||||
|
right: 2.5rem;
|
||||||
|
background: var(--neon);
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 6px 12px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
/* .service-row:hover .service-badge { opacity: 1; } */
|
||||||
|
|
||||||
|
/* ── CONTACT ────────────────────────────────────── */
|
||||||
|
.contact-section {
|
||||||
|
background: var(--dark);
|
||||||
|
padding: 7rem 2.5rem 6rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-section::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image: radial-gradient(circle, rgba(227,226,222,0.04) 1px, transparent 1px);
|
||||||
|
background-size: 48px 48px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-inner { position: relative; z-index: 1; }
|
||||||
|
|
||||||
|
.contact-section .section-label {
|
||||||
|
color: rgba(227,226,222,0.35);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-headline {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: clamp(3rem, 6vw, 6rem);
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--bg);
|
||||||
|
line-height: 0.88;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
.contact-headline .accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.contact-email {
|
||||||
|
display: block;
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: clamp(1.5rem, 3.5vw, 3.75rem);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--bg);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
width: fit-content;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.contact-email::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px; left: 0;
|
||||||
|
width: 100%; height: 2px;
|
||||||
|
background: var(--neon);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: right;
|
||||||
|
transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
.contact-email:hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-meta {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: rgba(227,226,222,0.35);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
.contact-meta .dot { opacity: 0.4; }
|
||||||
|
|
||||||
|
/* ── FOOTER ─────────────────────────────────────── */
|
||||||
|
.footer {
|
||||||
|
background: var(--bg);
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
padding: 4.5rem 2.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 3rem;
|
||||||
|
margin-bottom: 4.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-heading {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
.footer-links a {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--mid);
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.footer-links a:hover { color: var(--accent); }
|
||||||
|
|
||||||
|
.footer-address {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--mid);
|
||||||
|
line-height: 1.8;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.footer-address a { font-weight: 700; }
|
||||||
|
.footer-address a:hover { color: var(--accent); }
|
||||||
|
|
||||||
|
.footer-cta {
|
||||||
|
background: var(--dark);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
.footer-cta label {
|
||||||
|
display: block;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: var(--bg);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.footer-input-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid rgba(227,226,222,0.4);
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.footer-input-row input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--bg);
|
||||||
|
text-transform: uppercase;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
.footer-input-row input::placeholder { color: rgba(227,226,222,0.25); }
|
||||||
|
.footer-input-row button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--neon);
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.footer-input-row button:hover { color: var(--bg); }
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-ghost {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 8vw;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--border);
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-legal {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--mid);
|
||||||
|
padding-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── RESPONSIVE ─────────────────────────────────── */
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.manifesto { grid-template-columns: 1fr; gap: 1rem; }
|
||||||
|
.manifesto-label-col,
|
||||||
|
.manifesto-text-col { grid-column: span 1; }
|
||||||
|
.footer-grid { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav { padding: 1.25rem 1.5rem; }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
height: auto;
|
||||||
|
min-height: 0;
|
||||||
|
padding-top: 5rem;
|
||||||
|
}
|
||||||
|
.hero-content { padding: 0 1.5rem 2.5rem; }
|
||||||
|
.hero-meta-row {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.hero-headline { font-size: 12vw; }
|
||||||
|
.hero-headline .line2 { margin-left: 5vw; }
|
||||||
|
|
||||||
|
.manifesto { padding: 4rem 1.5rem; }
|
||||||
|
.manifesto-text { font-size: 1.75rem; text-indent: 1.5rem; }
|
||||||
|
|
||||||
|
.category-divider { padding: 0 1.5rem; }
|
||||||
|
|
||||||
|
.services { padding: 0 1.5rem; }
|
||||||
|
.service-row { margin: 0 -1.5rem; padding: 2rem 1.5rem; }
|
||||||
|
.service-badge { right: 1.5rem; }
|
||||||
|
.service-title { font-size: clamp(1.5rem, 5vw, 2.5rem); text-indent: 1.5rem; }
|
||||||
|
|
||||||
|
.contact-section { padding: 4rem 1.5rem; }
|
||||||
|
|
||||||
|
.footer { padding: 3rem 1.5rem 0; }
|
||||||
|
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
|
.footer-ghost { font-size: 16vw; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Noise Texture Overlay -->
|
||||||
|
<div class="noise" aria-hidden="true">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
||||||
|
<filter id="n">
|
||||||
|
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/>
|
||||||
|
</filter>
|
||||||
|
<rect width="100%" height="100%" filter="url(#n)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="#" class="nav-logo">U. ovidiu</a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="#about" class="nav-link">About</a>
|
||||||
|
<a href="#services" class="nav-link">Services</a>
|
||||||
|
<a href="portfolio.html" class="nav-link">Work</a>
|
||||||
|
<a href="#contact" class="nav-link">Contact</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-divider"></div>
|
||||||
|
<div class="hero-meta-row">
|
||||||
|
<div class="hero-meta">
|
||||||
|
<span>Web Developer — Peterborough, UK</span>
|
||||||
|
<span>I build web applications that work.</span>
|
||||||
|
<span>Available for freelance</span>
|
||||||
|
</div>
|
||||||
|
<a href="#contact" class="hero-cta-btn">Let's Talk →</a>
|
||||||
|
</div>
|
||||||
|
<h1 class="hero-headline">
|
||||||
|
<span class="line1">CleanCode</span>
|
||||||
|
<span class="line2">Studio</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- About / Manifesto -->
|
||||||
|
<section class="manifesto" id="about">
|
||||||
|
<div class="manifesto-label-col">
|
||||||
|
<span class="section-label">001 — About</span>
|
||||||
|
</div>
|
||||||
|
<div class="manifesto-text-col">
|
||||||
|
<p class="manifesto-text">
|
||||||
|
|
||||||
|
I build websites and online tools for small businesses
|
||||||
|
<span class="hl">— booking systems, customer dashboards</span>.
|
||||||
|
|
||||||
|
<br/>Fast, affordable, and built to last.
|
||||||
|
Built for businesses that need something real.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Category Divider -->
|
||||||
|
<div class="category-divider">
|
||||||
|
<h2>Services</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Services List -->
|
||||||
|
<section class="services" id="services">
|
||||||
|
|
||||||
|
<div class="service-row">
|
||||||
|
<span class="service-num">(01)</span>
|
||||||
|
<div class="service-body">
|
||||||
|
<h3 class="service-title">Website Design<br>& Development</h3>
|
||||||
|
<div class="service-tags">
|
||||||
|
<span class="service-tag">Design</span>
|
||||||
|
<span class="service-tag">Development</span>
|
||||||
|
<span class="service-tag">Responsive</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="service-badge">Enquire →</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-row service-row--alt">
|
||||||
|
<span class="service-num">(02)</span>
|
||||||
|
<div class="service-body">
|
||||||
|
<h3 class="service-title"><span>Custom Tools<br>& Systems</span></h3>
|
||||||
|
<div class="service-tags">
|
||||||
|
<span class="service-tag">PHP</span>
|
||||||
|
<span class="service-tag">MySQL</span>
|
||||||
|
<span class="service-tag">Custom Builds</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="service-badge">Enquire →</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-row">
|
||||||
|
<span class="service-num">(03)</span>
|
||||||
|
<div class="service-body">
|
||||||
|
<h3 class="service-title">Booking &<br>Scheduling</h3>
|
||||||
|
<div class="service-tags">
|
||||||
|
<span class="service-tag">Bookings</span>
|
||||||
|
<span class="service-tag">Automation</span>
|
||||||
|
<span class="service-tag">Small Business</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="service-badge">Enquire →</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-row service-row--alt">
|
||||||
|
<span class="service-num">(04)</span>
|
||||||
|
<div class="service-body">
|
||||||
|
<h3 class="service-title"><span>Ongoing Support<br>& Updates</span></h3>
|
||||||
|
<div class="service-tags">
|
||||||
|
<span class="service-tag">Maintenance</span>
|
||||||
|
<span class="service-tag">Performance</span>
|
||||||
|
<span class="service-tag">Support</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="service-badge">Enquire →</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<section class="contact-section" id="contact">
|
||||||
|
<div class="contact-inner">
|
||||||
|
<span class="section-label">004 — Contact</span>
|
||||||
|
<h2 class="contact-headline">
|
||||||
|
Got a project<br>
|
||||||
|
<span class="accent">in mind?</span>
|
||||||
|
</h2>
|
||||||
|
<a href="mailto:hello@uovidiu.com" class="contact-email">hello@uovidiu.com</a>
|
||||||
|
<div class="contact-meta">
|
||||||
|
<span>Peterborough, UK</span>
|
||||||
|
<span class="dot">·</span>
|
||||||
|
<span>Available for freelance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-grid">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Studio</h4>
|
||||||
|
<address class="footer-address">
|
||||||
|
Peterborough, UK<br>
|
||||||
|
<a href="mailto:hello@uovidiu.com">hello@uovidiu.com</a>
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Navigate</h4>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#services">Services</a></li>
|
||||||
|
<li><a href="/portfolio">Portfolio</a></li>
|
||||||
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<span class="footer-ghost">U. ovidiu</span>
|
||||||
|
<span class="footer-legal">© 2026 Ovidiu Ungureanu</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nav = document.querySelector('.nav');
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
nav.classList.toggle('nav--scrolled', window.scrollY > 50);
|
||||||
|
}, { passive: true });
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
883
brutalist-01/portfolio-project.html
Normal file
883
brutalist-01/portfolio-project.html
Normal file
@@ -0,0 +1,883 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Thompson Service Centre — Ovidiu Ungureanu</title>
|
||||||
|
<link rel="preconnect" href="https://api.fontshare.com">
|
||||||
|
<link href="https://api.fontshare.com/v2/css?f[]=clash-grotesk@700,600,500,400&f[]=general-sans@700,600,500,400&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #E3E2DE;
|
||||||
|
--dark: #1B0E0D;
|
||||||
|
--mid: #61220F;
|
||||||
|
--accent: #C72A09;
|
||||||
|
--neon: #31EF07;
|
||||||
|
--border: #D9D9D9;
|
||||||
|
--clash: 'Clash Grotesk', sans-serif;
|
||||||
|
--general: 'General Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--general);
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--dark);
|
||||||
|
overflow-x: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
::selection { background: var(--accent); color: var(--bg); }
|
||||||
|
|
||||||
|
/* ── NOISE ──────────────────────────────────────── */
|
||||||
|
.noise {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 50;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
opacity: 0.08;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── NAV ────────────────────────────────────────── */
|
||||||
|
.nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
z-index: 40;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem 2.5rem;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
color: var(--bg);
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--scrolled {
|
||||||
|
mix-blend-mode: normal;
|
||||||
|
background: rgba(27,14,13,0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-back {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-back::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px; left: 0;
|
||||||
|
width: 100%; height: 2px;
|
||||||
|
background: var(--neon);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: right;
|
||||||
|
transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
.nav-back:hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 2.5rem;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px; left: 0;
|
||||||
|
width: 100%; height: 2px;
|
||||||
|
background: var(--neon);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: right;
|
||||||
|
transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
.nav-link:hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-cta {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── SECTION LABEL ───────────────────────────────── */
|
||||||
|
.section-label {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--mid);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── HERO ───────────────────────────────────────── */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
max-height: 760px;
|
||||||
|
min-height: 600px;
|
||||||
|
background-color: var(--dark);
|
||||||
|
background-image: radial-gradient(circle, rgba(227,226,222,0.055) 1px, transparent 1px);
|
||||||
|
background-size: 48px 48px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse at 50% 100%, transparent 40%, rgba(27,14,13,0.55) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 0 2.5rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(227,226,222,0.25);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: rgba(227,226,222,0.5);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta-btn {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg);
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
.hero-cta-btn:hover {
|
||||||
|
background: var(--neon);
|
||||||
|
color: var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-headline {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 9vw;
|
||||||
|
line-height: 0.82;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-top: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-headline .line1 {
|
||||||
|
display: block;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.hero-headline .line2 {
|
||||||
|
display: block;
|
||||||
|
color: var(--bg);
|
||||||
|
margin-left: 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── META BAR ────────────────────────────────────── */
|
||||||
|
.meta-bar {
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
border-bottom: 1px solid var(--dark);
|
||||||
|
padding: 0 2.5rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-col {
|
||||||
|
padding: 2rem 0;
|
||||||
|
border-right: 1px solid rgba(27,14,13,0.15);
|
||||||
|
}
|
||||||
|
.meta-col:last-child { border-right: none; }
|
||||||
|
.meta-col:not(:first-child) { padding-left: 2rem; }
|
||||||
|
|
||||||
|
.meta-col-label {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: var(--mid);
|
||||||
|
opacity: 0.65;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-col-value {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--dark);
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── CS OVERVIEW ─────────────────────────────────── */
|
||||||
|
.cs-overview {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 6rem 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cs-overview-label {
|
||||||
|
grid-column: span 4;
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cs-overview-body {
|
||||||
|
grid-column: span 8;
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cs-overview-text {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: clamp(1rem, 1.4vw, 1.25rem);
|
||||||
|
color: var(--mid);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── CATEGORY DIVIDER ───────────────────────────── */
|
||||||
|
.category-divider {
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding: 0 2.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-divider h2 {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 12vw;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
line-height: 0.95;
|
||||||
|
color: var(--mid);
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── SCREENSHOTS ─────────────────────────────────── */
|
||||||
|
.screenshots-section {
|
||||||
|
padding: 5rem 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screenshots-label {
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Browser chrome frame */
|
||||||
|
.browser-frame {
|
||||||
|
background: var(--dark);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-dots {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.browser-dot--red { background: var(--accent); }
|
||||||
|
.browser-dot--beige { background: var(--bg); }
|
||||||
|
.browser-dot--green { background: var(--neon); }
|
||||||
|
|
||||||
|
.browser-url {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(227,226,222,0.4);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-frame img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-scroll-wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-scroll-wrap::after {
|
||||||
|
content: 'SCROLL ↓';
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
height: 80px;
|
||||||
|
background: linear-gradient(to bottom, rgba(27,14,13,0.9), transparent);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding-top: 1rem;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
letter-spacing: 0.25em;
|
||||||
|
text-shadow: 0 0 8px var(--neon);
|
||||||
|
color: var(--neon);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-scroll {
|
||||||
|
max-height: 560px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--accent) var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Full-width hero screenshot */
|
||||||
|
.screenshot-hero {
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2-col screenshot grid */
|
||||||
|
.screenshot-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screenshot-card-label {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--mid);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screenshot-card-desc {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--mid);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── PROJECT NAV ─────────────────────────────────── */
|
||||||
|
.project-nav {
|
||||||
|
background: var(--dark);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 3rem 2.5rem;
|
||||||
|
border-top: 1px solid rgba(227,226,222,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-nav-link {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--bg);
|
||||||
|
position: relative;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.project-nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px; left: 0;
|
||||||
|
width: 100%; height: 2px;
|
||||||
|
background: var(--neon);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: right;
|
||||||
|
transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
.project-nav-link:hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
.project-nav-link:hover { color: var(--neon); }
|
||||||
|
|
||||||
|
/* ── FOOTER ─────────────────────────────────────── */
|
||||||
|
.footer {
|
||||||
|
background: var(--bg);
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
padding: 4.5rem 2.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 3rem;
|
||||||
|
margin-bottom: 4.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-heading {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
.footer-links a {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--mid);
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.footer-links a:hover { color: var(--accent); }
|
||||||
|
|
||||||
|
.footer-address {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--mid);
|
||||||
|
line-height: 1.8;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.footer-address a { font-weight: 700; }
|
||||||
|
.footer-address a:hover { color: var(--accent); }
|
||||||
|
|
||||||
|
.footer-cta {
|
||||||
|
background: var(--dark);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
.footer-cta label {
|
||||||
|
display: block;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: var(--bg);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.footer-input-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid rgba(227,226,222,0.4);
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.footer-input-row input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--bg);
|
||||||
|
text-transform: uppercase;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
.footer-input-row input::placeholder { color: rgba(227,226,222,0.25); }
|
||||||
|
.footer-input-row button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--neon);
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.footer-input-row button:hover { color: var(--bg); }
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-ghost {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 8vw;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--border);
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-legal {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--mid);
|
||||||
|
padding-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── RESPONSIVE ─────────────────────────────────── */
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.cs-overview { grid-template-columns: 1fr; gap: 1rem; }
|
||||||
|
.cs-overview-label,
|
||||||
|
.cs-overview-body { grid-column: span 1; }
|
||||||
|
.meta-bar { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.meta-col:nth-child(2) { border-right: none; }
|
||||||
|
.meta-col:nth-child(3) { border-right: 1px solid rgba(27,14,13,0.15); }
|
||||||
|
.footer-grid { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav { padding: 1.25rem 1.5rem; }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
height: auto;
|
||||||
|
min-height: 0;
|
||||||
|
padding-top: 5rem;
|
||||||
|
}
|
||||||
|
.hero-content { padding: 0 1.5rem 2.5rem; }
|
||||||
|
.hero-meta-row {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.hero-headline { font-size: 12vw; line-height: 0.85; }
|
||||||
|
.hero-headline .line2 { margin-left: 5vw; }
|
||||||
|
|
||||||
|
.meta-bar {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
.meta-col:nth-child(2) { border-right: none; }
|
||||||
|
.meta-col:nth-child(3) {
|
||||||
|
border-right: 1px solid rgba(27,14,13,0.15);
|
||||||
|
border-top: 1px solid rgba(27,14,13,0.15);
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.meta-col:nth-child(4) { border-top: 1px solid rgba(27,14,13,0.15); }
|
||||||
|
|
||||||
|
.cs-overview { padding: 4rem 1.5rem; }
|
||||||
|
|
||||||
|
.category-divider { padding: 0 1.5rem; }
|
||||||
|
|
||||||
|
.screenshots-section { padding: 4rem 1.5rem; }
|
||||||
|
.screenshot-grid { grid-template-columns: 1fr; }
|
||||||
|
|
||||||
|
.project-nav {
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer { padding: 3rem 1.5rem 0; }
|
||||||
|
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
|
.footer-ghost { font-size: 16vw; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Noise Texture Overlay -->
|
||||||
|
<div class="noise" aria-hidden="true">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
||||||
|
<filter id="n">
|
||||||
|
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/>
|
||||||
|
</filter>
|
||||||
|
<rect width="100%" height="100%" filter="url(#n)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a href="portfolio.html" class="nav-back">← Portfolio</a>
|
||||||
|
<a href="index.html" class="nav-logo">Uovidiu</a>
|
||||||
|
</div>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="index.html#about" class="nav-link">About</a>
|
||||||
|
<a href="index.html#services" class="nav-link">Services</a>
|
||||||
|
<a href="index.html#contact" class="nav-link">Contact</a>
|
||||||
|
</div>
|
||||||
|
<a href="https://thompsonservicecentre.co.uk" target="_blank" rel="noopener" class="nav-cta">Visit Site →</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-divider"></div>
|
||||||
|
<div class="hero-meta-row">
|
||||||
|
<div class="hero-meta">
|
||||||
|
<span>01 / WEB_DEV · 2025</span>
|
||||||
|
<span>Thompson Service Centre, Peterborough</span>
|
||||||
|
</div>
|
||||||
|
<a href="https://thompsonservicecentre.co.uk" target="_blank" rel="noopener" class="hero-cta-btn">Visit Site →</a>
|
||||||
|
</div>
|
||||||
|
<h1 class="hero-headline">
|
||||||
|
<span class="line1">Thompson</span>
|
||||||
|
<span class="line2">Service Centre</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Project Meta Bar -->
|
||||||
|
<div class="meta-bar">
|
||||||
|
<div class="meta-col">
|
||||||
|
<span class="meta-col-label">Client</span>
|
||||||
|
<span class="meta-col-value">Thompson Service Centre</span>
|
||||||
|
</div>
|
||||||
|
<div class="meta-col">
|
||||||
|
<span class="meta-col-label">Year</span>
|
||||||
|
<span class="meta-col-value">2025</span>
|
||||||
|
</div>
|
||||||
|
<div class="meta-col">
|
||||||
|
<span class="meta-col-label">Stack</span>
|
||||||
|
<span class="meta-col-value">HTML · Tailwind v4 · GSAP</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Project Overview -->
|
||||||
|
<section class="cs-overview">
|
||||||
|
<div class="cs-overview-label">
|
||||||
|
<span class="section-label">Project Overview</span>
|
||||||
|
</div>
|
||||||
|
<div class="cs-overview-body">
|
||||||
|
<p class="cs-overview-text">
|
||||||
|
Thompson Service Centre needed more than a website — they needed a digital presence that matched 25 years of earned trust. We built a high-fidelity landing page that puts credibility front and center: a bold hero section, a trust bar loaded with real credentials, and service cards that communicate competence without the usual garage-site clichés.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Screenshots Category Divider -->
|
||||||
|
<div class="category-divider">
|
||||||
|
<h2>Screenshots</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Screenshots -->
|
||||||
|
<section class="screenshots-section">
|
||||||
|
|
||||||
|
<!-- Full-width hero screenshot -->
|
||||||
|
<div class="screenshot-hero">
|
||||||
|
<div class="browser-frame">
|
||||||
|
<div class="browser-bar">
|
||||||
|
<div class="browser-dots">
|
||||||
|
<span class="browser-dot browser-dot--red"></span>
|
||||||
|
<span class="browser-dot browser-dot--beige"></span>
|
||||||
|
<span class="browser-dot browser-dot--green"></span>
|
||||||
|
</div>
|
||||||
|
<span class="browser-url">thompsonservicecentre.co.uk</span>
|
||||||
|
</div>
|
||||||
|
<div class="browser-scroll-wrap">
|
||||||
|
<div class="browser-scroll">
|
||||||
|
<img src="/img/thompson/hero.jpg" alt="Thompson Service Centre — hero section screenshot">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2-col screenshots: Booking Flow -->
|
||||||
|
<div class="screenshots-label">
|
||||||
|
<span class="section-label">Booking Flow</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="screenshot-grid">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="screenshot-card-label">Vehicle Lookup</span>
|
||||||
|
<p class="screenshot-card-desc">Registration plate lookup pulls vehicle details instantly — reducing form friction and building user confidence from the first interaction.</p>
|
||||||
|
<div class="browser-frame">
|
||||||
|
<div class="browser-bar">
|
||||||
|
<div class="browser-dots">
|
||||||
|
<span class="browser-dot browser-dot--red"></span>
|
||||||
|
<span class="browser-dot browser-dot--beige"></span>
|
||||||
|
<span class="browser-dot browser-dot--green"></span>
|
||||||
|
</div>
|
||||||
|
<span class="browser-url">thompsonservicecentre.co.uk/book</span>
|
||||||
|
</div>
|
||||||
|
<img src="/img/thompson/booking-lookup.jpg" alt="Thompson Service Centre — vehicle lookup step">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="screenshot-card-label">Booking Form</span>
|
||||||
|
<p class="screenshot-card-desc">A clean, single-column booking form with service selection and date picker. Designed for speed on mobile — no unnecessary steps, no dead ends.</p>
|
||||||
|
<div class="browser-frame">
|
||||||
|
<div class="browser-bar">
|
||||||
|
<div class="browser-dots">
|
||||||
|
<span class="browser-dot browser-dot--red"></span>
|
||||||
|
<span class="browser-dot browser-dot--beige"></span>
|
||||||
|
<span class="browser-dot browser-dot--green"></span>
|
||||||
|
</div>
|
||||||
|
<span class="browser-url">thompsonservicecentre.co.uk/book</span>
|
||||||
|
</div>
|
||||||
|
<img src="/img/thompson/booking-confirm.jpg" alt="Thompson Service Centre — booking confirmation step">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Execution Category Divider -->
|
||||||
|
<div class="category-divider">
|
||||||
|
<h2>Execution</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Craft & Execution -->
|
||||||
|
<section class="cs-overview">
|
||||||
|
<div class="cs-overview-label">
|
||||||
|
<span class="section-label">Craft & Execution</span>
|
||||||
|
</div>
|
||||||
|
<div class="cs-overview-body">
|
||||||
|
<p class="cs-overview-text">
|
||||||
|
Built with vanilla HTML, Tailwind CSS v4, and GSAP-powered scroll animations, the page loads fast and feels premium on every device. The design system — rooted in Workshop Navy and Safety Orange — draws from real automotive heritage rather than off-the-shelf templates.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Project Navigation -->
|
||||||
|
<div class="project-nav">
|
||||||
|
<a href="portfolio.html" class="project-nav-link">← Back to Portfolio</a>
|
||||||
|
<a href="#" class="project-nav-link">Next Project → LHB Engineering</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-grid">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Studio</h4>
|
||||||
|
<address class="footer-address">
|
||||||
|
Peterborough, UK<br>
|
||||||
|
<a href="mailto:hello@uovidiu.com">hello@uovidiu.com</a>
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Navigate</h4>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="index.html#about">About</a></li>
|
||||||
|
<li><a href="index.html#services">Services</a></li>
|
||||||
|
<li><a href="portfolio.html">Portfolio</a></li>
|
||||||
|
<li><a href="index.html#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Work</h4>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#">LHB Engineering</a></li>
|
||||||
|
<li><a href="portfolio-project.html">Thompson Auto</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="footer-cta">
|
||||||
|
<label for="footer-email">Start a project</label>
|
||||||
|
<div class="footer-input-row">
|
||||||
|
<input type="email" id="footer-email" placeholder="Your email">
|
||||||
|
<button type="button">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<span class="footer-ghost">Uovidiu</span>
|
||||||
|
<span class="footer-legal">© 2026 Ovidiu Ungureanu</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nav = document.querySelector('.nav');
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
nav.classList.toggle('nav--scrolled', window.scrollY > 50);
|
||||||
|
}, { passive: true });
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
735
brutalist-01/portfolio.html
Normal file
735
brutalist-01/portfolio.html
Normal file
@@ -0,0 +1,735 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portfolio — Ovidiu Ungureanu</title>
|
||||||
|
<link rel="preconnect" href="https://api.fontshare.com">
|
||||||
|
<link href="https://api.fontshare.com/v2/css?f[]=clash-grotesk@700,600,500,400&f[]=general-sans@700,600,500,400&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #E3E2DE;
|
||||||
|
--dark: #1B0E0D;
|
||||||
|
--mid: #61220F;
|
||||||
|
--accent: #C72A09;
|
||||||
|
--neon: #31EF07;
|
||||||
|
--border: #D9D9D9;
|
||||||
|
--clash: 'Clash Grotesk', sans-serif;
|
||||||
|
--general: 'General Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--general);
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--dark);
|
||||||
|
overflow-x: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
::selection { background: var(--accent); color: var(--bg); }
|
||||||
|
|
||||||
|
/* ── NOISE ──────────────────────────────────────── */
|
||||||
|
.noise {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 50;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
opacity: 0.08;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── NAV ────────────────────────────────────────── */
|
||||||
|
.nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
z-index: 40;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem 2.5rem;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
color: var(--bg);
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav--scrolled {
|
||||||
|
mix-blend-mode: normal;
|
||||||
|
background: rgba(27,14,13,0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 2.5rem;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px; left: 0;
|
||||||
|
width: 100%; height: 2px;
|
||||||
|
background: var(--neon);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: right;
|
||||||
|
transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
.nav-link:hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-cta {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── HERO ───────────────────────────────────────── */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
height: 75vh;
|
||||||
|
max-height: 650px;
|
||||||
|
min-height: 520px;
|
||||||
|
background-color: var(--dark);
|
||||||
|
background-image: radial-gradient(circle, rgba(227,226,222,0.055) 1px, transparent 1px);
|
||||||
|
background-size: 48px 48px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse at 50% 100%, transparent 40%, rgba(27,14,13,0.55) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 0 2.5rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(227,226,222,0.25);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: rgba(227,226,222,0.5);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta-btn {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg);
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
.hero-cta-btn:hover {
|
||||||
|
background: var(--neon);
|
||||||
|
color: var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-headline {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 13.5vw;
|
||||||
|
line-height: 0.75;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-top: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-headline .line1 {
|
||||||
|
display: block;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.hero-headline .line2 {
|
||||||
|
display: block;
|
||||||
|
color: var(--bg);
|
||||||
|
margin-left: 20vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── SECTION LABEL ───────────────────────────────── */
|
||||||
|
.section-label {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--mid);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── PORTFOLIO GRID ──────────────────────────────── */
|
||||||
|
.portfolio-section {
|
||||||
|
padding: 6rem 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-header {
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Thumbnail — */
|
||||||
|
.project-card__thumb {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__thumb img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover .project-card__thumb img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__label {
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--dark);
|
||||||
|
padding: 0.3rem 0.75rem;
|
||||||
|
z-index: 2;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem; right: 1rem;
|
||||||
|
background: var(--neon);
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 6px 12px;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 2;
|
||||||
|
transition: opacity 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover .project-card__badge { opacity: 1; }
|
||||||
|
|
||||||
|
/* — Body — */
|
||||||
|
.project-card__body {
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
border-bottom: 1px solid var(--dark);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
transition: border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover .project-card__body {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__title {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: clamp(1.4rem, 2.2vw, 2rem);
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--dark);
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__desc {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--mid);
|
||||||
|
line-height: 1.6;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Footer row — */
|
||||||
|
.project-card__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__year {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--mid);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__arrow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 2rem; height: 2rem;
|
||||||
|
border: 1px solid var(--accent);
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--accent);
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: background 0.15s, color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover .project-card__arrow {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── CONTACT CTA ──────────────────────────────────── */
|
||||||
|
.contact-section {
|
||||||
|
background: var(--dark);
|
||||||
|
padding: 5rem 2.5rem 4.5rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-section::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image: radial-gradient(circle, rgba(227,226,222,0.04) 1px, transparent 1px);
|
||||||
|
background-size: 48px 48px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-inner { position: relative; z-index: 1; }
|
||||||
|
|
||||||
|
.contact-section .section-label {
|
||||||
|
color: rgba(227,226,222,0.35);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-headline {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: clamp(2.5rem, 5vw, 5.5rem);
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--bg);
|
||||||
|
line-height: 0.88;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
.contact-headline .accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.contact-email {
|
||||||
|
display: block;
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: clamp(1.5rem, 3.5vw, 3.75rem);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--bg);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
width: fit-content;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.contact-email::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px; left: 0;
|
||||||
|
width: 100%; height: 2px;
|
||||||
|
background: var(--neon);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: right;
|
||||||
|
transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
.contact-email:hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── FOOTER ─────────────────────────────────────── */
|
||||||
|
.footer {
|
||||||
|
background: var(--bg);
|
||||||
|
border-top: 1px solid var(--dark);
|
||||||
|
padding: 4.5rem 2.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 3rem;
|
||||||
|
margin-bottom: 4.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-heading {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
.footer-links a {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--mid);
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.footer-links a:hover { color: var(--accent); }
|
||||||
|
|
||||||
|
.footer-address {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--mid);
|
||||||
|
line-height: 1.8;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.footer-address a { font-weight: 700; }
|
||||||
|
.footer-address a:hover { color: var(--accent); }
|
||||||
|
|
||||||
|
.footer-cta {
|
||||||
|
background: var(--dark);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
.footer-cta label {
|
||||||
|
display: block;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: var(--bg);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.footer-input-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid rgba(227,226,222,0.4);
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.footer-input-row input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--bg);
|
||||||
|
text-transform: uppercase;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
.footer-input-row input::placeholder { color: rgba(227,226,222,0.25); }
|
||||||
|
.footer-input-row button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--neon);
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.footer-input-row button:hover { color: var(--bg); }
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-ghost {
|
||||||
|
font-family: var(--clash);
|
||||||
|
font-size: 8vw;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--border);
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-legal {
|
||||||
|
font-family: var(--general);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--mid);
|
||||||
|
padding-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── RESPONSIVE ─────────────────────────────────── */
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.footer-grid { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav { padding: 1.25rem 1.5rem; }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
height: auto;
|
||||||
|
min-height: 0;
|
||||||
|
padding-top: 5rem;
|
||||||
|
}
|
||||||
|
.hero-content { padding: 0 1.5rem 2.5rem; }
|
||||||
|
.hero-meta-row {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.hero-headline { font-size: 12vw; }
|
||||||
|
.hero-headline .line2 { margin-left: 5vw; }
|
||||||
|
|
||||||
|
.portfolio-section { padding: 4rem 1.5rem; }
|
||||||
|
|
||||||
|
.portfolio-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-section { padding: 4rem 1.5rem; }
|
||||||
|
|
||||||
|
.footer { padding: 3rem 1.5rem 0; }
|
||||||
|
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
|
.footer-ghost { font-size: 16vw; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Noise Texture Overlay -->
|
||||||
|
<div class="noise" aria-hidden="true">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
||||||
|
<filter id="n">
|
||||||
|
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/>
|
||||||
|
</filter>
|
||||||
|
<rect width="100%" height="100%" filter="url(#n)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="index.html" class="nav-logo">Uovidiu</a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="index.html#about" class="nav-link">About</a>
|
||||||
|
<a href="index.html#services" class="nav-link">Services</a>
|
||||||
|
<a href="index.html#contact" class="nav-link">Contact</a>
|
||||||
|
</div>
|
||||||
|
<a href="index.html#contact" class="nav-cta">Hire Me →</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-divider"></div>
|
||||||
|
<div class="hero-meta-row">
|
||||||
|
<div class="hero-meta">
|
||||||
|
<span>Portfolio — 2 Projects</span>
|
||||||
|
<span>Web Design & Development</span>
|
||||||
|
</div>
|
||||||
|
<a href="index.html" class="hero-cta-btn">← Back to Home</a>
|
||||||
|
</div>
|
||||||
|
<h1 class="hero-headline">
|
||||||
|
<span class="line1">Selected</span>
|
||||||
|
<span class="line2">Work</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Portfolio Grid -->
|
||||||
|
<section class="portfolio-section">
|
||||||
|
|
||||||
|
<div class="portfolio-header">
|
||||||
|
<span class="section-label">001 — Selected Work</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portfolio-grid">
|
||||||
|
|
||||||
|
<!-- Project 1: Thompson -->
|
||||||
|
<a href="portfolio-project.html" class="project-card">
|
||||||
|
<div class="project-card__thumb">
|
||||||
|
<span class="project-card__badge">View Project →</span>
|
||||||
|
<img src="/img/thompson/hero.jpg" alt="Thompson Service Centre website screenshot" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="project-card__body">
|
||||||
|
<h2 class="project-card__title">Thompson Service Centre</h2>
|
||||||
|
<p class="project-card__desc">A high-fidelity automotive landing page that puts credibility front and centre. Bold hero, trust bar, and service cards — without the usual garage-site clichés.</p>
|
||||||
|
<div class="project-card__footer">
|
||||||
|
<span class="project-card__year">2025 · HTML · Tailwind · GSAP</span>
|
||||||
|
<span class="project-card__arrow">→</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Project 2: LHB Engineering -->
|
||||||
|
<a href="#" class="project-card">
|
||||||
|
<div class="project-card__thumb">
|
||||||
|
<span class="project-card__badge">View Project →</span>
|
||||||
|
<img src="/img/lhbeng/hero.jpg" alt="LHB Engineering website screenshot" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="project-card__body">
|
||||||
|
<h2 class="project-card__title">LHB Engineering</h2>
|
||||||
|
<p class="project-card__desc">Full website redesign with a self-service CMS for portfolio, team profiles, and job listings — no developer needed for day-to-day updates.</p>
|
||||||
|
<div class="project-card__footer">
|
||||||
|
<span class="project-card__year">2022 · HTML · CSS · PHP</span>
|
||||||
|
<span class="project-card__arrow">→</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact CTA -->
|
||||||
|
<section class="contact-section">
|
||||||
|
<div class="contact-inner">
|
||||||
|
<span class="section-label">002 — Contact</span>
|
||||||
|
<h2 class="contact-headline">
|
||||||
|
Got a project<br>
|
||||||
|
<span class="accent">in mind?</span>
|
||||||
|
</h2>
|
||||||
|
<a href="mailto:hello@uovidiu.com" class="contact-email">hello@uovidiu.com</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-grid">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Studio</h4>
|
||||||
|
<address class="footer-address">
|
||||||
|
Peterborough, UK<br>
|
||||||
|
<a href="mailto:hello@uovidiu.com">hello@uovidiu.com</a>
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Navigate</h4>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="index.html#about">About</a></li>
|
||||||
|
<li><a href="index.html#services">Services</a></li>
|
||||||
|
<li><a href="portfolio.html">Portfolio</a></li>
|
||||||
|
<li><a href="index.html#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Work</h4>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#">LHB Engineering</a></li>
|
||||||
|
<li><a href="portfolio-project.html">Thompson Auto</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="footer-cta">
|
||||||
|
<label for="footer-email">Start a project</label>
|
||||||
|
<div class="footer-input-row">
|
||||||
|
<input type="email" id="footer-email" placeholder="Your email">
|
||||||
|
<button type="button">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<span class="footer-ghost">Uovidiu</span>
|
||||||
|
<span class="footer-legal">© 2026 Ovidiu Ungureanu</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nav = document.querySelector('.nav');
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
nav.classList.toggle('nav--scrolled', window.scrollY > 50);
|
||||||
|
}, { passive: true });
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -319,7 +319,7 @@ a {
|
|||||||
|
|
||||||
.service-row-title {
|
.service-row-title {
|
||||||
font-family: var(--mono), serif;
|
font-family: var(--mono), serif;
|
||||||
font-size: clamp(3rem, 8vw, 8rem);
|
font-size: clamp(3rem, 7vw, 8rem);
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@@ -370,7 +370,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.service-row-title {
|
.service-row-title {
|
||||||
font-size: clamp(2rem, 10vw, 3rem);
|
font-size: clamp(2rem, 7vw, 3rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user