-
Notifications
You must be signed in to change notification settings - Fork 0
Implementation
Each page is placed within a wrapper with a maximum width of 1351px.
There is a Header, Main and Footer section on all three pages. A centered container, set to a max-width of 1013px, is used within each section, to wrap its contents.
The first part of each page is the Header. It is hidden on screen sizes up to 768px, and is only visible from 768px.
The Header is divided into two sections that are laid out using flexbox. To ensure there is a gap between the Logo and the Main Menu, in the second section, a left margin of 175px is applied to the Main Menu. The links within the Menu are also made to grow and shrink on a scale of 1, and given an initial width of auto, so that they respond to changes in screen size.
An absolute-positioned Side Menu is added to the second section of the Header, for the Tickets and About pages.
Each page contains a Main to wrap sections specific to that page.
Flexbox is used to layout the contents of the Footer, with the Text block made to shrink at four times that of the Logo block.
There are four sections specific to the Index page: Intro, Schedule, Speakers, and Partners. Similar to the Header, Main and Footer, centered containers, having a max-width of 1013px, are used to wrap the contents of each section.
All sections, with the exception of Intro, are given an id and linked to with #.
The contents of Intro are structured using flexbox. This section takes up the rest of the viewport height (minus the Header) from 768px.
A linear gradient overlaying a normal image, creates the background of this section. For the effect on the main heading, a background-image, clipped around the text, is applied.
Flexbox is primarily used to layout the five activities within Schedule. They stack in one column on mobile and adopt a 5x1 grid layout from 768px. The final link within Schedule interchanges as you move between small and medium screens.
Grid is mainly employed within Speakers. On mobile, there are only two speakers visible - one stacked on top of another - alongside a view more button. From medium screens, this button disappears, and a 2x3 grid is revealed.
A border-image is included for the effect on each photo.
The logos in this section are also laid out using flexbox, with the logos allowed to wrap on mobile.
There are three sections unique to the About page: Conf Info, Conf Logo, and Past Events. Here, a centered container, set to a max-width of 810px, is used within each section, to wrap its contents.
The most important thing to note here is the text added above the main heading from 768px.
Both past events are also built with flexbox. They appear stacked on mobile, and side by side from medium screens.
The Main part of the Tickets page is made up of a form with two sections: Pricing and Meal. Like the About page, a centered container, set to a max-width of 810px, is used within each section, to wrap its contents.
Pricing contains a single table. It is wrapped in a div which serves two purposes. Firstly, with an overflow value of auto, the div provides a horizontal scroll and ensures the table is responsive on mobile. Furthermore, it allows for a border-image to be set, since the table borders are collapsed.
The last section of the Ticket page Main is made up of two similar tables. A display of block is applied to both tables, and their internal elements, to allow for the one-column arrangement on mobile.
Finally, two icons are used to create the diamond at the intersection of Pricing and Meal. Both icons have an absolute position, with the square icon rotated forty-five degrees.