Skip to content

L
landing_pages
Commit 67540d95 by Iren
Options

add header

parent 0dd4d620
Showing with 389 additions and 69 deletions
css/styles.css
@font-face {
font-family: AvenirNext-Heavy;
src: url("../fonts/AvenirNext-Heavy.ttf");
font-weight: normal;
font-style: normal;
font-family: 'HelveticaNeue-Black';
/*src: url("../fonts/HelveticaNeue-Black.otf");*/
src: url("../fonts/HelveticaNeue-Black.otf");
}
@font-face {
font-family: SFUIDisplay-Regular;
......@@ -23,8 +22,9 @@ body {
display: flex;
justify-content: center;
}
button.main-btn {
font-family: SFUIDisplay-Regular;
button.main-btn,
.header-btn {
font-family: SFUIDisplay-Regular sans-serif;
width: 290px;
height: 52px;
margin-top: 30px;
......@@ -39,8 +39,9 @@ button.main-btn {
text-align: center;
}
@media (max-width: 576px) {
button.main-btn {
font-family: SFUIDisplay-Regular;
button.main-btn,
.header-btn {
font-family: SFUIDisplay-Regular sans-serif;
width: 143px;
height: 44px;
margin-top: 30px;
......@@ -79,15 +80,141 @@ header {
width: 100%;
height: 733px;
}
.bbb {
.header-container {
height: 733px;
color: red;
}
@media (max-width: 576px) {
.bbb {
.header-container {
height: 200px;
}
}
.header-wrapp {
display: flex;
justify-content: space-between;
height: 19%;
}
.header-img {
width: 19.6%;
margin-top: 1.8%;
}
.header-img img {
position: relative;
z-index: 3;
width: 100%;
height: 37%;
}
.header-nav {
position: relative;
z-index: 3;
display: flex;
justify-content: flex-end;
width: 67.6%;
height: 4.7%;
margin-top: 3%;
}
.header-link {
margin-right: 2.5%;
}
.header-link a {
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular;
}
.header-link-language {
margin-right: 2.5%;
}
.header-link-language a {
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular sans-serif;
}
.header-line {
width: 30px;
height: 35px;
margin-top: -6px;
border-left: white 1px solid;
}
.header-icon i {
color: white;
font-size: 18px;
margin-right: 5px;
}
.header-icon i:last-child {
margin-right: 0!important;
}
i.icon-last {
margin-right: 0;
}
h1 {
position: relative;
z-index: 3;
font-family: 'HelveticaNeue-Black';
font-size: 60px;
color: white;
font-weight: 800;
line-height: 62px;
letter-spacing: 0.6px;
margin-bottom: 2.5%;
}
.header-h1-line {
position: relative;
z-index: 3;
font-family: SFUIDisplay-Regular sans-serif;
width: 398px;
height: 4px;
border-bottom: #c94d4e 2px solid;
margin-bottom: 4.2%;
}
.header-text {
position: relative;
z-index: 3;
margin-bottom: 12px;
font-size: 18px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
color: white;
}
.header-btn {
position: relative;
z-index: 3;
}
.header-btn-background {
font-family: SFUIDisplay-Regular sans-serif;
position: relative;
z-index: 3;
width: 290px;
height: 52px;
margin-top: 30px;
margin-bottom: 75px;
border-radius: 26px;
border: #c94d4e 1px solid;
background-color: transparent;
color: #ffffff;
font-size: 18px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.18px;
text-align: center;
}
.header-text-wrapper {
display: flex;
justify-content: space-between;
}
video {
width: 100%;
height: 70%;
margin-top: 5%;
position: relative;
z-index: 3;
}
.main-container {
position: relative;
max-width: 1250px;
......@@ -103,7 +230,7 @@ header {
}
}
.h2-desktop {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
font-size: 36px;
font-weight: 800;
line-height: 62px;
......@@ -140,7 +267,7 @@ header {
margin-top: 4px;
}
.text-h2-desktop {
font-family: SFUIDisplay-Light;
font-family: SFUIDisplay-Light sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 27px;
......@@ -159,16 +286,16 @@ header {
}
}
.h2-desktop-tittle {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
}
@media (max-width: 576px) {
.h2-desktop-tittle {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
max-width: 170px;
}
}
.h3-desktop {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
margin-bottom: 18px;
font-size: 18px;
font-weight: 700;
......@@ -186,7 +313,7 @@ header {
}
}
.text-h3-desktop {
font-family: SFUIDisplay-Light;
font-family: SFUIDisplay-Light sans-serif;
margin-top: -12px;
font-size: 16px;
font-weight: 300;
......@@ -196,7 +323,7 @@ header {
}
@media (max-width: 576px) {
.text-h3-desktop {
font-family: SFUIDisplay-Light;
font-family: SFUIDisplay-Light sans-serif;
font-size: 14px;
line-height: 18px;
letter-spacing: 0;
......@@ -291,7 +418,7 @@ header {
}
}
.advertising-text-order h2 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
font-size: 36px;
line-height: 62px;
margin-bottom: 3px;
......@@ -313,7 +440,7 @@ header {
}
}
.advertising-text-order p {
font-family: SFUIDisplay-Light;
font-family: SFUIDisplay-Light sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 27px;
......@@ -361,7 +488,7 @@ header {
width: 110%;
}
.advertising-text h2 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
font-size: 36px;
line-height: 62px;
margin-bottom: 3px;
......@@ -383,7 +510,7 @@ header {
}
}
.advertising-text p {
font-family: SFUIDisplay-Light;
font-family: SFUIDisplay-Light sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 27px;
......@@ -427,7 +554,7 @@ header {
}
/*option*/
.option h2 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
font-size: 36px;
line-height: 62px;
margin-bottom: 3px;
......@@ -475,7 +602,7 @@ header {
max-width: 485px;
}
.option-card-img h4 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
font-size: 30px;
line-height: 30px;
font-weight: 400;
......@@ -589,12 +716,12 @@ header {
}
}
.protection-text {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
height: 90px;
}
@media (max-width: 576px) {
.protection-text {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
height: auto;
margin-bottom: 10px;
min-width: 216px;
......@@ -627,7 +754,7 @@ header {
margin-bottom: 70px;
}
.catalog-img-container {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
margin-right: 5%;
margin-bottom: 60px;
}
......@@ -727,6 +854,12 @@ header {
justify-content: space-between;
margin-bottom: 143px;
}
@media (max-width: 1250px) {
.price-wrapper {
position: absolute;
display: none;
}
}
.price-container,
.price-container-active {
position: relative;
......@@ -740,7 +873,7 @@ header {
}
.price-container h6,
.price-container-active h6 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
position: relative;
z-index: 3;
margin-bottom: 70px;
......@@ -772,7 +905,7 @@ header {
border-radius: 4px;
}
.price-container-active h6 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
position: relative;
z-index: 3;
margin-bottom: 80px;
......@@ -898,7 +1031,7 @@ header {
padding-bottom: 14%;
}
.form-wrapper h6 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
font-size: 60px;
font-weight: 400;
color: white;
......@@ -906,7 +1039,7 @@ header {
margin-bottom: 20px;
}
.form-wrapper p {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
font-size: 20px;
font-weight: 400;
color: white;
......@@ -935,7 +1068,7 @@ input.form-last-child {
margin-bottom: 47px;
}
.form-btn {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
margin-top: -100px;
border: none;
}
......@@ -983,7 +1116,7 @@ footer {
margin-top: 12px;
}
.footer-link a {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
width: 244px;
font-size: 14px;
font-weight: 400;
......@@ -998,7 +1131,7 @@ footer {
margin-bottom: 9px;
}
.footer-contacts-link a {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
......@@ -1006,7 +1139,7 @@ footer {
letter-spacing: 0.16px;
}
.footer-icon-text {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 30px;
......
css/styles.less
@font-face {
font-family: AvenirNext-Heavy;
src: url("../fonts/AvenirNext-Heavy.ttf");
font-weight: normal;
font-style: normal;
font-family: 'HelveticaNeue-Black';
/*src: url("../fonts/HelveticaNeue-Black.otf");*/
src: url("../fonts/HelveticaNeue-Black.otf");
}
@font-face {
font-family: SFUIDisplay-Regular;
......@@ -23,8 +22,8 @@ body {
display: flex;
justify-content: center;
}
button.main-btn {
font-family: SFUIDisplay-Regular;
button.main-btn, .header-btn {
font-family: SFUIDisplay-Regular sans-serif;
width: 290px;
height: 52px;
margin-top: 30px;
......@@ -38,7 +37,7 @@ button.main-btn {
letter-spacing: 0.18px;
text-align: center;
@media (max-width: 576px) {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
width: 143px;
height: 44px;
margin-top: 30px;
......@@ -75,13 +74,141 @@ header {
width: 100%;
height: 733px;
}
.bbb {
.header-container {
height: 733px;
color: red;
@media (max-width: 576px) {
height: 200px;
}
}
.header-wrapp {
display: flex;
justify-content: space-between;
height: 19%;
}
.header-img {
width: 19.6%;
margin-top: 1.8%;
img {
position: relative;
z-index: 3;
width: 100%;
height: 37%;
}
}
.header-nav {
position: relative;
z-index: 3;
display: flex;
justify-content: flex-end;
width: 67.6%;
height: 4.7%;
margin-top: 3%;
}
.header-link {
margin-right: 2.5%;
a {
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular;
}
}
.header-link-language {
margin-right: 2.5%;
a {
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular sans-serif;
}
}
.header-line {
width: 30px;
height: 35px;
margin-top: -6px;
border-left: white 1px solid;
}
.header-icon {
i {
color: white;
font-size: 18px;
margin-right: 5px;
}
i:last-child {
margin-right: 0!important;
}
}
i.icon-last {
margin-right: 0;
}
h1 {
position: relative;
z-index: 3;
font-family: 'HelveticaNeue-Black';
font-size: 60px;
color: white;
font-weight: 800;
line-height: 62px;
letter-spacing: 0.6px;
margin-bottom: 2.5%;
}
.header-h1-line{
position: relative;
z-index: 3;
font-family: SFUIDisplay-Regular sans-serif;
width: 398px;
height: 4px;
border-bottom: #c94d4e 2px solid;
margin-bottom: 4.2%;
}
.header-text {
position: relative;
z-index: 3;
margin-bottom: 12px;
font-size: 18px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
color: white;
}
.header-btn {
position: relative;
z-index: 3;
}
.header-btn-background {
font-family: SFUIDisplay-Regular sans-serif;
position: relative;
z-index: 3;
width: 290px;
height: 52px;
margin-top: 30px;
margin-bottom: 75px;
border-radius: 26px;
border: #c94d4e 1px solid;
background-color: transparent;
color: #ffffff;
font-size: 18px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.18px;
text-align: center;
}
.header-text-wrapper {
display: flex;
justify-content: space-between;
}
video {
width: 100%;
height: 70%;
margin-top: 5%;
position: relative;
z-index: 3;
}
.main-container {
position: relative;
max-width: 1250px;
......@@ -95,7 +222,7 @@ header {
}
}
.h2-desktop {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
font-size: 36px;
font-weight: 800;
line-height: 62px;
......@@ -130,7 +257,7 @@ header {
margin-top: 4px;
}
.text-h2-desktop {
font-family: SFUIDisplay-Light;
font-family: SFUIDisplay-Light sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 27px;
......@@ -147,14 +274,14 @@ header {
}
}
.h2-desktop-tittle {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
@media (max-width: 576px){
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
max-width: 170px;
}
}
.h3-desktop {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
margin-bottom: 18px;
font-size: 18px;
font-weight: 700;
......@@ -170,7 +297,7 @@ header {
}
}
.text-h3-desktop {
font-family: SFUIDisplay-Light;
font-family: SFUIDisplay-Light sans-serif;
margin-top: -12px;
font-size: 16px;
font-weight: 300;
......@@ -178,7 +305,7 @@ header {
color: #303a81;
letter-spacing: 0.16px;
@media (max-width: 576px) {
font-family: SFUIDisplay-Light;
font-family: SFUIDisplay-Light sans-serif;
font-size: 14px;
line-height: 18px;
letter-spacing: 0;
......@@ -267,7 +394,6 @@ header {
p {
.text-h2-desktop;
}
}
.advertising-text .main-line {
margin-bottom: 24px;
......@@ -293,16 +419,11 @@ header {
width: 100%;
}
}
}
.advertising-text {
width: 110%;
h2 {
.h2-desktop;
margin-bottom: 31px;
line-height: 36px;
font-weight: 800;
......@@ -316,7 +437,6 @@ header {
}
.advertising-img {
@media (min-height: 577px) {
margin-top: -65px;
width: 120%;
padding-top: 0;
......@@ -363,7 +483,7 @@ header {
text-align: center;
max-width: 485px;
h4 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
font-size: 30px;
line-height: 30px;
font-weight: 400;
......@@ -465,10 +585,10 @@ header {
}
}
.protection-text {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
height: 90px;
@media (max-width: 576px) {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
height: auto;
margin-bottom: 10px;
min-width: 216px;
......@@ -498,7 +618,7 @@ header {
margin-bottom: 70px;
}
.catalog-img-container {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
margin-right: 5%;
margin-bottom: 60px;
img {
......@@ -590,6 +710,10 @@ header {
display: flex;
justify-content: space-between;
margin-bottom: 143px;
@media (max-width: 1250px) {
position: absolute;
display: none;
}
}
.price-container, .price-container-active {
position: relative;
......@@ -601,7 +725,7 @@ header {
border: #e6effa 1px solid;
border-radius: 4px;
h6 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
position: relative;
z-index: 3;
margin-bottom: 70px;
......@@ -632,7 +756,7 @@ header {
border: #e6effa 1px solid;
border-radius: 4px;
h6 {
font-family: AvenirNext-Heavy;;
font-family: AvenirNext-Heavy sans-serif;
position: relative;
z-index: 3;
margin-bottom: 80px;
......@@ -754,7 +878,7 @@ header {
padding-top: 12.7%;
padding-bottom: 14%;
h6 {
font-family: AvenirNext-Heavy;
font-family: AvenirNext-Heavy sans-serif;
font-size: 60px;
font-weight: 400;
color: white;
......@@ -762,7 +886,7 @@ header {
margin-bottom: 20px;
}
p {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
font-size: 20px;
font-weight: 400;
color: white;
......@@ -792,7 +916,7 @@ input.form-last-child {
margin-bottom: 47px;
}
.form-btn {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
margin-top: -100px;
border: none;
}
......@@ -838,7 +962,7 @@ footer {
margin-top: 12px;
}
.footer-link a{
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
width: 244px;
font-size: 14px;
font-weight: 400;
......@@ -853,7 +977,7 @@ footer {
margin-bottom: 9px;
}
.footer-contacts-link a {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
......@@ -861,7 +985,7 @@ footer {
letter-spacing: 0.16px;
}
.footer-icon-text {
font-family: SFUIDisplay-Regular;
font-family: SFUIDisplay-Regular sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 30px;
......
index.html
......@@ -14,7 +14,70 @@
<body>
<header>
<div class="main-container">
<div class="bbb">hhhhh
<div class="header-container">
<div class="header-wrapp">
<div class="header-img">
<img src="img/header-logo.png">
</div>
<div class="header-nav">
<div class="header-link">
<a href="">Продукт</a>
</div>
<div class="header-link">
<a href="">Цены</a>
</div>
<div class="header-link">
<a href="">Контакты</a>
</div>
<div class="header-line">
</div>
<div class="header-link">
<a href="">Войти</a>
</div>
<div class="header-link">
<a href="">Зарегистрироваться</a>
</div>
<div class="header-line">
</div>
<div class="header-link-language">
<a href="">Eng</a>
</div>
<div class="header-link-language">
<a href="">Rus</a>
</div>
<div class="header-line">
</div>
<div class="header-icon">
<i class="fa fa-facebook-square footer-icon" aria-hidden="true"></i>
<i class="fa fa-circle footer-icon" aria-hidden="true"></i>
<i class="fa fa-plus-square footer-icon" aria-hidden="true"></i>
<i class="fa fa-ambulance footer-icon icon-last" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="header-text-wrapper">
<div>
<h1>От беспорядка<br>к системности<br>в бизнесе</h1>
<div class="header-h1-line">
</div>
<p class="header-text">
MySmart office (MSO) – единая платформа с открытым API,<br>гибкими инструментами адаптации под любой бизнес<br>
и неограниченными возможностями масштабирования.<br>
С помощью MSO вы сможете автоматизировать любой бизнес-процесс.
</p>
<button type="button" class="main-btn header-btn">Зарегистрироваться</button>
<button type="button" class="header-btn-background">Узнать больше</button>
</div>
<div>
<video controls="controls" poster="img/video.png">
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
Тег video не поддерживается вашим браузером.
<a href="video/duel.mp4">Скачайте видео</a>.
</video>
</div>
</div>
</div>
</div>
<div class="background-banner">
......
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