Skip to content

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

new responsive header and footer

parent f03a44f3
Hide whitespace changes
Inline Side-by-side
Showing with 430 additions and 20 deletions
src/blocks/page-footer/page-footer.scss
View file @ b6483d4b
...@@ -6,26 +6,79 @@ ...@@ -6,26 +6,79 @@
color: #ffffff; color: #ffffff;
display: flex; display: flex;
@media (max-width: 768px) {
flex-direction: column;
.footer-left {
align-items: flex-start;
.footer-left__devs {
display: none;
}
.footer-left__heading,
.footer-left__nav,
.footer-left__subscribe {
max-width: 100%;
width: 100%;
justify-content: space-between;
.left__subscribe-form {
justify-content: space-between;
input,
button {
flex: 1 1 auto;
}
}
}
}
}
@media (max-width: 576px) {
flex-direction: column;
.footer-left {
align-items: center;
.footer-left__nav ul li {
flex: 0 1 50%;
}
}
}
.footer-left { .footer-left {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
flex-direction: column; flex-direction: column;
flex-basis: 50%; flex-basis: 50%;
background: #f9f9f9; background: #f9f9f9;
padding: 50px 60px 0 0; padding: 50px 60px;
@media (max-width: 992px) {
padding: 50px 20px;
}
.footer-left__heading { .footer-left__heading {
max-width: 540px; max-width: 540px;
display: flex; display: flex;
flex-wrap: wrap;
.left__heading-logo { .left__heading-logo {
padding-right: 175px; padding-right: 175px;
margin-bottom: 20px;
} }
.left__heading-socials { .left__heading-socials {
display: flex; display: flex;
align-items: center; align-items: center;
li:first-child {
.heading-socials__item {
margin-left: 0;
}
}
.heading-socials__item { .heading-socials__item {
display: block; display: block;
position: relative; position: relative;
...@@ -100,6 +153,18 @@ ...@@ -100,6 +153,18 @@
} }
.left__subscribe-form { .left__subscribe-form {
display: flex;
flex-wrap: wrap;
@media (max-width: 576px) {
flex-direction: column;
input {
width: 100%;
margin-right: 0;
}
}
input { input {
background: linear-gradient(0deg, #ffffff, #ffffff); background: linear-gradient(0deg, #ffffff, #ffffff);
border: 1px solid #dcddde; border: 1px solid #dcddde;
...@@ -109,12 +174,15 @@ ...@@ -109,12 +174,15 @@
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
color: #cccdcf; color: #cccdcf;
margin-right: 30px;
margin-bottom: 15px;
} }
button { button {
max-height: 60px;
min-width: 200px;
background: #6dacde; background: #6dacde;
padding: 20px 48px; padding: 20px 48px;
margin-left: 30px;
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
color: #ffffff; color: #ffffff;
...@@ -145,10 +213,14 @@ ...@@ -145,10 +213,14 @@
} }
.footer-right { .footer-right {
padding: 50px 0 120px 100px; padding: 50px 100px 120px;
flex-basis: 50%; flex-basis: 50%;
background: #025ea1; background: #025ea1;
@media (max-width: 992px) {
padding: 50px 20px 120px;
}
.footer-right__contacts { .footer-right__contacts {
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
......
src/blocks/page-header/img/arrow-half.svg 0 → 100644
View file @ b6483d4b
<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0893 7.24652H0V5.75348H11.0893L6.30494 1.05573L7.38014 0L14 6.5L7.38014 13L6.30494 11.9443L11.0893 7.24652Z" fill="#DCDDDE"/>
</svg>
src/blocks/page-header/img/mobile-logo.svg 0 → 100644
View file @ b6483d4b
<svg width="123" height="53" viewBox="0 0 123 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M71.2053 17.5785H72.9751C73.8927 17.5785 74.5865 17.3928 75.0562 17.0213C75.5369 16.6499 75.7772 16.0818 75.7772 15.3171C75.7772 14.5305 75.5369 13.9624 75.0562 13.6128C74.5865 13.2633 73.8927 13.0885 72.9751 13.0885H71.2053V17.5785ZM71.2053 23.1828H69.7305V11.712H73.1062C73.7617 11.712 74.3461 11.783 74.8596 11.925C75.384 12.0561 75.8319 12.2691 76.2033 12.5641C76.5747 12.8591 76.8588 13.2305 77.0554 13.6784C77.2521 14.1263 77.3504 14.6616 77.3504 15.2843C77.3504 16.4751 76.9626 17.3873 76.1869 18.0209C75.4222 18.6436 74.3516 18.955 72.9751 18.955H71.2053V23.1828Z" fill="white"/>
<path d="M85.0982 20.1185H80.1985L79.0842 23.1828H77.593L81.9683 11.712H83.4431L87.7365 23.1828H86.1961L85.0982 20.1185ZM80.6737 18.7747H84.623L82.7057 13.3834H82.6402L80.6737 18.7747Z" fill="white"/>
<path d="M99.5978 25.7392H98.123V23.1828H90.4375V25.7392H88.9627V21.8063H90.0934C90.4321 21.2164 90.6997 20.5828 90.8964 19.9054C91.1039 19.2172 91.2623 18.4907 91.3716 17.726C91.4918 16.9503 91.5737 16.1474 91.6174 15.3171C91.672 14.4868 91.7103 13.6292 91.7321 12.7443L91.7649 11.712H98.2869V21.8063H99.5978V25.7392ZM96.812 21.8063V13.0885H93.125C93.125 13.1212 93.1195 13.1813 93.1086 13.2687C93.1086 13.3452 93.1086 13.4271 93.1086 13.5145C93.1086 13.6019 93.1031 13.6839 93.0922 13.7603C93.0922 13.8368 93.0922 13.8914 93.0922 13.9242C93.0594 14.6343 93.0103 15.3499 92.9447 16.0709C92.8901 16.7919 92.8027 17.4966 92.6825 18.1848C92.5733 18.8621 92.4313 19.5121 92.2565 20.1348C92.0817 20.7466 91.8632 21.3038 91.601 21.8063H96.812Z" fill="white"/>
<path d="M106.582 21.9702C107.664 21.9702 108.51 21.5933 109.122 20.8395C109.745 20.0748 110.056 18.9441 110.056 17.4474C110.056 16.6608 109.969 15.9835 109.794 15.4154C109.63 14.8473 109.39 14.3776 109.073 14.0061C108.756 13.6347 108.368 13.3616 107.91 13.1868C107.462 13.012 106.954 12.9246 106.386 12.9246C105.883 12.9246 105.413 13.0175 104.976 13.2032C104.539 13.3889 104.162 13.6675 103.846 14.0389C103.529 14.4103 103.278 14.8801 103.092 15.4482C102.906 16.0163 102.813 16.6827 102.813 17.4474C102.813 18.2012 102.901 18.8621 103.075 19.4302C103.261 19.9983 103.518 20.4735 103.846 20.8559C104.173 21.2273 104.567 21.5059 105.025 21.6916C105.495 21.8773 106.014 21.9702 106.582 21.9702ZM106.435 23.3467C105.637 23.3467 104.916 23.2101 104.272 22.937C103.638 22.6639 103.092 22.2761 102.633 21.7735C102.185 21.2601 101.841 20.6374 101.601 19.9054C101.36 19.1735 101.24 18.3541 101.24 17.4474C101.24 16.5297 101.366 15.7104 101.617 14.9894C101.868 14.2574 102.218 13.6402 102.666 13.1376C103.125 12.6242 103.671 12.2309 104.304 11.9578C104.938 11.6847 105.632 11.5481 106.386 11.5481C107.238 11.5481 107.986 11.6956 108.631 11.9905C109.286 12.2746 109.832 12.6788 110.269 13.2032C110.717 13.7166 111.056 14.3393 111.285 15.0713C111.515 15.7923 111.629 16.5843 111.629 17.4474C111.629 18.4197 111.498 19.2773 111.236 20.0201C110.974 20.7521 110.613 21.3639 110.155 21.8555C109.696 22.3471 109.15 22.7185 108.516 22.9698C107.882 23.2211 107.189 23.3467 106.435 23.3467Z" fill="white"/>
<path d="M123 23.1828H121.526V17.9062H115.725V23.1828H114.25V11.712H115.725V16.5625H121.526V11.712H123V23.1828Z" fill="white"/>
<path d="M71.3646 36.6504H72.238C72.7209 36.6504 73.0972 36.5581 73.3671 36.3734C73.6369 36.1817 73.7718 35.887 73.7718 35.4894C73.7718 35.0704 73.6405 34.7757 73.3777 34.6053C73.115 34.4278 72.7386 34.339 72.2487 34.339H71.3646V36.6504ZM71.3966 40.389H69.7988V32.933H72.3658C72.8345 32.933 73.257 32.9827 73.6334 33.0821C74.0097 33.1815 74.3293 33.3342 74.592 33.5401C74.8618 33.739 75.0678 33.9981 75.2098 34.3177C75.3518 34.6301 75.4228 34.9994 75.4228 35.4254C75.4228 35.8444 75.3483 36.2172 75.1991 36.5439C75.0571 36.8705 74.8476 37.1474 74.5707 37.3747C74.2938 37.5948 73.9565 37.7652 73.5588 37.8859C73.1612 37.9996 72.7138 38.0564 72.2167 38.0564H71.3966V40.389Z" fill="white"/>
<path d="M80.2051 39.1109C80.4749 39.1109 80.7235 39.0612 80.9507 38.9617C81.1779 38.8623 81.3732 38.7132 81.5365 38.5144C81.6999 38.3085 81.8241 38.0528 81.9093 37.7475C82.0017 37.4421 82.0478 37.08 82.0478 36.661C82.0478 35.816 81.8703 35.1982 81.5152 34.8077C81.1602 34.41 80.6915 34.2112 80.1092 34.2112C79.8465 34.2112 79.598 34.2609 79.3636 34.3603C79.1364 34.4597 78.9376 34.6124 78.7671 34.8183C78.5967 35.0171 78.4618 35.2728 78.3624 35.5852C78.2701 35.8906 78.2239 36.2492 78.2239 36.661C78.2239 37.08 78.2736 37.4421 78.373 37.7475C78.4796 38.0528 78.6216 38.3085 78.7991 38.5144C78.9766 38.7132 79.1861 38.8623 79.4275 38.9617C79.669 39.0612 79.9282 39.1109 80.2051 39.1109ZM80.1518 40.5169C79.6122 40.5169 79.1186 40.4352 78.6713 40.2719C78.231 40.1015 77.8511 39.8529 77.5316 39.5263C77.212 39.1996 76.9635 38.7984 76.786 38.3227C76.6155 37.8398 76.5303 37.2859 76.5303 36.661C76.5303 36.0361 76.6191 35.4858 76.7966 35.01C76.9812 34.5272 77.2333 34.1224 77.5529 33.7958C77.8724 33.4691 78.2488 33.2241 78.6819 33.0608C79.1222 32.8904 79.598 32.8052 80.1092 32.8052C80.6844 32.8052 81.1957 32.8939 81.6431 33.0715C82.0975 33.249 82.4774 33.5046 82.7828 33.8384C83.0952 34.165 83.3331 34.5698 83.4964 35.0526C83.6597 35.5284 83.7414 36.0645 83.7414 36.661C83.7414 37.3214 83.6491 37.8966 83.4645 38.3866C83.2869 38.8694 83.0349 39.2706 82.7082 39.5902C82.3887 39.9026 82.0088 40.137 81.5685 40.2932C81.1353 40.4423 80.6631 40.5169 80.1518 40.5169Z" fill="white"/>
<path d="M90.7889 40.0908C90.6895 40.1405 90.5795 40.1902 90.4588 40.2399C90.3451 40.2896 90.2067 40.3358 90.0433 40.3784C89.8871 40.421 89.7025 40.453 89.4895 40.4743C89.2835 40.5027 89.0457 40.5169 88.7758 40.5169C88.2077 40.5169 87.6894 40.4352 87.2207 40.2719C86.7591 40.1086 86.3615 39.8707 86.0277 39.5582C85.7011 39.2387 85.4454 38.8446 85.2608 38.3759C85.0833 37.9072 84.9945 37.3676 84.9945 36.7569C84.9945 36.1178 85.0833 35.5533 85.2608 35.0633C85.4454 34.5662 85.7082 34.1508 86.049 33.8171C86.3899 33.4833 86.8017 33.2312 87.2846 33.0608C87.7746 32.8904 88.3249 32.8052 88.9356 32.8052C89.3403 32.8052 89.7025 32.8407 90.022 32.9117C90.3487 32.9827 90.6114 33.0644 90.8103 33.1567L90.4588 34.4988C90.2315 34.4207 90.0007 34.3638 89.7664 34.3283C89.5321 34.2928 89.3297 34.2751 89.1593 34.2751C88.79 34.2751 88.4527 34.3212 88.1474 34.4136C87.8491 34.5059 87.5899 34.6514 87.3698 34.8503C87.1568 35.042 86.9899 35.2905 86.8692 35.5959C86.7485 35.8941 86.6881 36.2492 86.6881 36.661C86.6881 37.4492 86.9083 38.0422 87.3485 38.4398C87.7959 38.8375 88.3959 39.0363 89.1486 39.0363C89.319 39.0363 89.525 39.015 89.7664 38.9724C90.0078 38.9227 90.2422 38.8481 90.4694 38.7487L90.7889 40.0908Z" fill="white"/>
<path d="M96.7491 38.7487H93.8838L93.3512 40.389H91.7748L94.3205 32.933H96.3976L98.9113 40.389H97.2816L96.7491 38.7487ZM94.3205 37.3534H96.3123L95.3217 34.2218L94.3205 37.3534Z" fill="white"/>
<path d="M102.43 40.389H100.832V34.4029H98.7122V32.933H104.539V34.4029H102.43V40.389Z" fill="white"/>
<path d="M108.851 39.1109C109.12 39.1109 109.369 39.0612 109.596 38.9617C109.823 38.8623 110.019 38.7132 110.182 38.5144C110.345 38.3085 110.47 38.0528 110.555 37.7475C110.647 37.4421 110.693 37.08 110.693 36.661C110.693 35.816 110.516 35.1982 110.161 34.8077C109.806 34.41 109.337 34.2112 108.755 34.2112C108.492 34.2112 108.243 34.2609 108.009 34.3603C107.782 34.4597 107.583 34.6124 107.413 34.8183C107.242 35.0171 107.107 35.2728 107.008 35.5852C106.916 35.8906 106.869 36.2492 106.869 36.661C106.869 37.08 106.919 37.4421 107.019 37.7475C107.125 38.0528 107.267 38.3085 107.445 38.5144C107.622 38.7132 107.832 38.8623 108.073 38.9617C108.314 39.0612 108.574 39.1109 108.851 39.1109ZM108.797 40.5169C108.258 40.5169 107.764 40.4352 107.317 40.2719C106.876 40.1015 106.497 39.8529 106.177 39.5263C105.858 39.1996 105.609 38.7984 105.431 38.3227C105.261 37.8398 105.176 37.2859 105.176 36.661C105.176 36.0361 105.265 35.4858 105.442 35.01C105.627 34.5272 105.879 34.1224 106.198 33.7958C106.518 33.4691 106.894 33.2241 107.327 33.0608C107.768 32.8904 108.243 32.8052 108.755 32.8052C109.33 32.8052 109.841 32.8939 110.289 33.0715C110.743 33.249 111.123 33.5046 111.428 33.8384C111.741 34.165 111.979 34.5698 112.142 35.0526C112.305 35.5284 112.387 36.0645 112.387 36.661C112.387 37.3214 112.295 37.8966 112.11 38.3866C111.932 38.8694 111.68 39.2706 111.354 39.5902C111.034 39.9026 110.654 40.137 110.214 40.2932C109.781 40.4423 109.309 40.5169 108.797 40.5169Z" fill="white"/>
<path d="M122.246 40.389H120.638L120.233 35.4361L118.699 40.389H117.176L115.664 35.4574L115.259 40.389H113.651L114.396 32.933H116.303L117.986 38.557L119.647 32.933H121.49L122.246 40.389Z" fill="white"/>
<rect x="60.8809" y="4.33789" width="1.63869" height="44.2447" fill="white"/>
<path d="M30.4518 29.8461C28.4318 32.0992 24.9356 32.2546 22.7602 30.2345C20.5071 28.2145 20.3517 24.7183 22.3717 22.4652C24.3917 20.2121 27.8879 20.0568 30.0633 22.0768C32.2387 24.0968 32.4718 27.593 30.4518 29.8461Z" fill="white"/>
<path d="M13.6696 26.3497C13.6696 26.3497 16.6996 24.7959 18.4865 17.8812C20.2735 10.9665 26.7997 7.78112 26.7997 7.78112C26.7997 7.78112 12.6596 -6.20361 2.01562 15.7058C2.09332 15.7835 10.7949 17.4927 13.6696 26.3497Z" fill="white"/>
<path d="M14.9902 2.42041C14.9902 2.42041 25.8673 0.245007 32.3158 13.919C32.3158 13.919 39.852 16.3274 46.4559 9.41278C46.3782 9.33508 35.3458 -5.73735 14.9902 2.42041Z" fill="white"/>
<path d="M32.7047 36.6829C32.7047 36.6829 29.83 34.8183 22.9931 36.7606C16.1561 38.7029 10.096 34.5852 10.096 34.5852C10.096 34.5852 5.04597 53.7754 29.3639 52.0661C29.3639 51.9884 26.4892 43.5976 32.7047 36.6829Z" fill="white"/>
<path d="M11.3388 47.4824C11.3388 47.4824 4.03569 39.1693 12.6596 26.7384C12.6596 26.7384 11.0281 19.0468 1.7049 16.7937C1.62721 16.8714 -5.90901 33.9638 11.3388 47.4824Z" fill="white"/>
<path d="M32.1607 15.0843C32.1607 15.0843 32.0053 18.5028 37.0553 23.4751C42.1831 28.4475 41.6392 35.7506 41.6392 35.7506C41.6392 35.7506 60.8294 30.5452 47.1554 10.2673C47.1554 10.2673 41.3284 16.9489 32.1607 15.0843Z" fill="white"/>
<path d="M52.2831 28.1367C52.2831 28.1367 48.7093 38.6253 33.7145 37.3822C33.7145 37.3822 27.8876 42.6653 30.6068 51.8331C30.5291 51.9108 49.1754 49.8907 52.2831 28.1367Z" fill="white"/>
</svg>
src/blocks/page-header/page-header.pug
View file @ b6483d4b
...@@ -112,15 +112,15 @@ mixin page-header() ...@@ -112,15 +112,15 @@ mixin page-header()
li li
a(href="#") Обеспечение безопасного хранения РАО a(href="#") Обеспечение безопасного хранения РАО
li li
a(href="#") Обследование объектов и территорий на соответствие 
требованиям радиационной безопасности a(href="#") Обследование объектов и территорий на соответствие требованиям радиационной безопасности
li li
a(href="#") Обследование радиоактивно загрязненных и потенциально 
радиоактивно загрязненных объектов и территорий a(href="#") Обследование радиоактивно загрязненных и потенциально радиоактивно загрязненных объектов и территорий
li li
a(href="#") Проведение оперативных работ по ликвидации 
радиационно-аварийных ситуаций a(href="#") Проведение оперативных работ по ликвидации радиационно-аварийных ситуаций
li li
a(href="#") Дезактивация и реабилитация радиоактивно загрязненных 
объектов и территорий a(href="#") Дезактивация и реабилитация радиоактивно загрязненных объектов и территорий
li li
a(href="#") Дезактивация радиоактивно загрязненной спецодежды, 
защитных средств и оборудования a(href="#") Дезактивация радиоактивно загрязненной спецодежды, защитных средств и оборудования
li li
a(href="#") Радиационно-экологический мониторинг объектов окружающей среды a(href="#") Радиационно-экологический мониторинг объектов окружающей среды
li li
...@@ -184,3 +184,74 @@ mixin page-header() ...@@ -184,3 +184,74 @@ mixin page-header()
a(href="#") Журналистам a(href="#") Журналистам
li li
.header-menu-bottom__search .header-menu-bottom__search
.header-menu-mobile
a(href="#").header-menu-mobile__logo
a(href="#").header-menu-mobile__button
span
span
.header-menu-mobile__more
input(type="text", placeholder="Что ищем?").mobile__more-search
ul.mobile__more-list
li.mobile__more-list__item
a(href="#") О РАДОНЕ
ul._inner-list
li._inner-list__item
a(href="#") Контроль и прием РАО и ИИИ от организаций-поставщиков
li._inner-list__item
a(href="#") Транспортирование РАО
li._inner-list__item
a(href="#") Переработка и кондиционирование РА
li._inner-list__item
a(href="#") Обеспечение безопасного хранения РАО
li._inner-list__item
a(href="#") Обследование объектов и территорий на соответствие требованиям радиационной безопасности
li._inner-list__item
a(href="#") Обследование радиоактивно загрязненных и потенциально радиоактивно загрязненных объектов и территорий
li._inner-list__item
a(href="#") Проведение оперативных работ по ликвидации радиационно-аварийных ситуаций
li._inner-list__item
a(href="#") Дезактивация и реабилитация радиоактивно загрязненных объектов и территорий
li._inner-list__item
a(href="#") Дезактивация радиоактивно загрязненной спецодежды, защитных средств и оборудования
li._inner-list__item
a(href="#") Радиационно-экологический мониторинг объектов окружающей среды
li._inner-list__item
a(href="#") Радиационный контроль изделий и материалов
li._inner-list__item
a(href="#") Радиационно-экологическое обследование территорий отводимых под строительство
li._inner-list__item
a(href="#") Ртутно-экологическое обследование помещений
li._inner-list__item
a(href="#") Индивидуальный дозиметрический контроль
li._inner-list__item
a(href="#") Испытания и аналитическое обеспечение
li._inner-list__item
a(href="#") Поверка средств измерений
li._inner-list__item
a(href="#") Формирование радиационно-гигиенических паспортов
li.mobile__more-list__item
a(href="#") ФИЛИАЛЫ
li.mobile__more-list__item
a(href="#") УСЛУГИ
li.mobile__more-list__item
a(href="#") КАРЬЕРА
li.mobile__more-list__item
a(href="#") ЖУРНАЛИСТАМ
li.mobile__more-list__item
a(href="#") НАПРАВЛЕНИЯ ДЕЯТЕЛЬНОСТИ
li.mobile__more-list__item
a(href="#") ЭКОЛОГИЯ
li.mobile__more-list__item
a(href="#") СМИ О НАС
li.mobile__more-list__item
a(href="#") НОВОСТИ
li.mobile__more-list__item
a(href="#") ОНЛАЙН-МОНИТОРИНГ
li.mobile__more-list__item
a(href="#") ФОТОГАЛЕРЕЯ
li.mobile__more-list__item
a(href="#") ВИДЕОГАЛЕРЕЯ
li.mobile__more-list__item
a(href="#") КОНТАКТЫ
a(href="#").mobile__more-switch Перейти на ПК версию
src/blocks/page-header/page-header.scss
View file @ b6483d4b
.header { .header {
padding-bottom: 40px; padding-bottom: 40px;
.col-lg-1 a {
@media (max-width: 992px) {
margin: 0 auto;
}
}
@media (max-width: 768px) {
.header-menu-top,
.header-menu-bottom,
.col-lg-1 {
display: none !important;
}
.header-menu-mobile {
display: flex;
}
}
.header-menu-mobile {
z-index: 999;
background: #003274;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 92px;
display: none;
justify-content: space-between;
align-items: center;
.header-menu-mobile__logo {
height: 100%;
width: 123px;
margin-left: 30px;
background: url("../img/mobile-logo.svg") no-repeat center;
}
.header-menu-mobile__button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 92px;
width: 92px;
&._active {
span {
width: 30px !important;
&:first-child {
transform: rotate(45deg) translateY(5px);
}
&:last-child {
margin-left: 0;
transform: rotate(-45deg) translateY(-5px);
}
}
}
span {
display: block;
height: 2px;
background: #ffffff;
transition: 0.3s ease;
&:first-child {
width: 22px;
margin-bottom: 6px;
}
&:last-child {
margin-left: 8px;
width: 30px;
}
}
}
.header-menu-mobile__more {
overflow-y: scroll;
background: #ffffff;
padding: 30px 20px;
position: fixed;
top: 92px;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
transition: 0.3s ease;
&._active {
visibility: visible;
opacity: 1;
}
.mobile__more-search {
width: 100%;
padding: 15px 0 15px 22px;
font-size: 16px;
line-height: 21px;
color: #cccdcf;
border: 1px solid #dcddde;
}
.mobile__more-list {
margin-top: 40px;
.mobile__more-list__item {
a {
position: relative;
padding: 15px 0;
display: block;
font-size: 15px;
font-weight: 700;
line-height: 19px;
color: #003274;
border-bottom: 1px solid #f9f9f9;
&::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 100%;
background: url("../img/arrow-half.svg") no-repeat center;
}
}
._inner-list {
display: none;
._inner-list__item {
a {
display: block;
padding: 15px 0;
font-weight: 350;
font-size: 15px;
line-height: 22px;
color: #292929;
border-bottom: 1px solid #f9f9f9;
&::before {
content: initial;
}
}
}
&._active {
display: block;
}
}
}
}
.mobile__more-switch {
margin-top: 50px;
display: block;
font-weight: 700;
line-height: 21px;
color: #6dacde;
padding: 20px 0;
width: 100%;
}
}
}
.header-full { .header-full {
background: #ffffff; background: #ffffff;
z-index: 99; z-index: 99;
...@@ -149,16 +317,24 @@ ...@@ -149,16 +317,24 @@
.header-menu-top { .header-menu-top {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
font-weight: 300; font-weight: 300;
> * {
flex: 1 1 auto;
}
.header-menu-top__list { .header-menu-top__list {
display: flex; display: flex;
text-decoration: underline; text-decoration: underline;
li { li {
flex: 1 1 auto;
a { a {
padding: 19px 17.5px 26px; text-align: center;
padding: 19px 0 26px;
display: block; display: block;
&:hover { &:hover {
...@@ -173,16 +349,26 @@ ...@@ -173,16 +349,26 @@
} }
.header-menu-top__link { .header-menu-top__link {
display: flex;
justify-content: flex-end;
text-align: center;
padding: 19px 0 26px; padding: 19px 0 26px;
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
color: #003274; color: #003274;
} }
@media (max-width: 992px) {
justify-content: flex-start;
padding: 19px 7px 26px;
}
} }
.header-menu-top__lang { .header-menu-top__lang {
width: 40px;
display: flex; display: flex;
justify-content: flex-end;
a { a {
display: block; display: block;
...@@ -211,12 +397,19 @@ ...@@ -211,12 +397,19 @@
.header-menu-bottom__list { .header-menu-bottom__list {
display: flex; display: flex;
justify-content: space-between;
@media (max-width: 992px) {
li a {
font-size: 13px;
}
}
li { li {
flex: 1 1 auto;
&:first-child { &:first-child {
width: 40px;
cursor: pointer; cursor: pointer;
padding: 0 22px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -252,9 +445,10 @@ ...@@ -252,9 +445,10 @@
} }
a { a {
text-align: center;
color: #ffffff; color: #ffffff;
display: block; display: block;
padding: 23px 18.5px; padding: 23px 0;
font-weight: 700; font-weight: 700;
transition: 0.3s ease; transition: 0.3s ease;
...@@ -265,7 +459,7 @@ ...@@ -265,7 +459,7 @@
} }
&:last-child { &:last-child {
padding: 0 20px; width: 40px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
src/img/mobile-logo.svg 0 → 100644
View file @ b6483d4b
<svg width="123" height="53" viewBox="0 0 123 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M71.2053 17.5785H72.9751C73.8927 17.5785 74.5865 17.3928 75.0562 17.0213C75.5369 16.6499 75.7772 16.0818 75.7772 15.3171C75.7772 14.5305 75.5369 13.9624 75.0562 13.6128C74.5865 13.2633 73.8927 13.0885 72.9751 13.0885H71.2053V17.5785ZM71.2053 23.1828H69.7305V11.712H73.1062C73.7617 11.712 74.3461 11.783 74.8596 11.925C75.384 12.0561 75.8319 12.2691 76.2033 12.5641C76.5747 12.8591 76.8588 13.2305 77.0554 13.6784C77.2521 14.1263 77.3504 14.6616 77.3504 15.2843C77.3504 16.4751 76.9626 17.3873 76.1869 18.0209C75.4222 18.6436 74.3516 18.955 72.9751 18.955H71.2053V23.1828Z" fill="white"/>
<path d="M85.0982 20.1185H80.1985L79.0842 23.1828H77.593L81.9683 11.712H83.4431L87.7365 23.1828H86.1961L85.0982 20.1185ZM80.6737 18.7747H84.623L82.7057 13.3834H82.6402L80.6737 18.7747Z" fill="white"/>
<path d="M99.5978 25.7392H98.123V23.1828H90.4375V25.7392H88.9627V21.8063H90.0934C90.4321 21.2164 90.6997 20.5828 90.8964 19.9054C91.1039 19.2172 91.2623 18.4907 91.3716 17.726C91.4918 16.9503 91.5737 16.1474 91.6174 15.3171C91.672 14.4868 91.7103 13.6292 91.7321 12.7443L91.7649 11.712H98.2869V21.8063H99.5978V25.7392ZM96.812 21.8063V13.0885H93.125C93.125 13.1212 93.1195 13.1813 93.1086 13.2687C93.1086 13.3452 93.1086 13.4271 93.1086 13.5145C93.1086 13.6019 93.1031 13.6839 93.0922 13.7603C93.0922 13.8368 93.0922 13.8914 93.0922 13.9242C93.0594 14.6343 93.0103 15.3499 92.9447 16.0709C92.8901 16.7919 92.8027 17.4966 92.6825 18.1848C92.5733 18.8621 92.4313 19.5121 92.2565 20.1348C92.0817 20.7466 91.8632 21.3038 91.601 21.8063H96.812Z" fill="white"/>
<path d="M106.582 21.9702C107.664 21.9702 108.51 21.5933 109.122 20.8395C109.745 20.0748 110.056 18.9441 110.056 17.4474C110.056 16.6608 109.969 15.9835 109.794 15.4154C109.63 14.8473 109.39 14.3776 109.073 14.0061C108.756 13.6347 108.368 13.3616 107.91 13.1868C107.462 13.012 106.954 12.9246 106.386 12.9246C105.883 12.9246 105.413 13.0175 104.976 13.2032C104.539 13.3889 104.162 13.6675 103.846 14.0389C103.529 14.4103 103.278 14.8801 103.092 15.4482C102.906 16.0163 102.813 16.6827 102.813 17.4474C102.813 18.2012 102.901 18.8621 103.075 19.4302C103.261 19.9983 103.518 20.4735 103.846 20.8559C104.173 21.2273 104.567 21.5059 105.025 21.6916C105.495 21.8773 106.014 21.9702 106.582 21.9702ZM106.435 23.3467C105.637 23.3467 104.916 23.2101 104.272 22.937C103.638 22.6639 103.092 22.2761 102.633 21.7735C102.185 21.2601 101.841 20.6374 101.601 19.9054C101.36 19.1735 101.24 18.3541 101.24 17.4474C101.24 16.5297 101.366 15.7104 101.617 14.9894C101.868 14.2574 102.218 13.6402 102.666 13.1376C103.125 12.6242 103.671 12.2309 104.304 11.9578C104.938 11.6847 105.632 11.5481 106.386 11.5481C107.238 11.5481 107.986 11.6956 108.631 11.9905C109.286 12.2746 109.832 12.6788 110.269 13.2032C110.717 13.7166 111.056 14.3393 111.285 15.0713C111.515 15.7923 111.629 16.5843 111.629 17.4474C111.629 18.4197 111.498 19.2773 111.236 20.0201C110.974 20.7521 110.613 21.3639 110.155 21.8555C109.696 22.3471 109.15 22.7185 108.516 22.9698C107.882 23.2211 107.189 23.3467 106.435 23.3467Z" fill="white"/>
<path d="M123 23.1828H121.526V17.9062H115.725V23.1828H114.25V11.712H115.725V16.5625H121.526V11.712H123V23.1828Z" fill="white"/>
<path d="M71.3646 36.6504H72.238C72.7209 36.6504 73.0972 36.5581 73.3671 36.3734C73.6369 36.1817 73.7718 35.887 73.7718 35.4894C73.7718 35.0704 73.6405 34.7757 73.3777 34.6053C73.115 34.4278 72.7386 34.339 72.2487 34.339H71.3646V36.6504ZM71.3966 40.389H69.7988V32.933H72.3658C72.8345 32.933 73.257 32.9827 73.6334 33.0821C74.0097 33.1815 74.3293 33.3342 74.592 33.5401C74.8618 33.739 75.0678 33.9981 75.2098 34.3177C75.3518 34.6301 75.4228 34.9994 75.4228 35.4254C75.4228 35.8444 75.3483 36.2172 75.1991 36.5439C75.0571 36.8705 74.8476 37.1474 74.5707 37.3747C74.2938 37.5948 73.9565 37.7652 73.5588 37.8859C73.1612 37.9996 72.7138 38.0564 72.2167 38.0564H71.3966V40.389Z" fill="white"/>
<path d="M80.2051 39.1109C80.4749 39.1109 80.7235 39.0612 80.9507 38.9617C81.1779 38.8623 81.3732 38.7132 81.5365 38.5144C81.6999 38.3085 81.8241 38.0528 81.9093 37.7475C82.0017 37.4421 82.0478 37.08 82.0478 36.661C82.0478 35.816 81.8703 35.1982 81.5152 34.8077C81.1602 34.41 80.6915 34.2112 80.1092 34.2112C79.8465 34.2112 79.598 34.2609 79.3636 34.3603C79.1364 34.4597 78.9376 34.6124 78.7671 34.8183C78.5967 35.0171 78.4618 35.2728 78.3624 35.5852C78.2701 35.8906 78.2239 36.2492 78.2239 36.661C78.2239 37.08 78.2736 37.4421 78.373 37.7475C78.4796 38.0528 78.6216 38.3085 78.7991 38.5144C78.9766 38.7132 79.1861 38.8623 79.4275 38.9617C79.669 39.0612 79.9282 39.1109 80.2051 39.1109ZM80.1518 40.5169C79.6122 40.5169 79.1186 40.4352 78.6713 40.2719C78.231 40.1015 77.8511 39.8529 77.5316 39.5263C77.212 39.1996 76.9635 38.7984 76.786 38.3227C76.6155 37.8398 76.5303 37.2859 76.5303 36.661C76.5303 36.0361 76.6191 35.4858 76.7966 35.01C76.9812 34.5272 77.2333 34.1224 77.5529 33.7958C77.8724 33.4691 78.2488 33.2241 78.6819 33.0608C79.1222 32.8904 79.598 32.8052 80.1092 32.8052C80.6844 32.8052 81.1957 32.8939 81.6431 33.0715C82.0975 33.249 82.4774 33.5046 82.7828 33.8384C83.0952 34.165 83.3331 34.5698 83.4964 35.0526C83.6597 35.5284 83.7414 36.0645 83.7414 36.661C83.7414 37.3214 83.6491 37.8966 83.4645 38.3866C83.2869 38.8694 83.0349 39.2706 82.7082 39.5902C82.3887 39.9026 82.0088 40.137 81.5685 40.2932C81.1353 40.4423 80.6631 40.5169 80.1518 40.5169Z" fill="white"/>
<path d="M90.7889 40.0908C90.6895 40.1405 90.5795 40.1902 90.4588 40.2399C90.3451 40.2896 90.2067 40.3358 90.0433 40.3784C89.8871 40.421 89.7025 40.453 89.4895 40.4743C89.2835 40.5027 89.0457 40.5169 88.7758 40.5169C88.2077 40.5169 87.6894 40.4352 87.2207 40.2719C86.7591 40.1086 86.3615 39.8707 86.0277 39.5582C85.7011 39.2387 85.4454 38.8446 85.2608 38.3759C85.0833 37.9072 84.9945 37.3676 84.9945 36.7569C84.9945 36.1178 85.0833 35.5533 85.2608 35.0633C85.4454 34.5662 85.7082 34.1508 86.049 33.8171C86.3899 33.4833 86.8017 33.2312 87.2846 33.0608C87.7746 32.8904 88.3249 32.8052 88.9356 32.8052C89.3403 32.8052 89.7025 32.8407 90.022 32.9117C90.3487 32.9827 90.6114 33.0644 90.8103 33.1567L90.4588 34.4988C90.2315 34.4207 90.0007 34.3638 89.7664 34.3283C89.5321 34.2928 89.3297 34.2751 89.1593 34.2751C88.79 34.2751 88.4527 34.3212 88.1474 34.4136C87.8491 34.5059 87.5899 34.6514 87.3698 34.8503C87.1568 35.042 86.9899 35.2905 86.8692 35.5959C86.7485 35.8941 86.6881 36.2492 86.6881 36.661C86.6881 37.4492 86.9083 38.0422 87.3485 38.4398C87.7959 38.8375 88.3959 39.0363 89.1486 39.0363C89.319 39.0363 89.525 39.015 89.7664 38.9724C90.0078 38.9227 90.2422 38.8481 90.4694 38.7487L90.7889 40.0908Z" fill="white"/>
<path d="M96.7491 38.7487H93.8838L93.3512 40.389H91.7748L94.3205 32.933H96.3976L98.9113 40.389H97.2816L96.7491 38.7487ZM94.3205 37.3534H96.3123L95.3217 34.2218L94.3205 37.3534Z" fill="white"/>
<path d="M102.43 40.389H100.832V34.4029H98.7122V32.933H104.539V34.4029H102.43V40.389Z" fill="white"/>
<path d="M108.851 39.1109C109.12 39.1109 109.369 39.0612 109.596 38.9617C109.823 38.8623 110.019 38.7132 110.182 38.5144C110.345 38.3085 110.47 38.0528 110.555 37.7475C110.647 37.4421 110.693 37.08 110.693 36.661C110.693 35.816 110.516 35.1982 110.161 34.8077C109.806 34.41 109.337 34.2112 108.755 34.2112C108.492 34.2112 108.243 34.2609 108.009 34.3603C107.782 34.4597 107.583 34.6124 107.413 34.8183C107.242 35.0171 107.107 35.2728 107.008 35.5852C106.916 35.8906 106.869 36.2492 106.869 36.661C106.869 37.08 106.919 37.4421 107.019 37.7475C107.125 38.0528 107.267 38.3085 107.445 38.5144C107.622 38.7132 107.832 38.8623 108.073 38.9617C108.314 39.0612 108.574 39.1109 108.851 39.1109ZM108.797 40.5169C108.258 40.5169 107.764 40.4352 107.317 40.2719C106.876 40.1015 106.497 39.8529 106.177 39.5263C105.858 39.1996 105.609 38.7984 105.431 38.3227C105.261 37.8398 105.176 37.2859 105.176 36.661C105.176 36.0361 105.265 35.4858 105.442 35.01C105.627 34.5272 105.879 34.1224 106.198 33.7958C106.518 33.4691 106.894 33.2241 107.327 33.0608C107.768 32.8904 108.243 32.8052 108.755 32.8052C109.33 32.8052 109.841 32.8939 110.289 33.0715C110.743 33.249 111.123 33.5046 111.428 33.8384C111.741 34.165 111.979 34.5698 112.142 35.0526C112.305 35.5284 112.387 36.0645 112.387 36.661C112.387 37.3214 112.295 37.8966 112.11 38.3866C111.932 38.8694 111.68 39.2706 111.354 39.5902C111.034 39.9026 110.654 40.137 110.214 40.2932C109.781 40.4423 109.309 40.5169 108.797 40.5169Z" fill="white"/>
<path d="M122.246 40.389H120.638L120.233 35.4361L118.699 40.389H117.176L115.664 35.4574L115.259 40.389H113.651L114.396 32.933H116.303L117.986 38.557L119.647 32.933H121.49L122.246 40.389Z" fill="white"/>
<rect x="60.8809" y="4.33789" width="1.63869" height="44.2447" fill="white"/>
<path d="M30.4518 29.8461C28.4318 32.0992 24.9356 32.2546 22.7602 30.2345C20.5071 28.2145 20.3517 24.7183 22.3717 22.4652C24.3917 20.2121 27.8879 20.0568 30.0633 22.0768C32.2387 24.0968 32.4718 27.593 30.4518 29.8461Z" fill="white"/>
<path d="M13.6696 26.3497C13.6696 26.3497 16.6996 24.7959 18.4865 17.8812C20.2735 10.9665 26.7997 7.78112 26.7997 7.78112C26.7997 7.78112 12.6596 -6.20361 2.01562 15.7058C2.09332 15.7835 10.7949 17.4927 13.6696 26.3497Z" fill="white"/>
<path d="M14.9902 2.42041C14.9902 2.42041 25.8673 0.245007 32.3158 13.919C32.3158 13.919 39.852 16.3274 46.4559 9.41278C46.3782 9.33508 35.3458 -5.73735 14.9902 2.42041Z" fill="white"/>
<path d="M32.7047 36.6829C32.7047 36.6829 29.83 34.8183 22.9931 36.7606C16.1561 38.7029 10.096 34.5852 10.096 34.5852C10.096 34.5852 5.04597 53.7754 29.3639 52.0661C29.3639 51.9884 26.4892 43.5976 32.7047 36.6829Z" fill="white"/>
<path d="M11.3388 47.4824C11.3388 47.4824 4.03569 39.1693 12.6596 26.7384C12.6596 26.7384 11.0281 19.0468 1.7049 16.7937C1.62721 16.8714 -5.90901 33.9638 11.3388 47.4824Z" fill="white"/>
<path d="M32.1607 15.0843C32.1607 15.0843 32.0053 18.5028 37.0553 23.4751C42.1831 28.4475 41.6392 35.7506 41.6392 35.7506C41.6392 35.7506 60.8294 30.5452 47.1554 10.2673C47.1554 10.2673 41.3284 16.9489 32.1607 15.0843Z" fill="white"/>
<path d="M52.2831 28.1367C52.2831 28.1367 48.7093 38.6253 33.7145 37.3822C33.7145 37.3822 27.8876 42.6653 30.6068 51.8331C30.5291 51.9108 49.1754 49.8907 52.2831 28.1367Z" fill="white"/>
</svg>
src/js/script.js
View file @ b6483d4b
...@@ -128,6 +128,39 @@ class Application { ...@@ -128,6 +128,39 @@ class Application {
document.body.removeAttribute("style"); document.body.removeAttribute("style");
}); });
const mobileMenuButton = document.querySelector(
".header .header-menu-mobile .header-menu-mobile__button"
);
const mobileMenu = document.querySelector(
".header .header-menu-mobile .header-menu-mobile__more"
);
mobileMenuButton.addEventListener("click", () => {
if (mobileMenu.classList.contains("_active")) {
mobileMenu.classList.remove("_active");
mobileMenuButton.classList.remove("_active");
} else {
mobileMenu.classList.add("_active");
mobileMenuButton.classList.add("_active");
}
});
const mobileMenuList = document.querySelectorAll(
".header .header-menu-mobile .header-menu-mobile__more .mobile__more-list .mobile__more-list__item"
);
mobileMenuList.forEach((li) => {
const liMore = li.querySelector("._inner-list");
li.addEventListener("click", () => {
if (liMore.classList.contains("_active")) {
liMore.classList.remove("_active");
} else {
liMore.classList.add("_active");
}
});
});
} }
turnParallax() { turnParallax() {
......
src/scss/main.scss
View file @ b6483d4b
...@@ -12,13 +12,6 @@ ...@@ -12,13 +12,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
@media (max-width: 768px) {
.header,
.footer {
display: none !important;
}
}
body { body {
font-family: "Rosatom", "Arial", sans-serif; font-family: "Rosatom", "Arial", sans-serif;
color: #000000; color: #000000;
......
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