DIWHY
/
spatialsystems
mirror of https://github.com/gtitov/spatialsystems.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

лэндос по слайдам

Browse Source
main
gman 8 months ago
parent 0e72e8a04e
commit e0da57f21a
2 changed files with 104 additions and 185 deletions
Show Stats Download Patch File Download Diff File

145
index.html
Unescape View File

@ -5,6 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пространственные Системы</title>
<link rel="stylesheet" href="fullpage/fullpage.min.css">
<script src="fullpage/fullpage.js"></script>
<link rel="stylesheet" href="style.css">
</head>
@ -25,92 +27,87 @@
</div>
</div>
</div>
<div id="first-container">
<div id="first-wrap">
<div id="first-title">
<div class="fullpage">
<div class="section">
<div class="hero">
Разработка геоинформационных ML/AutoML систем
</div>
<div class="arrow-down"></div>
</div>
</div>
<div id="what-container">
<div id="what-wrap">
<div>
<div id="what-title">Наши особенности</div>
<div id="what-content">
<div class="block-container">
<div class="block-title">True data driven</div>
<div class="block-text">В основе наших систем лежит предиктивная аналитика на базе
машинного обучения на реальных ретроспективных данных, что делает содержание системы
отражением реальности</div>
</div>
<div class="block-container">
<div class="block-title">AutoML</div>
<div class="block-text">Все data science процессы автоматизированы, предиктивные модели
обновляются по мере накопления новых данных, что позволяет поддерживать системы в
актуальном состоянии</div>
</div>
<div class="block-container">
<div class="block-title">Реактивность</div>
<div class="block-text">Наши системы оснащены инструментами симуляций, позволяющими пользователю
перед принятием реального решения в режиме онлайн смоделировать целевую ситуацию и
оценить эффект её реализации</div>
</div>
<div class="block-container">
<div class="block-title">Прозрачность</div>
<div class="block-text">Мы используем модели машинного обучения, позволяющие интерпретировать
каждый прогноз и понять какие именно факторы и в какой степени повлияли на итоговое значение
</div>
<div class="section">
<div class="section-title">Наши особенности</div>
<div class="features">
<div class="block-container">
<div class="block-title">True data driven</div>
<div class="block-text">В основе наших систем лежит предиктивная аналитика на базе
машинного обучения на реальных ретроспективных данных, что делает содержание системы
отражением реальности</div>
</div>
<div class="block-container">
<div class="block-title">AutoML</div>
<div class="block-text">Все data science процессы автоматизированы, предиктивные модели
обновляются по мере накопления новых данных, что позволяет поддерживать системы в
актуальном состоянии</div>
</div>
<div class="block-container">
<div class="block-title">Реактивность</div>
<div class="block-text">Наши системы оснащены инструментами симуляций, позволяющими
пользователю
перед принятием реального решения в режиме онлайн смоделировать целевую ситуацию и
оценить эффект её реализации</div>
</div>
<div class="block-container">
<div class="block-title">Прозрачность</div>
<div class="block-text">Мы используем модели машинного обучения, позволяющие
интерпретировать
каждый прогноз и понять какие именно факторы и в какой степени повлияли на итоговое
значение
</div>
</div>
</div>
<div class="arrow-down"></div>
</div>
</div>
<div id="trusted-container">
<div id="trusted-wrap">
<div>
<div id="trusted-title">
Нам доверяют
<div class="section">
<div class="section-title">
Нам доверяют
</div>
<div class="partners">
<div class="trusted-block">
<img src="partners_logo/autoru.png" />
</div>
<div id="trusted-content">
<div class="trusted-block">
<img src="partners_logo/autoru.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/mapsme.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/pik.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/youdrive.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/autoru.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/mapsme.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/pik.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/youdrive.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/mapsme.png" />
</div>
</div>
<!-- <div id="footer-container">
<div id="footer-title">
Свяжитесь с нами
<div class="trusted-block">
<img src="partners_logo/pik.png" />
</div>
<a href="contacts.html" id="footer-link">
Контакты
</a>
</div> -->
<div class="trusted-block">
<img src="partners_logo/youdrive.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/autoru.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/mapsme.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/pik.png" />
</div>
<div class="trusted-block">
<img src="partners_logo/youdrive.png" />
</div>
</div>
</div>
</div>
<script>
new fullpage('.fullpage', {});
document.querySelectorAll('.arrow-down').forEach(
el => el.addEventListener('click', () => {
fullpage_api.moveSectionDown();
})
)
</script>
</body>
</html>

144
style.css
Unescape View File

@ -153,41 +153,24 @@ html {
}
}
.section-title {
line-height: 40px;
font-size: xx-large;
text-transform: uppercase;
/* Hero */
#first-container {
display: flex;
position: relative;
flex-direction: column;
padding: 80px 30px 0;
width: 100%;
box-sizing: border-box;
color: var(--primary-text-color);
@media (max-width: 850px) {
padding-top: 170px;
}
mix-blend-mode: normal;
margin: 30px 0;
}
#first-wrap {
display: flex;
flex-direction: column;
/* Hero */
.hero {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: calc(100vw - 60px);
min-height: calc(100vh - var(--header-height));
box-sizing: border-box;
padding: 60px 0 50px 0;
@media (max-width: 850px) {
min-height: calc(100vh - 170px);
}
}
#first-title {
line-height: calc(100vw / 23);
font-size: calc(100vw / 30);
font-size: 1.5rem;
text-transform: uppercase;
background-size: 100%;
@ -196,60 +179,35 @@ html {
-webkit-text-fill-color: transparent;
background-image: linear-gradient(55deg, rgb(255, 255, 255) 20%, rgba(245, 192, 192, 0.8) 100%);
margin-bottom: 30px;
@media (max-width: 850px) {
max-width: 100%;
line-height: 33px;
font-size: 30px;
font-size: 1rem;
}
}
/* Наши особенности */
#what-container {
border-top: 1px solid #CCCCCC;
display: flex;
position: relative;
width: 100%;
background: var(--primary-color);
justify-content: center;
align-items: center;
box-sizing: border-box;
.arrow-down {
position: absolute;
bottom: 20px;
right: 50%;
transform: translateX(50%);
display: block;
height: 30px;
width: 30px;
background: url("./svg/Arrow_to_bottom.svg") no-repeat center;
background-size: contain;
cursor: pointer;
}
#what-wrap {
display: flex;
flex-direction: column;
position: relative;
justify-content: space-between;
width: calc(100vw - 60px);
min-height: calc(100vh - var(--header-height));
/* min-height: inherit; */
box-sizing: border-box;
padding: 50px 0;
@media (max-width: 850px) {
min-height: inherit;
}
.arrow-down:hover {
opacity: 0.5;
}
#what-title {
line-height: 40px;
font-size: xx-large;
text-transform: uppercase;
color: var(--primary-text-color);
mix-blend-mode: normal;
margin-bottom: 30px;
}
#what-content {
.features {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 60px;
}
.block-container {
@ -278,7 +236,7 @@ html {
.block-text {
max-width: 450px;
line-height: 40px;
font-size: 28px;
font-size: 24px;
padding-right: 50px;
color: var(--accent-text-color);
@ -291,48 +249,11 @@ html {
/* Нам доверяют */
#trusted-container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
#trusted-wrap {
display: flex;
flex-direction: column;
position: relative;
justify-content: space-between;
width: calc(100vw - 60px);
min-height: calc(100vh - var(--header-height));
border-top: 1px solid #CCCCCC;
box-sizing: border-box;
padding: 50px 0;
@media (max-width: 850px) {
min-height: calc(100vh - 170px);
}
}
#trusted-title {
line-height: 40px;
font-size: 30px;
text-transform: uppercase;
color: #cccccc;
mix-blend-mode: normal;
margin-bottom: 30px;
}
#trusted-content {
.partners {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 60px;
margin-bottom: 60px;
}
.trusted-block {
@ -343,15 +264,16 @@ html {
padding: 30px 0 90px;
align-items: center;
img {
height: 45px;
}
@media (max-width: 850px) {
width: 50%;
}
}
.trusted-block img {
height: 45px;
object-fit: contain;
}
#footer-container {
display: flex;
flex-direction: column;

Write Preview
Loading…
Cancel
Save