Flower Balloons' website - custom Wordpress theme
Installation
- Select "install" branch
- Download both files
- Upload them and run "installer.php" on your local host
- Follow the instructions
Website made with:
- NodeJs
- Webpack
- SASS (BEM)
- PHP
- JS
- CMS: Wordpress using ACF, Custom Post Types and Duplicator
- API
- RWD
- Lighthouse: Best practise, SEO and Performance
My goal was not to use plugins (other than Duplicator, Contact Forms7 and ACF) and make my own template
About website components
First of all we can see looped oembed background video. Source is located on YT so it works much faster.
Section 1#
I've coded my own template for WP. Image and text are uploaded using ACF so it is very simple to change them in WP. Animations were made with The Intersection Observer API.
Section 2#
Cards that represent three last published posts. Desc, title, date and stats were displayed using WP_Query. You can click on the card and you will be redirected to single post page.
Section 3#
Fields display WYSIWYG Custom Field. Furthermore there is element that can intersect flex dipslayed element and it can be placed on the top or bottom of layers.
About page
It allows to switch displayed info without realoading the page.
Flights map
Using API I've created custom map that displayed pins on the map that I've added with ACF. You can simply go to the WP admin panel, select Custom Post Type "Flights" and add them to the map. It was made only with ACF and Google API.
Form
Custom contact form.
RWD
