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