Starter Code (Reference)

Both starter blocks in one place. Use this page as a quick reference any time during the workshop — or to start over from scratch if your page gets in a weird state.

How to Use

1. Open codepen.io in a new browser tab using the button above, then click Start Coding.
2. Copy the HTML block below and paste it into CodePen's HTML pane (top-left).
3. Copy the CSS block below and paste it into CodePen's CSS pane (top-middle).
4. The live preview (bottom) shows the styled magazine profile.

HTML — Paste into the HTML pane

<!-- ============ 1. COVER / HERO ============ -->
<header class="hero">
  <div class="hero-meta">
    <span>Issue Nº 01</span>
    <span>★</span>
    <span>2026</span>
  </div>

  <h1 class="hero-title">
    YOUR
    <em>NAME</em>
  </h1>

  <p class="hero-tagline">
    Student · Creator · Future
    <mark>web developer</mark>
  </p>
</header>

<!-- ============ 2. ABOUT ============ -->
<section class="section">
  <div class="section-number">01</div>
  <h2 class="section-title">About</h2>

  <p class="lead">
    Hi! I'm a high school student who loves coding, art, and figuring out how
    things work.
  </p>

  <p>
    When I'm not in class, you can find me <strong>reading</strong>,
    <strong>playing music</strong>, or
    <strong>working on side projects</strong>.
  </p>
</section>

<!-- ============ 3. SKILLS & INTERESTS ============ -->
<section class="section section--accent">
  <div class="section-number">02</div>
  <h2 class="section-title">Skills & Interests</h2>

  <ul class="tags">
    <li>HTML</li>
    <li>CSS</li>
    <li>Public Speaking</li>
    <li>Photography</li>
    <li>Soccer</li>
    <li>Volunteering</li>
    <li>Spanish</li>
    <li>Drawing</li>
  </ul>
</section>

<!-- ============ 4. HIGHLIGHTS ============ -->
<section class="section">
  <div class="section-number">03</div>
  <h2 class="section-title">Highlights</h2>

  <article class="project">
    <div class="project-year">2025</div>
    <div>
      <h3>Project or achievement title</h3>
      <p>
        One or two sentences about what you did, what you learned, or why you're
        proud of it.
      </p>
    </div>
  </article>

  <article class="project">
    <div class="project-year">2024</div>
    <div>
      <h3>Another thing you've done</h3>
      <p>
        Volunteer work, a club role, a competition, a hobby project. It all
        counts.
      </p>
    </div>
  </article>

  <article class="project">
    <div class="project-year">2023</div>
    <div>
      <h3>One more highlight</h3>
      <p>Don't be shy — pick three things you're proud of, big or small.</p>
    </div>
  </article>
</section>

<!-- ============ 5. CONTACT / FOOTER ============ -->
<footer class="footer">
  <h2 class="footer-title">Get in touch.</h2>

  <ul class="contact-list">
    <li><a href="#">→ Email</a></li>
    <li><a href="#">→ LinkedIn</a></li>
    <li><a href="#">→ GitHub</a></li>
  </ul>

  <p class="signoff">Made by hand · Your Name · 2026</p>
</footer>

CSS — Paste into the CSS pane

/* ---------- Load fonts (Google Fonts) ---------- */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Fraunces:ital,wght@0,400..900;1,400..900&display=swap");

/* ============ ★ THEME — change these! ============ */
:root {
  --bg: #f2ede3; /* page background (cream) */
  --paper: #fffaf0; /* card background (lighter cream) */
  --ink: #1a1a1a; /* text + borders (near-black) */
  --accent: #ff4d1f; /* ★ try #2E5BFF, #14A05A, #FFB800 */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", -apple-system, system-ui, sans-serif;
}

/* ============ RESET ============ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============ BODY ============ */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;

  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}

/* ============ 1. HERO / COVER ============ */
.hero {
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 32px 24px 40px;
  text-align: center;
  margin-bottom: 32px;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  margin-bottom: 32px;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(56px, 14vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.hero-title em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  margin-top: 24px;
}

.hero-tagline mark {
  background: var(--accent);
  color: var(--paper);
  padding: 0 6px;
}

/* ============ 2–4. SECTIONS (cards) ============ */
.section {
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 32px 28px;
  margin-bottom: 24px;
  position: relative;
}

.section--accent {
  background: var(--accent);
  color: var(--paper);
}

.section-number {
  position: absolute;
  top: -14px;
  left: 24px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  padding: 6px 12px;
}

.section--accent .section-number {
  background: var(--paper);
  color: var(--ink);
}

.section-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.lead {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 16px;
}

.section p + p {
  margin-top: 12px;
}

.section strong {
  background: var(--bg);
  padding: 0 4px;
}

.section--accent strong {
  background: var(--ink);
  color: var(--paper);
}

/* ============ 3. SKILL TAGS ============ */
.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags li {
  border: 2px solid var(--paper);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  transition:
    transform 0.15s,
    background 0.15s,
    color 0.15s;
}

.tags li:hover {
  background: var(--paper);
  color: var(--accent);
  transform: rotate(-2deg);
}

/* ============ 4. HIGHLIGHTS / PROJECTS ============ */
.project {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  border-top: 2px solid var(--ink);
}

.project:first-of-type {
  border-top: none;
  padding-top: 0;
}

.project-year {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: 32px;
  color: var(--accent);
  flex-shrink: 0;
  width: 80px;
}

.project h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 4px;
}

.project p {
  font-size: 15px;
}

/* ============ 5. FOOTER ============ */
.footer {
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--ink);
  padding: 40px 28px;
  text-align: center;
}

.footer-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 8vw, 56px);
  margin-bottom: 24px;
}

.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

.contact-list a {
  color: var(--paper);
  text-decoration: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  transition: color 0.2s;
}

.contact-list a:hover {
  color: var(--accent);
}

.signoff {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ============ MOBILE PHONES ============ */
@media (max-width: 500px) {
  body {
    padding: 12px;
  }
  .project {
    flex-direction: column;
    gap: 4px;
  }
  .project-year {
    width: auto;
  }
}