Content Presentation

Content

The content is about an imagined future company of your choice: its profile, services, and team. You can efficiently generate such text content using one of the many freely-available large-language model services such as Claude (opens in a new tab), Gemini (opens in a new tab), Chat (opens in a new tab), Perplexity (opens in a new tab), and Grok (opens in a new tab). Do not copy and use the reference text in your implementation, nor use placeholder text. Make it your own!

Structure

Save the generated text under content.txt and use it as a source to handcraft the HTML content of the pages. The content should be manually structured using semantic (opens in a new tab) tags (POSH: Plain Old Semantic HTML) and proper identifiers and classes when needed. One good technique to test your semantic/accessible structure is to use a text-based browser such as w3m (opens in a new tab) and lynx (opens in a new tab) to view your pages.

Navigation

There are three pages in total: Home (index.html), Services (services.html), and Team (team.html), hyperlinked to each other using a navigation bar inside the header. The current page will have an identifier or class applied to its corresponding anchor, or one of its parent elements, so that it can be presented differently later on.

Every page will have a navigation list of social hyperlinks for at least six platforms inside the footer. The same header and footer will be reused across all three pages.

Media

The website must include six social icons in the footer, at least eight photos/illustrations in the front page gallery, and at least four avatars for the team members. Check the Links → UI/XD section for a list of media resources.

The reference design uses social icons from Tabler (opens in a new tab), gallery illustrations from Storyset (opens in a new tab), and avatars from Limitless Designs (opens in a new tab). You can reuse these freely-available assets in your implementation.

Presentation

Reset

A reset stylesheet (opens in a new tab) is used to ensure a consistent presentation baseline across browsers and platforms. Download and import this reset.css (opens in a new tab) stylesheet.

@import url("reset.css");

Palettes

A palette is used to define the colors, which will then be used in style declarations throughout the stylesheet. This makes styling more consistent, theming easier, and is generally good practice. Use custom properties (opens in a new tab) (cascading variables) to declare the palettes and the colors needed. You need to use six colors for the reference design: text, background, backfill, link, link-hover, and link-active.

The palettes can be generated using UI Colors (opens in a new tab) and exported to custom properties. There are a dozen of predefined palettes (opens in a new tab) that you can mix and match to your liking, for example, colors from Lime + Zinc, Indigo + Slate, or Scarlet + White, which were used in the reference design.

:root {
  /* color palette using custom properties (cascading variables) */
  --scarlet-400: #ff6932;
 
  --color-link: var(--scarlet-400);
}
 
a {
  color: var(--color-link);
}

Note that custom properties can be used to store almost any kind of (reused) value, but cannot be used in media query conditions.

Styles

Two custom typefaces (opens in a new tab) are used: one for the body, and another for the headings, header, and hashtags. You can import and use free font families from Google Fonts (opens in a new tab), and look on Fontpair (opens in a new tab) for typeface pairings that work well together. The typefaces and from Fontshare (opens in a new tab) were used in the reference design.

Values in em/rem (opens in a new tab) are used for horizontal and vertical measurements so that the overall design scales correctly relative to the base font size.

Selectors

All anchors are styled using a different color when they are hovered over or when they are active. This behavior can be implemented using the :hover and :active pseudo-classes. The active anchor in the navigation bar will have a different hover color than the rest, since it has a different background color.

The borders surrounding the headings can be dynamically inserted using the ::before and ::after pseudo-elements and a grid layout with a linear gradient (opens in a new tab) border color applied to their content.

Themes

A media query is used to detect which theme, light or dark, is active and to set the colors accordingly.

@media screen and (prefers-color-scheme: light) {
  :root {
    --color-link: var(--scarlet-400);
  }
}
 
@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-link: var(--scarlet-500);
  }
}
 
a {
  color: var(--color-link);
}

A transition on all properties enables smooth theme switching.

body {
  transition: all ease 250ms;
}

Layout

Mobile-First

A mobile-first design (opens in a new tab) approach is used where the page is first designed for the smallest (mobile) viewport, then progressively enhanced (opens in a new tab) for larger viewports.

The main content and footer are constrained to a minimum width of 400px and a maximum of 800px, while the header can span the whole viewport. These measurements include the border and padding when using border-box (opens in a new tab) sizing (opens in a new tab), but not the margin.

Patterns

The reference design uses a mix of nested flexible boxes and grids. The following patterns are used to lay out the different parts:

1. Pancake stack (opens in a new tab) pattern for the body.
2. Line up (opens in a new tab) (horizontal) pattern for the header.
3. Sidebar says (opens in a new tab) pattern for the footer.
4. RAM (opens in a new tab) pattern for the photo gallery and team cards. Note that the grid items do not all stretch to equal height.

Responsiveness

A viewport width media query is used to override some properties of certain elements and achieve a responsive design. A breakpoint of 600px differentiates between a small (mobile) viewport, with a width smaller than 600px, and a medium+ viewport with a width larger than or equal to 600px. The overridden properties apply to the medium viewport.

@media screen and (min-width: 600px) {
}

The following properties are overridden in the medium+ viewport:

1. A modified flexible box for the header.
2. A modified grid for the footer.
3. A modified grid for the team member cards.
4. Larger text and different text alignment in the header.
5. Visible spans of text in the contact link.
6. Visible spans of text in the social links.

Responsive images that scale with their container are used in the gallery and team card avatars.