Skip to content

E
etersoft.com
Commit 3711ecf7 authored by Davyd Dobryakov's avatar Davyd Dobryakov
Browse files
Options

Initial commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 2099 additions and 0 deletions
.babelrc 0 → 100644
View file @ 3711ecf7
{
"presets": [
"@babel/preset-env"
]
}
.gitignore 0 → 100644
View file @ 3711ecf7
_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
.index.html.swp 0 → 100644
View file @ 3711ecf7
File added
de/index.html 0 → 100644
View file @ 3711ecf7
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Eterlanding</title>
<link rel="stylesheet" href="../dist/app.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="./">
<img src="../src/images/logo.png" alt="">
</a>
</div>
<ul class="menu-right">
<li><a href="#about">Über uns</a></li>
<li><a href="#products">Produkt</a></li>
<li><a href="#services">Dienstleistungen</a></li>
<li><a href="#contact-us">Kontaktieren Sie uns</a></li>
<select id="changeLanguage" name="change-language">
<option value="ru"><img src="../src/image/ru.png" alt=""> Ru</option>
<option value="en"><img src="../src/image/uk.png" alt=""> En</option>
<option value="de"><img src="../src/image/de.png" alt=""> De</option>
</select>
<div class="menu-button" id="menuButton">
<span class="burger-icon"></span>
</div>
</ul>
</nav>
</header>
<menu id="menu">
<a href="#about"><span>Über uns</span></a>
<a href="#products"><span>Produkt</span></a>
<a href="#services"><span>Dienstleistungen</span></a>
<a href="#contact-us"><span>Kontaktieren Sie uns</span></a>
</menu>
<div class="hello-banner">
<div class="hello-banner__gradient"></div>
<div class="hello-banner__img"></div>
<div class="hello-banner__text">
<h1>
Разработка программных решений на базе Linux и свободных программ для бизнеса, государственных организаций и частных пользователей.
</h1>
<p class="pt-2">Делаём всё.</p>
<p>Лучше всех.</p>
</div>
</div>
<section id="about">
<div class="left-column">
<h1>Über uns</h1>
<div class="description">
<p>
Компания Etersoft занимается разработкой программных решений на базе Linux и свободных программ для бизнеса, государственных организаций и частных пользователей. Компания была основана в 2003 году. С того времени мы приобрели большой опыт в разработке кроссплатформенных решений. Сегодня они используются в самых разных организациях: от небольших магазинов до крупных производственных предприятий, от школ и детских садов до Мариинского театра. Наши продукты внедряются партнёрами по всей России и в странах СНГ.
</p>
<br/>
<p>
<strong>Миссия Etersoft</strong> - популяризация свободного ПО в любых областях, где применяется компьютерная техника. Продукты Etersoft призваны устранить препятствия и сложности, которые могут возникнуть при переходе на СПО, чтобы как можно больше организаций уже сегодня смогли успешно работать с Linux и свободными программами. Мы помогаем людям использовать преимущества свободного ПО для решения их задач, грамотно комбинировать свободные и проприетарные продукты, экономить значительные средства на покупке лицензий. Мы благодарны нашим клиентам и партнёрам за ценные предложения и замечания. Ведь именно для них мы работаем и стремимся учитывать пожелания пользователей при разработке продуктов Etersoft.
</p>
</div>
</div>
<div class="right-column">
<div class="banner">
<img src="../src/images/about.png" alt="">
</div>
</div>
</section>
<section id="products">
<div class="right-column">
<div class="banner">
<img src="../src/images/about.png" alt="">
</div>
</div>
<div class="left-column">
<h1>Produkt:</h1>
<div class="description">
<ol class="default-list">
<li>WINE@Etersoft – программное решение, позволяющее работать с Windows-приложениями (1С:Предприятие, Консультант, Гарант, КОМПАС-3D и др.) на операционных системах семейства GNU/Linux</li>
<li>SELTA@Etersoft – транслятор SQL-запросов, помогает использовать свободную СУБД PostgreSQL в программах, ориентированных на коммерческую MS SQL</li>
<li>Postgre@Etersoft– версия PostgreSQL, которая содержит все необходимые настройки для надёжной и высокопроизводительной работы 1С: Предприятие со свободной СУБД</li>
<li>RX@Etersoft – терминальный сервер, поможет организовать режим работы, при котором приложения выполняются на сервере, а на рабочие станции передаётся только изображение</li>
<li>UniOffice@Etersoft – транслятор COM-объектов MS Office, позволяет работать с OpenOffice в приложениях, использующих выгрузку в MS Office</li>
<li>LINUX@Etersoft — дистрибутив Linux, основанный на ALTLinux и включающий в себя продукты компании</li>
</ol>
</div>
</div>
</section>
<section id="services">
<div class="left-column">
<h1>Dienstleistungen</h1>
<div class="description">
<ol class="default-list">
<li>Внедрение: работы по установке и настройке, обеспечивающие надёжную работу серверов и рабочих мест</li>
<li>Доработка ПО: включение вашего приложения в поддержку WINE@Etersoft, SELTA@Etersoft и UniOffice@Etersoft</li>
<li>Разработка различного ПО под заказ</li>
<li>Разработка сайтов</li>
<li>Разработка автоматизированных систем управления промышленными объектами</li>
<li>Техническая поддержка</li>
</ol>
</div>
</div>
<div class="right-column">
<div class="banner">
<img src="../src/images/about.png" alt="">
</div>
</div>
</section>
<section id="contact-us">
<div class="right-column">
<div class="banner">
<img src="../src/images/about.png" alt="">
</div>
</div>
<div class="left-column">
<h1>Kontaktieren Sie uns</h1>
<div class="description">
<p><strong>Adresse:</strong> г. Санкт-Петербург, наб. Обводного канала, 24а, офис 12 </p>
<p><strong>Büro-öffnungszeiten:</strong> 11:00-18:00</p>
<p><strong>Telefon Sekretärin:</strong> <a href="tel:+78126486178">+7(812)648-61-78</a></p>
<p><strong>E-mail:</strong></p>
<ul class="btn-menu">
<li><a class="btn btn-default" href="mailto:info@etersoft.ru">Общие вопросы</a></li>
<li><a href="mailto:suppot@etersoft.ru" class="btn btn-default">Служба поддержки</a></li>
<li><a href="mailto:sales@etersoft.ru" class="btn btn-default">Отдел продаж</a></li>
<li><a href="maito:job@etersoft.ru" class="btn btn-default">Отдел кадров</a></li>
<li><a href="mailto:junkado@etersoft.ru" class="btn btn-danger">Сюда не пишите!</a></li>
<li><a href="mailto:security@etersoft.ru" class="btn btn-default">Служба безопасности</a></li>
</ul>
</div>
</div>
</section>
<footer>
ООО «Этерсофт»
<br/>
Россия, Санкт-Петербург
<br/>
+7 (812) 648-61-78
</footer>
<script type="text/javascript" src="../dist/app.js"></script>
</body>
</html>
en/index.html 0 → 100644
View file @ 3711ecf7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eterlanding</title>
<link rel="stylesheet" href="../dist/app.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="./">
<img src="../src/images/logo.png" alt="">
</a>
</div>
<ul class="menu-right">
<li><a href="#about">About us</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact-us">Contact us</a></li>
<select id="changeLanguage" name="change-language">
<option value="ru"><img src="../src/image/ru.png" alt=""> Ru</option>
<option value="en"><img src="../src/image/uk.png" alt=""> En</option>
<option value="de"><img src="../src/image/de.png" alt=""> De</option>
</select>
<div class="menu-button" id="menuButton">
<span class="burger-icon"></span>
</div>
</ul>
</nav>
</header>
<menu id="menu">
<a href="#about"><span>About us</span></a>
<a href="#products"><span>Products</span></a>
<a href="#services"><span>Services</span></a>
<a href="#contact-us"><span>Contact us</span></a>
</menu>
<div class="hello-banner">
<div class="hello-banner__gradient"></div>
<div class="hello-banner__img"></div>
<div class="hello-banner__text">
<h1>
Разработка программных решений на базе Linux и свободных программ для бизнеса, государственных организаций и частных пользователей.
</h1>
<p class="pt-2">Делаём всё.</p>
<p>Лучше всех.</p>
</div>
</div>
<section id="about">
<div class="left-column">
<h1>About us</h1>
<div class="description">
<p>
Компания Etersoft занимается разработкой программных решений на базе Linux и свободных программ для бизнеса, государственных организаций и частных пользователей. Компания была основана в 2003 году. С того времени мы приобрели большой опыт в разработке кроссплатформенных решений. Сегодня они используются в самых разных организациях: от небольших магазинов до крупных производственных предприятий, от школ и детских садов до Мариинского театра. Наши продукты внедряются партнёрами по всей России и в странах СНГ.
</p>
<br/>
<p>
<strong>Миссия Etersoft</strong> - популяризация свободного ПО в любых областях, где применяется компьютерная техника. Продукты Etersoft призваны устранить препятствия и сложности, которые могут возникнуть при переходе на СПО, чтобы как можно больше организаций уже сегодня смогли успешно работать с Linux и свободными программами. Мы помогаем людям использовать преимущества свободного ПО для решения их задач, грамотно комбинировать свободные и проприетарные продукты, экономить значительные средства на покупке лицензий. Мы благодарны нашим клиентам и партнёрам за ценные предложения и замечания. Ведь именно для них мы работаем и стремимся учитывать пожелания пользователей при разработке продуктов Etersoft.
</p>
</div>
</div>
<div class="right-column">
<div class="banner">
<img src="../src/images/about.png" alt="">
</div>
</div>
</section>
<section id="products">
<div class="right-column">
<div class="banner">
<img src="../src/images/about.png" alt="">
</div>
</div>
<div class="left-column">
<h1>Products@Etersoft:</h1>
<div class="description">
<ol class="default-list">
<li>WINE@Etersoft – программное решение, позволяющее работать с Windows-приложениями (1С:Предприятие, Консультант, Гарант, КОМПАС-3D и др.) на операционных системах семейства GNU/Linux</li>
<li>SELTA@Etersoft – транслятор SQL-запросов, помогает использовать свободную СУБД PostgreSQL в программах, ориентированных на коммерческую MS SQL</li>
<li>Postgre@Etersoft– версия PostgreSQL, которая содержит все необходимые настройки для надёжной и высокопроизводительной работы 1С: Предприятие со свободной СУБД</li>
<li>RX@Etersoft – терминальный сервер, поможет организовать режим работы, при котором приложения выполняются на сервере, а на рабочие станции передаётся только изображение</li>
<li>UniOffice@Etersoft – транслятор COM-объектов MS Office, позволяет работать с OpenOffice в приложениях, использующих выгрузку в MS Office</li>
<li>LINUX@Etersoft — дистрибутив Linux, основанный на ALTLinux и включающий в себя продукты компании</li>
</ol>
</div>
</div>
</section>
<section id="services">
<div class="left-column">
<h1>Services:</h1>
<div class="description">
<ol class="default-list">
<li>Внедрение: работы по установке и настройке, обеспечивающие надёжную работу серверов и рабочих мест</li>
<li>Доработка ПО: включение вашего приложения в поддержку WINE@Etersoft, SELTA@Etersoft и UniOffice@Etersoft</li>
<li>Разработка различного ПО под заказ</li>
<li>Разработка сайтов</li>
<li>Разработка автоматизированных систем управления промышленными объектами</li>
<li>Техническая поддержка</li>
</ol>
</div>
</div>
<div class="right-column">
<div class="banner">
<img src="../src/images/about.png" alt="">
</div>
</div>
</section>
<section id="contact-us">
<div class="right-column">
<div class="banner">
<img src="../src/images/about.png" alt="">
</div>
</div>
<div class="left-column">
<h1>Contact us</h1>
<div class="description">
<p><strong>Address:</strong> г. Санкт-Петербург, наб. Обводного канала, 24а, офис 12 </p>
<p><strong>Office hours:</strong> 11:00-18:00</p>
<p><strong>Secretary's phone number:</strong> <a href="tel:+78126486178">+7(812)648-61-78</a></p>
<p><strong>E-mail:</strong></p>
<ul class="btn-menu">
<li><a class="btn btn-default" href="mailto:info@etersoft.ru">Общие вопросы</a></li>
<li><a href="mailto:suppot@etersoft.ru" class="btn btn-default">Служба поддержки</a></li>
<li><a href="mailto:sales@etersoft.ru" class="btn btn-default">Отдел продаж</a></li>
<li><a href="maito:job@etersoft.ru" class="btn btn-default">Отдел кадров</a></li>
<li><a href="mailto:junkado@etersoft.ru" class="btn btn-danger">Сюда не пишите!</a></li>
<li><a href="mailto:security@etersoft.ru" class="btn btn-default">Служба безопасности</a></li>
</ul>
</div>
</div>
</section>
<footer>
ООО «Этерсофт»
<br/>
Россия, Санкт-Петербург
<br/>
+7 (812) 648-61-78
</footer>
<script type="text/javascript" src="../dist/app.js"></script>
</body>
</html>
index.html 0 → 100644
View file @ 3711ecf7
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Eterlanding</title>
<link rel="stylesheet" href="dist/app.css">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<header class="top-0">
<nav class="transparent">
<div class="logo">
<a href="./">
<img src="src/images/logo.png" alt="">
</a>
</div>
<ul class="menu-right">
<li><a href="#about">О компании</a></li>
<li><a href="#products">Продукты</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contact-us">Контакты</a></li>
<select id="changeLanguage" name="change-language">
<option value="ru" style="background-image:url(src/images/ru.png)"><img src="src/images/ru.png" alt=""> Ru</option>
<option value="en"><img src="src/images/uk.png" alt=""> En</option>
<option value="de"><img src="src/images/de.png" alt=""> De</option>
</select>
<div class="menu-button" id="menuButton">
<span class="burger-icon"></span>
</div>
</ul>
</nav>
</header>
<menu id="menu">
<a href="#about"><span>О компании</span></a>
<a href="#products"><span>Продукты</span></a>
<a href="#services"><span>Услуги</span></a>
<a href="#contact-us"><span>Контакты</span></a>
</menu>
<div class="hello-banner">
<div class="hello-banner__gradient"></div>
<div class="hello-banner__img"></div>
<div class="hello-banner__text">
<h1>
Разработка программных решений на базе Linux и свободных программ для бизнеса, государственных организаций и частных
пользователей.
</h1>
<p class="pt-2">Делаём всё.</p>
<p class="mb-3">Лучше всех.</p>
<a class="btn btn-primary" href="#products">Смотреть портфолио</a>
</div>
</div>
<section id="about">
<div class="left-column">
<h2>О компании</h2>
<div class="description">
<p>
Компания Etersoft занимается разработкой программных решений на базе Linux и свободных программ для бизнеса,
государственных организаций и частных пользователей. Компания была основана в 2003 году. С того времени мы
приобрели большой опыт в разработке кроссплатформенных решений. Сегодня они используются в самых разных
организациях: от небольших магазинов до крупных производственных предприятий, от школ и детских садов до
Мариинского театра. Наши продукты внедряются партнёрами по всей России и в странах СНГ.
</p>
<br />
<p>
<strong>Миссия Etersoft</strong> - популяризация свободного ПО в любых областях, где применяется компьютерная
техника. Продукты Etersoft призваны устранить препятствия и сложности, которые могут возникнуть при переходе на
СПО, чтобы как можно больше организаций уже сегодня смогли успешно работать с Linux и свободными программами. Мы
помогаем людям использовать преимущества свободного ПО для решения их задач, грамотно комбинировать свободные и
проприетарные продукты, экономить значительные средства на покупке лицензий. Мы благодарны нашим клиентам и
партнёрам за ценные предложения и замечания. Ведь именно для них мы работаем и стремимся учитывать пожелания
пользователей при разработке продуктов Etersoft.
</p>
</div>
</div>
<div class="right-column">
<div class="banner">
<img src="src/images/about.png" alt="">
</div>
</div>
</section>
<section id="products" class="flex-column">
<h2>Наши разработки:</h2>
<div class="slider mt-2" tabindex="0">
<div class="slider__wrapper">
<div class="slider__item">
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/about.png" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading">UniSet2</h2>
<p class="card__text">library for building distributed industrial control systems</p>
</div>
</div>
</div>
<div class="slider__item">
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/about.png" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading">EEPM</h2>
<p class="card__text">Etersoft EPM package manager</p>
</div>
</div>
</div>
<div class="slider__item">
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/about.png" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading">ERC</h2>
<p class="card__text">Library for building distributed industrial control systems</p>
</div>
</div>
</div>
<div class="slider__item">
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/about.png" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading">Korinf</h2>
<p class="card__text">Korinf multidistro single source build system</p>
</div>
</div>
</div>
<div class="slider__item">
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/about.png" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading">rxclient</h2>
<p class="card__text">RX Client is a NX 3.5 compatible client based on OpenNX code</p>
</div>
</div>
</div>
<div class="slider__item">
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/about.png" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading">WINE@Etersoft</h2>
<p class="card__text">Awesome modified WINE</p>
</div>
</div>
</div>
<div class="slider__item">
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/about.png" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading">SELTA@Etersoft</h2>
<p class="card__text"></p>
</div>
</div>
</div>
</div>
<a class="slider__control slider__control_left" href="#" role="button"></a>
<a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
</div>
</section>
<section id="services" class="flex-column">
<h2>Наши услуги:</h2>
<div class="card-deck mt-2">
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/services1.jpg" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading--animated">Внедрение</h2>
<p class="card__text--animated">работы по установке и настройке, обеспечивающие надёжную работу серверов и рабочих
мест</p>
</div>
</div>
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/services2.jpg" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading--animated">Доработка ПО</h2>
<p class="card__text--animated">включение вашего приложения в поддержку WINE@Etersoft, SELTA@Etersoft и
UniOffice@Etersoft
</p>
</div>
</div>
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/services3.jpg" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading--animated">Разработка ПО под заказ</h2>
<p class="card__text--animated"></p>
</div>
</div>
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/services4.jpg" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading--animated">Разработка сайтов</h2>
<p class="card__text--animated"></p>
</div>
</div>
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/services5.jpg" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading--animated">Разработка АСУ</h2>
<p class="card__text--animated">для промышленных объектов</p>
</div>
</div>
<div class="card">
<div class="card__body">
<div class="card__image">
<img src="src/images/services6.jpg" alt="">
</div>
<div class="card__overlay"></div>
<h2 class="card__heading--animated">Техническая поддержка</h2>
<p class="card__text--animated"></p>
</div>
</div>
</div>
</section>
<section id="contact-us">
<div class="left-column">
<h2>Связаться с нами</h2>
<div class="description">
<p><strong>Адрес:</strong> г. Санкт-Петербург, наб. Обводного канала, 24а, офис 12 </p>
<p><strong>Часы работы офиса:</strong> 11:00-18:00</p>
<p><strong>Нанять нас:</strong> <a href="mailto:sales@etersoft.ru">sales@etersoft.ru</a></p>
<p><strong>Наняться к нам:</strong> <a href="mailto:job@etersoft.ru">job@etersoft.ru</a></p>
</div>
</div>
<div class="right-column">
<div class="banner">
<iframe
src="https://yandex.ru/map-widget/v1/?um=constructor%3Ad11a342758b8d992a3f15cf82b5e8bd941d94f6e91afd760c6b07a9eee2e67de&amp;source=constructor"
class="map-iframe" frameborder="0"></iframe>
</div>
</div>
</section>
<footer>
ООО «Этерсофт»
<br />
Россия, Санкт-Петербург
<br />
+7 (812) 648-61-78
</footer>
<script type="text/javascript" src="dist/app.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
package-lock.json 0 → 100644
View file @ 3711ecf7
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 3711ecf7
{
"name": "eterlanding",
"version": "1.0.0",
"description": "Test landing for Etersoft",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open --host 91.232.225.11 --port 17001 --mode development",
"build": "webpack --mode production"
},
"browserslist": [
"> 1%",
"last 3 version"
],
"author": "kantegory",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"css-mqpacker": "^7.0.0",
"cssnano": "^4.1.10",
"file-loader": "^5.0.2",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"path": "^0.12.7",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.2"
}
}
src/css/main.css 0 → 100644
View file @ 3711ecf7
.wrapper {
display: flex;
}
src/css/main.css~ 0 → 100644
View file @ 3711ecf7
.wrapper {
display: flex;
}
src/index.js 0 → 100644
View file @ 3711ecf7
import './js/common'
import './css/main.css'
import './scss/main.scss'
src/js/common.js 0 → 100644
View file @ 3711ecf7
let menuButton = document.getElementById('menuButton');
let menu = document.getElementById('menu');
let menuItems = Array.from(menu.querySelectorAll('a'));
menuButton.addEventListener('click', function (e) {
menuButton.classList.toggle('is-active');
menu.classList.toggle('visually-visible');
e.preventDefault();
});
menuItems.map((item) => item.addEventListener('click', function (e) {
menuButton.classList.toggle('is-active');
menu.classList.toggle('visually-visible');
}));
menuItems.map((item) => item.addEventListener('touch', function (e) {
menuButton.classList.toggle('is-active');
menu.classList.toggle('visually-visible');
}));
let changeLanguage = document.getElementById('changeLanguage');
let pageLanguage = document.querySelector('html').lang;
let userLanguage = navigator.language.slice(0, 2);
let currentLanguage = localStorage.language === undefined ? userLanguage : localStorage.language;
if (changeLanguage.value !== currentLanguage) {
let languageOptions = changeLanguage.getElementsByTagName('option');
for (let i = 0; i < languageOptions.length; i++) {
if (languageOptions[i].value === currentLanguage) {
languageOptions[i].selected = true;
}
}
}
changeLanguage.addEventListener('change', function(e) {
e.preventDefault();
let languageValue = changeLanguage.value;
let languagePath = getLanguagePath(languageValue);
localStorage.setItem('language', languageValue);
currentLanguage = localStorage.language;
window.location = languagePath;
});
function getLanguagePath(languageValue) {
let languagePath = languageValue === 'ru' ? '../' : '../' + languageValue;
if (pageLanguage === 'ru') {
languagePath = './' + languageValue;
}
return languagePath;
};
window.addEventListener('load', function() {
console.log('page lang', pageLanguage, 'current lang', currentLanguage);
if (pageLanguage !== currentLanguage) {
let languagePath = getLanguagePath(currentLanguage);
window.location = languagePath;
};
});
let scrollment = document.getElementById('scrollment');
let lastScroll = 0;
let header = document.getElementsByTagName('header')[0];
function scroll(pageY) {
if (pageY > lastScroll) {
header.classList.remove('top-0');
} else {
header.classList.add('top-0');
}
lastScroll = pageY;
}
window.addEventListener('scroll', function(event) {
scroll(window.scrollY);
});
var multiItemSlider = (function() {
return function(selector, config) {
var _mainElement = document.querySelector(selector), // основный элемент блока
_sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // обертка для .slider-item
_sliderItems = _mainElement.querySelectorAll(".slider__item"), // элементы (.slider-item)
_sliderControls = _mainElement.querySelectorAll(".slider__control"), // элементы управления
_sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // кнопка "LEFT"
_sliderControlRight = _mainElement.querySelector(
".slider__control_right"
), // кнопка "RIGHT"
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента
_positionLeftItem = 0, // позиция левого активного элемента
_transform = 0, // значение транфсофрмации .slider_wrapper
_step = (_itemWidth / _wrapperWidth) * 100, // величина шага (для трансформации)
_items = [], // массив элементов
_interval = 0,
_config = {
isCycling: false, // автоматическая смена слайдов
direction: "right", // направление смены слайдов
interval: 5000, // интервал между автоматической сменой слайдов
pause: true // устанавливать ли паузу при поднесении курсора к слайдеру
};
for (var key in config) {
if (key in _config) {
_config[key] = config[key];
}
}
// наполнение массива _items
_sliderItems.forEach(function(item, index) {
_items.push({ item: item, position: index, transform: 0 });
});
var position = {
getItemMin: function() {
var indexItem = 0;
_items.forEach(function(item, index) {
if (item.position < _items[indexItem].position) {
indexItem = index;
}
});
return indexItem;
},
getItemMax: function() {
var indexItem = 0;
_items.forEach(function(item, index) {
if (item.position > _items[indexItem].position) {
indexItem = index;
}
});
return indexItem;
},
getMin: function() {
return _items[position.getItemMin()].position;
},
getMax: function() {
return _items[position.getItemMax()].position;
}
};
var _transformItem = function(direction) {
var nextItem;
if (direction === "right") {
_positionLeftItem++;
if (
_positionLeftItem + _wrapperWidth / _itemWidth - 1 >
position.getMax()
) {
nextItem = position.getItemMin();
_items[nextItem].position = position.getMax() + 1;
_items[nextItem].transform += _items.length * 100;
_items[nextItem].item.style.transform =
"translateX(" + _items[nextItem].transform + "%)";
}
_transform -= _step;
}
if (direction === "left") {
_positionLeftItem--;
if (_positionLeftItem < position.getMin()) {
nextItem = position.getItemMax();
_items[nextItem].position = position.getMin() - 1;
_items[nextItem].transform -= _items.length * 100;
_items[nextItem].item.style.transform =
"translateX(" + _items[nextItem].transform + "%)";
}
_transform += _step;
}
_sliderWrapper.style.transform = "translateX(" + _transform + "%)";
};
var _cycle = function(direction) {
if (!_config.isCycling) {
return;
}
_interval = setInterval(function() {
_transformItem(direction);
}, _config.interval);
};
function handleKeyboard(e) {
let key = e.key;
console.log(key);
if (key === "ArrowRight") {
_transformItem("right");
} else if (key === "ArrowLeft") {
_transformItem("left");
} else if (key === " ") {
e.preventDefault();
pauseSlider();
}
}
function pauseSlider() {
_mainElement.classList.toggle("start");
if (_mainElement.classList.contains("start")) {
clearInterval(_interval);
} else {
_cycle(_config.direction);
}
}
// обработчик события click для кнопок "назад" и "вперед"
var _controlClick = function(e) {
if (e.target.classList.contains("slider__control")) {
e.preventDefault();
var direction = e.target.classList.contains("slider__control_right")
? "right"
: "left";
_transformItem(direction);
clearInterval(_interval);
_cycle(_config.direction);
}
};
var _setUpListeners = function() {
// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
_mainElement.onkeydown = handleKeyboard;
_sliderControls.forEach(function(item) {
item.addEventListener("click", _controlClick);
});
if (_config.pause && _config.isCycling) {
_mainElement.addEventListener("mouseenter", function() {
clearInterval(_interval);
});
_mainElement.addEventListener("mouseleave", function() {
clearInterval(_interval);
_cycle(_config.direction);
});
}
};
// инициализация
_setUpListeners();
_cycle(_config.direction);
return {
right: function() {
// метод right
_transformItem("right");
},
left: function() {
// метод left
_transformItem("left");
},
stop: function() {
// метод stop
_config.isCycling = false;
clearInterval(_interval);
},
cycle: function() {
// метод cycle
_config.isCycling = true;
clearInterval(_interval);
_cycle();
}
};
};
})();
var slider = multiItemSlider(".slider", {
isCycling: true
});
\ No newline at end of file
src/js/postcss.config.js 0 → 100644
View file @ 3711ecf7
module.exports = {
plugins: [
require('autoprefixer'),
require('css-mqpacker'),
require('cssnano')({
preset: [
'default', {
discardComments: {
removeAll: true
}
}
]
})
]
}
src/scss/main.scss 0 → 100644
View file @ 3711ecf7
@import "utils/reset";
@import "utils/vars";
@import "utils/mixins";
html {
line-height: $mainLineHeight;
font-size: $mainFontSize;
color: $mainFontColor;
height: 100%;
scroll-behavior: smooth;
@media screen and (max-width: $desktopWidth) {
font-size: 16px;
}
@media screen and (max-width: $tableWidth) {
font-size: 15px;
}
@media screen and (max-width: $phoneWidth) {
font-size: 14px;
}
}
body {
margin: 0;
padding: 0;
font-family: $mainFont;
font-size: $mainFontSize;
font-weight: $mainFontWeight;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: $default-color;
background: rgba(84.7, 91, 100, 0.1);
// background: #f7f7f7;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
a {
text-decoration: none;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
.wrapper {
display: flex;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
min-width: 100vh;
}
.content-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
width: 100%;
flex: 0 0 auto;
position: relative;
margin: 0 auto;
max-width: $desktopWidth;
@media screen and (max-width: $smDesktopWidth) {
max-width: $tableWidth;
}
@media screen and (max-width: $tableWidth) {
max-width: $phoneWidth;
}
@media screen and (max-width: $phoneWidth) {
max-width: $smPhoneWidth;
}
}
h1 {
font-size: rem(24);
font-weight: 600;
}
h2 {
font-size: rem(22);
font-weight: 600;
}
header {
z-index: 4;
position: sticky;
display: block;
background: $default-color;
transition: top 1s ease-out 0.5s;
}
.top-0 {
top: 0;
}
nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0.5rem 1rem;
box-shadow: 3px 0 3px rgba(0, 0, 0, 0.3);
padding: 0.5rem 20%;
}
nav a {
padding: 0 0.5rem;
}
ul.menu-right {
margin-top: auto;
margin-bottom: auto;
display: flex;
margin-left: auto;
order: 2;
flex-flow: row wrap;
}
ul.menu-right > * {
margin: auto 0;
margin-left: 0.25rem;
}
ul.menu-right li a:focus,
ul.menu-right select:focus,
nav .logo a:focus,
.btn:focus,
.slider:focus {
outline: 1px solid #007bff;
}
section {
margin: 0 20%;
display: grid;
grid-template-columns: repeat(2, 1fr);
background: $default-color;
border-bottom: 1px solid;
border-right: 1px solid;
border-left: 1px solid;
border-color: $border-base;
box-sizing: border-box;
}
section .left-column {
width: 100%;
height: 100%;
padding: 1rem 0.5rem;
}
section .right-column {
width: 100%;
height: 100%;
}
.flex-column {
display: flex;
flex-flow: column wrap;
margin: 0 20%;
padding: 1rem 0;
}
.flex-column h2 {
padding: 0 .5rem;
}
.right-column .banner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
footer {
background: $default-color;
padding: 1rem 0.5rem;
text-align: center;
border: 1px solid $border-base;
}
.logo img {
@include size(60px);
}
.description {
padding: 0.5rem 0;
text-align: justify;
}
input {
padding: 0.5rem 1rem;
}
@media (min-width: $smDesktopWidth) and (max-width: $desktopWidth) {
section,
section.flex-column {
margin: 0 10%;
}
nav {
padding: 0.5rem 10%;
}
.hello-banner__text {
padding: 3rem 10%;
}
}
@media screen and (max-width: $smDesktopWidth) {
section {
display: flex;
flex-flow: column wrap;
margin: 0;
}
section .left-column {
order: 1;
}
.right-column,
.banner {
max-height: min-content;
}
nav {
padding: 0.5rem;
}
section.flex-column {
margin: 0;
}
section.card-deck {
margin: 0;
}
}
@media screen and (max-width: $smTableWidth) {
section.card-deck {
margin: 0;
}
section.card-deck .card-group {
flex-flow: column wrap;
}
}
.btn {
padding: 0.5rem 1rem;
border-radius: 5px;
}
.btn-default {
color: $default-color;
background-color: $neutral-primary;
}
.btn-default:hover {
color: $neutral-primary;
background-color: $default-color;
border: 1px solid $neutral-primary;
}
.btn-primary {
color: $default-color;
background-color: $primary-color;
}
.btn-primary:hover {
color: $primary-color;
background-color: $default-color;
border: 1px solid $primary-color;
}
.btn-success {
color: $default-color;
background-color: $success-color;
}
.btn-success:hover {
color: $success-color;
background-color: $default-color;
border: 1px solid $success-color;
}
.btn-danger {
color: $default-color;
background-color: $danger-color;
}
.btn-danger:hover {
color: $danger-color;
background-color: $default-color;
border: 1px solid $danger-color;
}
.btn-warning {
color: $default-color;
background-color: $warning-color;
}
.btn-warning:hover {
color: $warning-color;
background-color: $default-color;
border: 1px solid $warning-color;
}
.btn-menu li {
margin: 1rem 0;
}
a {
font-size: rem(20);
color: $neutral-primary;
}
a:hover {
color: $light-color;
}
.menu-button {
display: inline-block;
padding: 0.5em;
background-color: #fafafa;
border: 1px solid #ccc;
cursor: pointer;
}
.burger-icon {
@include burger(25px, 3px, 5px, #444);
}
.menu-button.is-active .burger-icon {
@include burger-to-cross;
}
.visually-hidden {
display: none;
visibility: hidden;
}
.visually-visible {
visibility: visible !important;
display: inherit !important;
}
@media screen and (min-width: $smDesktopWidth) {
.menu-button {
display: none;
visibility: hidden;
}
menu#menu {
display: none;
visibility: hidden;
}
}
@media screen and (max-width: $smDesktopWidth) {
.menu-right > li {
display: none;
visibility: hidden;
}
menu#menu {
border-top: 1px solid $border-base;
border-bottom: 1px solid $border-base;
display: none;
visibility: hidden;
flex-flow: column wrap;
width: 100%;
text-align: center;
z-index: 4;
position: sticky;
background: $default-color;
top: 76px;
}
menu#menu > a {
display: flex;
width: 100%;
border: inherit;
height: 40px;
}
menu#menu > a > span {
width: inherit;
text-align: center;
line-height: rem(40);
}
}
ol.default-list {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
ol.default-list > li {
display: list-item;
list-style-type: inherit !important;
}
select {
padding: 0.25rem;
border: 1px solid $border-base;
border-radius: 5px;
background: $default-color;
}
.hello-banner {
width: 100%;
min-height: 500px;
max-height: 500px;
position: relative;
margin: 0 auto;
}
.hello-banner__text {
color: #fff;
padding: 3rem 2rem;
position: relative;
width: 100%;
padding: 3rem 20%;
z-index: 3;
height: 100%;
}
.hello-banner__text h1 {
font-size: rem(48);
font-weight: bold;
}
.hello-banner__text p {
font-size: rem(24);
}
.hello-banner__gradient {
background: #000;
opacity: 0.8;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
.hello-banner__img {
filter: blur(2px);
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
background-image: url("../images/banner.jpg");
background-size: cover;
}
@media (min-width: $desktopWidth) and (max-width: $lgDesktopWidth) {
.hello-banner__text {
padding: 3rem 5%;
}
}
@media screen and (max-width: $smDesktopWidth) {
.hello-banner__text {
padding: 3rem 1rem;
}
}
@media screen and (min-width: $lgDesktopWidth) {
.hello-banner__text h1 {
font-size: rem(47);
}
.hello-banner__text p {
font-size: rem(22);
}
}
@media (min-width: $tableWidth) and (max-width: $smDesktopWidth) {
.hello-banner__text h1 {
font-size: rem(42);
}
.hello-banner__text p {
font-size: rem(21);
}
}
@media (min-width: $phoneWidth) and (max-width: $smTableWidth) {
.hello-banner__text h1 {
font-size: rem(40);
}
.hello-banner__text p {
font-size: rem(20);
}
}
@media (min-width: $smPhoneWidth) and (max-width: $phoneWidth) {
.hello-banner__text h1 {
font-size: rem(32);
}
.hello-banner__text p {
font-size: rem(18);
}
}
@media screen and (max-width: $smPhoneWidth) {
.hello-banner__text h1 {
font-size: rem(26);
}
.hello-banner__text p {
font-size: rem(14);
}
}
.pt-2 {
padding-top: 2rem !important;
}
.slider {
position: relative;
overflow: hidden;
}
.slider__wrapper {
display: flex;
transition: transform 0.6s ease;
}
.slider__item {
flex: 0 0 25%;
max-width: 25%;
}
.slider__control {
position: absolute;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
color: #fff;
text-align: center;
opacity: 0.5;
height: 50px;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.slider__control:hover,
.slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: 0.9;
}
.slider__control_left {
left: 0;
}
.slider__control_right {
right: 0;
}
.slider__control::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.slider__control_left::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.slider__control_right::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.slider__item .card {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0;
width: 100%;
height: 300px;
text-align: center;
background: #fff;
color: #fff;
border: 1px solid #d7d7d7;
border-radius: 5px;
position: relative;
box-sizing: border-box;
}
.slider__item .card .card__body .card__image img, .slider__item .card .card__body .card__image {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
}
.slider__item .card .card__body .card__overlay {
background: #000;
opacity: 0.5;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
border-radius: 5px;
}
.slider__item .card .card__body {
padding: 0.5rem 1rem;
display: flex;
flex-direction: column;
}
.slider__item .card .card__body .card__heading,
.slider__item .card .card__body .card__text {
z-index: 3;
}
a:focus,.slider:focus,
.slider__control:focus {
outline: 3px solid #529dec;
}
@media (min-width: $tableWidth) and (max-width: $smDesktopWidth) {
.slider {
width: 100%;
max-width: $smDesktopWidth;
}
.slider__item {
width: calc(100% / 3);
max-width: calc(#{$smDesktopWidth} / 3);
flex: 0 0 calc(100% / 3);
}
}
@media (min-width: $phoneWidth) and (max-width: $tableWidth) {
.slider {
width: 100%;
max-width: $tableWidth;
}
.slider__item {
width: calc(100% / 2);
max-width: calc(#{$tableWidth}/2);
flex: 0 0 calc(100% / 2);
}
}
@media screen and (max-width: $phoneWidth) {
.slider {
width: 100%;
max-width: $phoneWidth;
}
.slider__item {
width: 100%;
max-width: $phoneWidth;
flex: 0 0 100%;
}
}
.mt-2 {
margin-top: 0.5rem !important;
}
.mb-3 {
margin-bottom: 1.5rem !important;
}
.card {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0;
width: 300px;
height: 300px;
text-align: center;
background: #fff;
color: #fff;
border: 1px solid #d7d7d7;
border-radius: 5px;
position: relative;
box-sizing: border-box;
margin: 0.1rem;
}
.card__image,
.card__image img {
width: 300px;
height: 300px;
}
.card__image,
.card__image img {
z-index: 1;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border-radius: 5px;
}
.card__overlay {
background: #000;
opacity: 0.7;
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
box-sizing: border-box;
border-radius: 5px;
}
.card__body {
padding: 0.5rem 1rem;
display: flex;
flex-direction: column;
}
.card__heading,
.card__text {
z-index: 3;
}
.card__text {
text-align: center;
}
.card__heading--animated,
.card__text--animated {
z-index: 3;
}
.card__text--animated {
font-size: rem(14);
transform: translateY(10%);
position: absolute;
visibility: hidden;
}
.card:hover .card__heading--animated {
transition: 0.3s ease;
}
.card:hover .card__text--animated {
transition: 0.3s ease;
transform: translateY(-10%);
position: static;
margin-top: 0.75rem;
visibility: visible;
}
.card-deck {
display: grid;
grid-template-columns: repeat(3, auto);
margin: auto;
/* grid-column-gap: 0px; */
/* grid-column-gap: 2px; */
/* margin: 0 20%; */
padding: 1rem 0.5rem;
}
@media screen and (max-width: 1281px) {
.card-deck {
grid-template-columns: repeat(2, auto);
}
.card-deck .card,
.card-deck .card__overlay,
.card-deck .card__image,
.card-deck .card__image img {
width: 350px;
height: 350px;
}
}
@media screen and (max-width: 1025px) {
.flex-column {
margin: 0;
}
}
@media screen and (max-width: 641px) {
.card-deck .card,
.card-deck .card__overlay,
.card-deck .card__image,
.card-deck .card__image img {
width: 280px;
height: 280px;
}
}
@media screen and (max-width: 481px) {
.card-deck {
grid-template-columns: repeat(1, auto);
margin: auto;
}
}
.map-iframe {
width: 100%;
height: 300px;
margin: 0 auto;
}
src/scss/utils/mixins.scss 0 → 100644
View file @ 3711ecf7
@function rem($pixels, $context: $mainFontSize) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return $pixels / $context * 1rem;
}
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
@mixin placeholder {
::-webkit-input-placeholder {@content}
:-moz-placeholder {@content}
::-moz-placeholder {@content}
:-ms-input-placeholder {@content}
}
// Burger parts
//
// (---) top -> &:before
// [---] middle -> &
// (---) bottom -> &:after
// Vendor prefixes
$sass-burger-add-vendor-prefixes: true !default;
// Burger
@mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) {
$burger-height: $height !global;
$burger-gutter: $gutter !global;
position: relative;
margin-top: $height + $gutter;
margin-bottom: $height + $gutter;
@if $sass-burger-add-vendor-prefixes {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
user-select: none;
&, &:before, &:after {
display: block;
width: $width;
height: $height;
background-color: $color;
@if $border-radius != 0 {
border-radius: $border-radius;
}
@if $sass-burger-add-vendor-prefixes {
-webkit-transition-property: background-color, -webkit-transform;
-moz-transition-property: background-color, -moz-transform;
-o-transition-property: background-color, -o-transform;
}
transition-property: background-color, transform;
@if $sass-burger-add-vendor-prefixes {
-webkit-transition-duration: $transition-duration;
-moz-transition-duration: $transition-duration;
-o-transition-duration: $transition-duration;
}
transition-duration: $transition-duration;
}
&:before, &:after {
position: absolute;
content: "";
}
&:before {
top: -($height + $gutter);
}
&:after {
top: $height + $gutter;
}
}
// Select parts of the burger
@mixin burger-parts {
&, &:before, &:after {
@content;
}
}
@mixin burger-top {
&:before {
@content;
}
}
@mixin burger-middle {
& {
@content;
}
}
@mixin burger-bottom {
&:after {
@content;
}
}
// Burger animations
@mixin burger-to-cross {
& {
background-color: transparent;
}
&:before {
@if $sass-burger-add-vendor-prefixes {
-webkit-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-moz-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-ms-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-o-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
}
transform: translateY($burger-gutter + $burger-height) rotate(45deg);
}
&:after {
@if $sass-burger-add-vendor-prefixes {
-webkit-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-moz-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-ms-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-o-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
}
transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
}
}
\ No newline at end of file
src/scss/utils/reset.scss 0 → 100644
View file @ 3711ecf7
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
}
// Links
a {
text-decoration: none;
&:active, &:hover {
outline: 0;
}
}
// List
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
// Headlines
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
// Default
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: border-box; }
:focus { outline: 0; }
img, audio, video { max-width: 100%; height: auto; }
audio, canvas, iframe, video, img, svg { vertical-align: middle; }
iframe { border: 0 }
// From
textarea {
resize: none; /*remove the resize handle on the bottom right*/
overflow: auto;
vertical-align: top;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
input, textarea, select, button { outline: none; border: none; font-size: 100%; margin: 0;}
button, input { line-height: normal; }
// Table
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; text-align: left; }
\ No newline at end of file
src/scss/utils/vars.scss 0 → 100644
View file @ 3711ecf7
// Font
$mainFont : 'Montserrat', Helvetica, Arial, sans-serif;
// Size
$mainFontColor : #101010;
$mainFontSize : 18px;
$mainFontWeight : 400;
$mainLineHeight : 1.4;
$lgDesktopWidth : 1537px;
$desktopWidth : 1281px;
$smDesktopWidth : 1025px;
$tableWidth : 769px;
$smTableWidth : 641px;
$phoneWidth : 481px;
$smPhoneWidth : 321px;
$desktopWidthNumber : 1280;
$smDesktopWidthNumber : 1024;
$tableWidthNumber : 768;
$smTableWidthNumber : 640;
$phoneWidthNumber : 480;
$smPhoneWidthNumber : 320;
// Main color
$default-color : #ffffff;
$primary-color : #444ce0;
$success-color : #26de81;
$danger-color : #fc5c65;
$warning-color : #fed330;
$light-color : #999999;
$purple-color : #8854d0;
// Neutral Color
$neutral-primary : #303133;
$neutral-regular : #606266;
$neutral-secondary : #909399;
$neutral-placeholder : #C0C4CC;
// Border Color
$border-base : #DCDFE6;
$border-light : #E4E7ED;
$border-lighter : #EBEEF5;
$border-lightex : #F2F6FC;
webpack.config.js 0 → 100644
View file @ 3711ecf7
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist'),
publicPath: 'dist'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/'
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
publicPath: '.',
name: '/images/[name].[ext]'
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'src/js/postcss.config.js'
}
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.css$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'src/js/postcss.config.js'
}
}
}
]
}
]
},
devServer: {
overlay: true,
port: 17001,
allowedHosts: ['kantegory.sandbox.eterhost.ru']
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment