Figma to HTML, Css, JS

FigmaHTMLCSSJS

Thursday, September 26, 2024

Custom Checkout

This is one of my favorite HTML, CSS, JS projects. I like the results I made here enough to dare to rank this project at number one (at least for now). In this project, my html checkout page is still in use until this page is published on the DetailedVehicleHistory website which you can search on Google (this website was created and actively managed by me until the moment this page was created).  Well, let's go straight to the results, please see below.

Checkout Page

Member Area

The second is the member area. i almost forgot that i ever made this. in this project i was asked to create the frontend side of the member area using custom HTML, CSS, and JS that can be used effectively by the backend developer. 

There were several pages assigned to me, but I will give you some of the best ones. please see the results below.

Member Area

Preview Vehicle Report Page

Third is the preview page for the vehicle sales report, I was quite amazed that this sales report is quite sold in Canada and western states. 

In this project, I was asked to create a responsive page that can still look good even if some parts of the section are deleted (if the data is not available). it was quite challenging and exciting for me, and anyway, this is the result.

Preview Page

Vehicle Report

Not far from project 3, this can be said to be the next step of step three where this is the result after the customer buys it (the report itself). but you must have realized that the theme of this page is very different. Yes, it's true because it's different, in this project I was only assigned to make the report page because that's all I can show you.

this page is also still actively used by the website owner until the time this blog was published, you can find the website on the internet with the domain vehiclechecks[dot]net (Btw this website was created using WordPress and custom plugins that I also created)

Vehicle Checks Report

Checkout Error Massage

the last is the error page when the customer experiences problems when making payments. just a few moments you must know why I put this at the end, first because the vibe is not good, namely the error situation, the second I also don't really like the design (but the design figure is like that and has been accepted by various divisions, I can't do much). okey so this is the result, don't look too long.

Checkout Error

Alright, so those are some of the results from the custom HTML I created. Thank you for taking the time to view and read this page all the way through. If you'd like to get in touch or connect with me, feel free to click the Contact button on Navigasi Bar, and let’s see what happens. Thanks, bye bye!