<!DOCTYPE html>
<html>
<head>
<title>Single page portfolio page using HTML and CSS</title>
</head>
<body>

<header class="site-nav">
  <a href="#home" class="brand">MOTION / 24</a>

<nav>
    <a href="#work">Work</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>

<a href="#contact" class="nav-button">Start a project</a>
</header>

<main>

<div class="hero-content">
      <span class="eyebrow">CREATIVE PORTFOLIO / 2026</span>

<h1>
        Designing
        <span>bold digital</span>
        experiences.
      </h1>

<p>
        Product design, visual systems and digital experiences
        for ambitious brands and products.
      </p>

<a href="#work" class="hero-cta">
        Explore selected work
        <span>↓</span>
      </a>
    </div>

<div class="hero-index">
      <span>01</span>
      <span>Visual Direction</span>
    </div>

</section>

<div class="intro-title">
      <span class="eyebrow">ABOUT THE STUDIO</span>

<h2>
        We turn ideas into memorable
        visual experiences.
      </h2>
    </div>

<div class="intro-copy">
      <p>
        We work across product design, digital identity,
        interaction and visual storytelling.
      </p>

<p>
        Our process combines strategy, experimentation
        and craft to create experiences that feel clear,
        expressive and distinctive.
      </p>
    </div>

</section>

<span>01 / Workspace</span>
    </div>

<span>02 / Environment</span>
    </div>

<span>03 / Detail</span>
    </div>

</section>

<div class="section-heading">
      <span class="eyebrow">SELECTED WORK</span>

<h2>
        Projects that balance
        utility and expression.
      </h2>
    </div>

<div class="project-meta">
        <div>
          <span>01 / PRODUCT EXPERIENCE</span>
          <h3>Northstar Platform</h3>
        </div>

<p>
          A unified digital workspace designed around speed,
          clarity and intelligent automation.
        </p>

<a href="#">View project ↗</a>
      </div>

</article>

<div class="project-meta compact">
          <div>
            <span>02 / BRAND SYSTEM</span>
            <h3>Forma</h3>
          </div>

</article>

<div class="project-meta compact">
          <div>
            <span>03 / DIGITAL PRODUCT</span>
            <h3>Arc Studio</h3>
          </div>

</article>

</div>

<div class="project-meta">
        <div>
          <span>04 / EXPERIENCE DESIGN</span>
          <h3>Field Notes</h3>
        </div>

<p>
          A modular experience system built for teams,
          spaces and evolving digital products.
        </p>

<a href="#">View project ↗</a>
      </div>

</article>

</section>

<div class="full-content">
      <span class="eyebrow">VISUAL THINKING</span>

<h2>
        Less noise.
        More intention.
      </h2>

<p>
        Every element should earn its place.
      </p>
    </div>

</section>

<div>
      <span class="eyebrow">APPROACH</span>

<h2>
        Strategy,
        systems,
        craft.
      </h2>
    </div>

<div>
        <span>01</span>
        <strong>Product Strategy</strong>
        <p>
          Aligning user needs, business goals and product direction.
        </p>
      </div>

<div>
        <span>02</span>
        <strong>Experience Design</strong>
        <p>
          Creating intuitive flows, interactions and digital systems.
        </p>
      </div>

<div>
        <span>03</span>
        <strong>Visual Direction</strong>
        <p>
          Building expressive systems with clarity and consistency.
        </p>
      </div>

</div>

</section>

<div class="contact-inner">
      <span class="eyebrow">LET'S WORK TOGETHER</span>

<h2>
        Have something
        interesting in mind?
      </h2>

<a href="mailto:hello@example.com">
        hello@example.com
        <span>↗</span>
      </a>
    </div>

</section>

</main>

<footer>
  <span>© 2026 MOTION / 24</span>

<div>
    <a href="#">Instagram</a>
    <a href="#">LinkedIn</a>
    <a href="#">Dribbble</a>
  </div>
</footer>

</body>
</html>

* {
  box-sizing: border-box;
}

:root {
  --bg: #f2f0ea;
  --text: #11110f;
  --muted: #77736c;
  --line: rgba(18,18,16,.13);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

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

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

img {
  display: block;

width: 100%;
  height: 100%;

object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

/* NAV */

.site-nav {
  position: fixed;

top: 22px;
  left: 50%;

transform: translateX(-50%);

z-index: 100;

width:
    min(1240px, calc(100% - 40px));

height: 64px;

display: flex;
  align-items: center;
  justify-content: space-between;

padding: 0 20px;

border:
    1px solid rgba(255,255,255,.22);

border-radius: 999px;

color: white;

background:
    rgba(14,14,14,.24);

backdrop-filter:
    blur(18px);
}

.brand {
  font-size: 12px;
  font-weight: 800;

letter-spacing: 1px;
}

.site-nav nav {
  display: flex;

gap: 30px;

font-size: 11px;
}

.site-nav nav a {
  opacity: .65;
}

.site-nav nav a:hover {
  opacity: 1;
}

.nav-button {
  padding:
    9px 14px;

border-radius: 999px;

background: white;

color: #111;

font-size: 10px;
  font-weight: 600;
}

/* HERO */

.hero {
  position: relative;

min-height: 100vh;

overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
}

.hero-shade {
  position: absolute;
  inset: 0;

background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.6),
      rgba(0,0,0,.24) 55%,
      rgba(0,0,0,.08)
    );
}

.hero-content {
  position: absolute;

left:
    max(6vw, 35px);

bottom:
    10vh;

z-index: 5;

max-width: 840px;

color: white;
}

.eyebrow {
  display: block;

margin-bottom: 13px;

font-size: 9px;
  font-weight: 700;

letter-spacing: 2.5px;

color: inherit;

opacity: .55;
}

.hero h1 {
  margin: 0;

font-size:
    clamp(64px, 8vw, 125px);

line-height: .91;

font-weight: 500;

letter-spacing: -6px;
}

.hero h1 span {
  display: block;

font-style: italic;
  font-weight: 400;
}

.hero p {
  width:
    min(500px, 100%);

margin:
    28px 0 0;

color:
    rgba(255,255,255,.7);

line-height: 1.7;

font-size: 14px;
}

.hero-cta {
  display: inline-flex;

gap: 40px;

align-items: center;

margin-top: 30px;

padding-bottom: 6px;

border-bottom:
    1px solid rgba(255,255,255,.6);

font-size: 11px;
}

.hero-index {
  position: absolute;

right: 5vw;
  bottom: 7vh;

z-index: 5;

display: flex;
  flex-direction: column;

color: white;

text-align: right;
}

.hero-index span:first-child {
  font-size: 46px;
  font-weight: 300;
}

.hero-index span:last-child {
  color:
    rgba(255,255,255,.5);

font-size: 9px;

text-transform: uppercase;

letter-spacing: 1.7px;
}

/* GENERAL */

.section {
  width:
    min(1240px, calc(100% - 44px));

margin: auto;

padding:
    135px 0;
}

/* INTRO */

.intro {
  display: grid;

grid-template-columns:
    1.2fr .8fr;

gap: 100px;

align-items: end;
}

.intro h2,
.section-heading h2,
.about h2 {
  margin: 0;

font-size:
    clamp(46px, 6vw, 82px);

line-height: 1;

font-weight: 500;

letter-spacing: -4px;
}

.intro-copy {
  color: var(--muted);

font-size: 14px;

line-height: 1.75;
}

.intro-copy p {
  margin:
    0 0 20px;
}

/* IMAGE SHOWCASE */

.image-showcase {
  position: relative;

min-height: 880px;

padding-top: 30px;
}

.image-card {
  position: absolute;

overflow: hidden;

border-radius: 4px;

box-shadow:
    0 35px 70px
    rgba(0,0,0,.14);
}

.image-card img {
  transition:
    transform .8s
    cubic-bezier(.2,.8,.2,1);
}

.image-card:hover img {
  transform:
    scale(1.045);
}

.image-card span {
  position: absolute;

left: 16px;
  bottom: 14px;

padding:
    6px 9px;

border-radius: 999px;

background:
    rgba(0,0,0,.45);

backdrop-filter:
    blur(8px);

color: white;

font-size: 8px;

letter-spacing: 1px;
}

.image-a {
  left: 0;
  top: 130px;

width: 43%;
  height: 560px;
}

.image-b {
  right: 4%;
  top: 0;

width: 35%;
  height: 430px;
}

.image-c {
  right: 14%;
  bottom: 0;

width: 31%;
  height: 335px;
}

/* SECTION HEADING */

.section-heading {
  width:
    min(800px, 100%);

margin-bottom: 70px;
}

/* PROJECTS */

.project {
  margin-bottom: 90px;
}

.project-image-wrap {
  overflow: hidden;

height: 650px;

background: #ddd;
}

.project-image-wrap img {
  transition:
    transform .8s
    cubic-bezier(.2,.8,.2,1);
}

.project:hover
.project-image-wrap img {

transform:
    scale(1.035);
}

.project-meta {
  display: grid;

grid-template-columns:
    1.4fr 1fr auto;

gap: 40px;

align-items: start;

padding:
    22px 0;

border-bottom:
    1px solid var(--line);
}

.project-meta span {
  color: #918d85;

font-size: 8px;

letter-spacing: 1.4px;
}

.project-meta h3 {
  margin:
    7px 0 0;

font-size: 30px;
  font-weight: 500;

letter-spacing: -1px;
}

.project-meta p {
  margin: 0;

color: var(--muted);

font-size: 12px;

line-height: 1.65;
}

.project-meta a {
  font-size: 11px;
}

.project-grid {
  display: grid;

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

gap: 26px;
}

.project-grid
.project-image-wrap {

height: 500px;
}

.project-meta.compact {
  grid-template-columns:
    1fr auto;
}

/* FULL BLEED */

.full-bleed {
  position: relative;

height: 88vh;

min-height: 650px;

overflow: hidden;
}

.full-bleed img {
  position: absolute;

inset: 0;
}

.full-overlay {
  position: absolute;
  inset: 0;

background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.65),
      rgba(0,0,0,.08)
    );
}

.full-content {
  position: absolute;

left: 7vw;
  bottom: 12vh;

max-width: 800px;

color: white;
}

.full-content h2 {
  margin: 0;

font-size:
    clamp(60px, 8vw, 118px);

line-height: .9;

letter-spacing: -6px;

font-weight: 500;
}

.full-content p {
  margin-top: 22px;

color:
    rgba(255,255,255,.65);
}

/* ABOUT */

.about {
  display: grid;

grid-template-columns:
    .8fr 1.2fr;

gap: 120px;
}

.about-list {
  border-top:
    1px solid var(--line);
}

.about-list > div {
  display: grid;

grid-template-columns:
    50px 190px 1fr;

gap: 15px;

padding:
    26px 0;

border-bottom:
    1px solid var(--line);
}

.about-list span {
  color: #a09b92;

font-size: 9px;
}

.about-list strong {
  font-size: 14px;
}

.about-list p {
  margin: 0;

color: var(--muted);

line-height: 1.6;

font-size: 12px;
}

/* CONTACT */

.contact {
  padding:
    160px 25px;

background: #11120f;

color: white;
}

.contact-inner {
  width:
    min(1240px, 100%);

margin: auto;

text-align: center;
}

.contact h2 {
  max-width: 900px;

margin:
    0 auto 40px;

font-size:
    clamp(62px, 9vw, 130px);

line-height: .9;

font-weight: 500;

letter-spacing: -6px;
}

.contact a {
  display: inline-flex;

gap: 15px;

padding-bottom: 6px;

border-bottom:
    1px solid white;

font-size: 15px;
}

/* FOOTER */

footer {
  display: flex;

justify-content:
    space-between;

align-items: center;

padding:
    28px 4vw;

background: #11120f;

color:
    rgba(255,255,255,.38);

border-top:
    1px solid
    rgba(255,255,255,.1);

font-size: 9px;
}

footer div {
  display: flex;

gap: 20px;
}

/* RESPONSIVE */

@media (
  max-width: 850px
) {

.site-nav nav {
    display: none;
  }

.hero-index {
    display: none;
  }

.intro,
  .about {
    grid-template-columns:
      1fr;

gap: 45px;
  }

.image-showcase {
    min-height: 1150px;
  }

.image-a {
    width: 65%;
    height: 500px;
  }

.image-b {
    width: 55%;
    height: 370px;
  }

.image-c {
    width: 52%;
    height: 320px;
  }

.project-grid {
    grid-template-columns:
      1fr;
  }

.project-meta {
    grid-template-columns:
      1fr;
  }

.about-list > div {
    grid-template-columns:
      40px 1fr;
  }

.about-list p {
    grid-column:
      2;
  }

}

@media (
  max-width: 560px
) {

.hero h1 {
    font-size: 59px;

letter-spacing: -3px;
  }

.section {
    width:
      calc(100% - 28px);

padding:
      95px 0;
  }

.image-showcase {
    position: static;

display: grid;

gap: 18px;

min-height: 0;
  }

.image-card {
    position: relative;

inset: auto;

width: 100%;
    height: 390px;
  }

.project-image-wrap,
  .project-grid
  .project-image-wrap {

height: 390px;
  }

.full-content h2,
  .contact h2 {

letter-spacing:
      -3px;
  }

}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground