Top Guma d.o.o.

TOP GUMA d.o.o. imports tyres, inner tubes and tyre fitters' consumables and sells them wholesale and retail from a warehouse and sales centre in Vrbovec, for everything from bicycles and forklifts to lorries and tractors. A buyer, tyre fitter or farmer, usually arrives with a code copied off an old sidewall and one question: do you have this?

What I found

I went through the website on 14 November 2026, on a 1440 px laptop and on a phone:

• The first screen is a header with a photo of an off-roader and a promotions block dated January and February 2011. The company description and brands start at the very bottom.
• With no viewport tag, a phone shows the 980 px desktop layout shrunk to fit, with tiny text.
• There is no enquiry form, only a category search, so size and quantity go by phone or email.
• The email address appears two ways: info@top-guma.hr in the footer and top.guma@zg.t-com.hr on the Contact page.
• Inner tubes, one of their stronger points, are a sentence listing 24 tractor tube sizes in a row.

Decisions

The range as the opening argument

The headline says what the current site spreads over a long list: tyres and inner tubes from bicycle to tractor, wholesale and retail in Vrbovec, delivered across Croatia. Below it five tyres roll in once and keep turning as the page scrolls, shifting slightly towards the pointer on a desktop. The drawing is labelled as an illustration, since it is not their stock.

The sidewall code as the way into an enquiry

Buyers rarely know the model, but they can copy the code. So the centre of the site is a reader: type 205/55 R16 91H and it splits the code, draws the tyre with dimension lines and builds an enquiry summary with the quantity. Sidewall height and overall diameter are calculated from the code and marked as approximate; load and speed come from the international index tables. A recognised code makes the enquiry ready to send. An unrecognised one still goes through, with a note that sales will read it.

Before the reader, a drawing stays pinned while the page scrolls and the code lights up one part at a time.

Inner tubes and valves as a pick list

I put the inner tube sizes on a ruler from 4″ to 42″, one row per vehicle type, and every size is a button that goes into the enquiry. Valves TR-412 to TR-425, balancing weights and V-belts work the same way, so a tyre fitter sends the whole list at once.

One enquiry, one address

The reader, the ruler, the valves and the category cards all lead to one form. It asks whether the buyer is a business or buying for their own vehicle, and while they type it shows the email subject and what is missing. The button opens an email to the address in their site's footer.

Colour and the phone

The palette is tyre black, the steel blue of their logo for details, and yellow as the only accent. On a phone the tyres regroup, the story drawing stays at the top while the steps pass underneath, and the ruler becomes a set of buttons.

How it's built

Static HTML, CSS and JavaScript, no framework. Lenis smooths the scrolling; the animation is CSS transitions, IntersectionObserver and requestAnimationFrame. Tyres and drawings are SVG from one JavaScript module, which a script also writes into the HTML in advance, so the page is complete without JavaScript. Reduced motion turns the animation off. There is no server: the browser does the arithmetic and the enquiry leaves through mailto. The three photographs are theirs, as optimised JPEGs with set dimensions. The page is noindex, and the JSON-LD holds only details from their website.

What I would do next

I would first check with the company which email address is right, the opening hours in Vrbovec, whether they fit tyres there and whether the brand list is current. A real project would add a form that sends without the buyer's email program, redirects from the old pages and photographs from the warehouse.