Skip to content

V
volga
Commit 7842a9f6 authored by dagalkova's avatar dagalkova
Browse files
Options

Upload

parent a5613b2b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 274 additions and 53 deletions
company.html 0 → 100644
View file @ 7842a9f6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>О компании</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body>
<header class="header">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<img src="img/burger.svg" alt="burger">
</a>
<ul class="menu">
<li class="menu-item"><a class="menu-item__link" href="#">Компания</a></li>
<li class="menu-item"><a class="menu-item__link" href="#">Продукция</a></li>
<li class="menu-item"><a class="menu-item__link" href="#">Пресс-центр</a></li>
<li class="menu-item"><a class="menu-item__link" href="#">Устойчивое развитие</a></li>
<li class="menu-item"><a class="menu-item__link" href="#">Закупки</a></li>
<li class="menu-item"><a class="menu-item__link" href="#">Раскрытие информации</a></li>
</ul>
<ul class="second-menu">
<li class="second-menu-item">
<a class="second-menu-item__link" href="#">
<img src="img/search.svg" alt="icon: search">
</a>
</li>
<li class="second-menu-item">
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<img src="img/login.svg" alt="icon: login">
<span>Войти</span>
</div>
</a>
</li>
<li class="second-menu-item">
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
<img src="img/down.svg" alt="icon: down">
</div>
</a>
</li>
</ul>
</nav>
<div class="separator"></div>
<div class="heading-other">
<div class="heading-other-nav">
<a href="#" class="heading-other-nav__page">Главная</a>
<img class="heading-other-nav__icon" src="img/heading_nav.svg" alt="nav icon">
<a href="#" class="heading-other-nav__page heading-other-nav__page--current">Компания</a>
</div>
<h1 class="heading-other__title">Компания</h1>
</div>
</header>
</body>
</html>
\ No newline at end of file
img/heading_nav.svg 0 → 100644
View file @ 7842a9f6
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7.53223" y="0.904983" width="9.65165" height="9.65165" transform="rotate(45 7.53223 0.904983)" stroke="white"/>
</svg>
img/top_mask.svg
View file @ 7842a9f6
<svg width="549" height="323" viewBox="0 0 549 323" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M222.544 319.277L275.814 318.832L135.618 183.953L318.385 3L501.153 182.617L362.517 318.165H416.456L488.894 319.5M222.544 319.277L290.97 384.714V453.267L149.437 318.832L101.516 318.61H19.7165L290.302 585.476V499.117L101.293 318.832L50.0292 271.869L3 319.5L318.608 636L636 318.61L588.748 272.092L537.93 319.723L350.036 499.34L350.481 584.585L619.506 319.945L537.93 319.5H488.894M222.544 319.277L110.209 213.11L76.107 248.722L149.437 319.055L222.544 319.277ZM488.894 319.5L563.339 244.938L527.454 211.774L416.679 318.387L350.036 383.824V454.38L488.894 319.5Z" stroke="#D6D9E5" stroke-opacity="0.2" stroke-width="3"/>
<svg width="604" height="410" viewBox="0 0 604 410" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="604" height="410">
<rect width="604" height="410" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path d="M277.544 406.277L330.814 405.832L190.618 270.953L373.386 90L556.153 269.617L417.517 405.165H471.456L543.894 406.5M277.544 406.277L345.97 471.714V540.267L204.437 405.832L156.516 405.61H74.7165L345.302 672.476V586.117L156.293 405.832L105.029 358.869L58 406.5L373.608 723L691 405.61L643.748 359.092L592.93 406.723L405.036 586.34L405.481 671.585L674.506 406.945L592.93 406.5H543.894M277.544 406.277L165.209 300.11L131.107 335.722L204.437 406.055L277.544 406.277ZM543.894 406.5L618.339 331.938L582.454 298.774L471.679 405.387L405.036 470.824V541.38L543.894 406.5Z" stroke="#D6D9E5" stroke-opacity="0.2" stroke-width="3"/>
</g>
</svg>
index.html
View file @ 7842a9f6
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Volga Главная</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
......@@ -71,35 +71,44 @@
</li>
</ul>
</div>
</div>
<div class="point-num">
</div>
<div class="point">
<div class="point-item">
<div class="point-item__num">1</div>
<div class="point-item-wrapper">
<span class="point-item-wrapper__title">Инвестпроекты</span>
</div>
</div>
<div class="point-item">
<a href="#" class="point-item">
<div class="point-item__num">1</div>
<div class="point-item-wrapper">
<span class="point-item-wrapper__title">Инвестпроекты</span>
<p class="point-item-wrapper__text">Закупочная деятельность АО «Волга» направлена на
своевременное и полное удовлетворение потребностей компании
в товарах, работах, услугах.</p>
</div>
</a>
<a href="#" class="point-item">
<div class="point-item__num">2</div>
<div class="point-item-wrapper">
<span class="point-item-wrapper__title">Устойчивое развитие</span>
<p class="point-item-wrapper__text">Закупочная деятельность АО «Волга» направлена на
своевременное и полное удовлетворение потребностей компании
в товарах, работах, услугах.</p>
</div>
</div>
<div class="point-item">
</a>
<a href="#" class="point-item">
<div class="point-item__num">3</div>
<div class="point-item-wrapper">
<span class="point-item-wrapper__title">Зелёные технологии</span>
<p class="point-item-wrapper__text">Закупочная деятельность АО «Волга» направлена на
своевременное и полное удовлетворение потребностей компании
в товарах, работах, услугах.</p>
</div>
</div>
<div class="point-item">
</a>
<a href="#" class="point-item">
<div class="point-item__num">4</div>
<div class="point-item-wrapper">
<span class="point-item-wrapper__title">Лесосырьевое обеспечение</span>
<p class="point-item-wrapper__text">Закупочная деятельность АО «Волга» направлена на
своевременное и полное удовлетворение потребностей компании
в товарах, работах, услугах.</p>
</div>
</div>
</a>
</div>
</header>
<section class="production">
......@@ -307,7 +316,6 @@
</a>
</div>
</div>
<div class="press-separator"></div>
</section>
<section class="ecology">
<div class="ecology-text">
......@@ -352,15 +360,15 @@
</div>
<div class="contacts-info">
<div class="contacts-info-item">
<span class="contacts-info-item__title">Московский офис АО «Волга»</span>
<span class="contacts-info-item__title">Нижегородский офис АО «Волга»</span>
<span class="contacts-info-item__tel">+7 (83144) 9-33-16</span>
<span class="contacts-info-item__addr">2-й Новокузнецкий переулок, д 25</span>
<span class="contacts-info-item__addr">Балахна, ул. Горького, 1</span>
<a href="#" class="contacts-info-item__email">info@volga-paper.ru</a>
</div>
<div class="contacts-info-item">
<span class="contacts-info-item__title">Нижегородский офис АО «Волга»</span>
<span class="contacts-info-item__title">Московский офис АО «Волга»</span>
<span class="contacts-info-item__tel">+7 (83144) 9-33-16</span>
<span class="contacts-info-item__addr">Балахна, ул. Горького, 1</span>
<span class="contacts-info-item__addr">2-й Новокузнецкий переулок, д 25</span>
<a href="#" class="contacts-info-item__email">info@volga-paper.ru</a>
</div>
</div>
......
styles/style.css
View file @ 7842a9f6
......@@ -152,7 +152,9 @@ a {
.heading {
padding: 68px 255px 59px 140px;
width: 1040px;
width: 80%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
......@@ -198,6 +200,50 @@ a {
text-decoration: none;
}
.heading-other {
padding: 68px 255px 59px 140px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.heading-other__title {
font-weight: 800;
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
color: #ffffff;
}
.heading-other-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.heading-other-nav__page {
font-weight: normal;
font-size: 18px;
line-height: 110%;
letter-spacing: 0.02em;
color: #ffffff;
}
.heading-other-nav__page--current {
color: #93969e;
}
.heading-other-nav__icon {
margin: 0 15px;
}
.heading-menu {
list-style: url("../img/list.svg");
}
......@@ -222,7 +268,7 @@ a {
}
.point {
margin: 30px 132px 0 139px;
margin: 30px 20px 0 134px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
......@@ -232,11 +278,20 @@ a {
}
.point-item {
padding-left: 45px;
padding: 16px 47px 0 32.5px;
-webkit-transition: 0.4s;
transition: 0.4s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 25%;
}
.point-item__num {
......@@ -249,8 +304,18 @@ a {
}
.point-item-wrapper {
height: 94px;
border-left: 1px rgba(255, 255, 255, 0.5) solid;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding-bottom: 48px;
}
.point-item-wrapper__title {
......@@ -259,9 +324,37 @@ a {
line-height: 160%;
color: #ffffff;
margin: 0;
margin-left: 44.5px;
margin-bottom: 16px;
}
.point-item-wrapper__text {
display: none;
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #16291f;
margin-left: 45px;
}
.point-item:hover {
background: #ffffff;
cursor: pointer;
}
.point-item:hover .point-item__num,
.point-item:hover .point-item-wrapper__title {
color: #16291f;
}
.point-item:hover .point-item-wrapper__text {
display: block;
}
.point-item:hover .point-item-wrapper {
border-color: #e6e9f0;
}
.production {
background: #f6f8fa url("../img/production_mask.svg") no-repeat right -290px;
margin: 0;
......@@ -594,11 +687,11 @@ a {
.company-top-item:last-child {
width: 50%;
background: #ffffff url("../img/top_mask.svg") no-repeat right 104%;
background: #ffffff url("../img/top_mask.svg") no-repeat right 20px;
}
.press {
background: #f6f8fa url("../img/top_mask_2.svg") no-repeat right -316px;
background: #f6f8fa url("../img/top_mask_2.svg") no-repeat right -302px;
margin: 0;
padding: 80px 21px 0 0;
-webkit-box-sizing: border-box;
......@@ -661,7 +754,6 @@ a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 56px;
}
.press-content-media {
......@@ -758,7 +850,7 @@ a {
}
.press-content-media-wrapper__social:hover {
fill: #c7c9cf;
fill: #28be4a;
}
.press-content-news {
......@@ -852,13 +944,6 @@ a {
opacity: 1;
}
.press-separator {
width: 338px;
height: 3px;
background: #029745;
margin-left: 25%;
}
.ecology {
background: #f6f8fa url("../img/ecology_mask.svg") no-repeat bottom left;
margin: 0;
......
styles/style.css.map
View file @ 7842a9f6
This diff is collapsed.
styles/style.scss
View file @ 7842a9f6
......@@ -111,7 +111,8 @@ a {
.heading {
padding: 68px 255px 59px 140px;
width: 1040px;
width: 80%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
......@@ -147,6 +148,36 @@ a {
}
}
.heading-other {
padding: 68px 255px 59px 140px;
display: flex;
flex-direction: column;
&__title {
font-weight: 800;
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
color: #ffffff;
}
&-nav {
display: flex;
align-items: center;
&__page {
font-weight: normal;
font-size: 18px;
line-height: 110%;
letter-spacing: 0.02em;
color: #ffffff;
&--current {
color: #93969e;
}
}
&__icon {
margin: 0 15px;
}
}
}
.heading-menu {
list-style: url('../img/list.svg');
&-item {
......@@ -168,12 +199,16 @@ a {
}
.point {
margin: 30px 132px 0 139px;
margin: 30px 20px 0 134px;
display: flex;
justify-content: space-between;
&-item {
padding-left: 45px;
padding: 16px 47px 0 32.5px;
transition: 0.4s;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 25%;
&__num {
font-weight: 300;
font-size: 30px;
......@@ -183,18 +218,44 @@ a {
margin-left: -7px;
}
&-wrapper {
height: 94px;
border-left: 1px rgba($color: #fff, $alpha: 0.5) solid;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 48px;
&__title {
font-weight: normal;
font-size: 22px;
line-height: 160%;
color: #ffffff;
margin: 0;
margin-left: 44.5px;
margin-bottom: 16px;
}
&__text {
display: none;
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #16291f;
margin-left: 45px;
}
}
}
&-item:hover {
background: #ffffff;
cursor: pointer;
}
&-item:hover &-item__num,
&-item:hover &-item-wrapper__title {
color: #16291f;
}
&-item:hover &-item-wrapper__text {
display: block;
}
&-item:hover &-item-wrapper {
border-color: #e6e9f0;
}
}
.production {
......@@ -442,13 +503,13 @@ a {
}
&-item:last-child {
width: 50%;
background: #ffffff url('../img/top_mask.svg') no-repeat right 104%;
background: #ffffff url('../img/top_mask.svg') no-repeat right 20px;
}
}
}
.press {
background: #f6f8fa url('../img/top_mask_2.svg') no-repeat right -316px;
background: #f6f8fa url('../img/top_mask_2.svg') no-repeat right -302px;
margin: 0;
padding: 80px 21px 0 0;
box-sizing: border-box;
......@@ -495,7 +556,6 @@ a {
}
&-content {
display: flex;
margin-bottom: 56px;
&-media {
box-sizing: border-box;
display: flex;
......@@ -555,7 +615,7 @@ a {
stroke: #fff;
}
&-wrapper__social:hover {
fill: #c7c9cf;
fill: #28be4a;
}
}
&-news {
......@@ -618,12 +678,6 @@ a {
}
}
}
&-separator {
width: 338px;
height: 3px;
background: #029745;
margin-left: 25%;
}
}
.ecology {
......
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