Markup of an online store selling watches by Denis EfremovMarkup of an online store selling watches by Denis Efremov

Markup of an online store selling watches

Denis Efremov

Denis Efremov

There was a task

It is necessary to make a markup of an online store selling watches using the Figma design layout.

Project Description

The markup is made on HTML, CSS, JS, Flexbox, Grid. For icons I created an icon font. I made a Popup on the thank you page, made several Swiper sliders, custom checkbox and radio buttons, tabs, and several spoilers. I added a video with a preview image. I made a burger menu and adaptive for mobile devices up to 320px, the site also adapts to a large amount of content - edit as you like without fear that the site will break.
Project links:

Stages of development

✅ I opened the design layout and generated a duplicate of the design layout in Figma.
✅ I copied and opened my starter template to get started
✅ Next I downloaded all icons from the design layout in SVG format and create an icon font from them using the icomoon.io service.
✅ Next, using a ruler, I marked the layout with guide lines to define the bounding container, as well as the Header and Footer.
✅ Next, using the Font Fascia plugin, I identified all the fonts used in the design layout and included them in my project.
✅ After I had everything prepared, I started developing the Header and Footer.
✅ Next I started developing the site pages.

Results

The result is a reliable, cross-browser, adaptive online store ready to be installed on any modern content management system.
Did the job in 7 days. Approximate cost $600.
Like this project

Posted Dec 1, 2024

The online store is ready for integration into the Word Press CMS