Adaptive markup of the Aperture website. by Denis EfremovAdaptive markup of the Aperture website. by Denis Efremov

Adaptive markup of the Aperture website.

Denis Efremov

Denis Efremov

There was a task

It is necessary to make a markup of the Aperture website according to the Figma design layout.

Project Description

The work is done on HTML, CSS, JS, Flexbox, Grid. The FA-icons library is connected (Fontavesome icons are added). Implemented the parallax effect with images. Made a burger menu and adaptive for mobile devices up to 320px. Wanted to make animations at the moments of page scrolling, but considered them inappropriate on this site, parallax does its job anyway.

Stages of development

✅ I opened the design layout and generated a duplicate of the design layout in Figma.
✅ Next, I prepared my starting template to begin working on the project.
✅ To work with icons on this site I decided to connect the Fontavesome library.
✅ Next, I set up the layout lines using a ruler. I need this to accurately determine the width of the bounding container, as well as the height of the header and footer.
✅ Next, I determined which fonts were used in the layout and connected them.
✅ Next I did the markup of the header and footer.
✅ Then I started making the body of the page.

Results

The site is adaptive and cross-browser, ready for integration into any CMS.
Did the job in 1 day. Approximate cost $100.
Like this project

Posted Nov 30, 2024

The result is a beautiful adaptive page with a parallax effect in some blocks.