Skip to content

L
landing_pages
Commit 1f76160d by Iren
Options

add section technology (for desktop)

parent 674aed08
Showing with 163 additions and 0 deletions
css/styles.css
......@@ -651,4 +651,52 @@ header {
}
}
/*technology*/
.technology-container-wrapper {
display: flex;
width: 100%;
}
@media (max-width: 576px) {
.technology-container-wrapper {
flex-wrap: wrap;
justify-content: flex-start;
}
}
.technology-containe {
width: 50%;
margin-top: 50px;
display: flex;
}
@media (max-width: 576px) {
.technology-containe {
justify-content: center;
width: 100%;
}
}
.technology-card {
width: 50%;
text-align: left;
padding-right: 80px;
height: 158px;
border: yellow 1px solid;
}
.technology-card p {
font-size: 16px;
font-weight: 300;
line-height: 24px;
color: #303a81;
letter-spacing: 0.16px;
}
@media (max-width: 576px) {
.technology-card img {
width: 142px;
}
}
@media (max-width: 576px) {
.technology-card {
padding-right: 0;
}
}
.technology-img {
height: 110px;
}
/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
css/styles.less
......@@ -524,5 +524,47 @@ header {
}
}
/*technology*/
.technology-container-wrapper {
display: flex;
width: 100%;
@media (max-width: 576px) {
flex-wrap: wrap;
justify-content: flex-start;
}
}
.technology-containe {
width: 50%;
margin-top: 50px;
display: flex;
@media (max-width: 576px) {
justify-content: center;
width: 100%;
}
}
.technology-card {
width: 50%;
text-align: left;
padding-right: 80px;
height: 158px;
border: yellow 1px solid;
p {
font-size: 16px;
font-weight: 300;
line-height: 24px;
color: #303a81;
letter-spacing: 0.16px;
}
img {
@media (max-width: 576px) {
width: 142px;
}
}
@media (max-width: 576px) {
padding-right: 0;
}
}
.technology-img {
height: 110px;
}
index.html
......@@ -511,6 +511,78 @@
только самые актуальные на сегодняшний день технологии, позволяющие
клиенту не беспокоиться о будущем MSO.
</p>
<div class="technology-container-wrapper">
<div class="technology-containe">
<div class="technology-card">
<div class="technology-img">
<img src="img/technology1.png">
</div>
<p>
Автоматизация развертывания
и управления приложениями
</p>
</div>
<div class="technology-card">
<div class="technology-img">
<img src="img/technology2.png">
</div>
<p>
Удобный менеджер пакетов
</p>
</div>
</div>
<div class="technology-containe">
<div class="technology-card">
<div class="technology-img">
<img src="img/technology3.png">
</div>
<p>
Для выполнения JavaScript
</p>
</div>
<div class="technology-card">
<div class="technology-img">
<img src="img/technology4.png">
</div>
<p>
Для разработки веб-приложений
</p>
</div>
</div>
</div>
<div class="technology-container-wrapper">
<div class="technology-containe">
<div class="technology-card">
<div class="technology-img">
<img src="img/technology5.png">
</div>
<p>
Для управления кластерами
виртуальных машин
</p>
</div>
<div class="technology-card">
<div class="technology-img">
<img src="img/technology6.png">
</div>
<p>
Для фронтенд разработок
</p>
</div>
</div>
<div class="technology-containe">
<div class="technology-card">
<div class="technology-img">
<img src="img/technology7.png">
</div>
<p>
В качестве менеджера
зависимостей для PHP
</p>
</div>
</div>
</div>
</div>
</section>
<!--<section id="id_about_section">
......
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