Home

Project: Clone Atomist Landing Page

The project shall be a clone of the Atomist landing page.

For reference:

• A clone of the Donut Slack app that made in Voyage 2 and described as "beautifully done"
• The original page at the time of the clone

Contents

Atomist Page Dissection

Project Workflow

Project Style Guide

An initial dissection

(thank you AlexPR!)

Slice 1 - Nav bar and header

Reduces to a "hamburger menu" when viewport is below a certain width.

Slice 2 - Title and CTA (Call To Action)

3 sizes of font dependent on viewport width.

Slice 3 - Features

3 responsive columns.

Slice 4 - Carousel

A carousel of 5 quotes.

Slice 5 - Tabs with code

3 tabs displaying syntax-highlighted code.

Slice 6 - Footer

Footer containing simple nav bar and a 1 input field form.