Skip to content

L
landing_pages
Commit 19d37da0 by Iren
Options

add navicon

parent 0f37d9ac
Showing with 298 additions and 36 deletions
css/styles.css
......@@ -61,16 +61,16 @@ header {
background-position: center;
margin-bottom: 97px;
}
@media (max-width: 576px) {
@media (max-width: 992px) {
header {
width: 320px;
height: 700px;
margin-bottom: 600px;
margin-bottom: 57px;
}
}
@media (max-width: 992px) {
@media (max-width: 576px) {
header {
margin-bottom: 57px;
width: 320px;
height: 550px;
margin-bottom: 50px;
}
}
.background-banner {
......@@ -113,6 +113,7 @@ header {
}
}
.header-img {
position: relative;
width: 19.6%;
margin-top: 1.8%;
}
......@@ -128,6 +129,40 @@ header {
width: 150px;
}
}
@media (max-width: 768px) {
.header-img {
margin-top: 17px;
height: 60px;
width: 100px;
}
}
@media (max-width: 576px) {
.header-img {
height: 92px;
width: 155px;
}
}
#header-img-navicon {
position: absolute;
display: none;
}
@media (max-width: 576px) {
#header-img-navicon {
display: inline-block;
font-size: 36px;
color: white;
left: 260px;
}
}
#cat {
position: relative;
width: 80px;
height: 80px;
background: #00ccff;
}
.page-header__burger--active {
display: inline-block;
}
.header-nav {
position: relative;
z-index: 3;
......@@ -164,6 +199,11 @@ header {
margin-right: 10px;
}
}
@media (max-width: 768px) {
.header-link {
margin-right: 7px;
}
}
.header-link a {
color: white;
text-decoration: none;
......@@ -177,6 +217,11 @@ header {
font-size: 12px;
}
}
@media (max-width: 768px) {
.header-link a {
font-size: 10px;
}
}
.header-link-language {
margin-right: 31px;
}
......@@ -203,6 +248,11 @@ header {
font-size: 12px;
}
}
@media (max-width: 768px) {
.header-link-language a {
font-size: 10px;
}
}
.header-line {
width: 30px;
height: 35px;
......@@ -245,6 +295,7 @@ h1 {
line-height: 62px;
letter-spacing: 0.6px;
margin-bottom: 2.5%;
text-align: left;
}
@media (max-width: 992px) {
h1 {
......@@ -253,6 +304,16 @@ h1 {
margin-bottom: 5px;
}
}
@media (max-width: 576px) {
h1 {
text-align: left;
font-style: unset;
font-size: 36px;
line-height: 36px;
letter-spacing: 0.36px;
font-weight: 700;
}
}
.header-h1-line {
position: relative;
z-index: 3;
......@@ -268,7 +329,17 @@ h1 {
margin-bottom: 7px;
}
}
@media (max-width: 576px) {
.header-h1-line {
width: 150px;
margin-bottom: 7px;
}
}
.header-text-center {
text-align: center;
}
.header-text {
text-align: left;
position: relative;
z-index: 3;
margin-bottom: 12px;
......@@ -285,6 +356,15 @@ h1 {
line-height: 18px;
}
}
@media (max-width: 576px) {
.header-text {
font-family: SFUIDisplay-Regular;
font-size: 14px;
font-weight: 400;
line-height: 21px;
letter-spacing: 0;
}
}
.header-btn {
position: relative;
z-index: 3;
......@@ -305,6 +385,18 @@ h1 {
margin-top: 5px;
}
}
@media (max-width: 576px) {
.header-btn {
margin-bottom: 24px;
width: 230px;
height: 48px;
font-size: 16px;
line-height: 30px;
font-weight: 400;
letter-spacing: 0.16px;
background: #c94d4e;
}
}
.header-btn-background {
font-family: SFUIDisplay-Regular;
position: relative;
......@@ -336,6 +428,16 @@ h1 {
margin-top: 5px;
}
}
@media (max-width: 576px) {
.header-btn-background {
width: 230px;
height: 48px;
font-size: 16px;
line-height: 30px;
font-weight: 400;
letter-spacing: 0.16px;
}
}
.header-text-wrapper {
display: flex;
justify-content: space-between;
......@@ -406,6 +508,13 @@ video {
margin-top: 20px;
}
}
@media (max-width: 576px) {
.h2-desktop-mail {
width: 200px;
font-weight: 700;
font-size: 24px;
}
}
.h2-mobile {
font-size: 24px;
font-weight: 400;
......@@ -512,6 +621,16 @@ video {
display: flex;
flex-direction: row;
}
@media (max-width: 992px) {
.main-flex {
height: 430px;
}
}
@media (max-width: 768px) {
.main-flex {
height: 330px;
}
}
@media (max-width: 576px) {
.main-flex {
flex-flow: wrap;
......@@ -549,15 +668,15 @@ video {
.main-card-text {
height: 141px;
}
@media (max-width: 576px) {
@media (max-width: 768px) {
.main-card-text {
height: auto;
height: 170px;
margin-bottom: 10px;
}
}
@media (max-width: 768px) {
@media (max-width: 576px) {
.main-card-text {
height: 170px;
height: auto;
margin-bottom: 10px;
}
}
......@@ -656,9 +775,9 @@ video {
}
@media (max-width: 992px) {
.advertising-img-position {
width: 390px;
height: 242px;
right: 390px;
width: 50%;
height: 90%;
right: 53%;
}
}
@media (max-width: 768px) {
......@@ -1092,7 +1211,7 @@ video {
}
@media (max-width: 768px) {
.protection-card {
height: 280px;
height: 230px;
}
}
@media (max-width: 576px) {
......@@ -1460,7 +1579,7 @@ video {
.technology-card p {
padding-right: 5px;
text-align: center;
width: 200px;
width: 150px;
}
}
@media (max-width: 992px) {
......@@ -2128,4 +2247,17 @@ input.form-last-child {
width: 5px;
}
}
#mous {
width: 50px;
height: 50px;
background: #00aa88;
}
#dog {
width: 100px;
height: 100px;
background: red;
}
.page-header__burger--active {
display: none;
}
/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
css/styles.less
......@@ -56,14 +56,14 @@ header {
background-size: 100% 100%;
background-position: center;
margin-bottom: 97px;
@media (max-width: 576px) {
width: 320px;
height: 700px;
margin-bottom: 600px;
}
@media (max-width: 992px) {
margin-bottom: 57px;
}
@media (max-width: 576px) {
width: 320px;
height: 550px;
margin-bottom: 50px;
}
}
.background-banner {
background-image: url("../img/banner-background.png");
......@@ -100,6 +100,7 @@ header {
}
}
.header-img {
position: relative;
width: 19.6%;
margin-top: 1.8%;
img {
......@@ -112,6 +113,34 @@ header {
height: 80px;
width: 150px;
}
@media (max-width: 768px) {
margin-top: 17px;
height: 60px;
width: 100px;
}
@media (max-width: 576px) {
height: 92px;
width: 155px;
}
}
#header-img-navicon {
position: absolute;
display: none;
@media (max-width: 576px){
display: inline-block;
font-size: 36px;
color: white;
left: 260px;
}
}
#cat {
position: relative;
width: 80px;
height: 80px;
background: #00ccff;
}
.page-header__burger--active {
display: inline-block;
}
.header-nav {
position: relative;
......@@ -140,6 +169,9 @@ header {
@media (max-width: 992px) {
margin-right: 10px;
}
@media (max-width: 768px) {
margin-right: 7px;
}
a {
color: white;
text-decoration: none;
......@@ -150,6 +182,9 @@ header {
@media (max-width: 992px) {
font-size: 12px;
}
@media (max-width: 768px) {
font-size: 10px;
}
}
}
.header-link-language {
......@@ -170,6 +205,9 @@ header {
@media (max-width: 992px) {
font-size: 12px;
}
@media (max-width: 768px) {
font-size: 10px;
}
}
}
.header-line {
......@@ -211,11 +249,20 @@ h1 {
line-height: 62px;
letter-spacing: 0.6px;
margin-bottom: 2.5%;
text-align: left;
@media (max-width: 992px) {
font-size: 36px;
line-height: 46px;
margin-bottom: 5px;
}
@media (max-width: 576px) {
text-align: left;
font-style: unset;
font-size: 36px;
line-height: 36px;
letter-spacing: 0.36px;
font-weight: 700;
}
}
.header-h1-line{
position: relative;
......@@ -229,8 +276,16 @@ h1 {
width: 300px;
margin-bottom: 7px;
}
@media (max-width: 576px) {
width: 150px;
margin-bottom: 7px;
}
}
.header-text-center {
text-align: center;
}
.header-text {
text-align: left;
position: relative;
z-index: 3;
margin-bottom: 12px;
......@@ -244,6 +299,13 @@ h1 {
font-size: 16px;
line-height: 18px;
}
@media (max-width: 576px) {
font-family: SFUIDisplay-Regular;
font-size: 14px;
font-weight: 400;
line-height: 21px;
letter-spacing: 0;
}
}
.header-btn {
position: relative;
......@@ -260,6 +322,16 @@ h1 {
background: #c94d4e;
margin-top: 5px;
}
@media (max-width: 576px) {
margin-bottom: 24px;
width: 230px;
height: 48px;
font-size: 16px;
line-height: 30px;
font-weight: 400;
letter-spacing: 0.16px;
background: #c94d4e;
}
}
.header-btn-background {
font-family: SFUIDisplay-Regular;
......@@ -287,6 +359,14 @@ h1 {
font-size: 12px;
margin-top: 5px;
}
@media (max-width: 576px) {
width: 230px;
height: 48px;
font-size: 16px;
line-height: 30px;
font-weight: 400;
letter-spacing: 0.16px;
}
}
.header-text-wrapper {
display: flex;
......@@ -349,6 +429,13 @@ video {
margin-top: 20px;
}
}
.h2-desktop-mail {
@media (max-width: 576px) {
width: 200px;
font-weight: 700;
font-size: 24px;
}
}
.h2-mobile {
font-size: 24px;
font-weight: 400;
......@@ -440,6 +527,12 @@ video {
.main-flex {
display: flex;
flex-direction: row;
@media (max-width: 992px) {
height: 430px;
}
@media (max-width: 768px) {
height: 330px;
}
@media (max-width: 576px) {
flex-flow: wrap;
}
......@@ -452,6 +545,7 @@ video {
margin-top: 10px;
padding-right: 10%;
height: auto;
@media (max-width: 576px) {
flex-flow: nowrap;
width: 100%;
......@@ -473,14 +567,15 @@ video {
}
.main-card-text {
height: 141px;
@media (max-width: 576px) {
height: auto;
margin-bottom: 10px;
}
@media (max-width: 768px) {
height: 170px;
margin-bottom: 10px;
}
@media (max-width: 576px) {
height: auto;
margin-bottom: 10px;
}
}
.main-btn-margin {
@media (max-width: 992px) {
......@@ -556,9 +651,9 @@ video {
right: 500px;
}
@media (max-width: 992px) {
width: 390px;
height: 242px;
right: 390px;
width: 50%;
height: 90%;
right: 53%;
}
@media (max-width: 768px) {
width: 290px;
......@@ -884,7 +979,7 @@ video {
height: 250px;
}
@media (max-width: 768px) {
height: 280px;
height: 230px;
}
@media (max-width: 576px) {
flex-flow: nowrap;
......@@ -1175,7 +1270,7 @@ video {
@media (max-width: 576px) {
padding-right: 5px;
text-align: center;
width: 200px;
width: 150px;
}
}
img {
......@@ -1742,4 +1837,19 @@ footer {
}
}
#mous {
width: 50px;
height: 50px;
background: #00aa88;
}
#dog {
width: 100px;
height: 100px;
background: red;
}
.page-header__burger--active {
display: none;
}
index.html
......@@ -17,7 +17,13 @@
<div class="main-container">
<div class="header-container">
<div class="header-wrapp">
<div id="cat" class="page-header__burger--active">
hhh
</div>
<div class="header-img">
<div id="header-img-navicon">
&#9776;
</div>
<img src="img/header-logo.png">
</div>
<div class="header-nav">
......@@ -57,13 +63,13 @@
</div>
</div>
<div class="header-text-wrapper">
<div>
<div class="header-text-center">
<h1>От беспорядка<br>к системности<br>в бизнесе</h1>
<div class="header-h1-line">
</div>
<p class="header-text">
MySmart office (MSO) – единая платформа с открытым API,<br>гибкими инструментами адаптации под любой бизнес<br>
и неограниченными возможностями масштабирования.<br>
MySmart office (MSO) – единая платформа с открытым API,гибкими инструментами адаптации под любой бизнес
и неограниченными возможностями масштабирования.
С помощью MSO вы сможете автоматизировать любой бизнес-процесс.
</p>
<button type="button" class="header-btn">Зарегистрироваться</button>
......@@ -88,7 +94,7 @@
</div>
</header>
<section class="main-container">
<h2 class="h2-desktop h2-desktop-tittle">Что такое MySmart Office</h2>
<h2 class="h2-desktop h2-desktop-mail">Что такое MySmart Office</h2>
<div class="main-line">
</div>
<p class="text-h2-desktop text-margin">
......@@ -660,6 +666,7 @@
</div>
</div>
</section>
<!--
<section class="main-container">
<h2 class="h2-desktop">Цены</h2>
<div class="main-line">
......@@ -1076,7 +1083,7 @@
<button type="button" class="price-btn">Попробовать бесплатно</button>
</div>
</div>
</section>
</section>-->
<section class="connection">
<div class="main-container">
<div class="form-wrapper">
......@@ -1132,6 +1139,10 @@
</div>
</div>
</div>
<div id="mous">
</div>
<div id="dog">
</div>
</footer>
<!--
<section id="id_about_section">
......@@ -1179,14 +1190,21 @@
<script>
$(document).ready(function () {
$.pixlayout({
src: "layouts/desktop-cropped.png",
src: "layouts/mobile.jpg",
opacity: 0.8,
top: 0,
center: true,
clip: true,
show: false
}, "body");
})
});
$('#header-img-navicon').click(function(event) {
$('#cat').toggleClass('page-header__burger--active');
});
</script>
</body>
</html>
\ No newline at end of file
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