It is necessary to create adaptive markup for a travel agency website using the provided Figma layout.

The work is done on HTML, CSS, JS using the BEM methodology. When working on the project, I used Flexbox and Grid. I made the icons in this project using SVG sprites. I also made several sliders, a custom date input field with a calendar, custom checkboxes and radio buttons, sliders for selecting a range of prices for excursions, tabs and several spoilers. On the excursion overview page, I made a travel calendar on JS. I made it adaptive up to 320 pixels of the browser window width.

✅ First, I made a duplicate of the layout I needed and opened it in Figma.

✅ Next, I opened my pre-prepared starter template to get started.

✅ Next, I marked the layout with guide lines using a ruler to define the bounding container, as well as the Header and Footer.

✅ The next step is to define the fonts used in the layout. I did this using the Font Fascia plugin. When all the fonts were defined, I installed them and connected them to my project.

✅ Next I started developing Header and Footer.

✅ Next, I made the markup of the site pages.

The result is an adaptive, reliable, cross-browser and user-friendly travel agency website, ready for integration into any CMS.