Created a website for the popularization and advertising of rope jumping in Mariupol.

Site: https://ropejump.mrpl.info/

Git repository: https://github.com/chomovva/ropejump.git

My role in the project:

  • design
  • layout
  • theme development
  • initial content and site setup

More about the project

The site was created to advertise ropejumping in Mariupol. The jumps are organized by the AlpCity company and its head Andrey Shatalin.

Rope jumping is a fairly young direction of extreme sports and recreation, the essence of which is jumping from high-altitude objects using special equipment.

The site contains information about this type of recreation, photos of jumps and customized forms for feedback with the administration, there is also an opportunity to sign up for jumps.

The site content has been translated into Russian and Ukrainian languages.

More about the layout project

The layout project is made in Gulp.js. Styles are written in SASS preprocessor (SCSS syntax), html-code is in PUG preprocessor (Jade).

The layout of the site is responsive, well displayed on mobile devices and desktops.

The main page is designed as a landing page.

Libraries and frameworks that I have used:

  • FlexboxGrid.css – modular bootstrap-like flexbox grid;
  • LazyLoad.js – jQuery plugin for adding lazy loading images;
  • justifiedGallery – a js library that allows you to create a gallery of images that fit the width of the screen;
  • Superembed.js – detects embedded videos of popular video services and makes it responsive;
  • Fancybox.js – jQuery plugin for creating modals and galleries;
  • jQuery – is a popular JavaScript framework.

WordPress theme integration

The theme is integrated according to all the rules of the wordpress code. The integration did not use third-party plugins or builders. All theme customization is done through the WordPress Customizer API. For some blocks of the main page, non-standard controls are written. Live preview works, i.e. when you change the settings, the page preview area is automatically refreshed.

The theme is multilingual with the Polylang plugin. All Customizer API settings are translated by the standard tools of this plugin.

Layout of the main page
Layout of the main page

Screenshots of theme settings

51vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x