-
Company Banner
-
Products shown as card grid with flexbox
-
Order form using Typeform
-
Product Menu Page 1
-
Product Menu Page 2
-
Quantity
-
Intro to Information Collection
-
Full Name
-
Address
-
Payment Method
-
Thank You and Social Links
Inspiration
I was inspired to create this landing page because I'm re-selling these products since lockdown. It is also the second output required from the Le Wagon Learn Platform on the class " Build Your First Landing Page".
What it does
It shows all the available products of the company. Then using a Typeform allows the customer to select one product from the menu (picture list with prices), add the quantity and enter some information (name, delivery address and mode of payment).
How I built it
Using HTML, CSS, Typeform and Github.
Challenges I ran into
The main challenge is embedding the Typeform into the HTML code, but was resolve by editing the code from Typeform to point to my personal account rather than the admin account.
Accomplishments that I'm proud of
I'm very proud of this landing page, I think with some updates on the Typeform, I can already present it to the Daboy (the company making these pork cracklings) for their business use.
What I learned
Aside from the basic HTML and CSS - layouts of the page, making it responsive to all screen sizes, using color palettes, importing font styles and adding it to Github for the ability to be accessed online by everyone. I also learned about CSS components and banner that are used for building a UI kit, the use of card with flexbox, card grid and using third party services like Typeform.
What's next for Daboy
Future updates for this landing page is the ability to select multiple products and input quantities for all products at the same time, compute subtotal and add payment options for customers - all part of the paid version of typeform. :) Last part of the class also is setting up domain name and Google Analytics.
Log in or sign up for Devpost to join the conversation.