Project: Style a Full Page — CSS Styling

What you'll build

A complete, styled profile page with: a fixed navbar, a hero section, a skills grid, a project cards section, a contact form, and a footer. Responsive from 320px to 1440px.

style.css — complete project

css

/* ── Reset & Base ───────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:     #0F0D0A;
  --surface: #201D15;
  --border: #2E2A22;
  --text:   #EDE8DC;
  --muted:  #998870;
  --accent: #C96A30;
  --green:  #4A8C60;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1.6;
  margin: 0;
}

/* ── Navigation ─────────────────────── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(15, 13, 10, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}
nav a:hover { color: var(--text); }

/* ── Hero ───────────────────────────── */
section:first-of-type {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 7rem 1.5rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

/* ── Skills Grid ────────────────────── */
#skills ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

#skills li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* ── Projects ───────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; }

/* ── Form ───────────────────────────── */
form { display: grid; gap: 1rem; max-width: 520px; }
label { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
input, textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.15s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
button:hover { background: #DC7C40; }

/* ── Responsive ─────────────────────── */
@media (max-width: 640px) {
  #skills ul { grid-template-columns: repeat(2, 1fr); }
  section { padding-left: 1rem; padding-right: 1rem; }
}

What you learned in this course

—How CSS works — selectors, declarations, the cascade
—Specificity — why some rules override others
—The box model — margin, padding, border, content
—Flexbox and Grid for real layouts
—Responsive design with media queries and clamp()
—Transitions and keyframe animations
—CSS custom properties for maintainable design systems
—Modern CSS features that replace old workarounds