Play Token
Project Details:
The client asked me to build the full site in 1 week. Figma design provided (1140x width) and the site needed to be fully responsive for large & small devices.
Initially, the page build-out was pretty simple. I was able to build them in a short time. The time-consuming tasks were:
- Reusable block (Header, Footer and Hero banners with gradient)
- Responsive Table with coming soon overlay
- FAQ’s accordion style
- Special Blog, Post Layout
- Footer subscription form with Klaviyo integration
Header, Footer and Hero banners with gradient
These are reusable blocks which we can use throughout the full site.
The mobile header and desktop header works on various media devices. I imported the SVG file and used it for social media links.
The Gradient on Hero banner can be built using webflow’s edit tool. But responsive gradient request forced me to use percent(%) value for all design properties.
For the footer subscription form, used HTML to embed code supported by Klaviyo form.
Responsive table with coming soon overlay
Building a table for large devices is simple. But to make it a responsive table for small devices, we can use 2 methods.
We can show/hide tables according to the device width, or set overflow option to enable scrollbars.
I used 2nd method and made the first column to be fixed while scrolling.
By means of custom CSS on project settings, the other area of table body is covered with Gray Pseudo and Icon.
FAQ’s accordion style
Webflow supports animation filter & triggers based on the class or the currently selected element.
The FAQ item should expand and collapse when the item title is clicked. Used triggers on the currently selected element, that lead to the creation of multiple similar animations.
Special layout for Blog, Blog Cards, & a Single Post
Webflow has its own CMS for blogs and eCommerce products. With Webflow blog CMS, we can define many custom fields for the post/blog/categories.
This makes it very easy to create, and a great feature versus WordPress, which requires ACF plugin.
We can control the blog card layout and show metas anywhere we want.
