298 lines
6.6 KiB
Plaintext
298 lines
6.6 KiB
Plaintext
@media only screen and (min-width: 640px) {
|
|
.how .first > div:first-child {
|
|
position: relative;
|
|
}
|
|
|
|
.how .first > div:first-child:after {
|
|
content: "we";
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
padding-bottom: 5%;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/1.svg");
|
|
right: -21%;
|
|
top: 33%;
|
|
width: 20%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
}
|
|
|
|
.how .second > div:first-child {
|
|
position: relative;
|
|
padding: 0 10% 0 20%;
|
|
}
|
|
|
|
.how .second > div:first-child:after {
|
|
content: "and";
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
padding-bottom: 5%;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/2.svg");
|
|
right: -17%;
|
|
top: 33%;
|
|
width: 30%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
}
|
|
|
|
.how .third {
|
|
position: relative;
|
|
}
|
|
|
|
.how .third > div:first-child {
|
|
padding: 0 14% 0 13%;
|
|
}
|
|
|
|
.how .third:after {
|
|
content: "on which";
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
padding-right: 30%;
|
|
padding-top: 5%;
|
|
padding-bottom: 5%;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
|
bottom: -6%;
|
|
left: 13%;
|
|
transform: translateY(100%);
|
|
width: 140px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.how .fourth {
|
|
padding: 10% 3% 0 3%;
|
|
}
|
|
|
|
.how .fourth > div:first-child {
|
|
position: relative;
|
|
padding: 0 16% 0 16%;
|
|
}
|
|
|
|
.how .fourth> div:first-child:after {
|
|
content: "and";
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
padding-bottom: 5%;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/4.svg");
|
|
left: -18%;
|
|
top: 36%;
|
|
width: 30%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
}
|
|
|
|
.how .fifth {
|
|
padding: 11% 2% 0 2%;
|
|
}
|
|
|
|
.how .fifth > div:first-child {
|
|
position: relative;
|
|
}
|
|
|
|
.how .fifth > div:first-child:after {
|
|
content: "We";
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
padding-bottom: 5%;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/5.svg");
|
|
left: -35%;
|
|
top: 36%;
|
|
width: 30%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
}
|
|
|
|
.how .sixth {
|
|
padding: 10% 5% 0 0;
|
|
}
|
|
|
|
.how .sixth > div:first-child {
|
|
padding: 0 15% 0 15%;
|
|
}
|
|
|
|
.how .final {
|
|
padding: 10% 20% 0 20%;
|
|
}
|
|
|
|
.how .final > div:first-child {
|
|
position: relative;
|
|
}
|
|
|
|
.how .final > div:first-child:before {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
|
|
left: -26%;
|
|
top: -20%;
|
|
height: 70%;
|
|
width: 30%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
}
|
|
|
|
.how .final > div:first-child:after {
|
|
content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
|
|
font-size: 20px;
|
|
position: absolute;
|
|
top: 30%;
|
|
width: 250px;
|
|
padding: 8% 0 5% 0;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 639px) {
|
|
.how .first {
|
|
position: relative;
|
|
padding-bottom: 30%;
|
|
}
|
|
|
|
.how .first:after {
|
|
content: "we";
|
|
text-align: center;
|
|
padding: 10% 34% 10% 0;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
|
left: 26%;
|
|
top: 79%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.how .second {
|
|
position: relative;
|
|
padding: 0 10% 30% 10%;
|
|
}
|
|
|
|
.how .second:after {
|
|
content: "and";
|
|
text-align: center;
|
|
padding: 10% 34% 10% 0;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
|
left: 25%;
|
|
top: 80%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.how .third {
|
|
position: relative;
|
|
padding: 0 5% 30% 5%;
|
|
}
|
|
|
|
.how .third:after {
|
|
content: "on which";
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 10% 41% 10% 0;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
|
left: 15%;
|
|
top: 83%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.how .fourth {
|
|
position: relative;
|
|
padding: 0 0 30% 0;
|
|
}
|
|
|
|
.how .fourth > div:first-child {
|
|
padding: 0 10% 0 10%;
|
|
}
|
|
|
|
.how .fourth:after {
|
|
content: "and";
|
|
text-align: center;
|
|
padding: 10% 34% 10% 0;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
|
left: 26%;
|
|
top: 79%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.how .fifth {
|
|
position: relative;
|
|
padding: 0 2% 30% 2%;
|
|
}
|
|
|
|
.how .fifth:after {
|
|
content: "We";
|
|
text-align: center;
|
|
padding: 10% 34% 10% 0;
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
|
left: 27%;
|
|
top: 76%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.how .sixth {
|
|
padding: 0 5% 30% 0;
|
|
}
|
|
|
|
.how .sixth > div:first-child {
|
|
padding: 0 15% 0 15%;
|
|
}
|
|
|
|
.how .final {
|
|
padding: 20% 0 20% 0;
|
|
}
|
|
|
|
.how .final > div:first-child {
|
|
position: relative;
|
|
}
|
|
|
|
.how .final > div:first-child:before {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
|
|
left: 34%;
|
|
top: -70%;
|
|
height: 70%;
|
|
width: 30%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.how .final > div:first-child:after {
|
|
content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
|
|
text-align: center;
|
|
position: absolute;
|
|
left: -62%;
|
|
top: 85%;
|
|
width: 300px;
|
|
padding: 12% 0 0 54%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
}
|