Siteplus - Homepage with Pug Template

Description

Created an adaptive layout using Flexbox grid system without CSS media queries for rebuilding.

Used a SCSS preprocessor, define the main colors, fonts in variables. Also used imports, mixins.

Used the Pug template with inclusions, templates, mixins, variables.

Used HTML5 markup and semantics. The W3C Validator showed no errors.

---

Demo

You can play around with code demo here

Comments on the layout:

• slider #1: with the slide, the first image disappears, next. - shifts to its position and increases, the description changes, the pagination switches:

• slider #2: auto-scrolling company logos:
• added animation elements, parallax
• npm packages: gulp-autoprefixer, gulp-sourcemaps, gulp-modernizr were used.

Usage

Node.js and the package manager npm should be installed. If not: nodejs.org.

• Open Terminal.
• cd /YOUR-FOLDER: change the current working directory to the location where you want the cloned directory to be made.
• git clone https://github.com/Amaster-eu/pug-Siteplus: clone current repository.
• cd pug-Siteplus: go to the project folder.
• npm i: installing dependent packages.
• npm run start: build the project in build folder and start server at the address http://localhost:3000/ with opening of the project page in the browser.

The project is completed and no modernization is planned.

⬆