Skip to content

R
radon
Commit 5fdf05be authored by Eugene Vinokurov's avatar Eugene Vinokurov
Browse files
Options

changes into mainpage

parent 4491c4d9
Show whitespace changes
Inline Side-by-side
Showing with 619 additions and 52 deletions
src/blocks/page-footer/page-footer.scss
View file @ 5fdf05be
......@@ -33,6 +33,7 @@
width: 40px;
margin-left: 30px;
background: #6dacde;
transition: 0.3s ease;
&::before {
content: "";
......@@ -45,6 +46,10 @@
background-position: center;
}
&:hover {
background: #b1c72e;
}
&._fb::before {
background-image: url("../img/footer-fb.svg");
}
......@@ -107,13 +112,20 @@
}
button {
background: linear-gradient(0deg, #6dacde, #6dacde);
background: #6dacde;
padding: 20px 48px;
margin-left: 30px;
font-size: 16px;
line-height: 21px;
color: #ffffff;
font-weight: 700;
transition: 0.3s ease;
&:hover {
color: #ffffff;
background: #b1c72e;
box-shadow: 0 0 25px rgba(177, 199, 46, 0.5);
}
}
}
}
......
src/blocks/page-header/page-header.pug
View file @ 5fdf05be
......@@ -3,6 +3,141 @@
mixin page-header()
header.header
.header-full
.header-full__close
span
span
.container
.row
.col-lg-12
.header-full__items
.full__items-col
.full__items-col__block
span.col__block-heading О радоне
ul.col__block-list
li
a(href="#") Руководство
li
a(href="#") История Радона
li
a(href="#") Лицензии и сертификаты
li
a(href="#") Ценности Росатома
li
a(href="#") Производственная система "Росатома"
li
a(href="#") Научно-технический совет
span.col__block-heading Филиалы
ul.col__block-list
li
a(href="#") Москва
li
a(href="#") Сергиев Посад
li
a(href="#") Кирово-Чепецк
li
a(href="#") Казань
li
a(href="#") Благовещенск
li
a(href="#") Челябинск
li
a(href="#") Новосибирск
li
a(href="#") Северск
li
a(href="#") Ангарс
span.col__block-heading Карьера
ul.col__block-list
li
a(href="#") Вакансии
li
a(href="#") Стажировка
li
a(href="#") О радоне
span.col__block-heading Журналистам
ul.col__block-list
li
a(href="#") Контакты
li
a(href="#") Логотип
li
a(href="#") Фотобанк Радона
li
a(href="#") Видеогалерея
.full__items-col__block
span.col__block-heading Направления деятельности
ul.col__block-list
li
a(href="#") Мониторинг, обследование и контроль
li
a(href="#") Региональный учет и контроль радиоактивных веществ, источников ионизирующего излучения и радиоактивных отходов
li
a(href="#") Радиационно-аварийные и радиационно-реабилитационные работы
li
a(href="#") Обращение с РАО
li
a(href="#") Проектный офис "Ядерное наследие"
li
a(href="#") Новые технологии
li
a(href="#") Технический потенциал
li
a(href="#") Перспективы развития
span.col__block-heading Экология
ul.col__block-list
li
a(href="#") Охрана окружающей среды
li
a(href="#") Экологическая политика
li
a(href="#") Общественные обсуждения
li
a(href="#") Документы
span.col__block-heading Контакты
span.col__block-heading Сми о Нас
span.col__block-heading Новости
span.col__block-heading Онлайн-мониторинг
span.col__block-heading Фотогалерея
span.col__block-heading Видеогалерея
.full__items-col__block
span.col__block-heading Услуги
ul.col__block-list
li
a(href="#") Контроль и прием РАО и ИИИ от организаций-поставщиков
li
a(href="#") Транспортирование РАО
li
a(href="#") Переработка и кондиционирование РАО
li
a(href="#") Обеспечение безопасного хранения РАО
li
a(href="#") Обследование объектов и территорий на соответствие 
требованиям радиационной безопасности
li
a(href="#") Обследование радиоактивно загрязненных и потенциально 
радиоактивно загрязненных объектов и территорий
li
a(href="#") Проведение оперативных работ по ликвидации 
радиационно-аварийных ситуаций
li
a(href="#") Дезактивация и реабилитация радиоактивно загрязненных 
объектов и территорий
li
a(href="#") Дезактивация радиоактивно загрязненной спецодежды, 
защитных средств и оборудования
li
a(href="#") Радиационно-экологический мониторинг объектов окружающей среды
li
a(href="#") Радиационный контроль изделий и материалов
li
a(href="#") Радиационно-экологическое обследование территорий отводимых под строительство
li
a(href="#") Ртутно-экологическое обследование помещений
li
a(href="#") Индивидуальный дозиметрический контроль
li
a(href="#") Испытания и аналитическое обеспечение
li
a(href="#") Поверка средств измерений
li
a(href="#") Формирование радиационно-гигиенических паспортов
a(href="#").up-button
.container
.row
.col-lg-1.d-flex.align-items-end
......@@ -25,8 +160,8 @@ mixin page-header()
a(href="#") СМИ о нас
a(href="#", class="header-menu-top__link") Обратная связь
.header-menu-top__lang
a(href="#", class="top__lang-ru") RU
a(href="#", class="top__lang-en") EN
a(href="#", class="top__lang-ru") Ru
a(href="#", class="top__lang-en") En
nav.header-menu-bottom
ul.header-menu-bottom__list
li
......
src/blocks/page-header/page-header.scss
View file @ 5fdf05be
.header {
padding-bottom: 40px;
.header-full {
background: #ffffff;
z-index: 99;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
visibility: hidden;
opacity: 0;
transition: 0.3s ease;
overflow-y: scroll;
height: 100%;
&._active {
visibility: visible;
opacity: 1;
}
.header-full__close {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
padding: 50px;
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
height: 20px;
width: 2px;
background: #003274;
transition: 0.3s ease;
&:first-child {
transform: translate(-50%, -50%) rotate(-45deg);
}
&:last-child {
transform: translate(-50%, -50%) rotate(45deg);
}
}
&:hover {
span {
&:first-child {
transform: translate(-50%, -50%) rotate(45deg) scale(1.25);
}
&:last-child {
transform: translate(-50%, -50%) rotate(-45deg) scale(1.25);
}
}
}
}
.header-full__items {
.full__items-col {
display: flex;
justify-content: space-between;
.full__items-col__block {
flex: 0 1 33.3333%;
display: flex;
flex-direction: column;
padding: 30px 0;
.col__block-heading {
text-transform: uppercase;
display: inline-block;
margin-top: 30px;
font-weight: 700;
font-size: 16px;
line-height: 21px;
color: #003274;
&:first-child {
margin-top: 0;
}
}
.col__block-list {
max-width: 320px;
margin-top: 15px;
li {
a {
font-weight: 350;
font-size: 14px;
line-height: 18px;
color: #292929;
display: inline-block;
padding: 5px 0;
}
}
}
}
}
}
}
.up-button {
opacity: 0;
position: fixed;
z-index: 97;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border: 2px solid #003274;
transition: 0.3s ease;
transform: translateY(10px);
&._active {
opacity: 1;
transform: translateY(0);
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: rotate(-90deg);
background-repeat: no-repeat;
background-position: center;
background-image: url("../img/index-arrow-active.svg");
}
&:hover {
border: 2px solid #b1c72e;
background: #b1c72e;
&::before {
transform: rotate(90deg);
background-image: url("../img/index-arrow.svg");
}
}
}
.header-menu-top {
display: flex;
justify-content: space-between;
......@@ -14,6 +160,10 @@
a {
padding: 19px 17.5px 26px;
display: block;
&:hover {
color: #003274;
}
}
&:first-child a {
......@@ -120,6 +270,11 @@
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.3s ease;
&:hover {
background: #b1c72e;
}
.header-menu-bottom__search {
height: 24px;
......
src/img/filials-network-map.svg 0 → 100644
View file @ 5fdf05be
This source diff could not be displayed because it is too large. You can view the blob instead.
src/js/script.js
View file @ 5fdf05be
......@@ -39,7 +39,31 @@ $(".banners-row-field").slick({
class Application {
init() {
this.onMobile();
this.turnParallax();
this.upButton();
}
onMobile() {
const headerBurgerButton = document.querySelector(
".header .header-menu-bottom .header-menu-bottom__list li:first-child"
);
const fullHeaderMenu = document.querySelector(".header .header-full");
const fullHeaderButton = document.querySelector(
".header .header-full .header-full__close"
);
headerBurgerButton.addEventListener("click", () => {
fullHeaderMenu.classList.add("_active");
document.body.style.overflow = "hidden";
});
fullHeaderButton.addEventListener("click", () => {
fullHeaderMenu.classList.remove("_active");
document.body.removeAttribute("style");
});
}
turnParallax() {
......@@ -61,6 +85,28 @@ class Application {
});
}
}
upButton() {
const upButton = document.querySelector(".up-button");
window.addEventListener("scroll", () => {
if (pageYOffset > window.innerHeight) {
upButton.classList.add("_active");
} else {
upButton.classList.remove("_active");
}
});
upButton.addEventListener("click", (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth",
});
});
}
}
const radon = new Application();
......
src/pages/index.pug
View file @ 5fdf05be
......@@ -41,39 +41,39 @@ block content
.news-row__item-thing
a(href="#").news-row__item-title ФГУП «Радон» планирует модернизировать производственную структуру
span.news-row__item-time 25.09.2020
.news-row__item-thing
a(href="#").news-row__item-title ФГУП «Радон» планирует модернизировать производственную структуру
.news-row__item-thing._blue
a(href="#").news-row__item-title Штабная тренировка по ГО
span.news-row__item-time 25.09.2020
.news-row__item-thing
a(href="#").news-row__item-title ФГУП «Радон» планирует модернизировать производственную структуру
a(href="#").news-row__item-title Штабная тренировка по ГО
span.news-row__item-time 25.09.2020
.news-row__item
.news-row__item-thing._full
img(src="../img/news-image-first.jpg", alt="news image").news-row__item-img
img(src="./img/news-image-first.jpg", alt="news image").news-row__item-img
a(href="#").news-row__item-title Вторая Международная научно-практическая конференция
span.news-row__item-time 25.09.2020
.news-row__item
.news-row__item-thing._full._half
img(src="../img/news-image-second.jpg", alt="news image").news-row__item-img
img(src="./img/news-image-second.jpg", alt="news image").news-row__item-img
a(href="#").news-row__item-title С руководством ФГУП «РАДОН» успешно проведен бизнес-тренинг
span.news-row__item-time 25.09.2020
.news-row__item-thing
a(href="#").news-row__item-title Извещение о проведении общественных обсуждений
span.news-row__item-time 25.09.2020
.news-row__item
.news-row__item-thing
.news-row__item-thing._blue
a(href="#").news-row__item-title ФГУП «Радон» планирует модернизировать производственную структуру
span.news-row__item-time 25.09.2020
.news-row__item-thing
a(href="#").news-row__item-title Штабная тренировка по ГО
span.news-row__item-time 25.09.2020
.news-row__item-thing
.news-row__item-thing._blue
span.news-row__item-big-title 35
a(href="#").news-row__item-title Новостей
span.news-row__item-time Перейти в раздел
.news-row__item
.news-row__item-thing._full._half
img(src="../img/news-image-third.jpg", alt="news image").news-row__item-img
img(src="./img/news-image-third.jpg", alt="news image").news-row__item-img
a(href="#").news-row__item-title Поддержим наших!
span.news-row__item-time 25.09.2020
.news-row__item-thing
......@@ -97,7 +97,7 @@ block content
.row__item-thing__title Контроль и прием РАО и ИИИ от организаций-поставщиков
a(href="#").services-row__item-thing._half
.row__item-thing__title Обследование радиоактивно загрязненных и потенциально радиоактивно загрязненных объектов и территорий
span.row__item-thig__button В раздел
span.row__item-thing__button В раздел
.services-row__item
a(href="#").services-row__item-thing
.row__item-thing__title ТранспортированиеРАО
......@@ -127,29 +127,29 @@ block content
h2.banners-row-title Баннерная сетка
.banners-row-field
a(href="#").banners-row-field__item
img(src="../img/banners-item-first.jpg", alt="banner item")
img(src="./img/banners-item-first.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-second.jpg", alt="banner item")
img(src="./img/banners-item-second.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-third.jpg", alt="banner item")
img(src="./img/banners-item-third.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-fourth.jpg", alt="banner item")
img(src="./img/banners-item-fourth.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-first.jpg", alt="banner item")
img(src="./img/banners-item-first.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-second.jpg", alt="banner item")
img(src="./img/banners-item-second.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-third.jpg", alt="banner item")
img(src="./img/banners-item-third.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-fourth.jpg", alt="banner item")
img(src="./img/banners-item-fourth.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-first.jpg", alt="banner item")
img(src="./img/banners-item-first.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-second.jpg", alt="banner item")
img(src="./img/banners-item-second.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-third.jpg", alt="banner item")
img(src="./img/banners-item-third.jpg", alt="banner item")
a(href="#").banners-row-field__item
img(src="../img/banners-item-fourth.jpg", alt="banner item")
img(src="./img/banners-item-fourth.jpg", alt="banner item")
.about
.container
.row
......@@ -162,22 +162,23 @@ block content
p.about-description__text Предприятие осуществляет весь комплекс работ с РАО – их сбор, транспортировку, переработку и хранение, а также проводит радиационно-аварийные работы по удалению обнаруженных радиоактивных загрязнений и радиоэкологический мониторинг населенных пунктов и окружающей среды.
a(class="about-description__button", href="#") Подробнее
.col-lg-6.d-flex
img(class="about-image", parallax="-10", src="../img/about-image.jpg", alt="about image")
img(class="about-image", parallax="-10", src="./img/about-image.jpg", alt="about image")
.row.about-features
.col-lg-12
.about-features__feature
img(class="feature-image", src="../img/about-feature-first.svg", alt="feature image")
img(class="feature-image", src="./img/about-feature-first.svg", alt="feature image")
p.feature-text Специалисты предприятия осуществляют разработку и внедрение технологий и оборудования для обращения с РАО, радиоактивными веществами и источниками ионизирующего излучения (ИИИ). ФГУП «РАДОН» также выполняет работы по выводу из эксплуатации радиационно-опасных объектов, дезактивации и реабилитации загрязненных территорий.
.col-lg-12
.about-features__feature
img(class="feature-image", src="../img/about-feature-second.svg", alt="feature image")
img(class="feature-image", src="./img/about-feature-second.svg", alt="feature image")
p.feature-text Основные объекты, которым ФГУП «РАДОН» оказывает вышеперечисленные услуги, располагаются в европейской части РФ, но в последнее время регион обслуживания предприятия расширился: выполняются договорные работы с предприятиями Урала, Сибири, Дальнего Востока…
.col-lg-12
.about-features__feature
img(class="feature-image", src="../img/about-feature-third.svg", alt="feature image")
img(class="feature-image", src="./img/about-feature-third.svg", alt="feature image")
p.feature-text Недавно предприятие стало победителем конкурса Международного агентства по атомной энергии (МАГАТЭ) по созданию модульных мобильных установок по очистке жидких радиоактивных отходов за рубежом, такие установки были поставлены в Бангладеш, Иран, Сербию, Сирию и Узбекистан.
.filials-network
.container
img(src="./img/filials-network-map.svg", parallax="10", alt="network map").filials-network__map
.container(parallax="-10")
.row
.col-lg-12
h2.filials-network__title Филиальная сеть
......
src/scss/_index.scss
View file @ 5fdf05be
......@@ -123,7 +123,7 @@
transition: $fast-transition;
&:hover {
box-shadow: 0 0 25px rgba(238, 238, 238, 0.25);
@extend %hover-green;
}
}
}
......@@ -156,17 +156,26 @@
padding: 30px;
background: #f9f9f9;
transition: $fast-transition;
overflow: hidden;
.news-row__item-img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: $fast-transition;
}
.news-row__item-big-title {
font-weight: 700;
font-size: 80px;
line-height: 104px;
color: #1a1a1a;
color: #ffffff;
transition: inherit;
}
.news-row__item-title {
text-decoration: underline;
font-weight: 700;
font-size: 16px;
line-height: 26px;
......@@ -184,7 +193,11 @@
}
&:hover {
background: #6dacde;
background: $green !important;
.news-row__item-img {
transform: scale(1.05);
}
.news-row__item-big-title {
color: #ffffff;
......@@ -200,6 +213,14 @@
}
}
&._blue {
background: $blue;
.news-row__item-title, .news-row__item-time {
color: #ffffff;
}
}
&._full {
display: flex;
flex-direction: column;
......@@ -217,13 +238,6 @@
background: rgba(0, 50, 116, 0.5);
}
.news-row__item-img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.news-row__item-title {
z-index: 2;
......@@ -295,9 +309,16 @@
color: #ffffff;
}
.row__item-thig__button {
.row__item-thing__button {
color: #ffffff;
border: 1px solid #ffffff;
transition: $fast-transition;
&:hover {
border: 1px solid $green;
@extend %hover-green;
}
}
}
......@@ -312,7 +333,7 @@
transition: $fast-transition;
}
.row__item-thig__button {
.row__item-thing__button {
position: relative;
z-index: 1;
display: inline-block;
......@@ -347,10 +368,18 @@
display: inline-block;
margin: 0 15px;
outline: none;
overflow: hidden;
img {
height: 200px;
width: 470px;
transition: $fast-transition;
}
&:hover {
img {
transform: scale(1.05);
}
}
}
......@@ -402,8 +431,8 @@
transition: $fast-transition;
&:hover {
background: $blue;
color: #ffffff;
border: 2px solid $green;
@extend %hover-green;
}
}
}
......@@ -433,6 +462,12 @@
padding: 80px 0 150px;
position: relative;
.filials-network__map {
position: absolute;
right: 0;
top: 40px;
}
&::before {
content: "";
position: absolute;
......@@ -481,23 +516,23 @@
}
&:first-child a::after {
background-image: url('../img/filials-network-one.svg');
background-image: url("../img/filials-network-one.svg");
}
&:nth-child(2) a::after {
background-image: url('../img/filials-network-two.svg');
background-image: url("../img/filials-network-two.svg");
}
&:nth-child(3) a::after {
background-image: url('../img/filials-network-three.svg');
background-image: url("../img/filials-network-three.svg");
}
&:nth-child(4) a::after {
background-image: url('../img/filials-network-four.svg');
background-image: url("../img/filials-network-four.svg");
}
&:last-child a::after {
background-image: url('../img/filials-network-five.svg');
background-image: url("../img/filials-network-five.svg");
}
}
}
......
src/scss/_vars.scss
View file @ 5fdf05be
$fast-transition: .3s ease;
$long-transition: .7s ease;
$fast-transition: 0.3s ease;
$long-transition: 0.7s ease;
$hover-blue: #003274;
$blue: #6DACDE;
$blue: #6dacde;
$green: #b1c72e;
%hover-green {
color: #ffffff;
background: $green;
box-shadow: 0 0 25px rgba(177, 199, 46, 0.5);
}
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