- homepage illustrations part 1

This commit is contained in:
Peter Papp
2021-04-05 08:47:49 +02:00
parent 790da00420
commit 9ea78d103e
14 changed files with 1702 additions and 386 deletions

View File

@@ -1,22 +1,28 @@
<template>
<div id="o-nas" class="oasis-about-us container">
<div class="title-wrapper container">
<h3 class="main-title-sm">
Kto Jsme?
</h3>
<h4 class="sub-title-sm">
Jsme česká společnost, která pro fyzické a právnické osoby (živnostníky a firmy) poskytuje cloudové uložiště dle evropské směrnice (GDPR) a následného zákona o zpracování osobních údajů (zákon 110/2019 sb.).
</h4>
<div id="o-nas" class="oasis-about-us">
<div class="container">
<div class="content-wrapper">
<div class="title-wrapper">
<h3 class="main-title-sm">
Kto Jsme?
</h3>
<h4 class="sub-title-sm">
Jsme česká společnost, která pro fyzické a právnické osoby (živnostníky a firmy) poskytuje cloudové uložiště dle evropské směrnice (GDPR) a následného zákona o zpracování osobních údajů (zákon 110/2019 sb.).
</h4>
</div>
<ul class="info-list">
<li v-for="(item, i) in infoList" :key="i" class="info-list-item">
<check-icon size="30" class="icon" />
<p class="description">{{ item }}</p>
</li>
</ul>
<router-link :to="{name: 'SignUp'}" class="base-button theme-color">
Vyzkouset OasisDrive
</router-link>
</div>
</div>
<ul class="info-list">
<li v-for="(item, i) in infoList" :key="i" class="info-list-item">
<check-icon size="30" class="icon" />
<p class="description">{{ item }}</p>
</li>
</ul>
<router-link :to="{name: 'SignUp'}" class="base-button theme-color">
Vyzkouset OasisDrive
</router-link>
<img src="/oasis/about-us-background.svg" alt="oasis-about-us" class="hero">
</div>
</template>
@@ -46,6 +52,55 @@
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
.content-wrapper {
margin-bottom: -860px;
padding-left: 22%;
}
.hero {
width: 100%;
margin-bottom: -10px;
}
.oasis-about-us {
padding-top: 150px;
.sub-title-sm {
max-width: 890px;
}
}
.info-list {
margin: 65px 0;
.info-list-item {
display: flex;
align-items: start;
margin-bottom: 40px;
&:last-child {
margin-bottom: 0;
}
.icon {
margin-top: 5px;
margin-right: 15px;
polyline {
color: $pink;
}
}
.description {
max-width: 700px;
@include font-size(24);
color: $text-primary;
font-weight: 800;
line-height: 1.5;
}
}
}
@media only screen and (max-width: 960px) {
.info-list {
margin: 65px 0;