Initial: 6 landing page portfolio sites with navigation
This commit is contained in:
Emil Shanaty
@@ -0,0 +1,23 @@
|
||||
# Портфолио лендинговых страниц — 6 вариантов сайтов
|
||||
|
||||
Коллекция из 6 лендингов: 3 резюме и 3 сайта аренды недвижимости.
|
||||
|
||||
## Резюме
|
||||
|
||||
| Вариант | Описание | Ссылка |
|
||||
|---|---|---|
|
||||
| Минималистичное резюме | Чистая типографика, лаконичный макет | [minimalist/](minimalist/) |
|
||||
| Современный тёмный | Градиенты, glassmorphism, тёмная тема | [modern-dark/](modern-dark/) |
|
||||
| Креативное резюме | Смелые акценты, нестандартная сетка | [creative/](creative/) |
|
||||
|
||||
## Аренда недвижимости
|
||||
|
||||
| Вариант | Описание | Ссылка |
|
||||
|---|---|---|
|
||||
| Тёмный лес | Тёмная атмосферная тема с лесными мотивами | [dark-forest/](dark-forest/) |
|
||||
| Эко свежесть | Светлая эко-тема с зелёными акцентами | [eco-fresh/](eco-fresh/) |
|
||||
| Рустик Вуд | Тёплая деревянная эстетика, уют и природные текстуры | [rustic-wood/](rustic-wood/) |
|
||||
|
||||
## Запуск
|
||||
|
||||
Открыть `index.html` в браузере — портфолио-навигация со ссылками на все 6 сайтов.
|
||||
@@ -0,0 +1,379 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alex Morgan — Creative Technologist</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{
|
||||
--c-orange:#ff5c00;
|
||||
--c-pink:#ff006e;
|
||||
--c-purple:#8338ec;
|
||||
--c-blue:#3a86ff;
|
||||
--c-cream:#fff8f0;
|
||||
--c-ink:#0d1117;
|
||||
--c-gray:#6b7280;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth}
|
||||
body{
|
||||
font-family:'Inter',sans-serif;
|
||||
background:var(--c-cream);
|
||||
color:var(--c-ink);
|
||||
line-height:1.6;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
.font-display{font-family:'Syne',sans-serif}
|
||||
|
||||
/* Noise texture overlay */
|
||||
body::before{
|
||||
content:'';position:fixed;inset:0;z-index:9999;
|
||||
pointer-events:none;
|
||||
opacity:0.03;
|
||||
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
nav{
|
||||
position:fixed;top:0;left:0;right:0;z-index:100;
|
||||
display:flex;justify-content:space-between;align-items:center;
|
||||
padding:1.25rem 2rem;
|
||||
mix-blend-mode:difference;
|
||||
}
|
||||
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.4rem;text-transform:uppercase;letter-spacing:0.05em;color:#fff}
|
||||
.nav-links{display:flex;gap:1.5rem;list-style:none}
|
||||
.nav-links a{font-size:0.85rem;font-weight:500;color:#fff;text-decoration:none;letter-spacing:0.02em}
|
||||
.nav-links a:hover{text-decoration:underline}
|
||||
|
||||
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
|
||||
|
||||
/* Hero */
|
||||
#hero{
|
||||
min-height:100vh;
|
||||
display:flex;align-items:flex-end;
|
||||
padding:8rem 0 4rem;
|
||||
position:relative;
|
||||
}
|
||||
.hero-marquee{
|
||||
position:absolute;top:50%;left:0;right:0;
|
||||
transform:translateY(-50%);
|
||||
font-family:'Syne',sans-serif;
|
||||
font-size:clamp(4rem,14vw,14rem);
|
||||
font-weight:800;
|
||||
line-height:0.9;
|
||||
text-transform:uppercase;
|
||||
color:var(--c-ink);
|
||||
opacity:0.06;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
pointer-events:none;
|
||||
user-select:none;
|
||||
}
|
||||
.hero-marquee span{display:inline-block;animation:marquee 20s linear infinite}
|
||||
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
|
||||
.hero-content{position:relative;z-index:1}
|
||||
.hero-label{
|
||||
display:inline-block;
|
||||
background:var(--c-orange);color:#fff;
|
||||
padding:0.3rem 0.75rem;
|
||||
font-size:0.75rem;font-weight:600;text-transform:uppercase;
|
||||
transform:rotate(-2deg);
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
.hero-name{
|
||||
font-family:'Syne',sans-serif;
|
||||
font-size:clamp(3.5rem,9vw,8rem);
|
||||
font-weight:800;line-height:0.95;
|
||||
letter-spacing:-0.04em;
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
.hero-name .highlight{
|
||||
color:var(--c-pink);
|
||||
position:relative;
|
||||
}
|
||||
.hero-name .highlight::after{
|
||||
content:'';position:absolute;bottom:0.1em;left:-0.1em;right:-0.1em;
|
||||
height:0.15em;background:var(--c-orange);opacity:0.4;z-index:-1;
|
||||
}
|
||||
.hero-tagline{
|
||||
font-size:clamp(1.1rem,2.5vw,1.5rem);
|
||||
color:var(--c-gray);max-width:500px;
|
||||
margin-bottom:2rem;font-weight:300;
|
||||
}
|
||||
.hero-stats-row{display:flex;gap:2.5rem;flex-wrap:wrap}
|
||||
.hstat{display:flex;flex-direction:column;gap:0.2rem}
|
||||
.hstat-num{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:700;color:var(--c-purple)}
|
||||
.hstat-label{font-size:0.75rem;color:var(--c-gray);text-transform:uppercase;letter-spacing:0.1em}
|
||||
|
||||
/* Sections */
|
||||
section{padding:5rem 0}
|
||||
.section-tag{
|
||||
display:inline-block;
|
||||
font-family:'Syne',sans-serif;font-size:0.8rem;font-weight:700;
|
||||
text-transform:uppercase;letter-spacing:0.12em;
|
||||
padding-bottom:0.3rem;
|
||||
border-bottom:3px solid var(--c-orange);
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
.section-title{
|
||||
font-family:'Syne',sans-serif;
|
||||
font-size:clamp(2rem,5vw,3.5rem);
|
||||
font-weight:700;letter-spacing:-0.03em;
|
||||
line-height:1.1;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
|
||||
/* About */
|
||||
#about{background:var(--c-ink);color:#fff;position:relative}
|
||||
#about .section-tag{border-color:var(--c-blue)}
|
||||
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
|
||||
.about-text{font-size:1.15rem;color:#b0b8c4;line-height:1.8;font-weight:300}
|
||||
.about-text strong{color:#fff;font-weight:600}
|
||||
.about-img{
|
||||
width:100%;aspect-ratio:4/5;
|
||||
background:linear-gradient(135deg,var(--c-purple),var(--c-pink));
|
||||
border-radius:2rem;
|
||||
display:flex;align-items:flex-end;padding:2rem;
|
||||
position:relative;overflow:hidden;
|
||||
}
|
||||
.about-img span{
|
||||
font-family:'Syne',sans-serif;font-size:3rem;font-weight:800;
|
||||
color:rgba(255,255,255,0.2);line-height:1;
|
||||
}
|
||||
|
||||
/* Experience */
|
||||
.exp-cards{display:flex;flex-direction:column;gap:1.5rem}
|
||||
.exp-card{
|
||||
display:grid;grid-template-columns:180px 1fr;gap:2rem;
|
||||
padding:2rem;
|
||||
background:#fff;
|
||||
border:2px solid var(--c-ink);
|
||||
border-radius:1rem;
|
||||
transition:transform .2s,box-shadow .2s;
|
||||
}
|
||||
.exp-card:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--c-ink)}
|
||||
.exp-period{font-family:'Syne',sans-serif;font-size:0.85rem;font-weight:600;color:var(--c-orange)}
|
||||
.exp-role{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:700;margin-bottom:0.25rem}
|
||||
.exp-company{font-size:0.95rem;color:var(--c-gray);margin-bottom:0.75rem}
|
||||
.exp-desc{font-size:0.95rem;color:#4b5563;line-height:1.6}
|
||||
.exp-tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:1rem}
|
||||
.exp-tag{font-size:0.72rem;padding:0.25rem 0.6rem;background:var(--c-cream);border-radius:4px;font-weight:500}
|
||||
|
||||
/* Skills bars */
|
||||
.skills-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
|
||||
.skill-bar{margin-bottom:1.5rem}
|
||||
.skill-bar-header{display:flex;justify-content:space-between;margin-bottom:0.4rem}
|
||||
.skill-bar-name{font-weight:500;font-size:0.9rem}
|
||||
.skill-bar-val{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem}
|
||||
.skill-bar-track{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}
|
||||
.skill-bar-fill{height:100%;border-radius:4px;transition:width 1s ease-out}
|
||||
|
||||
/* Contact */
|
||||
#contact{background:var(--c-ink);color:#fff;text-align:center;padding:6rem 0}
|
||||
.contact-cta{
|
||||
font-family:'Syne',sans-serif;
|
||||
font-size:clamp(2rem,5vw,4rem);
|
||||
font-weight:800;
|
||||
line-height:1.1;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
.contact-cta .hi{color:var(--c-orange)}
|
||||
.contact-email{
|
||||
display:inline-block;
|
||||
font-size:clamp(1rem,2.5vw,1.5rem);
|
||||
color:var(--c-blue);
|
||||
text-decoration:none;
|
||||
border-bottom:2px solid var(--c-blue);
|
||||
padding-bottom:0.2rem;
|
||||
margin-bottom:2rem;
|
||||
transition:color .3s;
|
||||
}
|
||||
.contact-email:hover{color:var(--c-pink);border-color:var(--c-pink)}
|
||||
.socials{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
|
||||
.social{
|
||||
padding:0.6rem 1.2rem;
|
||||
border:2px solid rgba(255,255,255,0.2);
|
||||
border-radius:100px;color:#fff;
|
||||
text-decoration:none;font-size:0.85rem;
|
||||
transition:background .3s,border-color .3s;
|
||||
}
|
||||
.social:hover{background:#fff;color:var(--c-ink);border-color:#fff}
|
||||
|
||||
footer{padding:2rem;text-align:center;font-size:0.8rem;color:var(--c-gray)}
|
||||
|
||||
@media(max-width:768px){
|
||||
.about-grid{grid-template-columns:1fr;gap:2rem}
|
||||
.skills-wrapper{grid-template-columns:1fr}
|
||||
.exp-card{grid-template-columns:1fr;gap:1rem}
|
||||
.hero-stats-row{gap:1.5rem}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="logo">AM</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#experience">Work</a></li>
|
||||
<li><a href="#skills">Skills</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="hero">
|
||||
<div class="hero-marquee"><span>Creative Technologist · Product Designer · Full Stack Dev · Creative Technologist · Product Designer · Full Stack Dev · </span></div>
|
||||
<div class="container hero-content">
|
||||
<div class="hero-label">Available for hire</div>
|
||||
<h1 class="hero-name">Alex<br><span class="highlight">Morgan</span></h1>
|
||||
<p class="hero-tagline">I design bold digital products and build them with code. Based in San Francisco, working worldwide.</p>
|
||||
<div class="hero-stats-row">
|
||||
<div class="hstat"><span class="hstat-num">8+</span><span class="hstat-label">Years</span></div>
|
||||
<div class="hstat"><span class="hstat-num">50+</span><span class="hstat-label">Shipped</span></div>
|
||||
<div class="hstat"><span class="hstat-num">40M</span><span class="hstat-label">Reached</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-text">
|
||||
<div class="section-tag">About</div>
|
||||
<h2 class="section-title">Not your average<br>designer-developer.</h2>
|
||||
<p>I believe <strong>great products are born at the intersection of design and engineering</strong>. That's why I never chose one — I do both. From design systems at Stripe to early engineering at Vercel, I've worn both hats and learned to speak both languages.</p>
|
||||
<p style="margin-top:1rem">When I'm not shipping, I'm exploring creative coding, generative art, and the future of human-computer interaction.</p>
|
||||
</div>
|
||||
<div class="about-img"><span>AM</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="experience">
|
||||
<div class="container">
|
||||
<div class="section-tag">Experience</div>
|
||||
<h2 class="section-title">Where I've<br>made impact</h2>
|
||||
<div class="exp-cards">
|
||||
<div class="exp-card">
|
||||
<div class="exp-period">2022 — Present</div>
|
||||
<div>
|
||||
<div class="exp-role">Senior Product Designer</div>
|
||||
<div class="exp-company">Stripe · San Francisco</div>
|
||||
<div class="exp-desc">Led developer dashboard redesign for 4M+ users. Built internal design system adopted across 200+ product surfaces. Reduced onboarding time by 92%.</div>
|
||||
<div class="exp-tags"><span class="exp-tag">Design Systems</span><span class="exp-tag">Product Strategy</span><span class="exp-tag">UX Research</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-card">
|
||||
<div class="exp-period">2020 — 2022</div>
|
||||
<div>
|
||||
<div class="exp-role">Design Engineer</div>
|
||||
<div class="exp-company">Figma · San Francisco</div>
|
||||
<div class="exp-desc">Founding member of Design Infrastructure team. Shipped FigJam widget system and interaction patterns still used by millions daily.</div>
|
||||
<div class="exp-tags"><span class="exp-tag">React</span><span class="exp-tag">TypeScript</span><span class="exp-tag">Design Infra</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-card">
|
||||
<div class="exp-period">2018 — 2020</div>
|
||||
<div>
|
||||
<div class="exp-role">Frontend Engineer & Designer</div>
|
||||
<div class="exp-company">Vercel · Remote</div>
|
||||
<div class="exp-desc">Employee #14. Built marketing site and deployment UI. Helped grow from 50K to 500K users. Established early design culture.</div>
|
||||
<div class="exp-tags"><span class="exp-tag">Next.js</span><span class="exp-tag">Growth</span><span class="exp-tag">Branding</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-card">
|
||||
<div class="exp-period">2016 — 2018</div>
|
||||
<div>
|
||||
<div class="exp-role">Product Designer</div>
|
||||
<div class="exp-company">Linear · Stockholm</div>
|
||||
<div class="exp-desc">First design hire. Shaped core product from zero to launch. Created the command palette interaction that became Linear's signature.</div>
|
||||
<div class="exp-tags"><span class="exp-tag">0→1</span><span class="exp-tag">Interaction Design</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="skills">
|
||||
<div class="container">
|
||||
<div class="section-tag">Skills</div>
|
||||
<h2 class="section-title">Tools &<br>technologies</h2>
|
||||
<div class="skills-wrapper">
|
||||
<div>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-bar-header"><span class="skill-bar-name">React / Next.js</span><span class="skill-bar-val">95%</span></div>
|
||||
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:95%;background:var(--c-orange)"></div></div>
|
||||
</div>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-bar-header"><span class="skill-bar-name">TypeScript</span><span class="skill-bar-val">92%</span></div>
|
||||
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:92%;background:var(--c-pink)"></div></div>
|
||||
</div>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-bar-header"><span class="skill-bar-name">Design Systems</span><span class="skill-bar-val">98%</span></div>
|
||||
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:98%;background:var(--c-purple)"></div></div>
|
||||
</div>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-bar-header"><span class="skill-bar-name">Figma</span><span class="skill-bar-val">96%</span></div>
|
||||
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:96%;background:var(--c-blue)"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-bar-header"><span class="skill-bar-name">Node.js / Backend</span><span class="skill-bar-val">85%</span></div>
|
||||
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:85%;background:var(--c-orange)"></div></div>
|
||||
</div>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-bar-header"><span class="skill-bar-name">Motion / Animation</span><span class="skill-bar-val">88%</span></div>
|
||||
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:88%;background:var(--c-pink)"></div></div>
|
||||
</div>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-bar-header"><span class="skill-bar-name">User Research</span><span class="skill-bar-val">90%</span></div>
|
||||
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:90%;background:var(--c-purple)"></div></div>
|
||||
</div>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-bar-header"><span class="skill-bar-name">Creative Coding</span><span class="skill-bar-val">82%</span></div>
|
||||
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:82%;background:var(--c-blue)"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<h2 class="contact-cta">Got a project?<br>Let's talk. <span class="hi">Say hi →</span></h2>
|
||||
<a href="mailto:alex@alexmorgan.io" class="contact-email">alex@alexmorgan.io</a>
|
||||
<div class="socials">
|
||||
<a href="#" class="social">GitHub</a>
|
||||
<a href="#" class="social">LinkedIn</a>
|
||||
<a href="#" class="social">Twitter</a>
|
||||
<a href="#" class="social">Dribbble</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 Alex Morgan · Built with HTML & CSS</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Animate skill bars on scroll
|
||||
const skillBars = document.querySelectorAll('.skill-bar-fill');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const bar = entry.target;
|
||||
const targetWidth = bar.style.width;
|
||||
bar.style.width = '0';
|
||||
setTimeout(() => bar.style.width = targetWidth, 100);
|
||||
observer.unobserve(bar);
|
||||
}
|
||||
});
|
||||
}, {threshold: 0.5});
|
||||
skillBars.forEach(bar => observer.observe(bar));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,680 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Станция Сосновая — аренда у Переславского озера</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--forest: #111d11;
|
||||
--canopy: #1a2e1a;
|
||||
--mid: #243d24;
|
||||
--leaf: #2f5230;
|
||||
--moss: #3d6b3d;
|
||||
--bark: #4a2e14;
|
||||
--branch: #6b4220;
|
||||
--wood: #8c5a28;
|
||||
--straw: #c4a265;
|
||||
--cream: #f2ead8;
|
||||
--fog: #d8d0bc;
|
||||
--shadow: rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
background: var(--forest);
|
||||
color: var(--cream);
|
||||
line-height: 1.7;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
/* ─── NAV ─── */
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 3rem; height: 60px;
|
||||
background: rgba(10,16,10,.9);
|
||||
backdrop-filter: blur(6px);
|
||||
border-bottom: 1px solid rgba(61,107,61,.35);
|
||||
transition: background .3s;
|
||||
}
|
||||
.nav-logo {
|
||||
font-size: 1.1rem; letter-spacing: .06em; font-weight: 700;
|
||||
color: var(--straw);
|
||||
}
|
||||
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||||
.nav-links a {
|
||||
font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
|
||||
color: var(--fog); transition: color .2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--straw); }
|
||||
.nav-cta {
|
||||
font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
padding: .5rem 1.4rem; border: 1px solid var(--straw); color: var(--straw);
|
||||
background: transparent; cursor: pointer; transition: background .2s, color .2s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--straw); color: var(--forest); }
|
||||
|
||||
/* ─── HERO ─── */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
text-align: center;
|
||||
padding: 8rem 2rem 5rem;
|
||||
position: relative; overflow: hidden;
|
||||
background: linear-gradient(170deg, #0c160c 0%, #1a2e1a 45%, #223a22 80%, #0e1a0e 100%);
|
||||
}
|
||||
/* pine silhouette strip */
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute; bottom: 0; left: 0; right: 0; height: 220px;
|
||||
background:
|
||||
linear-gradient(to top, #0c160c 0%, transparent 100%),
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%230c160c' d='M0 200V140l55-90 35 28 45-110 40 55 38-85 48 65 42-95 50 72 38-55 45 80 55-100 48 65 38-75 45 90 55-65 42 72 48-55 50 90 55-110 45 72V200z'/%3E%3C/svg%3E")
|
||||
bottom / cover no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse at center, transparent 25%, rgba(8,14,8,.5) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-content { position: relative; z-index: 1; max-width: 700px; }
|
||||
.hero-badge {
|
||||
display: inline-block; margin-bottom: 1.5rem;
|
||||
font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
|
||||
color: var(--straw); border: 1px solid rgba(196,162,101,.35);
|
||||
padding: .35rem 1.2rem; border-radius: 2px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: clamp(2.8rem, 8vw, 5.8rem); font-style: italic; font-weight: 700;
|
||||
line-height: 1.08; color: var(--cream);
|
||||
text-shadow: 0 4px 40px rgba(0,0,0,.75);
|
||||
margin-bottom: 1.2rem; letter-spacing: .02em;
|
||||
}
|
||||
.hero-sub {
|
||||
font-style: italic; font-size: clamp(1rem, 2.5vw, 1.4rem);
|
||||
color: var(--fog); margin-bottom: 2.8rem;
|
||||
}
|
||||
.btn-hero {
|
||||
display: inline-block; padding: 1rem 3rem;
|
||||
background: var(--bark); color: var(--cream);
|
||||
font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
|
||||
border: 1px solid var(--wood);
|
||||
transition: background .25s, box-shadow .25s;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,.45);
|
||||
}
|
||||
.btn-hero:hover { background: var(--wood); box-shadow: 0 8px 32px rgba(0,0,0,.55); }
|
||||
|
||||
/* ─── SECTION SCAFFOLD ─── */
|
||||
section { padding: 6rem 2rem; }
|
||||
.inner { max-width: 1100px; margin: 0 auto; }
|
||||
.eyebrow {
|
||||
display: block; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
|
||||
color: var(--straw); margin-bottom: .7rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; font-style: italic;
|
||||
color: var(--cream); line-height: 1.2; margin-bottom: .8rem;
|
||||
}
|
||||
.rule {
|
||||
width: 48px; height: 2px; background: var(--wood);
|
||||
margin: 1rem 0 2.8rem; border-radius: 1px;
|
||||
}
|
||||
|
||||
/* ─── ABOUT ─── */
|
||||
#about { background: var(--canopy); }
|
||||
.about-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
|
||||
}
|
||||
.about-text p { color: var(--fog); margin-bottom: 1rem; }
|
||||
.about-text p strong { color: var(--straw); font-weight: 600; }
|
||||
.about-stats {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem;
|
||||
}
|
||||
.stat {
|
||||
background: var(--mid); border: 1px solid var(--leaf);
|
||||
padding: 1.2rem 1rem; text-align: center; border-radius: 4px;
|
||||
}
|
||||
.stat-n { font-size: 2.2rem; color: var(--straw); line-height: 1; font-weight: 700; }
|
||||
.stat-l { font-size: .72rem; letter-spacing: .1em; color: var(--fog); margin-top: .3rem; text-transform: uppercase; }
|
||||
.about-img-block {
|
||||
background: linear-gradient(145deg, var(--mid), var(--canopy));
|
||||
border: 1px solid rgba(196,162,101,.15);
|
||||
aspect-ratio: 3/4;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
|
||||
}
|
||||
.about-img-block .ph-icon { opacity: .4; }
|
||||
.about-img-block span { font-style: italic; font-size: .95rem; color: var(--fog); }
|
||||
|
||||
/* ─── GALLERY ─── */
|
||||
#gallery { background: var(--forest); }
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.ph-box {
|
||||
background: var(--mid);
|
||||
border: 1px solid rgba(47,82,48,.5);
|
||||
aspect-ratio: 4/3;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
|
||||
color: var(--moss); font-size: .85rem; letter-spacing: .07em;
|
||||
transition: border-color .25s, background .25s; cursor: default;
|
||||
}
|
||||
.ph-box:hover { border-color: var(--straw); background: var(--leaf); }
|
||||
.ph-icon {
|
||||
width: 40px; height: 40px;
|
||||
}
|
||||
|
||||
/* ─── FACILITIES ─── */
|
||||
#facilities { background: var(--canopy); }
|
||||
.fac-grid {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
|
||||
}
|
||||
.fac-card {
|
||||
background: var(--mid); border: 1px solid rgba(47,82,48,.5);
|
||||
border-radius: 6px; overflow: hidden;
|
||||
transition: transform .25s, box-shadow .25s, border-color .25s;
|
||||
}
|
||||
.fac-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 14px 36px rgba(0,0,0,.5);
|
||||
border-color: rgba(196,162,101,.4);
|
||||
}
|
||||
.fac-photo {
|
||||
background: var(--leaf);
|
||||
aspect-ratio: 4/3;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
|
||||
color: var(--moss); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
border-bottom: 1px solid rgba(47,82,48,.4);
|
||||
}
|
||||
.fac-photo .ph-icon { opacity: .45; }
|
||||
.fac-body { padding: 1.3rem 1.4rem 1.5rem; }
|
||||
.fac-body h3 { font-size: 1rem; color: var(--straw); margin-bottom: .5rem; font-style: italic; }
|
||||
.fac-body p { font-size: .83rem; color: var(--fog); line-height: 1.6; }
|
||||
|
||||
/* ─── PRICING ─── */
|
||||
#pricing { background: var(--forest); }
|
||||
#pricing .inner { text-align: center; }
|
||||
#pricing .rule { margin-left: auto; margin-right: auto; }
|
||||
.price-grid {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem;
|
||||
max-width: 860px; margin: 0 auto;
|
||||
}
|
||||
.pc {
|
||||
background: var(--canopy);
|
||||
border: 1px solid rgba(196,162,101,.22);
|
||||
padding: 2.5rem 1.8rem; position: relative;
|
||||
transition: border-color .25s, transform .25s;
|
||||
}
|
||||
.pc:hover { border-color: rgba(196,162,101,.5); transform: translateY(-4px); }
|
||||
.pc.feat {
|
||||
background: var(--mid);
|
||||
border-color: var(--straw);
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.pc.feat::before {
|
||||
content: 'Популярный';
|
||||
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
|
||||
background: var(--bark); border: 1px solid var(--wood);
|
||||
color: var(--cream); font-size: .65rem; letter-spacing: .14em;
|
||||
text-transform: uppercase; padding: .28rem .9rem; border-radius: 20px;
|
||||
}
|
||||
.pc-period {
|
||||
font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
|
||||
color: var(--straw); margin-bottom: 1.2rem;
|
||||
}
|
||||
.pc-amount {
|
||||
font-size: 2.8rem; color: var(--cream); line-height: 1;
|
||||
font-weight: 700; margin-bottom: .3rem;
|
||||
}
|
||||
.pc-amount sup { font-size: 1.3rem; vertical-align: super; }
|
||||
.pc-unit { font-size: .78rem; color: var(--fog); margin-bottom: 2rem; }
|
||||
.pc-feats { list-style: none; text-align: left; margin-bottom: 2rem; display: flex; flex-direction: column; gap: .55rem; }
|
||||
.pc-feats li { font-size: .83rem; color: var(--fog); padding-left: 1.1rem; position: relative; }
|
||||
.pc-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--straw); font-size: .8rem; }
|
||||
.pc-btn {
|
||||
display: block; width: 100%; padding: .75rem;
|
||||
border: 1px solid var(--wood); background: var(--bark);
|
||||
color: var(--cream); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
cursor: pointer; transition: background .2s;
|
||||
}
|
||||
.pc-btn:hover { background: var(--wood); }
|
||||
.pc.feat .pc-btn { background: var(--wood); }
|
||||
.pc.feat .pc-btn:hover { background: var(--branch); }
|
||||
.price-note { margin-top: 3rem; font-size: .8rem; color: rgba(216,208,188,.55); }
|
||||
|
||||
/* ─── CONTACTS ─── */
|
||||
#contacts { background: var(--canopy); }
|
||||
.contact-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start;
|
||||
}
|
||||
.ci { margin-bottom: 2rem; display: flex; gap: 1rem; align-items: flex-start; }
|
||||
.ci-icon {
|
||||
flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
|
||||
background: var(--mid); border: 1px solid var(--leaf);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.ci-icon svg { width: 17px; height: 17px; fill: var(--straw); }
|
||||
.ci-lbl { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--straw); margin-bottom: .2rem; }
|
||||
.ci-val { font-size: 1rem; color: var(--cream); }
|
||||
.ci-val a { transition: color .2s; }
|
||||
.ci-val a:hover { color: var(--straw); }
|
||||
.map-ph {
|
||||
background: var(--mid); border: 1px solid rgba(47,82,48,.5);
|
||||
border-radius: 6px; aspect-ratio: 4/3;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
|
||||
color: var(--moss); font-size: .85rem; letter-spacing: .06em;
|
||||
}
|
||||
.map-ph svg { width: 52px; height: 52px; opacity: .35; }
|
||||
.map-ph small { font-size: .7rem; color: rgba(200,196,180,.45); letter-spacing: .1em; text-transform: uppercase; }
|
||||
.btn-call {
|
||||
display: inline-block; margin-top: 1.5rem; padding: .9rem 2.6rem;
|
||||
background: var(--bark); border: 1px solid var(--wood); color: var(--cream);
|
||||
font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
|
||||
transition: background .2s;
|
||||
}
|
||||
.btn-call:hover { background: var(--wood); }
|
||||
|
||||
/* ─── FOOTER ─── */
|
||||
footer {
|
||||
background: #090f09; border-top: 1px solid rgba(47,82,48,.2);
|
||||
padding: 2.4rem 3rem;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
flex-wrap: wrap; gap: 1.2rem;
|
||||
}
|
||||
.f-brand { font-style: italic; font-size: 1.2rem; color: var(--straw); }
|
||||
.f-tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin-top: .2rem; }
|
||||
.f-links { display: flex; gap: 1.8rem; }
|
||||
.f-links a { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fog); transition: color .2s; }
|
||||
.f-links a:hover { color: var(--straw); }
|
||||
.f-copy { font-size: .7rem; color: rgba(216,208,188,.3); }
|
||||
|
||||
/* ─── RESPONSIVE ─── */
|
||||
@media (max-width: 960px) {
|
||||
.about-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
|
||||
.about-img-block { aspect-ratio: 16/9; max-width: 520px; }
|
||||
.fac-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.price-grid { grid-template-columns: 1fr; max-width: 360px; }
|
||||
.pc.feat { transform: none; }
|
||||
nav { padding: 0 1.5rem; }
|
||||
.nav-links { display: none; }
|
||||
.nav-cta { display: none; }
|
||||
footer { flex-direction: column; text-align: center; }
|
||||
.f-links { justify-content: center; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.fac-grid { grid-template-columns: 1fr; }
|
||||
.about-stats { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
@media (max-width: 440px) {
|
||||
.gallery-grid { grid-template-columns: 1fr; }
|
||||
.about-stats { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav id="top-nav">
|
||||
<div class="nav-logo">Станция Сосновая</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">Об усадьбе</a></li>
|
||||
<li><a href="#gallery">Галерея</a></li>
|
||||
<li><a href="#facilities">Удобства</a></li>
|
||||
<li><a href="#pricing">Цены</a></li>
|
||||
<li><a href="#contacts">Контакты</a></li>
|
||||
</ul>
|
||||
<a href="#contacts" class="nav-cta">Забронировать</a>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-content">
|
||||
<span class="hero-badge">Переславль-Залесский · Ярославская область</span>
|
||||
<h1>Станция Сосновая</h1>
|
||||
<p class="hero-sub">Усадьба в сосновом бору на берегу Плещеева озера</p>
|
||||
<a href="#pricing" class="btn-hero">Забронировать</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section id="about">
|
||||
<div class="inner">
|
||||
<div class="about-grid">
|
||||
<div class="about-img-block">
|
||||
<svg class="ph-icon" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#3d6b3d" stroke-width="1.4">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||
<circle cx="12" cy="12" r="3.5"/>
|
||||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span>Главное фото усадьбы</span>
|
||||
</div>
|
||||
<div class="about-text">
|
||||
<span class="eyebrow">Об усадьбе</span>
|
||||
<h2>Тишина леса,<br>дыхание воды</h2>
|
||||
<div class="rule"></div>
|
||||
<p>
|
||||
<strong>Станция Сосновая</strong> — уединённое поместье в окружении вековых сосен,
|
||||
в нескольких минутах пешком от берега Плещеева озера.
|
||||
Здесь нет городского шума — только треск костра, пение птиц и запах смолы.
|
||||
</p>
|
||||
<p>
|
||||
Усадьба подходит для семейного отдыха, дружеских выездов и тихих выходных вдали от суеты.
|
||||
Природа Переславля известна особой атмосферой: чистый воздух,
|
||||
нетронутый лес, исторические окрестности.
|
||||
</p>
|
||||
<p>
|
||||
Мы позаботились о том, чтобы вам было <strong>уютно в любое время года</strong> —
|
||||
весной, летом, осенью и зимой усадьба живёт своей особенной красотой.
|
||||
</p>
|
||||
<div class="about-stats">
|
||||
<div class="stat">
|
||||
<div class="stat-n">25</div>
|
||||
<div class="stat-l">соток леса</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-n">5</div>
|
||||
<div class="stat-l">мин до озера</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-n">140</div>
|
||||
<div class="stat-l">км от Москвы</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GALLERY -->
|
||||
<section id="gallery">
|
||||
<div class="inner">
|
||||
<span class="eyebrow">Фотогалерея</span>
|
||||
<h2>Посмотрите сами</h2>
|
||||
<div class="rule"></div>
|
||||
<div class="gallery-grid">
|
||||
|
||||
<div class="ph-box">
|
||||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||
<circle cx="12" cy="12" r="3.5"/>
|
||||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Фото 1
|
||||
</div>
|
||||
|
||||
<div class="ph-box">
|
||||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||
<circle cx="12" cy="12" r="3.5"/>
|
||||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Фото 2
|
||||
</div>
|
||||
|
||||
<div class="ph-box">
|
||||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||
<circle cx="12" cy="12" r="3.5"/>
|
||||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Фото 3
|
||||
</div>
|
||||
|
||||
<div class="ph-box">
|
||||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||
<circle cx="12" cy="12" r="3.5"/>
|
||||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Фото 4
|
||||
</div>
|
||||
|
||||
<div class="ph-box">
|
||||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||
<circle cx="12" cy="12" r="3.5"/>
|
||||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Фото 5
|
||||
</div>
|
||||
|
||||
<div class="ph-box">
|
||||
<svg class="ph-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||
<circle cx="12" cy="12" r="3.5"/>
|
||||
<path d="M3 9h2M19 9h2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Фото 6
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FACILITIES -->
|
||||
<section id="facilities">
|
||||
<div class="inner">
|
||||
<span class="eyebrow">Инфраструктура</span>
|
||||
<h2>Всё для настоящего отдыха</h2>
|
||||
<div class="rule"></div>
|
||||
<div class="fac-grid">
|
||||
|
||||
<div class="fac-card">
|
||||
<div class="fac-photo">
|
||||
<svg class="ph-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<path d="M3 17V9l9-6 9 6v8M9 17v-5h6v5"/>
|
||||
<path d="M12 3v3"/>
|
||||
</svg>
|
||||
Фото объекта
|
||||
</div>
|
||||
<div class="fac-body">
|
||||
<h3>Беседка</h3>
|
||||
<p>Просторная деревянная беседка на 14 человек у кромки леса. Идеально для долгих вечеров под звуки природы.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fac-card">
|
||||
<div class="fac-photo">
|
||||
<svg class="ph-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<rect x="5" y="11" width="14" height="6" rx="1"/>
|
||||
<path d="M8 11V8a4 4 0 0 1 8 0v3"/>
|
||||
<path d="M12 17v3M9 20h6"/>
|
||||
</svg>
|
||||
Фото объекта
|
||||
</div>
|
||||
<div class="fac-body">
|
||||
<h3>Барбекю</h3>
|
||||
<p>Мангальная зона с кирпичным барбекю, рабочим столом и разделочной поверхностью. Дрова и принадлежности — в наличии.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fac-card">
|
||||
<div class="fac-photo">
|
||||
<svg class="ph-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<circle cx="9" cy="19" r="2"/><circle cx="18" cy="19" r="2"/>
|
||||
<path d="M1 1h4l2.68 12.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
|
||||
</svg>
|
||||
Фото объекта
|
||||
</div>
|
||||
<div class="fac-body">
|
||||
<h3>Детская</h3>
|
||||
<p>Площадка с горкой, качелями и песочницей. Мягкое безопасное покрытие, хорошо видна из беседки.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fac-card">
|
||||
<div class="fac-photo">
|
||||
<svg class="ph-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<rect x="1" y="3" width="22" height="16" rx="2"/>
|
||||
<path d="M1 10h22"/>
|
||||
<path d="M7 3v7M17 3v7"/>
|
||||
</svg>
|
||||
Фото объекта
|
||||
</div>
|
||||
<div class="fac-body">
|
||||
<h3>Парковка</h3>
|
||||
<p>Охраняемая стоянка на 6 автомобилей с удобным въездом и ночным освещением.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRICING -->
|
||||
<section id="pricing">
|
||||
<div class="inner">
|
||||
<span class="eyebrow">Стоимость аренды</span>
|
||||
<h2>Тарифы</h2>
|
||||
<div class="rule"></div>
|
||||
<div class="price-grid">
|
||||
|
||||
<div class="pc">
|
||||
<p class="pc-period">Будний день</p>
|
||||
<div class="pc-amount"><sup>₽</sup>3 500</div>
|
||||
<p class="pc-unit">за сутки · Пн–Чт</p>
|
||||
<ul class="pc-feats">
|
||||
<li>Весь участок в аренду</li>
|
||||
<li>Беседка включена</li>
|
||||
<li>Парковка включена</li>
|
||||
<li>Дрова — 500 ₽/вязанка</li>
|
||||
</ul>
|
||||
<a href="#contacts" class="pc-btn">Забронировать</a>
|
||||
</div>
|
||||
|
||||
<div class="pc feat">
|
||||
<p class="pc-period">Выходной день</p>
|
||||
<div class="pc-amount"><sup>₽</sup>5 500</div>
|
||||
<p class="pc-unit">за сутки · Пт–Вс</p>
|
||||
<ul class="pc-feats">
|
||||
<li>Весь участок в аренду</li>
|
||||
<li>Беседка включена</li>
|
||||
<li>Парковка включена</li>
|
||||
<li>1 вязанка дров в подарок</li>
|
||||
<li>Приоритетная поддержка</li>
|
||||
</ul>
|
||||
<a href="#contacts" class="pc-btn">Забронировать</a>
|
||||
</div>
|
||||
|
||||
<div class="pc">
|
||||
<p class="pc-period">Неделя</p>
|
||||
<div class="pc-amount"><sup>₽</sup>28 000</div>
|
||||
<p class="pc-unit">за 7 суток · скидка ~28%</p>
|
||||
<ul class="pc-feats">
|
||||
<li>Весь участок в аренду</li>
|
||||
<li>Беседка включена</li>
|
||||
<li>Парковка включена</li>
|
||||
<li>5 вязанок дров в подарок</li>
|
||||
<li>Уборка включена</li>
|
||||
</ul>
|
||||
<a href="#contacts" class="pc-btn">Забронировать</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="price-note">Минимальный срок — 1 сутки. Залог 2 000 ₽ возвращается при выезде. Оплата наличными или переводом.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACTS -->
|
||||
<section id="contacts">
|
||||
<div class="inner">
|
||||
<span class="eyebrow">Контакты</span>
|
||||
<h2>Свяжитесь с нами</h2>
|
||||
<div class="rule"></div>
|
||||
<div class="contact-grid">
|
||||
|
||||
<div>
|
||||
<div class="ci">
|
||||
<div class="ci-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ci-lbl">Телефон / WhatsApp</div>
|
||||
<div class="ci-val"><a href="tel:+74951234567">+7 (495) XXX-XX-XX</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ci">
|
||||
<div class="ci-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ci-lbl">Электронная почта</div>
|
||||
<div class="ci-val"><a href="mailto:info@sosnovaya.ru">info@sosnovaya.ru</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ci">
|
||||
<div class="ci-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ci-lbl">Адрес</div>
|
||||
<div class="ci-val">Ярославская обл., Переславский р-н,<br>д. Сосновка, ул. Лесная, 4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ci">
|
||||
<div class="ci-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ci-lbl">Режим работы</div>
|
||||
<div class="ci-val">Ежедневно, 9:00 — 21:00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="tel:+74951234567" class="btn-call">Позвонить сейчас</a>
|
||||
</div>
|
||||
|
||||
<div class="map-ph">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#3d6b3d" stroke-width="1.2">
|
||||
<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/>
|
||||
<path d="M9 4v13M15 7v13"/>
|
||||
</svg>
|
||||
Карта · Переславль-Залесский
|
||||
<small>Место для встраивания Яндекс.Карт</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div>
|
||||
<div class="f-brand">Станция Сосновая</div>
|
||||
<div class="f-tag">Усадьба в лесу · Переславль-Залесский</div>
|
||||
</div>
|
||||
<div class="f-links">
|
||||
<a href="#about">Об усадьбе</a>
|
||||
<a href="#gallery">Галерея</a>
|
||||
<a href="#facilities">Удобства</a>
|
||||
<a href="#pricing">Цены</a>
|
||||
<a href="#contacts">Контакты</a>
|
||||
</div>
|
||||
<div class="f-copy">© 2026 Станция Сосновая. Все права защищены.</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById('top-nav');
|
||||
window.addEventListener('scroll', () => {
|
||||
nav.style.background = window.scrollY > 50
|
||||
? 'rgba(10,16,10,.97)'
|
||||
: 'rgba(10,16,10,.9)';
|
||||
}, { passive: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
+333
@@ -0,0 +1,333 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Портфолио</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0f0f13;
|
||||
--surface: #17171f;
|
||||
--surface-hover: #1e1e28;
|
||||
--text: #e8e8f0;
|
||||
--muted: #7a7a8e;
|
||||
--accent-1: #7c6af7;
|
||||
--accent-2: #4f9eff;
|
||||
--accent-3: #f75c8a;
|
||||
--accent-4: #2cba74;
|
||||
--accent-5: #46d9a8;
|
||||
--accent-6: #e8a24a;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
min-height: 100vh;
|
||||
padding: 0 1rem 4rem;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 4rem 1rem 3rem;
|
||||
}
|
||||
|
||||
header .eyebrow {
|
||||
display: inline-block;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: clamp(2.2rem, 6vw, 4rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
background: linear-gradient(135deg, #fff 30%, #a89eff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin-top: 1rem;
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
max-width: 480px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ── Grid ── */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ── Card ── */
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--surface);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 16px;
|
||||
padding: 1.5px;
|
||||
background: var(--c-accent);
|
||||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
background: var(--surface-hover);
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--c-accent);
|
||||
}
|
||||
|
||||
.card:hover::before { opacity: 1; }
|
||||
|
||||
.card-header {
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
background: color-mix(in srgb, var(--c-accent) 18%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--c-accent);
|
||||
background: color-mix(in srgb, var(--c-accent) 12%, transparent);
|
||||
padding: 0.25em 0.7em;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1rem 1.5rem 1.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.card-footer .arrow {
|
||||
color: var(--c-accent);
|
||||
font-size: 1rem;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover .arrow { transform: translateX(4px); }
|
||||
|
||||
/* ── Section label ── */
|
||||
.section-label {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 1rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.section-label::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
|
||||
.section-wrap { margin-top: 2.5rem; }
|
||||
|
||||
/* ── Footer ── */
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<span class="eyebrow">Web Development</span>
|
||||
<h1>Портфолио</h1>
|
||||
<p>6 лендинговых страниц — резюме и аренда недвижимости</p>
|
||||
</header>
|
||||
|
||||
<!-- ── Resume section ── -->
|
||||
<div class="section-wrap">
|
||||
<div class="section-label">Резюме</div>
|
||||
<div class="grid">
|
||||
|
||||
<a class="card" href="minimalist/" style="--c-accent: var(--accent-1)">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">✦</div>
|
||||
<span class="card-tag">Резюме</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Минималистичное резюме</div>
|
||||
<div class="card-desc">Чистая типографика, лаконичный макет, максимум читаемости без лишних украшений.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>minimalist/</span>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="modern-dark/" style="--c-accent: var(--accent-2)">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">◈</div>
|
||||
<span class="card-tag">Резюме</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Современный тёмный</div>
|
||||
<div class="card-desc">Градиенты, glassmorphism, тёмная тема — современный tech-стиль для IT-специалистов.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>modern-dark/</span>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="creative/" style="--c-accent: var(--accent-3)">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">✸</div>
|
||||
<span class="card-tag">Резюме</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Креативное резюме</div>
|
||||
<div class="card-desc">Смелые акценты, нестандартная сетка, яркие детали — для творческих специальностей.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>creative/</span>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Property section ── -->
|
||||
<div class="section-wrap">
|
||||
<div class="section-label">Аренда недвижимости</div>
|
||||
<div class="grid">
|
||||
|
||||
<a class="card" href="dark-forest/" style="--c-accent: var(--accent-4)">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🌲</div>
|
||||
<span class="card-tag">Недвижимость</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Тёмный лес</div>
|
||||
<div class="card-desc">Тёмная атмосферная тема с лесными мотивами — аренда загородной недвижимости.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>dark-forest/</span>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="eco-fresh/" style="--c-accent: var(--accent-5)">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🌿</div>
|
||||
<span class="card-tag">Недвижимость</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Эко свежесть</div>
|
||||
<div class="card-desc">Светлая эко-тема с зелёными акцентами, свежесть природы и чистый воздух.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>eco-fresh/</span>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="rustic-wood/" style="--c-accent: var(--accent-6)">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🪵</div>
|
||||
<span class="card-tag">Недвижимость</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Рустик Вуд</div>
|
||||
<div class="card-desc">Тёплая деревянная эстетика, уют и природные текстуры — аренда рустикального жилья.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>rustic-wood/</span>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>6 лендингов · Emil Shanaty · 2026</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,459 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Alex Morgan — Product Designer & Developer</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--ink: #1a1a1a;
|
||||
--ink-soft: #555;
|
||||
--ink-faint: #999;
|
||||
--paper: #fafafa;
|
||||
--paper-warm: #f4f2ef;
|
||||
--rule: #e4e2de;
|
||||
--accent: #2d4a22;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; font-size: 16px; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ── Nav ── */
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 1.25rem 3rem;
|
||||
background: rgba(250,250,250,0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
transition: box-shadow .3s;
|
||||
}
|
||||
nav.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.06); }
|
||||
.nav-logo {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: .02em;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||||
.nav-links a {
|
||||
font-size: .8125rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
transition: color .2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--ink); }
|
||||
|
||||
/* ── Layout ── */
|
||||
.container { max-width: 780px; margin: 0 auto; padding: 0 2rem; }
|
||||
|
||||
section { padding: 6rem 0; }
|
||||
section + section { border-top: 1px solid var(--rule); }
|
||||
|
||||
/* ── Hero ── */
|
||||
#hero {
|
||||
min-height: 100vh;
|
||||
display: flex; align-items: center;
|
||||
padding-top: 80px;
|
||||
}
|
||||
.hero-eyebrow {
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.hero-name {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(3rem, 6vw, 5.5rem);
|
||||
line-height: 1.05;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.02em;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.hero-name em { font-style: italic; font-weight: 400; }
|
||||
.hero-tagline {
|
||||
font-size: 1.125rem;
|
||||
color: var(--ink-soft);
|
||||
max-width: 520px;
|
||||
margin-bottom: 2.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
.hero-meta {
|
||||
display: flex; gap: 2.5rem;
|
||||
font-size: .8125rem;
|
||||
color: var(--ink-faint);
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
.hero-meta span { display: flex; align-items: center; gap: .4rem; }
|
||||
|
||||
/* ── Buttons ── */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .75rem 1.75rem;
|
||||
font-size: .8125rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
border: 1.5px solid var(--ink);
|
||||
color: var(--ink);
|
||||
transition: background .2s, color .2s;
|
||||
}
|
||||
.btn:hover { background: var(--ink); color: var(--paper); }
|
||||
.btn-ghost { background: transparent; }
|
||||
|
||||
.hero-actions { display: flex; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; }
|
||||
|
||||
/* ── Section headings ── */
|
||||
.section-label {
|
||||
font-size: .7rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-faint);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.section-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: -.01em;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
/* ── About ── */
|
||||
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
|
||||
.about-text { font-size: 1.0625rem; color: var(--ink-soft); font-weight: 300; }
|
||||
.about-text p + p { margin-top: 1.25em; }
|
||||
.about-stats { display: flex; flex-direction: column; gap: 1.5rem; }
|
||||
.stat-row { display: flex; flex-direction: column; gap: .2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
|
||||
.stat-row:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.stat-number { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; line-height: 1; }
|
||||
.stat-label { font-size: .8125rem; color: var(--ink-faint); letter-spacing: .06em; }
|
||||
|
||||
/* ── Experience ── */
|
||||
.experience-list { display: flex; flex-direction: column; gap: 0; }
|
||||
.exp-item {
|
||||
display: grid; grid-template-columns: 140px 1fr;
|
||||
gap: 2.5rem; padding: 2rem 0;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
opacity: 0; transform: translateY(16px);
|
||||
transition: opacity .5s, transform .5s;
|
||||
}
|
||||
.exp-item.visible { opacity: 1; transform: none; }
|
||||
.exp-item:first-child { border-top: 1px solid var(--rule); }
|
||||
.exp-period {
|
||||
font-size: .8125rem;
|
||||
color: var(--ink-faint);
|
||||
padding-top: .2rem;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
.exp-company {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.exp-role {
|
||||
font-size: .875rem;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
margin-bottom: .75rem;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
.exp-desc { font-size: .9375rem; color: var(--ink-soft); font-weight: 300; }
|
||||
|
||||
/* ── Skills ── */
|
||||
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
|
||||
.skill-category-name {
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-faint);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.skill-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
|
||||
.skill-list li {
|
||||
font-size: .9375rem;
|
||||
color: var(--ink-soft);
|
||||
font-weight: 300;
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
.skill-list li::before {
|
||||
content: '—';
|
||||
position: absolute; left: 0;
|
||||
color: var(--rule);
|
||||
}
|
||||
|
||||
/* ── Contact ── */
|
||||
.contact-inner { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; }
|
||||
.contact-heading {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
max-width: 500px;
|
||||
}
|
||||
.contact-heading em { font-style: italic; font-weight: 400; }
|
||||
.contact-links { display: flex; flex-direction: column; gap: .75rem; }
|
||||
.contact-link {
|
||||
display: flex; align-items: center; gap: .75rem;
|
||||
font-size: .9375rem;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
transition: color .2s;
|
||||
}
|
||||
.contact-link:hover { color: var(--accent); }
|
||||
.contact-link svg { width: 16px; height: 16px; opacity: .4; }
|
||||
|
||||
/* ── Footer ── */
|
||||
footer {
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
font-size: .75rem;
|
||||
color: var(--ink-faint);
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 700px) {
|
||||
nav { padding: 1rem 1.25rem; }
|
||||
.nav-links { gap: 1.25rem; }
|
||||
.about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
|
||||
.skills-grid { grid-template-columns: 1fr 1fr; }
|
||||
.exp-item { grid-template-columns: 1fr; gap: .5rem; }
|
||||
.contact-inner { flex-direction: column; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.skills-grid { grid-template-columns: 1fr; }
|
||||
nav { padding: 1rem; }
|
||||
.nav-links li:nth-child(n+4) { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="nav">
|
||||
<a href="#hero" class="nav-logo">Alex Morgan</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#experience">Work</a></li>
|
||||
<li><a href="#skills">Skills</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section id="hero">
|
||||
<div class="container">
|
||||
<p class="hero-eyebrow">Product Designer · Full Stack Developer</p>
|
||||
<h1 class="hero-name">Alex<br><em>Morgan</em></h1>
|
||||
<p class="hero-tagline">I craft digital products that sit at the intersection of thoughtful design and robust engineering — from zero to ship.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#experience" class="btn">View My Work</a>
|
||||
<a href="#contact" class="btn btn-ghost">Get in Touch</a>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
San Francisco, CA
|
||||
</span>
|
||||
<span>Open to roles</span>
|
||||
<span>alex@alexmorgan.io</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<p class="section-label">About Me</p>
|
||||
<h2 class="section-title">Designing systems,<br>not just screens</h2>
|
||||
<div class="about-grid">
|
||||
<div class="about-text">
|
||||
<p>I'm a hybrid designer-developer with eight years of experience building products used by millions. I started as a visual designer, fell in love with code, and never looked back.</p>
|
||||
<p>My work spans design systems, developer tools, and consumer products. I believe the best digital experiences come from teams where design and engineering speak the same language — so I learned both.</p>
|
||||
<p>Previously at Stripe, Figma, and Vercel. Now exploring what's next.</p>
|
||||
</div>
|
||||
<div class="about-stats">
|
||||
<div class="stat-row">
|
||||
<span class="stat-number">8+</span>
|
||||
<span class="stat-label">Years of experience</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-number">40M</span>
|
||||
<span class="stat-label">Users reached</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-number">3</span>
|
||||
<span class="stat-label">YC-backed startups</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-number">12</span>
|
||||
<span class="stat-label">Design systems shipped</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Experience -->
|
||||
<section id="experience">
|
||||
<div class="container">
|
||||
<p class="section-label">Experience</p>
|
||||
<h2 class="section-title">Where I've worked</h2>
|
||||
<div class="experience-list">
|
||||
<div class="exp-item">
|
||||
<span class="exp-period">2022 — Present</span>
|
||||
<div>
|
||||
<div class="exp-company">Stripe</div>
|
||||
<div class="exp-role">Senior Product Designer</div>
|
||||
<p class="exp-desc">Led design for Stripe's developer dashboard, serving 4M+ developers. Rebuilt the onboarding flow, reducing time-to-first-payment from 3 days to 4 hours. Co-created the internal design system used across 200+ product surfaces.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<span class="exp-period">2020 — 2022</span>
|
||||
<div>
|
||||
<div class="exp-company">Figma</div>
|
||||
<div class="exp-role">Design Engineer</div>
|
||||
<p class="exp-desc">Bridged the gap between the design and engineering teams as a founding member of the Design Infrastructure team. Shipped FigJam's collaborative widgets system and contributed core interaction patterns still in use today.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<span class="exp-period">2018 — 2020</span>
|
||||
<div>
|
||||
<div class="exp-company">Vercel</div>
|
||||
<div class="exp-role">Frontend Engineer & Designer</div>
|
||||
<p class="exp-desc">Early employee (#14) responsible for the vercel.com marketing site and the initial version of the deployment UI. Helped grow the platform from 50K to 500K users through iterative product improvements.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<span class="exp-period">2016 — 2018</span>
|
||||
<div>
|
||||
<div class="exp-company">Linear</div>
|
||||
<div class="exp-role">Product Designer</div>
|
||||
<p class="exp-desc">Joined as the first designer. Shaped the core product experience — issue tracking, project views, and the command palette that became Linear's signature interaction — from concept through launch.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills -->
|
||||
<section id="skills">
|
||||
<div class="container">
|
||||
<p class="section-label">Capabilities</p>
|
||||
<h2 class="section-title">What I bring</h2>
|
||||
<div class="skills-grid">
|
||||
<div>
|
||||
<p class="skill-category-name">Design</p>
|
||||
<ul class="skill-list">
|
||||
<li>Product Design</li>
|
||||
<li>Design Systems</li>
|
||||
<li>User Research</li>
|
||||
<li>Interaction Design</li>
|
||||
<li>Figma / Sketch</li>
|
||||
<li>Prototyping</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="skill-category-name">Engineering</p>
|
||||
<ul class="skill-list">
|
||||
<li>React / Next.js</li>
|
||||
<li>TypeScript</li>
|
||||
<li>Node.js</li>
|
||||
<li>GraphQL</li>
|
||||
<li>Postgres / Prisma</li>
|
||||
<li>Tailwind CSS</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="skill-category-name">Leadership</p>
|
||||
<ul class="skill-list">
|
||||
<li>Design Direction</li>
|
||||
<li>Team Mentoring</li>
|
||||
<li>Roadmap Planning</li>
|
||||
<li>Stakeholder Comms</li>
|
||||
<li>Cross-functional Work</li>
|
||||
<li>Design Critique</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact -->
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<div class="contact-inner">
|
||||
<h2 class="contact-heading">Let's build<br>something <em>great</em><br>together.</h2>
|
||||
<div class="contact-links">
|
||||
<a href="mailto:alex@alexmorgan.io" class="contact-link">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
alex@alexmorgan.io
|
||||
</a>
|
||||
<a href="#" class="contact-link">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
|
||||
github.com/alexmorgan
|
||||
</a>
|
||||
<a href="#" class="contact-link">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
|
||||
linkedin.com/in/alexmorgan
|
||||
</a>
|
||||
<a href="#" class="contact-link">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||
alexmorgan.io
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container" style="display:flex;justify-content:space-between;width:100%;">
|
||||
<span>© 2026 Alex Morgan</span>
|
||||
<span>San Francisco · Open to remote</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Nav scroll state
|
||||
const nav = document.getElementById('nav');
|
||||
window.addEventListener('scroll', () => {
|
||||
nav.classList.toggle('scrolled', window.scrollY > 40);
|
||||
});
|
||||
|
||||
// Intersection observer for exp items
|
||||
const items = document.querySelectorAll('.exp-item');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry, i) => {
|
||||
if (entry.isIntersecting) {
|
||||
setTimeout(() => entry.target.classList.add('visible'), i * 80);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
items.forEach(item => observer.observe(item));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,411 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alex Morgan — Developer & Designer</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{
|
||||
--bg:#0a0a0f;
|
||||
--bg-card:rgba(255,255,255,0.03);
|
||||
--bg-glass:rgba(255,255,255,0.05);
|
||||
--text:#f0f0f5;
|
||||
--text-dim:#8a8a9a;
|
||||
--accent:#00d4aa;
|
||||
--accent-2:#6366f1;
|
||||
--border:rgba(255,255,255,0.08);
|
||||
}
|
||||
html{scroll-behavior:smooth}
|
||||
body{
|
||||
font-family:'Outfit',sans-serif;
|
||||
background:var(--bg);
|
||||
color:var(--text);
|
||||
line-height:1.6;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
/* Ambient glow */
|
||||
.glow{
|
||||
position:fixed;
|
||||
width:600px;height:600px;
|
||||
border-radius:50%;
|
||||
filter:blur(120px);
|
||||
opacity:.15;
|
||||
pointer-events:none;
|
||||
z-index:0;
|
||||
}
|
||||
.glow-1{top:-200px;left:-200px;background:var(--accent)}
|
||||
.glow-2{bottom:-200px;right:-200px;background:var(--accent-2)}
|
||||
|
||||
nav{
|
||||
position:fixed;top:0;left:0;right:0;z-index:100;
|
||||
display:flex;justify-content:space-between;align-items:center;
|
||||
padding:1.5rem 3rem;
|
||||
background:rgba(10,10,15,0.8);
|
||||
backdrop-filter:blur(20px);
|
||||
border-bottom:1px solid var(--border);
|
||||
}
|
||||
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:-0.02em}
|
||||
.logo span{color:var(--accent)}
|
||||
.nav-links{display:flex;gap:2.5rem;list-style:none}
|
||||
.nav-links a{
|
||||
font-size:0.875rem;font-weight:500;
|
||||
color:var(--text-dim);text-decoration:none;
|
||||
transition:color .3s;
|
||||
}
|
||||
.nav-links a:hover{color:var(--text)}
|
||||
|
||||
.container{max-width:1100px;margin:0 auto;padding:0 2rem;position:relative;z-index:1}
|
||||
|
||||
/* Hero */
|
||||
#hero{
|
||||
min-height:100vh;
|
||||
display:flex;align-items:center;
|
||||
padding-top:100px;
|
||||
position:relative;
|
||||
}
|
||||
.hero-badge{
|
||||
display:inline-flex;align-items:center;gap:0.5rem;
|
||||
padding:0.4rem 1rem;
|
||||
background:var(--bg-glass);
|
||||
border:1px solid var(--border);
|
||||
border-radius:100px;
|
||||
font-size:0.8rem;color:var(--accent);
|
||||
margin-bottom:2rem;
|
||||
}
|
||||
.hero-badge::before{
|
||||
content:'';width:6px;height:6px;
|
||||
background:var(--accent);border-radius:50%;
|
||||
animation:pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
||||
.hero-title{
|
||||
font-family:'Space Grotesk',sans-serif;
|
||||
font-size:clamp(3rem,7vw,6rem);
|
||||
font-weight:700;line-height:1.05;
|
||||
letter-spacing:-0.03em;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
.hero-title .gradient{
|
||||
background:linear-gradient(135deg,var(--accent),var(--accent-2));
|
||||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
||||
background-clip:text;
|
||||
}
|
||||
.hero-sub{
|
||||
font-size:1.25rem;color:var(--text-dim);
|
||||
max-width:560px;margin-bottom:2.5rem;
|
||||
font-weight:300;
|
||||
}
|
||||
.hero-stats{
|
||||
display:flex;gap:3rem;margin-bottom:3rem;
|
||||
}
|
||||
.hero-stat{display:flex;flex-direction:column;gap:0.25rem}
|
||||
.hero-stat-num{
|
||||
font-family:'Space Grotesk',sans-serif;
|
||||
font-size:2rem;font-weight:700;color:var(--accent);
|
||||
}
|
||||
.hero-stat-label{font-size:0.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.1em}
|
||||
|
||||
.btn{
|
||||
display:inline-flex;align-items:center;gap:0.5rem;
|
||||
padding:0.9rem 2rem;
|
||||
font-size:0.9rem;font-weight:600;
|
||||
text-decoration:none;border-radius:8px;
|
||||
transition:transform .2s,box-shadow .2s;
|
||||
}
|
||||
.btn:hover{transform:translateY(-2px)}
|
||||
.btn-primary{
|
||||
background:linear-gradient(135deg,var(--accent),var(--accent-2));
|
||||
color:#000;
|
||||
}
|
||||
.btn-ghost{
|
||||
background:var(--bg-glass);
|
||||
color:var(--text);
|
||||
border:1px solid var(--border);
|
||||
}
|
||||
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
|
||||
|
||||
/* Sections */
|
||||
section{padding:6rem 0}
|
||||
.section-header{margin-bottom:3rem}
|
||||
.section-tag{
|
||||
font-size:0.75rem;font-weight:600;
|
||||
text-transform:uppercase;letter-spacing:0.15em;
|
||||
color:var(--accent);margin-bottom:0.75rem;
|
||||
}
|
||||
.section-title{
|
||||
font-family:'Space Grotesk',sans-serif;
|
||||
font-size:clamp(2rem,4vw,3rem);
|
||||
font-weight:700;letter-spacing:-0.02em;
|
||||
}
|
||||
|
||||
/* About */
|
||||
#about .about-grid{
|
||||
display:grid;grid-template-columns:1fr 1fr;gap:3rem;
|
||||
}
|
||||
.about-text{font-size:1.1rem;color:var(--text-dim);font-weight:300;line-height:1.8}
|
||||
.about-card{
|
||||
background:var(--bg-card);
|
||||
border:1px solid var(--border);
|
||||
border-radius:16px;
|
||||
padding:2rem;
|
||||
}
|
||||
.about-card h4{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;margin-bottom:1rem}
|
||||
.about-card p{font-size:0.95rem;color:var(--text-dim)}
|
||||
|
||||
/* Experience timeline */
|
||||
.timeline{position:relative;padding-left:2rem}
|
||||
.timeline::before{
|
||||
content:'';position:absolute;left:6px;top:0;bottom:0;
|
||||
width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent-2));
|
||||
border-radius:2px;
|
||||
}
|
||||
.timeline-item{position:relative;margin-bottom:2.5rem;padding-left:2rem}
|
||||
.timeline-item::before{
|
||||
content:'';position:absolute;left:-1.65rem;top:0.4rem;
|
||||
width:12px;height:12px;border-radius:50%;
|
||||
background:var(--accent);border:3px solid var(--bg);
|
||||
box-shadow:0 0 0 3px var(--accent);
|
||||
}
|
||||
.timeline-period{
|
||||
font-size:0.8rem;color:var(--accent);
|
||||
font-weight:600;margin-bottom:0.3rem;
|
||||
}
|
||||
.timeline-role{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:0.2rem}
|
||||
.timeline-company{font-size:0.95rem;color:var(--text-dim);margin-bottom:0.5rem}
|
||||
.timeline-desc{font-size:0.9rem;color:var(--text-dim);line-height:1.6}
|
||||
|
||||
/* Skills */
|
||||
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}
|
||||
.skill-card{
|
||||
background:var(--bg-card);
|
||||
border:1px solid var(--border);
|
||||
border-radius:12px;
|
||||
padding:1.5rem;
|
||||
transition:border-color .3s;
|
||||
}
|
||||
.skill-card:hover{border-color:var(--accent)}
|
||||
.skill-card h4{font-size:0.9rem;font-weight:600;margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim)}
|
||||
.skill-tags{display:flex;flex-wrap:wrap;gap:0.5rem}
|
||||
.skill-tag{
|
||||
padding:0.35rem 0.8rem;
|
||||
background:var(--bg-glass);
|
||||
border:1px solid var(--border);
|
||||
border-radius:6px;
|
||||
font-size:0.82rem;color:var(--text-dim);
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
#contact .contact-card{
|
||||
background:linear-gradient(135deg,rgba(0,212,170,0.08),rgba(99,102,241,0.08));
|
||||
border:1px solid var(--border);
|
||||
border-radius:20px;
|
||||
padding:3rem;
|
||||
text-align:center;
|
||||
}
|
||||
.contact-card h2{
|
||||
font-family:'Space Grotesk',sans-serif;
|
||||
font-size:clamp(1.8rem,4vw,2.8rem);
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
.contact-card p{color:var(--text-dim);margin-bottom:2rem;font-size:1.1rem}
|
||||
.contact-links{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
|
||||
.contact-link{
|
||||
display:flex;align-items:center;gap:0.5rem;
|
||||
padding:0.75rem 1.5rem;
|
||||
background:var(--bg-glass);
|
||||
border:1px solid var(--border);
|
||||
border-radius:8px;
|
||||
color:var(--text);text-decoration:none;
|
||||
font-size:0.9rem;
|
||||
transition:border-color .3s,color .3s;
|
||||
}
|
||||
.contact-link:hover{border-color:var(--accent);color:var(--accent)}
|
||||
|
||||
footer{
|
||||
padding:2rem 0;border-top:1px solid var(--border);
|
||||
text-align:center;font-size:0.8rem;color:var(--text-dim);
|
||||
}
|
||||
|
||||
@media(max-width:768px){
|
||||
nav{padding:1rem 1.25rem}
|
||||
.nav-links{gap:1.25rem}
|
||||
.nav-links a{font-size:0.8rem}
|
||||
#about .about-grid{grid-template-columns:1fr}
|
||||
.hero-stats{gap:1.5rem}
|
||||
.hero-stat-num{font-size:1.5rem}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="glow glow-1"></div>
|
||||
<div class="glow glow-2"></div>
|
||||
|
||||
<nav>
|
||||
<div class="logo">Alex<span>.</span></div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#experience">Experience</a></li>
|
||||
<li><a href="#skills">Skills</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="hero">
|
||||
<div class="container">
|
||||
<div class="hero-badge">Open to new opportunities</div>
|
||||
<h1 class="hero-title">Alex<br><span class="gradient">Morgan</span></h1>
|
||||
<p class="hero-sub">Full-stack developer and product designer building performant, accessible, and beautiful digital experiences.</p>
|
||||
<div class="hero-stats">
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-num">8+</span>
|
||||
<span class="hero-stat-label">Years</span>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-num">50+</span>
|
||||
<span class="hero-stat-label">Projects</span>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-num">40M</span>
|
||||
<span class="hero-stat-label">Users</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a href="#experience" class="btn btn-primary">View Experience</a>
|
||||
<a href="#contact" class="btn btn-ghost">Get in Touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<p class="section-tag">About</p>
|
||||
<h2 class="section-title">Bridging design & engineering</h2>
|
||||
</div>
|
||||
<div class="about-grid">
|
||||
<p class="about-text">
|
||||
I started as a frontend engineer, but my obsession with detail pulled me into design. Today I work across the full stack — from pixel-perfect UI to scalable backend architecture. I've shipped products at Stripe, Figma, and Vercel, and I'm always chasing the next challenging problem.
|
||||
</p>
|
||||
<div class="about-card">
|
||||
<h4>Currently</h4>
|
||||
<p>Senior Product Designer at Stripe, focusing on developer experience and design systems. Living in San Francisco, open to remote.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="experience">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<p class="section-tag">Experience</p>
|
||||
<h2 class="section-title">Career journey</h2>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<p class="timeline-period">2022 — Present</p>
|
||||
<p class="timeline-role">Senior Product Designer</p>
|
||||
<p class="timeline-company">Stripe</p>
|
||||
<p class="timeline-desc">Leading design for developer dashboard. Reduced onboarding time from 3 days to 4 hours. Built internal design system adopted by 200+ surfaces.</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<p class="timeline-period">2020 — 2022</p>
|
||||
<p class="timeline-role">Design Engineer</p>
|
||||
<p class="timeline-company">Figma</p>
|
||||
<p class="timeline-desc">Founding member of Design Infrastructure team. Shipped FigJam widgets system and core interaction patterns still in use today.</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<p class="timeline-period">2018 — 2020</p>
|
||||
<p class="timeline-role">Frontend Engineer & Designer</p>
|
||||
<p class="timeline-company">Vercel</p>
|
||||
<p class="timeline-desc">Early employee (#14). Built vercel.com and deployment UI. Grew platform from 50K to 500K users through rapid iteration.</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<p class="timeline-period">2016 — 2018</p>
|
||||
<p class="timeline-role">Product Designer</p>
|
||||
<p class="timeline-company">Linear</p>
|
||||
<p class="timeline-desc">First designer. Shaped issue tracking, project views, and the command palette that became Linear's signature interaction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="skills">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<p class="section-tag">Skills</p>
|
||||
<h2 class="section-title">Tech stack</h2>
|
||||
</div>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-card">
|
||||
<h4>Frontend</h4>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">React</span>
|
||||
<span class="skill-tag">Next.js</span>
|
||||
<span class="skill-tag">TypeScript</span>
|
||||
<span class="skill-tag">Tailwind</span>
|
||||
<span class="skill-tag">Three.js</span>
|
||||
<span class="skill-tag">Framer Motion</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<h4>Backend</h4>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Node.js</span>
|
||||
<span class="skill-tag">PostgreSQL</span>
|
||||
<span class="skill-tag">GraphQL</span>
|
||||
<span class="skill-tag">Redis</span>
|
||||
<span class="skill-tag">Docker</span>
|
||||
<span class="skill-tag">AWS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<h4>Design</h4>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Figma</span>
|
||||
<span class="skill-tag">Design Systems</span>
|
||||
<span class="skill-tag">Motion</span>
|
||||
<span class="skill-tag">Prototyping</span>
|
||||
<span class="skill-tag">User Research</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<h4>Tools</h4>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Git</span>
|
||||
<span class="skill-tag">CI/CD</span>
|
||||
<span class="skill-tag">Storybook</span>
|
||||
<span class="skill-tag">Vercel</span>
|
||||
<span class="skill-tag">Notion</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<div class="contact-card">
|
||||
<h2>Let's build something <span class="gradient">extraordinary</span></h2>
|
||||
<p>Open for freelance, consulting, and full-time roles.</p>
|
||||
<div class="contact-links">
|
||||
<a href="mailto:alex@alexmorgan.io" class="contact-link">alex@alexmorgan.io</a>
|
||||
<a href="#" class="contact-link">GitHub</a>
|
||||
<a href="#" class="contact-link">LinkedIn</a>
|
||||
<a href="#" class="contact-link">Twitter</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 Alex Morgan · Crafted with code and coffee</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user