Skip to content

L
landing_pages
Commit e055faa8 by Iren
Options

add style for header (btn and video)

parent 46b992ea
Showing with 22 additions and 6 deletions
css/styles.css
...@@ -342,7 +342,7 @@ h1 { ...@@ -342,7 +342,7 @@ h1 {
color: white; color: white;
font-weight: 800; font-weight: 800;
line-height: 62px; line-height: 62px;
letter-spacing: 1px; letter-spacing: 1.3px;
margin-bottom: 2.5%; margin-bottom: 2.5%;
text-align: left; text-align: left;
} }
...@@ -421,7 +421,8 @@ h1 { ...@@ -421,7 +421,8 @@ h1 {
} }
.header-text-center { .header-text-center {
text-align: center; text-align: center;
width: 50%; /*width: 50%;*/
width: 49%;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.header-text-center { .header-text-center {
...@@ -456,6 +457,10 @@ h1 { ...@@ -456,6 +457,10 @@ h1 {
margin-bottom: 22px; margin-bottom: 22px;
} }
} }
.header-btn-container {
display: flex;
justify-content: space-between;
}
.header-btn { .header-btn {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
width: 290px; width: 290px;
...@@ -463,6 +468,7 @@ h1 { ...@@ -463,6 +468,7 @@ h1 {
border-radius: 26px; border-radius: 26px;
background: #c94d4e; background: #c94d4e;
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 30px;
color: #ffffff; color: #ffffff;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
...@@ -560,6 +566,7 @@ h1 { ...@@ -560,6 +566,7 @@ h1 {
.header-video { .header-video {
position: relative; position: relative;
width: 50%; width: 50%;
padding-left: 80px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.header-video { .header-video {
......
css/styles.less
...@@ -289,7 +289,7 @@ h1 { ...@@ -289,7 +289,7 @@ h1 {
color: white; color: white;
font-weight: 800; font-weight: 800;
line-height: 62px; line-height: 62px;
letter-spacing: 1px; letter-spacing: 1.3px;
margin-bottom: 2.5%; margin-bottom: 2.5%;
text-align: left; text-align: left;
@media (max-width: 992px) { @media (max-width: 992px) {
...@@ -350,7 +350,8 @@ h1 { ...@@ -350,7 +350,8 @@ h1 {
} }
.header-text-center { .header-text-center {
text-align: center; text-align: center;
width: 50%; /*width: 50%;*/
width: 49%;
@media (max-width: 576px){ @media (max-width: 576px){
width: 100%; width: 100%;
} }
...@@ -379,6 +380,10 @@ h1 { ...@@ -379,6 +380,10 @@ h1 {
margin-bottom: 22px; margin-bottom: 22px;
} }
} }
.header-btn-container {
display: flex;
justify-content: space-between;
}
.header-btn { .header-btn {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
width: 290px; width: 290px;
...@@ -386,6 +391,7 @@ h1 { ...@@ -386,6 +391,7 @@ h1 {
border-radius: 26px; border-radius: 26px;
background: #c94d4e; background: #c94d4e;
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 30px;
color: #ffffff; color: #ffffff;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
...@@ -467,6 +473,7 @@ h1 { ...@@ -467,6 +473,7 @@ h1 {
.header-video { .header-video {
position: relative; position: relative;
width: 50%; width: 50%;
padding-left: 80px;
@media (max-width: 576px) { @media (max-width: 576px) {
display: none; display: none;
width: 150px; width: 150px;
......
index.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="vendors/fontawesome/web-fonts-with-css/css/fontawesome-all.css" /> <link rel="stylesheet" href="vendors/fontawesome/web-fonts-with-css/css/fontawesome-all.css"/>
</head> </head>
<body> <body>
...@@ -86,13 +86,15 @@ ...@@ -86,13 +86,15 @@
<div class="header-h1-line"> <div class="header-h1-line">
</div> </div>
<p class="header-text"> <p class="header-text">
MySmart office (MSO) – единая платформа с открытым API,гибкими инструментами адаптации под любой бизнес MySmart office (MSO) – единая платформа с открытым API,<br>гибкими инструментами адаптации под любой бизнес
и неограниченными возможностями масштабирования. и неограниченными возможностями масштабирования.
С помощью MSO вы сможете автоматизировать любой бизнес-процесс. С помощью MSO вы сможете автоматизировать любой бизнес-процесс.
</p> </p>
<div class="header-btn-container">
<button type="button" class="header-btn">Зарегистрироваться</button> <button type="button" class="header-btn">Зарегистрироваться</button>
<button type="button" class="header-btn-background header-btn">Узнать больше</button> <button type="button" class="header-btn-background header-btn">Узнать больше</button>
</div> </div>
</div>
<div class="header-video"> <div class="header-video">
<video controls="controls" poster="img/video.png"> <video controls="controls" poster="img/video.png">
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
......
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