Caffein Line - Live Preview

An online cafe landing page.

Backstory

In my second semester, I had to build a web project for the Human and Computer Interactions lab final project. We were told to design and develop an online cafe landing page named Caffein Line, where users will be able to see information regarding what Caffein Line is about, its events, menus, and a payment form. I built it in 2021 and the code was all over the place with so many unnecessary lines of code. This one is fresh - similar design but more straightforward codes along with new layouts for different sections/pages.

Development

This project was done with:

• HTML
• SCSS
• Tailwind
• jQuery
• Bootstrap Icons
• Swiper

Challenges:

• Swiper really comes in handy when creating carousels or sliders. You can have tons of variations with a few lines of configuration codes.
• The method to check input in the contact and payment form is ineffective since it checks all the input one by one. I might use regex for a more accurate and simple method of validating inputs.

Go see the page!

See the page here.