package.json

@@ -0,0 +1,28 @@
+{
+  "name": "px-html",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "start": "gulp dev",
+    "build": "gulp build",
+    "build-relative-path": "gulp build --relativePath",
+    "deploy-init": "gulp deploy-init",
+    "deploy": "gulp deploy"
+  },
+  "keywords": [],
+  "dependencies": {},
+  "devDependencies": {
+    "browser-sync": "^2.27.10",
+    "yargs": "^17.5.1",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^7.0.1",
+    "gulp-file-include": "./src/dev/gulp-file-include",
+    "gulp-filter-each": "^1.0.1",
+    "gulp-pretty-html": "^2.0.10",
+    "gulp-sass": "^5.1.0",
+    "gulp-shell": "^0.8.0",
+    "gulp-postcss": "^9.0.1",
+    "sass": "^1.52.0",
+    "through2": "^4.0.2"
+  }
+}

src/css/common.css

@@ -0,0 +1,249 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+*,
+*::before,
+*::after {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6, hr, p, figure {
+    display: block;
+    font-size: 1em;
+    font-weight: normal;
+    margin: 0;
+    border-width: 0;
+    opacity: 1;
+}
+
+ul {
+    display: block;
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    display: block;
+}
+
+button {
+    background-color: transparent;
+    border: none;
+    display: block;
+    padding: 0;
+    margin: 0;
+    align-items: normal;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.page-header {
+    z-index: 10000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.sticking {
+    margin: 0 !important;
+    z-index: 10000 !important;
+}
+
+@media (max-width: 99999px) {
+    .max\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xxxl\:show {
+        display: none;
+    }
+
+    .xxl\:show {
+        display: none;
+    }
+
+    .xl\:show {
+        display: none;
+    }
+
+    .lg\:show {
+        display: none;
+    }
+
+    .md\:show {
+        display: none;
+    }
+
+    .sm\:show {
+        display: none;
+    }
+
+    .xs\:show {
+        display: none;
+    }
+
+    .xxs\:show {
+        display: none;
+    }
+
+    .tn\:show {
+        display: none;
+    }
+
+    .max\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 2999px) {
+    .xxxl\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xxxl\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 1919px) {
+    .xxl\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xxl\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 1399px) {
+    .xl\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xl\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 1199px) {
+    .lg\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .lg\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 991px) {
+    .md\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .md\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 767px) {
+    .sm\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .sm\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 575px) {
+    .xs\:show {
+        display: flex;
+        flex-direction: column;
+
+    }
+
+    .xs\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 480px) {
+    .xxs\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xxs\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 384px) {
+    .tn\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .tn\:hide {
+        display: none;
+    }
+}
+
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}

src/css/fonts.css

@@ -0,0 +1,18 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+@font-face {
+  font-family: "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
+  src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0")
+      format("embedded-opentype"),
+    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0")
+      format("woff2"),
+    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0")
+      format("woff"),
+    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0")
+      format("truetype"),
+    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular")
+      format("svg");
+}

src/css/headroom.css

@@ -0,0 +1,17 @@
+.headroom {
+    z-index: 10000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    will-change: transform;
+    transition: transform 200ms linear;
+}
+
+.headroom--pinned {
+    transform: translateY(0%);
+}
+
+.headroom--unpinned {
+    transform: translateY(-100%);
+}

src/dev/gulp-file-include/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Xin Hao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/dev/gulp-file-include/Readme.md

@@ -0,0 +1,414 @@
+[![NPM version][npm-img]][npm-url]
+[![Build status][travis-img]][travis-url]
+[![Test coverage][coveralls-img]][coveralls-url]
+[![License][license-img]][license-url]
+[![Dependency status][david-img]][david-url]
+[![Gitter][gitter-img]][gitter-url]
+
+# gulp-file-include
+
+a [gulp](https://github.com/gulpjs/gulp) plugin for file includes
+
+## Installation
+
+```bash
+npm install --save-dev gulp-file-include
+```
+
+## API
+
+```js
+const fileinclude = require('gulp-file-include');
+```
+
+### fileinclude([prefix])
+
+#### prefix
+
+Type: `string`<br>
+Default: `'@@'`
+
+### fileinclude([options])
+
+#### options
+
+Type: `object`
+
+##### options.prefix
+
+Type: `string`<br>
+Default: `'@@'`
+
+##### options.suffix
+
+Type: `string`<br>
+Default: `''`
+
+##### options.basepath
+
+Type: `string`<br>
+Default: `'@file'`
+
+Possible values:
+
+- `'@file'`:  include file relative to the dir in which `file` resides ([example](#include-options---type-json))
+- `'@root'`: include file relative to the dir in which `gulp` is running
+- `path/to/dir`: include file relative to the basepath you provide
+
+##### options.filters
+
+Type: `object`<br>
+Default: `false`
+
+Filters of include content.
+
+##### options.context
+
+Type: `object`
+Default: `{}`
+
+Context of `if` statement.
+
+##### options.indent
+
+Type: `boolean`
+Default: `false`
+
+## Examples
+
+### @@include options - type: `JSON`
+
+index.html
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+  @@include('./view.html')
+  @@include('./var.html', {
+    "name": "haoxin",
+    "age": 12345,
+    "socials": {
+      "fb": "facebook.com/include",
+      "tw": "twitter.com/include"
+    }
+  })
+  </body>
+</html>
+```
+
+view.html
+
+```html
+<h1>view</h1>
+```
+
+var.html
+
+```html
+<label>@@name</label>
+<label>@@age</label>
+<strong>@@socials.fb</strong>
+<strong>@@socials.tw</strong>
+```
+
+gulpfile.js
+
+```js
+const fileinclude = require('gulp-file-include');
+const gulp = require('gulp');
+
+gulp.task('fileinclude', function() {
+  gulp.src(['index.html'])
+    .pipe(fileinclude({
+      prefix: '@@',
+      basepath: '@file'
+    }))
+    .pipe(gulp.dest('./'));
+});
+```
+
+result:
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+  <h1>view</h1>
+  <label>haoxin</label>
+<label>12345</label>
+<strong>facebook.com/include</strong>
+<strong>twitter.com/include</strong>
+  </body>
+</html>
+```
+
+### @@include_once options - type: `JSON`
+
+index.html
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+  @@include_once('./view.html')
+  @@include_once('./var.html', {
+    "name": "haoxin",
+    "age": 12345,
+    "socials": {
+      "fb": "facebook.com/include",
+      "tw": "twitter.com/include"
+    }
+  })
+  @@include_once('./var.html', {
+    "name": "haoxin",
+    "age": 12345,
+    "socials": {
+      "fb": "facebook.com/include",
+      "tw": "twitter.com/include"
+    }
+  })
+  </body>
+</html>
+```
+
+view.html
+
+```html
+<h1>view</h1>
+```
+
+var.html
+
+```html
+<label>@@name</label>
+<label>@@age</label>
+<strong>@@socials.fb</strong>
+<strong>@@socials.tw</strong>
+```
+
+gulpfile.js
+
+```js
+const fileinclude = require('gulp-file-include');
+const gulp = require('gulp');
+
+gulp.task('fileinclude', function() {
+  gulp.src(['index.html'])
+    .pipe(fileinclude({
+      prefix: '@@',
+      basepath: '@file'
+    }))
+    .pipe(gulp.dest('./'));
+});
+```
+
+result:
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+  <h1>view</h1>
+  <label>haoxin</label>
+<label>12345</label>
+<strong>facebook.com/include</strong>
+<strong>twitter.com/include</strong>
+
+  </body>
+</html>
+```
+
+### filters
+
+index.html
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+  @@include(markdown('view.md'))
+  @@include('./var.html', {
+    "name": "haoxin",
+    "age": 12345
+  })
+  </body>
+</html>
+```
+
+view.md
+
+```html
+view
+====
+```
+
+gulpfile.js
+
+```js
+const fileinclude = require('gulp-file-include');
+const markdown = require('markdown');
+const gulp = require('gulp');
+
+gulp.task('fileinclude', function() {
+  gulp.src(['index.html'])
+    .pipe(fileinclude({
+      filters: {
+        markdown: markdown.parse
+      }
+    }))
+    .pipe(gulp.dest('./'));
+});
+```
+
+### `if` statement
+
+index.html
+
+```
+@@include('some.html', { "nav": true })
+
+@@if (name === 'test' && nav === true) {
+  @@include('test.html')
+}
+```
+
+gulpfile.js
+
+```js
+fileinclude({
+  context: {
+    name: 'test'
+  }
+});
+```
+
+### `for` statement
+
+index.html
+
+```html
+<ul>
+@@for (var i = 0; i < arr.length; i++) {
+  <li>`+arr[i]+`</li>
+}
+</ul>
+```
+
+gulpfile.js
+
+```js
+fileinclude({
+  context: {
+    arr: ['test1', 'test2']
+  }
+});
+```
+
+### `loop` statement
+
+index.html
+
+```html
+<body>
+  @@loop('loop-article.html', [
+    { "title": "My post title", "text": "<p>lorem ipsum...</p>" },
+    { "title": "Another post", "text": "<p>lorem ipsum...</p>" },
+    { "title": "One more post", "text": "<p>lorem ipsum...</p>" }
+  ])
+</body>
+```
+
+loop-article.html
+
+```html
+<article>
+  <h1>@@title</h1>
+  @@text
+</article>
+```
+
+### `loop` statement + `data.json`
+
+data.json
+
+```js
+[
+  { "title": "My post title", "text": "<p>lorem ipsum...</p>" },
+  { "title": "Another post", "text": "<p>lorem ipsum...</p>" },
+  { "title": "One more post", "text": "<p>lorem ipsum...</p>" }
+]
+```
+
+loop-article.html
+
+```html
+<body>
+  @@loop("loop-article.html", "data.json")
+</body>
+```
+
+### `webRoot` built-in context variable
+
+The `webRoot` field of the context contains the relative path from the source document to the source root (unless the
+value is already set in the context options).
+
+support/contact/index.html
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link type=stylesheet src=@@webRoot/css/style.css>
+  </head>
+  <body>
+    <h1>Support Contact Info</h1>
+    <footer><a href=@@webRoot>Home</a></footer>
+  </body>
+  </body>
+</html>
+```
+
+result:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link type=stylesheet src=../../css/style.css>
+  </head>
+  <body>
+    <h1>Support Contact Info</h1>
+    <footer><a href=../..>Home</a></footer>
+  </body>
+  </body>
+</html>
+```
+
+### License
+
+MIT
+
+[npm-img]: https://img.shields.io/npm/v/gulp-file-include.svg?style=flat-square
+
+[npm-url]: https://npmjs.org/package/gulp-file-include
+
+[travis-img]: https://img.shields.io/travis/haoxins/gulp-file-include.svg?style=flat-square
+
+[travis-url]: https://travis-ci.org/haoxins/gulp-file-include
+
+[coveralls-img]: https://img.shields.io/coveralls/coderhaoxin/gulp-file-include.svg?style=flat-square
+
+[coveralls-url]: https://coveralls.io/r/coderhaoxin/gulp-file-include?branch=master
+
+[license-img]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
+
+[license-url]: http://opensource.org/licenses/MIT
+
+[david-img]: https://img.shields.io/david/coderhaoxin/gulp-file-include.svg?style=flat-square
+
+[david-url]: https://david-dm.org/coderhaoxin/gulp-file-include
+
+[gitter-img]: https://badges.gitter.im/Join%20Chat.svg
+
+[gitter-url]: https://gitter.im/coderhaoxin/gulp-file-include?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge

src/dev/gulp-file-include/lib/indent.js

@@ -0,0 +1,20 @@
+module.exports = function (src, index, dest) {
+  var indent = ''
+  var valid = false
+
+  while (src[index -= 1] == 0) { // eslint-disable-line
+    if (src[index] === '\n') {
+      valid = true
+      break
+    }
+    indent = src[index] + indent
+  }
+
+  if (valid) {
+    dest = dest.split('\n').map(function (str, i) {
+      return str == 0 || i === 0 ? str : (indent + str) // eslint-disable-line
+    }).join('\n')
+  }
+
+  return dest
+}

src/dev/gulp-file-include/lib/index.js

@@ -0,0 +1,301 @@
+'use strict'
+
+const replaceOperator = require('./replace-operator')
+const replaceFunction = require('./replace-function')
+const replaceVariable = require('./replace-variable')
+const concat = require('concat-stream')
+const setIndent = require('./indent')
+const through = require('through2')
+const Vinyl = require('vinyl')
+const PluginError = require('plugin-error')
+const extend = require('extend')
+const path = require('path')
+const fs = require('fs')
+const JSON5 = require('json5')
+
+module.exports = function (opts) {
+  if (typeof opts === 'string') {
+    opts = { prefix: opts }
+  }
+
+  opts = extend({}, {
+    basepath: '@file',
+    prefix: '@@',
+    suffix: '',
+    context: {},
+    filters: false,
+    indent: false
+  }, opts)
+
+  if (opts.basepath !== '@file') {
+    opts.basepath = opts.basepath === '@root' ? process.cwd() : path.resolve(opts.basepath)
+  }
+
+  var customWebRoot = !!opts.context.webRoot
+  var includeOnceFiles = {};
+
+  function fileInclude(file, enc, cb) {
+    if (!customWebRoot) {
+      // built-in webRoot variable, example usage: <link rel=stylesheet href=@@webRoot/style.css>
+      opts.context.webRoot =
+        path.relative(path.dirname(file.path), file.base).replace(/\\/g, '/') || '.'
+    }
+
+    if (file.isNull()) {
+      cb(null, file)
+    } else if (file.isStream()) {
+      file.contents.pipe(concat(function (data) {
+        try {
+          data = include(file, String(data))
+          cb(null, data)
+        } catch (e) {
+          cb(new PluginError('gulp-file-include', e.message))
+        }
+      }))
+    } else if (file.isBuffer()) {
+      try {
+        file = include(file, String(file.contents))
+        cb(null, file)
+      } catch (e) {
+        cb(new PluginError('gulp-file-include', e.message))
+      }
+    }
+  }
+
+  return through.obj(fileInclude)
+
+  /**
+   * utils
+   */
+  function stripCommentedIncludes(content, opts) {
+    // remove single line html comments that use the format: <!-- @@include() -->
+    var regex = new RegExp('<!--(.*)' + opts.prefix + '[ ]*include([\\s\\S]*?)[ ]*' + opts.suffix + '-->', 'g')
+    return content.replace(regex, '')
+  }
+
+  function include(file, text, data, sourceFile = '') {
+    var filebase = opts.basepath === '@file' ? path.dirname(file.path) : opts.basepath
+    var currentFilename = path.resolve(file.base, file.path)
+
+    data = extend(true, {}, opts.context, data || {})
+
+    text = stripCommentedIncludes(text, opts)
+    text = replaceOperator(text, {
+      prefix: opts.prefix,
+      suffix: opts.suffix,
+      name: 'if',
+      handler: conditionalHandler,
+      sourceFile: sourceFile
+    })
+    text = replaceOperator(text, {
+      prefix: opts.prefix,
+      suffix: opts.suffix,
+      name: 'for',
+      handler: forHandler,
+      sourceFile: sourceFile
+    })
+    text = replaceVariable(text, data, opts)
+    text = replaceFunction(text, {
+      prefix: opts.prefix,
+      suffix: opts.suffix,
+      name: 'include_once',
+      handler: includeOnceHandler,
+      sourceFile: sourceFile
+    })
+    text = replaceFunction(text, {
+      prefix: opts.prefix,
+      suffix: opts.suffix,
+      name: 'include',
+      handler: includeHandler,
+      sourceFile: sourceFile
+    })
+    text = replaceFunction(text, {
+      prefix: opts.prefix,
+      suffix: opts.suffix,
+      name: 'loop',
+      handler: loopHandler,
+      sourceFile: sourceFile
+    })
+
+    function conditionalHandler(inst) {
+      try {
+        var condition = new Function('var context = this; with (context) { return ' + inst.args + '; }').call(data) // eslint-disable-line
+      } catch (error) {
+        throw new Error(error.message + ': ' + inst.args)
+      }
+
+      return condition ? inst.body : ''
+    }
+
+    function forHandler(inst) {
+      var forLoop = 'for' + inst.args + ' { result+=`' + inst.body + '`; }'
+      var condition = 'var context = this; with (context) { var result=""; ' + forLoop + ' return result; }'
+      try {
+        var result = new Function(condition).call(data) // eslint-disable-line
+      } catch (error) {
+        throw new Error(error.message + ': ' + forLoop)
+      }
+
+      return result
+    }
+
+    function includeOnceHandler(inst) {
+      var args = /[^)"']*["']([^"']*)["'](,\s*({[\s\S]*})){0,1}\s*/.exec(inst.args)
+      if (args) {
+        if (typeof includeOnceFiles[inst.sourceFile] === 'undefined') {
+          includeOnceFiles[inst.sourceFile] = [];
+        }
+        if (includeOnceFiles[inst.sourceFile].indexOf(args[1]) === -1) {
+          includeOnceFiles[inst.sourceFile].push(args[1]);
+          return includeHandler(inst)
+        } else {
+          return '';
+        }
+      }
+    }
+
+    function includeHandler(inst) {
+      var args = /[^)"']*["']([^"']*)["'](,\s*({[\s\S]*})){0,1}\s*/.exec(inst.args)
+
+      if (args) {
+        var includePath = path.resolve(filebase, args[1])
+        // for checking if we are not including the current file again
+        if (currentFilename.toLowerCase() === includePath.toLowerCase()) {
+          throw new Error('recursion detected in file: ' + currentFilename)
+        }
+
+        var includeContent = fs.readFileSync(includePath, 'utf-8')
+
+        if (opts.indent) {
+          includeContent = setIndent(inst.before, inst.before.length, includeContent)
+        }
+
+        // need to double each `$` to escape it in the `replace` function
+        // includeContent = includeContent.replace(/\$/gi, '$$$$');
+
+        // apply filters on include content
+        if (typeof opts.filters === 'object') {
+          includeContent = applyFilters(includeContent, args.input)
+        }
+
+        var recFile = new Vinyl({
+          cwd: process.cwd(),
+          base: file.base,
+          path: includePath,
+          contents: Buffer.from(includeContent)
+        })
+
+        recFile = include(recFile, includeContent, args[3] ? JSON5.parse(args[3]) : {}, inst.sourceFile != '' ? inst.sourceFile : currentFilename)
+
+        return String(recFile.contents)
+      }
+    }
+
+    function loopHandler(inst) {
+      var args = /[^)"']*["']([^"']*)["'](,\s*([\s\S]*())){0,1}\s*/.exec(inst.args)
+      var arr = []
+
+      if (args) {
+        // loop array in the json file
+        if (args[3].match(/^('|")[^']|[^"]('|")$/)) {
+          // clean filename var and define path
+          var jsonPath = args[3].replace(/^('|")/, '').replace(/('|")$/, '')
+          var jsonfile = path.join(file.base, jsonPath)
+          // check if json file exists
+          if (fs.existsSync(jsonfile)) {
+            // make sure we are getting the updated version of the json file
+            delete require.cache[jsonfile]
+            arr = require(jsonfile)
+          } else {
+            return console.error('JSON file not exists:', jsonfile)
+          }
+        } else {
+          // loop array in the function
+          try {
+            arr = JSON5.parse(args[3])
+          } catch (err) {
+            return console.error(err, args[3])
+          }
+        }
+
+        if (arr) {
+          var includePath = path.resolve(filebase, args[1])
+          // for checking if we are not including the current file again
+          if (currentFilename.toLowerCase() === includePath.toLowerCase()) {
+            throw new Error('recursion detected in file: ' + currentFilename)
+          }
+
+          var includeContent = fs.readFileSync(includePath, 'utf-8')
+
+          if (opts.indent) {
+            includeContent = setIndent(inst.before, inst.before.length, includeContent)
+          }
+
+          // apply filters on include content
+          if (typeof opts.filters === 'object') {
+            includeContent = applyFilters(includeContent, args.input)
+          }
+
+          var recFile = new Vinyl({
+            cwd: process.cwd(),
+            base: file.base,
+            path: includePath,
+            contents: Buffer.from(includeContent)
+          })
+
+          var contents = ''
+
+          for (var i in arr) {
+            if (arr.hasOwnProperty(i)) {
+              var context = arr[i]
+              recFile = include(recFile, includeContent, args[3] ? context : {}, inst.sourceFile != '' ? inst.sourceFile : currentFilename)
+              // why handler dont reconize underscore?
+              // if (typeof context == 'object' && typeof context['_key'] == 'undefined') {
+              //   context['_key'] = i;
+              // }
+              contents += String(recFile.contents)
+            }
+          }
+        }
+        return contents
+      }
+    }
+
+    file.contents = Buffer.from(text)
+
+    return file
+  }
+
+  function applyFilters(includeContent, match) {
+    if (!match.match(/\)+$/)) {
+      // nothing to filter return unchanged
+      return includeContent
+    }
+
+    // now get the ordered list of filters
+    var filterlist = match.split('(').slice(0, -1)
+    filterlist = filterlist.map(function (str) {
+      return opts.filters[str.trim()]
+    })
+
+    // compose them together into one function
+    var filter = filterlist.reduce(compose)
+
+    // check match for filter options object
+    var options = match.match('{([^}]*)}')
+
+    // and apply the composed function to the stringified content
+    if (options) {
+      options = JSON5.parse(options[0])
+      return filter(String(includeContent), options)
+    } else {
+      return filter(String(includeContent))
+    }
+  }
+}
+
+function compose(f, g) {
+  return function (x) {
+    return f(g(x))
+  }
+}

src/dev/gulp-file-include/lib/replace-function.js

@@ -0,0 +1,51 @@
+'use strict'
+
+const balanced = require('balanced-match')
+
+module.exports = function (content, opts) {
+  var result = ''
+  var reStart = new RegExp(opts.prefix + '[ ]*' + opts.name + '\\(')
+  var reEnd = new RegExp('^[ ]*' + opts.suffix)
+  var matchStart
+  var matchArg
+  var matchEnd
+  var safeStart
+  var before
+  var replacement
+
+  while (matchStart = reStart.exec(content)) { // eslint-disable-line
+    safeStart = matchStart.index + matchStart[0].length - 1
+
+    matchArg = balanced('(', ')', content.slice(safeStart))
+
+    if (matchArg && matchArg.start === 0) {
+      if (opts.suffix) {
+        matchEnd = reEnd.exec(matchArg.post)
+      }
+
+      matchEnd = matchEnd ? matchEnd.index + matchEnd[0].length : 0
+
+      if (!opts.suffix || matchEnd) {
+        before = content.slice(0, matchStart.index)
+        replacement = opts.handler({
+          before: before,
+          args: matchArg.body,
+          sourceFile: opts.sourceFile
+        })
+
+        if (replacement !== undefined) {
+          result += before + replacement.toString()
+          content = content.slice(safeStart + matchArg.end + 1 + matchEnd)
+          continue
+        }
+      }
+    }
+
+    result += content.slice(0, safeStart)
+    content = content.slice(safeStart)
+  }
+
+  result += content
+
+  return result
+}

src/dev/gulp-file-include/lib/replace-operator.js

@@ -0,0 +1,47 @@
+'use strict'
+
+const balanced = require('balanced-match')
+
+module.exports = function parse(content, opts) {
+  var regexpStart = new RegExp(opts.prefix + '[ ]*' + opts.name + '([^{}]*)\\{')
+  var regexpEnd = opts.suffix ? new RegExp('^\\s*' + opts.suffix) : false
+  var replacement
+  var result = ''
+  var matchStart
+  var matchBody
+  var matchEnd
+  var startEnd
+  var before
+
+  while (matchStart = regexpStart.exec(content)) { // eslint-disable-line
+    startEnd = matchStart.index + matchStart[0].length
+    matchBody = balanced('{', '}', content.slice(startEnd - 1))
+
+    if (matchBody && matchBody.start === 0) {
+      matchEnd = regexpEnd ? regexpEnd.exec(matchBody.post) : true
+
+      if (matchEnd) {
+        before = content.slice(0, matchStart.index)
+        matchEnd = regexpEnd ? matchEnd[0].length : 0
+        replacement = opts.handler({
+          before: before,
+          args: matchStart[1],
+          body: matchBody.body
+        })
+
+        if (replacement !== undefined) {
+          result += before + parse(replacement.toString(), opts)
+          content = content.slice(startEnd + matchBody.end + matchEnd)
+          continue
+        }
+      }
+    }
+
+    result += content.slice(0, startEnd)
+    content = content.slice(startEnd)
+  }
+
+  result += content
+
+  return result
+}

src/dev/gulp-file-include/lib/replace-variable.js

@@ -0,0 +1,20 @@
+'use strict'
+
+const flatten = require('flatnest').flatten
+
+module.exports = function (content, data, opts) {
+  var prefix = opts.prefix + '[ ]*'
+  var suffix = opts.suffix ? '[ ]*' + opts.suffix : ''
+  data = flatten(data)
+  // sort keys by longest keys to iterate in that order
+  var keys = Object.keys(data).sort()
+  var i = keys.length - 1
+  var key
+
+  for (; ~i; i -= 1) {
+    key = keys[i]
+    content = content.replace(new RegExp(prefix + key + suffix, 'g'), data[key])
+  }
+
+  return content
+}

src/dev/gulp-file-include/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "gulp-file-include",
+  "version": "2.3.0",
+  "description": "A gulp plugin for file include",
+  "main": "lib/index.js",
+  "scripts": {
+    "lint": "eslint lib test/*.js --fix",
+    "test": "mocha -R spec -t 200 test/*.js",
+    "test-cov": "istanbul cover node_modules/.bin/_mocha -- -R dot -t 200 test/*.js",
+    "test-travis": "istanbul cover node_modules/.bin/_mocha --report lcovonly -- -R dot -t 200 test/*.js"
+  },
+  "repository": "haoxins/gulp-file-include",
+  "keywords": [
+    "gulpplugin",
+    "file",
+    "include",
+    "replace",
+    "gulp",
+    "plugin"
+  ],
+  "files": [
+    "lib"
+  ],
+  "author": "haoxin",
+  "contributors": [
+    "Bogdan Chadkin <trysound@yandex.ru>",
+    "Arthur Araújo <webarthur@gmail.com>"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "balanced-match": "^1.0.0",
+    "concat-stream": "^2.0.0",
+    "extend": "^3.0.2",
+    "flatnest": "^1.0.0",
+    "json5": "^2.1.3",
+    "plugin-error": "^1.0.1",
+    "through2": "^4.0.2",
+    "vinyl": "^2.2.1"
+  },
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "istanbul": "^0.4.5",
+    "markdown": "^0.5.0",
+    "mocha": "^8.2.1",
+    "should": "^13.2.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "ok"
+    ]
+  }
+}

src/scss/Index.scss

@@ -0,0 +1,486 @@
+@use "utils" as *;
+@use "global" as *;
+
+.index {
+  &.main {
+    display: flex;
+    flex-direction: column;
+    background-color: rgb(255, 255, 255);
+    overflow: hidden;
+  }
+  .section1 {
+    display: flex;
+    flex-direction: column;
+    width: 1920px;
+    height: 5200px;
+    min-height: 5200px;
+  }
+  .cover {
+    position: absolute;
+    top: 3900px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: 1920px;
+    height: 1300px;
+  }
+  .rect {
+    position: absolute;
+    top: 2715px;
+    right: 1368px;
+    bottom: 1431px;
+    left: 93px;
+    width: 459px;
+    height: 1054px;
+    background-color: rgb(59, 59, 65);
+    border-radius: 40px 40px 40px 40px;
+  }
+  .rect1 {
+    position: absolute;
+    top: 3242px;
+    right: 1404px;
+    bottom: 1472px;
+    left: 129px;
+    width: 387px;
+    height: 486px;
+    background-color: rgb(217, 217, 217);
+    border-radius: 40px 40px 40px 40px;
+  }
+  .big_title {
+    position: absolute;
+    top: 3264px;
+    right: 1415px;
+    bottom: 1576px;
+    left: 136px;
+    display: flex;
+    justify-content: center;
+    width: 369px;
+    height: 360px;
+    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+    color: rgb(0, 0, 0);
+    text-align: center;
+  }
+  .big_title1 {
+    position: absolute;
+    top: 4057px;
+    right: 1587px;
+    bottom: 1098px;
+    left: 247px;
+    display: flex;
+    justify-content: center;
+    width: 86px;
+    height: 45px;
+    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+    color: rgb(59, 59, 65);
+    text-align: center;
+  }
+  .big_title11 {
+    position: absolute;
+    top: 4161px;
+    right: 1564px;
+    bottom: 994px;
+    left: 247px;
+    display: flex;
+    justify-content: center;
+    width: 109px;
+    height: 45px;
+    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+    color: rgb(59, 59, 65);
+    text-align: center;
+  }
+  .big_title12 {
+    position: absolute;
+    top: 4263px;
+    right: 1445px;
+    bottom: 892px;
+    left: 247px;
+    display: flex;
+    justify-content: center;
+    width: 228px;
+    height: 45px;
+    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+    color: rgb(59, 59, 65);
+    text-align: center;
+  }
+  .image {
+    position: absolute;
+    top: 2747px;
+    right: 1404px;
+    bottom: 2066px;
+    left: 129px;
+    width: 387px;
+    height: 387px;
+    border-radius: 40px 40px 40px 40px;
+  }
+  .hero_title {
+    position: absolute;
+    top: 3146px;
+    right: 1523.5px;
+    bottom: 2000px;
+    left: 226.5px;
+    display: flex;
+    justify-content: center;
+    width: 170px;
+    height: 54px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+    text-align: center;
+  }
+  .rect2 {
+    position: absolute;
+    top: 2715px;
+    right: 731px;
+    bottom: 1431px;
+    left: 730px;
+    width: 459px;
+    height: 1054px;
+    background-color: rgb(59, 59, 65);
+    border-radius: 40px 40px 40px 40px;
+  }
+  .rect21 {
+    position: absolute;
+    top: 3242px;
+    right: 767px;
+    bottom: 1467px;
+    left: 766px;
+    width: 387px;
+    height: 491px;
+    background-color: rgb(217, 217, 217);
+    border-radius: 40px 40px 40px 40px;
+  }
+  .big_title2 {
+    position: absolute;
+    top: 3264px;
+    right: 787px;
+    bottom: 1531px;
+    left: 775px;
+    display: flex;
+    justify-content: center;
+    width: 358px;
+    height: 405px;
+    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+    color: rgb(0, 0, 0);
+    text-align: center;
+  }
+  .image1 {
+    position: absolute;
+    top: 2747px;
+    right: 767px;
+    bottom: 2066px;
+    left: 766px;
+    width: 387px;
+    height: 387px;
+    border-radius: 40px 40px 40px 40px;
+  }
+  .hero_title1 {
+    position: absolute;
+    top: 3145px;
+    right: 881px;
+    bottom: 2001px;
+    left: 880px;
+    display: flex;
+    justify-content: center;
+    width: 159px;
+    height: 54px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+    text-align: center;
+  }
+  .rect3 {
+    position: absolute;
+    top: 2715px;
+    right: 93px;
+    bottom: 1431px;
+    left: 1368px;
+    width: 459px;
+    height: 1054px;
+    background-color: rgb(59, 59, 65);
+    border-radius: 40px 40px 40px 40px;
+  }
+  .rect22 {
+    position: absolute;
+    top: 3242px;
+    right: 129px;
+    bottom: 1467px;
+    left: 1404px;
+    width: 387px;
+    height: 491px;
+    background-color: rgb(217, 217, 217);
+    border-radius: 40px 40px 40px 40px;
+  }
+  .big_title21 {
+    position: absolute;
+    top: 3264px;
+    right: 149px;
+    bottom: 1540px;
+    left: 1413px;
+    display: flex;
+    justify-content: center;
+    width: 358px;
+    height: 396px;
+    font: 400 36px/1.22 "Inter", Helvetica, Arial, serif;
+    color: rgb(0, 0, 0);
+    text-align: center;
+  }
+  .image2 {
+    position: absolute;
+    top: 2747px;
+    right: 129px;
+    bottom: 2066px;
+    left: 1404px;
+    width: 387px;
+    height: 387px;
+    border-radius: 40px 40px 40px 40px;
+  }
+  .hero_title2 {
+    position: absolute;
+    top: 3138px;
+    right: 207.5px;
+    bottom: 2008px;
+    left: 1482.5px;
+    display: flex;
+    justify-content: center;
+    width: 230px;
+    height: 54px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+    text-align: center;
+  }
+  .wrapper {
+    position: absolute;
+    top: 1300px;
+    right: 0px;
+    bottom: 2600px;
+    left: 0px;
+    display: flex;
+    flex-direction: column;
+    width: 1920px;
+    height: 1300px;
+    min-height: 1300px;
+    background-color: rgb(59, 60, 65);
+  }
+  .image11 {
+    position: absolute;
+    top: 155px;
+    right: 1011px;
+    bottom: 828px;
+    left: 93px;
+    width: 816px;
+    height: 317px;
+    border-radius: 40px 40px 40px 40px;
+  }
+  .image21 {
+    position: absolute;
+    top: 155px;
+    right: 93px;
+    bottom: 828px;
+    left: 1012px;
+    width: 815px;
+    height: 317px;
+    border-radius: 40px 40px 40px 40px;
+  }
+  .image12 {
+    position: absolute;
+    top: 697px;
+    right: 1011px;
+    bottom: 286px;
+    left: 93px;
+    width: 816px;
+    height: 317px;
+    border-radius: 40px 40px 40px 40px;
+  }
+  .image22 {
+    position: absolute;
+    top: 697px;
+    right: 93px;
+    bottom: 286px;
+    left: 1012px;
+    width: 815px;
+    height: 317px;
+    border-radius: 40px 40px 40px 40px;
+  }
+  .hero_title3 {
+    position: absolute;
+    top: 491px;
+    right: 1011px;
+    bottom: 701px;
+    left: 93px;
+    display: flex;
+    justify-content: center;
+    width: 816px;
+    height: 108px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+    text-align: center;
+  }
+  .hero_title4 {
+    position: absolute;
+    top: 491px;
+    right: 93px;
+    bottom: 701px;
+    left: 1012px;
+    display: flex;
+    justify-content: center;
+    width: 815px;
+    height: 108px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+    text-align: center;
+  }
+  .hero_title5 {
+    position: absolute;
+    top: 1028px;
+    right: 93px;
+    bottom: 164px;
+    left: 1012px;
+    display: flex;
+    justify-content: center;
+    width: 815px;
+    height: 108px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+    text-align: center;
+  }
+  .hero_title6 {
+    position: absolute;
+    top: 1033px;
+    right: 1012px;
+    bottom: 159px;
+    left: 93px;
+    display: flex;
+    justify-content: center;
+    width: 815px;
+    height: 108px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+    text-align: center;
+  }
+  .wrapper1 {
+    position: absolute;
+    top: 100px;
+    right: 0px;
+    bottom: 3900px;
+    left: 0px;
+    display: flex;
+    flex-direction: column;
+    width: 1920px;
+    height: 1200px;
+    min-height: 1200px;
+    background: var(--src) center center / 100% 100% no-repeat;
+  }
+  .rect4 {
+    position: absolute;
+    top: 345px;
+    right: 1011px;
+    bottom: 413px;
+    left: 93px;
+    width: 816px;
+    height: 442px;
+    background-color: rgba(217, 217, 217, 0.149);
+  }
+  .hero_title11 {
+    position: absolute;
+    top: 375px;
+    right: 893px;
+    bottom: 459px;
+    left: 108px;
+    width: 919px;
+    height: 366px;
+    font: 700 101px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(59, 59, 65);
+  }
+  .rect5 {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 5100px;
+    left: 0px;
+    width: 1920px;
+    height: 100px;
+    background-color: rgb(59, 60, 65);
+  }
+  .cover1 {
+    position: absolute;
+    top: 0px;
+    right: 1737px;
+    bottom: 5075px;
+    left: 49px;
+    width: 134px;
+    height: 125px;
+  }
+  .image4 {
+    position: absolute;
+    top: 21px;
+    right: 1762px;
+    bottom: 5112px;
+    left: 75px;
+    width: 83px;
+    height: 67px;
+  }
+  .hero_title7 {
+    position: absolute;
+    top: 23px;
+    right: 934px;
+    bottom: 5123px;
+    left: 862px;
+    width: 124px;
+    height: 54px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+  }
+  .hero_title8 {
+    position: absolute;
+    top: 23px;
+    right: 576px;
+    bottom: 5123px;
+    left: 1061px;
+    width: 283px;
+    height: 54px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+  }
+  .hero_title9 {
+    position: absolute;
+    top: 23px;
+    right: 43px;
+    bottom: 5123px;
+    left: 1668px;
+    width: 209px;
+    height: 54px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+  }
+  .hero_title10 {
+    position: absolute;
+    top: 23px;
+    right: 327px;
+    bottom: 5123px;
+    left: 1419px;
+    width: 174px;
+    height: 54px;
+    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+  }
+  .hero_title21_box {
+    position: absolute;
+    top: 4px;
+    right: 1489px;
+    bottom: 5097px;
+    left: 116px;
+    display: flex;
+    justify-content: center;
+    width: 315px;
+    height: 99px;
+  }
+  .hero_title21 {
+    font: 400 46px/1.21 "Inter", Helvetica, Arial, serif;
+    color: rgb(255, 255, 255);
+    text-align: center;
+  }
+  .hero_title21_span0 {
+    font: 1em/1.21 "Inter", Helvetica, Arial, serif;
+  }
+  .hero_title21_span1 {
+    font: 1.7826086956521738em/1.2 "Inter", Helvetica, Arial, serif;
+  }
+}

src/scss/global.scss

@@ -0,0 +1,6 @@
+// color
+
+// background color
+
+// font Stack
+$fallback-font-stack: Helvetica, Arial, serif; ;

src/scss/utils.scss

@@ -0,0 +1,102 @@
+$mq-breakpoints: (tn: 384, xxs: 480, xs: 576, sm: 768, md: 992,
+        lg: 1200, xl: 1400, xxl: 1920, xxxl: 3000, max: 100000);
+
+@function breakpoint-max($name, $breakpoints: $mq-breakpoints) {
+  $max: map-get($breakpoints, $name);
+  @return if($max and $max > 0, $max - 1, null);
+}
+
+@function breakpoint-min($name, $breakpoints: $mq-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@mixin tn {
+  $max: breakpoint-max(tn, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin xxs {
+  $max: breakpoint-max(xxs, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin xs {
+  $max: breakpoint-max(xs, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin sm {
+  $max: breakpoint-max(sm, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin md {
+  $max: breakpoint-max(md, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin lg {
+  $max: breakpoint-max(lg, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin xl {
+  $max: breakpoint-max(xl, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin xxl {
+  $max: breakpoint-max(xxl, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin xxxl {
+  $max: breakpoint-max(xxxl, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin max {
+  $max: breakpoint-max(max, $mq-breakpoints);
+  @media(max-width: #{$max}px) {
+    @content;
+  }
+}
+
+@mixin mq-down($name, $breakpoints: $mq-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: #{$max}px) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin mq-between($lower, $upper, $breakpoints: $mq-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @media (min-width: #{$min}px) and (max-width: #{$max}px) {
+    @content;
+  }
+}

src/template/Index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+  <!--  This source code is exported from pxCode, you can get more document from https://www.pxcode.io  -->
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
+
+    <!-- Please DO NOT remove this line, all link and script tags will be merged to here -->
+
+    <link rel="stylesheet" type="text/css" href="/css/common.css" />
+    <link rel="stylesheet" type="text/css" href="/css/fonts.css" />
+
+    <link rel="stylesheet" type="text/css" href="/css/Index.css" />
+
+    <script type="text/javascript" src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/sticky-js@1.3.0/dist/sticky.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>
+  </head>
+
+  <body class="flex-column">
+    <main class="index main">
+      <section class="section1">
+        /*🚩29 Unstructured items require structuring to ensure responsiveness, as code with absolute positioning lacks
+        adaptability.❗*/<img class="cover" src="/assets/headphones_on_desk.png" alt="alt text" />
+        <div class="rect"></div>
+        <div class="rect1"></div>
+        <h1 class="big_title">
+          Однажды мой сервер Серёга слёг, и я слёг со вселенской печалью, но ко мне на помощь пришли ОНИ и починили нас
+          с серёгой!
+        </h1>
+        <h1 class="big_title1">ФИО</h1>
+        <h1 class="big_title11">Почта</h1>
+        <h1 class="big_title12">Ваша заявка</h1>
+        <img class="image" src="/assets/smiling_man_with_beard.png" alt="alt text" />
+        <h1 class="hero_title">Михаил</h1>
+        <div class="rect2"></div>
+        <div class="rect21"></div>
+        <h1 class="big_title2">
+          Приболел я как-то, и некому было проследить за работой моего сервера Михаила, но ко мне на помощь пришли ОНИ и
+          очень нам подсобили!
+        </h1>
+        <img class="image1" src="/assets/cheerful_young_man_outdoors.png" alt="alt text" />
+        <h1 class="hero_title1">Сергей</h1>
+        <div class="rect3"></div>
+        <div class="rect22"></div>
+        <h1 class="big_title21">
+          У меня принтер сломался! Нет, ну вы представляете?! Я пыталась его починить сама, но застряла... А потом ко
+          мне на “помощь” пришли ОНИ и всё так заработало!
+        </h1>
+        <img class="image2" src="/assets/woman_with_dark_hair.png" alt="alt text" />
+        <h1 class="hero_title2">Екатерина</h1>
+        <div class="wrapper">
+          /*🚩8 Unstructured items require structuring to ensure responsiveness, as code with absolute positioning lacks
+          adaptability.❗*/<img class="image11" src="/assets/printer_maintenance_close_up.png" alt="alt text" /><img
+            class="image21"
+            src="/assets/professional_at_computer_monitor.png"
+            alt="alt text"
+          /><img class="image12" src="/assets/two_people_handshake_crop.png" alt="alt text" /><img
+            class="image22"
+            src="/assets/technician_with_network_cables.png"
+            alt="alt text"
+          />
+          <h1 class="hero_title3">Починка струйных принтеров<br />(875 руб/час)</h1>
+          <h1 class="hero_title4">Диагностика<br />(400 руб/час)</h1>
+          <h1 class="hero_title5">Перенос оборудования<br />(570 руб/час)</h1>
+          <h1 class="hero_title6">Моральная поддержка<br />(570 руб/час)</h1>
+        </div>
+        <div class="wrapper1" style="--src:url(/assets/customer_support_representative.png)">
+          /*🚩2 Unstructured items require structuring to ensure responsiveness, as code with absolute positioning lacks
+          adaptability.❗*/
+          <div class="rect4"></div>
+          <h1 class="hero_title11">МЫ ЛУЧШАЯ ТЕХНИЧЕСКАЯ ПОДДЕРЖКА</h1>
+        </div>
+        <div class="rect5"></div>
+        <img class="cover1" src="/assets/is_null.png" alt="alt text" /><img
+          class="image4"
+          src="/assets/digital_data_transfer_concept.png"
+          alt="alt text"
+        />
+        <h1 class="hero_title7">О нас</h1>
+        <h1 class="hero_title8">Наши услуги</h1>
+        <h1 class="hero_title9">Контакты</h1>
+        <h1 class="hero_title10">Отзывы</h1>
+        <h1 class="hero_title21_box">
+          <span class="hero_title21"
+            ><span class="hero_title21_span0">it</span><span class="hero_title21_span1">ОНИ</span></span
+          >
+        </h1>
+      </section>
+
+    </main>
+    <script type="text/javascript">
+      AOS.init();
+      new Sticky('.sticky-effect');
+    </script>
+  </body>
+</html>

src/template/missing_component.html

@@ -0,0 +1 @@
+missing component

web/Index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<!--  This source code is exported from pxCode, you can get more document from https://www.pxcode.io  -->
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
+
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
+    <link rel="stylesheet" type="text/css" href="./css/common.css" />
+    <link rel="stylesheet" type="text/css" href="./css/fonts.css" />
+    <link rel="stylesheet" type="text/css" href="./css/Index.css" />
+    <script type="text/javascript" src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/sticky-js@1.3.0/dist/sticky.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>
+
+
+
+</head>
+
+<body class="flex-column">
+    <main class="index main">
+        <section class="section1">
+            <div class=e20_36>
+                <div class="e11_2"></div>
+                <div class="e17_26"></div>
+                <div class="e20_33"></div>
+                <div class="e20_34"></div>
+                <div class="e20_35"></div>
+                <div class="e20_15"></div>
+                <div class="e20_21"></div>
+                <div class="e20_24"></div>
+              </div>
+            <div class="rect"></div>
+            <div class="rect1"></div>
+            <h1 class="big_title">
+                Однажды мой сервер Серёга слёг, и я слёг со вселенской печалью, но ко мне на помощь пришли ОНИ и починили нас
+                с серёгой!
+            </h1>
+            <h1 class="big_title1">ФИО</h1>
+            <h1 class="big_title11">Почта</h1>
+            <h1 class="big_title12">Ваша заявка</h1>
+            <img class="image" src="./assets/smiling_man_with_beard.png" alt="alt text" />
+            <h1 class="hero_title">Михаил</h1>
+            <div class="rect2"></div>
+            <div class="rect21"></div>
+            <h1 class="big_title2">
+                Приболел я как-то, и некому было проследить за работой моего сервера Михаила, но ко мне на помощь пришли ОНИ и
+                очень нам подсобили!
+            </h1>
+            <img class="image1" src="./assets/cheerful_young_man_outdoors.png" alt="alt text" />
+            <h1 class="hero_title1">Сергей</h1>
+            <div class="rect3"></div>
+            <div class="rect22"></div>
+            <h1 class="big_title21">
+                У меня принтер сломался! Нет, ну вы представляете?! Я пыталась его починить сама, но застряла... А потом ко
+                мне на “помощь” пришли ОНИ и всё так заработало!
+            </h1>
+            <img class="image2" src="./assets/woman_with_dark_hair.png" alt="alt text" />
+            <h1 class="hero_title2">Екатерина</h1>
+            <div class="wrapper">
+                <img class="image11" src="./assets/printer_maintenance_close_up.png" alt="alt text" /><img class="image21" src="./assets/professional_at_computer_monitor.png" alt="alt text" /><img class="image12" src="./assets/two_people_handshake_crop.png" alt="alt text" /><img class="image22" src="./assets/technician_with_network_cables.png" alt="alt text" />
+                <h1 class="hero_title3">Починка струйных принтеров<br />(875 руб/час)</h1>
+                <h1 class="hero_title4">Диагностика<br />(400 руб/час)</h1>
+                <h1 class="hero_title5">Перенос оборудования<br />(570 руб/час)</h1>
+                <h1 class="hero_title6">Моральная поддержка<br />(570 руб/час)</h1>
+            </div>
+            <div class="wrapper1" style="--src:url(../assets/customer_support_representative.png)">
+                <div class="rect4"></div>
+                <h1 class="hero_title11">МЫ ЛУЧШАЯ ТЕХНИЧЕСКАЯ ПОДДЕРЖКА</h1>
+            </div>
+            <div class="rect5"></div>
+            <img class="cover1" src="./assets/is_null.png" alt="alt text" /><img class="image4" src="./assets/digital_data_transfer_concept.png" alt="alt text" />
+            <h1 class="hero_title7">О нас</h1>
+            <h1 class="hero_title8">Наши услуги</h1>
+            <h1 class="hero_title9">Контакты</h1>
+            <h1 class="hero_title10">Отзывы</h1>
+            <h1 class="hero_title21_box">
+                <span class="hero_title21"
+            ><span class="hero_title21_span0">it</span><span class="hero_title21_span1">ОНИ</span></span>
+            </h1>
+        </section>
+
+    </main>
+    <script type="text/javascript">
+        AOS.init();
+        new Sticky('.sticky-effect');
+    </script>
+</body>
+
+</html>

web/css/Index.css

@@ -0,0 +1,587 @@
+.index.main {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  overflow: hidden;
+}
+.index .section1 {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  height: 5200px;
+  min-height: 5200px;
+}
+
+.e20_36 { 
+  position: absolute;
+  top: 3900px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  width: auto;
+  height: 1300px;
+}
+.e11_2 { 
+	background-color:rgba(59.00000028312206, 59.00000028312206, 65.0000037252903, 1);
+  position: absolute;
+  top: 10px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  height: 1300px;
+}
+.e17_26 { 
+	width:815px;
+	height:1015px;
+	position:absolute;
+	left:1012px;
+	top:142px;
+	border-top-left-radius:40px;
+	border-top-right-radius:40px;
+	border-bottom-left-radius:40px;
+	border-bottom-right-radius:40px;
+  background-image:url(woman.png);
+	background-size:cover;
+  background-repeat:no-repeat;
+}
+.e20_33 { 
+	width:76px;
+	height:76px;
+	position:absolute;
+	left:124px;
+	top:356px;
+	background-image:url(chat.png);
+	background-repeat:no-repeat;
+	background-size:cover;
+}
+.e20_34 { 
+	width:75px;
+	height:75px;
+	position:absolute;
+	left:125px;
+	top:254px;
+	background-image:url(sms.png);
+	background-repeat:no-repeat;
+	background-size:cover;
+}
+.e20_35 { 
+	width:73px;
+	height:73px;
+	position:absolute;
+	left:125px;
+	top:151px;
+	background-image:url(contact.png);
+	background-repeat:no-repeat;
+	background-size:cover;
+}
+.e20_15 { 
+	background-color:rgba(217.0000022649765, 217.0000022649765, 217.0000022649765, 1);
+	width:749px;
+	height:67px;
+	position:absolute;
+	left:228px;
+	top:154px;
+	border-top-left-radius:20px;
+	border-top-right-radius:20px;
+	border-bottom-left-radius:20px;
+	border-bottom-right-radius:20px;
+}
+.e20_21 { 
+	background-color:rgba(217.0000022649765, 217.0000022649765, 217.0000022649765, 1);
+	width:749px;
+	height:67px;
+	position:absolute;
+	left:225px;
+	top:258px;
+	border-top-left-radius:20px;
+	border-top-right-radius:20px;
+	border-bottom-left-radius:20px;
+	border-bottom-right-radius:20px;
+}
+.e20_24 { 
+	background-color:rgba(217.0000022649765, 217.0000022649765, 217.0000022649765, 1);
+	width:749px;
+	height:797px;
+	position:absolute;
+	left:225px;
+	top:360px;
+	border-top-left-radius:20px;
+	border-top-right-radius:20px;
+	border-bottom-left-radius:20px;
+	border-bottom-right-radius:20px;
+}
+
+.index .rect {
+  position: absolute;
+  top: 2715px;
+  right: 1368px;
+  bottom: 1431px;
+  left: 93px;
+  width: 459px;
+  height: 1054px;
+  background-color: #3b3b41;
+  border-radius: 40px 40px 40px 40px;
+}
+.index .rect1 {
+  position: absolute;
+  top: 3242px;
+  right: 1404px;
+  bottom: 1472px;
+  left: 129px;
+  width: 387px;
+  height: 486px;
+  background-color: #d9d9d9;
+  border-radius: 40px 40px 40px 40px;
+}
+.index .big_title {
+  position: absolute;
+  top: 3264px;
+  right: 1415px;
+  bottom: 1576px;
+  left: 136px;
+  display: flex;
+  justify-content: center;
+  width: 369px;
+  height: 360px;
+  font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+  color: black;
+  text-align: center;
+}
+.index .big_title1 {
+  position: absolute;
+  top: 4057px;
+  right: 1587px;
+  bottom: 1098px;
+  left: 247px;
+  display: flex;
+  justify-content: center;
+  width: 86px;
+  height: 45px;
+  font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+  color: #3b3b41;
+  text-align: center;
+}
+.index .big_title11 {
+  position: absolute;
+  top: 4161px;
+  right: 1564px;
+  bottom: 994px;
+  left: 247px;
+  display: flex;
+  justify-content: center;
+  width: 109px;
+  height: 45px;
+  font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+  color: #3b3b41;
+  text-align: center;
+}
+.index .big_title12 {
+  position: absolute;
+  top: 4263px;
+  right: 1445px;
+  bottom: 892px;
+  left: 247px;
+  display: flex;
+  justify-content: center;
+  width: 228px;
+  height: 45px;
+  font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+  color: #3b3b41;
+  text-align: center;
+}
+.index .image {
+  position: absolute;
+  top: 2747px;
+  right: 1404px;
+  bottom: 2066px;
+  left: 129px;
+  width: 387px;
+  height: 387px;
+  border-radius: 40px 40px 40px 40px;
+}
+.index .hero_title {
+  position: absolute;
+  top: 3146px;
+  right: 1523.5px;
+  bottom: 2000px;
+  left: 226.5px;
+  display: flex;
+  justify-content: center;
+  width: 170px;
+  height: 54px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+  text-align: center;
+}
+.index .rect2 {
+  position: absolute;
+  top: 2715px;
+  right: 731px;
+  bottom: 1431px;
+  left: 730px;
+  width: 459px;
+  height: 1054px;
+  background-color: #3b3b41;
+  border-radius: 40px 40px 40px 40px;
+}
+.index .rect21 {
+  position: absolute;
+  top: 3242px;
+  right: 767px;
+  bottom: 1467px;
+  left: 766px;
+  width: 387px;
+  height: 491px;
+  background-color: #d9d9d9;
+  border-radius: 40px 40px 40px 40px;
+}
+.index .big_title2 {
+  position: absolute;
+  top: 3264px;
+  right: 787px;
+  bottom: 1531px;
+  left: 775px;
+  display: flex;
+  justify-content: center;
+  width: 358px;
+  height: 405px;
+  font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
+  color: black;
+  text-align: center;
+}
+.index .image1 {
+  position: absolute;
+  top: 2747px;
+  right: 767px;
+  bottom: 2066px;
+  left: 766px;
+  width: 387px;
+  height: 387px;
+  border-radius: 40px 40px 40px 40px;
+}
+.index .hero_title1 {
+  position: absolute;
+  top: 3145px;
+  right: 881px;
+  bottom: 2001px;
+  left: 880px;
+  display: flex;
+  justify-content: center;
+  width: 159px;
+  height: 54px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+  text-align: center;
+}
+.index .rect3 {
+  position: absolute;
+  top: 2715px;
+  right: 93px;
+  bottom: 1431px;
+  left: 1368px;
+  width: 459px;
+  height: 1054px;
+  background-color: #3b3b41;
+  border-radius: 40px 40px 40px 40px;
+}
+.index .rect22 {
+  position: absolute;
+  top: 3242px;
+  right: 129px;
+  bottom: 1467px;
+  left: 1404px;
+  width: 387px;
+  height: 491px;
+  background-color: #d9d9d9;
+  border-radius: 40px 40px 40px 40px;
+}
+.index .big_title21 {
+  position: absolute;
+  top: 3264px;
+  right: 149px;
+  bottom: 1540px;
+  left: 1413px;
+  display: flex;
+  justify-content: center;
+  width: 358px;
+  height: 396px;
+  font: 400 36px/1.22 "Inter", Helvetica, Arial, serif;
+  color: black;
+  text-align: center;
+}
+.index .image2 {
+  position: absolute;
+  top: 2747px;
+  right: 129px;
+  bottom: 2066px;
+  left: 1404px;
+  width: 387px;
+  height: 387px;
+  border-radius: 40px 40px 40px 40px;
+}
+.index .hero_title2 {
+  position: absolute;
+  top: 3138px;
+  right: 207.5px;
+  bottom: 2008px;
+  left: 1482.5px;
+  display: flex;
+  justify-content: center;
+  width: 230px;
+  height: 54px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+  text-align: center;
+}
+.index .wrapper {
+  position: absolute;
+  top: 1300px;
+  right: 0px;
+  bottom: 2600px;
+  left: 0px;
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  height: 1300px;
+  min-height: 1300px;
+  background-color: #3b3c41;
+}
+.index .image11 {
+  position: absolute;
+  top: 155px;
+  right: 1011px;
+  bottom: 828px;
+  left: 93px;
+  width: auto;
+  height: 317px;
+  border-radius: 40px 40px 40px 40px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+.index .image21 {
+  position: absolute;
+  top: 155px;
+  right: 93px;
+  bottom: 828px;
+  left: 1012px;
+  width: auto;
+  height: 317px;
+  border-radius: 40px 40px 40px 40px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+.index .image12 {
+  position: absolute;
+  top: 697px;
+  right: 1011px;
+  bottom: 286px;
+  left: 93px;
+  width: auto;
+  height: 317px;
+  border-radius: 40px 40px 40px 40px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+.index .image22 {
+  width:815px;
+	height:317px;
+  position: absolute;
+  top: 697px;
+	left:1012px;
+  border-radius: 40px 40px 40px 40px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+.index .hero_title3 {
+  position: absolute;
+  top: 491px;
+  right: 1011px;
+  bottom: 701px;
+  left: 93px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: auto;
+  height: 108px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+  text-align: center;
+}
+.index .hero_title4 {
+  position: absolute;
+  top: 491px;
+  right: 93px;
+  bottom: 701px;
+  left: 1012px;
+  display: flex;
+  justify-content: center;
+  width: auto;
+  height: 108px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+  text-align: center;
+}
+.index .hero_title5 {
+  position: absolute;
+  top: 1028px;
+  right: 93px;
+  bottom: 164px;
+  left: 1012px;
+  display: flex;
+  justify-content: center;
+  width: auto;
+  height: 108px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+  text-align: center;
+}
+.index .hero_title6 {
+  position: absolute;
+  top: 1033px;
+  right: 1012px;
+  bottom: 159px;
+  left: 93px;
+  display: flex;
+  justify-content: center;
+  width: auto;
+  height: 108px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+  text-align: center;
+}
+.index .wrapper1 {
+  position: absolute;
+  top: 100px;
+  right: 0px;
+  bottom: 3900px;
+  left: 0px;
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  height: 1200px;
+  min-height: 1200px;
+  background: var(--src) center center/100% 100% no-repeat;
+}
+.index .rect4 {
+  position: absolute;
+  top: 345px;
+  right: 1011px;
+  bottom: 413px;
+  left: 93px;
+  width: 816px;
+  height: 442px;
+  background-color: rgba(217, 217, 217, 0.149);
+}
+.index .hero_title11 {
+  position: absolute;
+  top: 375px;
+  right: 893px;
+  bottom: 459px;
+  left: 108px;
+  width: 919px;
+  height: 366px;
+  font: 700 101px/1.2 "Inter", Helvetica, Arial, serif;
+  color: #3b3b41;
+}
+.index .rect5 {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 5100px;
+  left: 0px;
+  width: auto;
+  height: 100px;
+  background-color: #3b3c41;
+}
+.index .cover1 {
+  position: absolute;
+  top: 0px;
+  right: 1737px;
+  bottom: 5075px;
+  left: 49px;
+  width: 134px;
+  height: 125px;
+}
+.index .image4 {
+  position: absolute;
+  top: 21px;
+  right: 1762px;
+  bottom: 5112px;
+  left: 75px;
+  width: 83px;
+  height: 67px;
+}
+.index .hero_title7 {
+  position: absolute;
+  top: 23px;
+  right: 934px;
+  bottom: 5123px;
+  flex-direction: column;
+  width: 124px;
+  height: 54px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+}
+.index .hero_title8 {
+  position: absolute;
+  top: 23px;
+  right: 576px;
+  bottom: 5123px;
+  flex-direction: column;
+  width: 283px;
+  height: 54px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+}
+.index .hero_title9 {
+  position: absolute;
+  top: 23px;
+  right: 43px;
+  bottom: 5123px;
+  flex-direction: column;
+  width: 209px;
+  height: 54px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+}
+.index .hero_title10 {
+  position: absolute;
+  top: 23px;
+  right: 327px;
+  bottom: 5123px;
+  flex-direction: column;
+  width: 174px;
+  height: 54px;
+  font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
+  color: white;
+}
+.index .hero_title21_box {
+  position: absolute;
+  top: 4px;
+  right: 1489px;
+  bottom: 5097px;
+  left: 116px;
+  display: flex;
+  justify-content: center;
+  width: 315px;
+  height: 99px;
+}
+.index .hero_title21 {
+  font: 400 46px/1.21 "Inter", Helvetica, Arial, serif;
+  color: white;
+  text-align: center;
+}
+.index .hero_title21_span0 {
+  font: 1em/1.21 "Inter", Helvetica, Arial, serif;
+}
+.index .hero_title21_span1 {
+  font: 1.7826086957em/1.2 "Inter", Helvetica, Arial, serif;
+}

web/css/common.css

@@ -0,0 +1,248 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6, hr, p, figure {
+    display: flex;
+    font-size: 1em;
+    font-weight: normal;
+    margin: 0;
+    border-width: 0;
+    opacity: 1;
+}
+
+ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    display: flex;
+}
+
+button {
+    background-color: transparent;
+    border: none;
+    display: flex;
+    padding: 0;
+    margin: 0;
+    align-items: normal;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.page-header {
+    z-index: 10000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.sticking {
+    margin: 0 !important;
+    z-index: 10000 !important;
+}
+
+@media (max-width: 99999px) {
+    .max\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xxxl\:show {
+        display: none;
+    }
+
+    .xxl\:show {
+        display: none;
+    }
+
+    .xl\:show {
+        display: none;
+    }
+
+    .lg\:show {
+        display: none;
+    }
+
+    .md\:show {
+        display: none;
+    }
+
+    .sm\:show {
+        display: none;
+    }
+
+    .xs\:show {
+        display: none;
+    }
+
+    .xxs\:show {
+        display: none;
+    }
+
+    .tn\:show {
+        display: none;
+    }
+
+    .max\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 2999px) {
+    .xxxl\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xxxl\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 1919px) {
+    .xxl\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xxl\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 1399px) {
+    .xl\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xl\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 1199px) {
+    .lg\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .lg\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 991px) {
+    .md\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .md\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 767px) {
+    .sm\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .sm\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 575px) {
+    .xs\:show {
+        display: flex;
+        flex-direction: column;
+
+    }
+
+    .xs\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 480px) {
+    .xxs\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .xxs\:hide {
+        display: none;
+    }
+}
+
+@media (max-width: 384px) {
+    .tn\:show {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .tn\:hide {
+        display: none;
+    }
+}
+
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}

web/css/fonts.css

@@ -0,0 +1,18 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+@font-face {
+  font-family: "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
+  src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0")
+      format("embedded-opentype"),
+    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0")
+      format("woff2"),
+    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0")
+      format("woff"),
+    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0")
+      format("truetype"),
+    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular")
+      format("svg");
+}

web/css/headroom.css

@@ -0,0 +1,17 @@
+.headroom {
+    z-index: 10000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    will-change: transform;
+    transition: transform 200ms linear;
+}
+
+.headroom--pinned {
+    transform: translateY(0%);
+}
+
+.headroom--unpinned {
+    transform: translateY(-100%);
+}