openaire-library/monitor/how/how.component.css

302 lines
6.6 KiB
CSS

@media only screen and (min-width: 640px) {
.how .first > div:first-child {
position: relative;
}
.how .first > div:first-child:after {
content: "we";
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("/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 22% 0 22%;
}
.how .second > div:first-child:after {
content: "and";
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("/assets/common-assets/monitor-assets/green-arrows/2.svg");
right: -10%;
top: 31%;
width: 30%;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
.how .third {
position: relative;
}
.how .third > div:first-child {
padding: 0 12% 0 12%;
}
.how .third:after {
content: "on which";
padding-right: 30%;
padding-top: 5%;
padding-bottom: 5%;
position: absolute;
background-image: url("/assets/common-assets/monitor-assets/green-arrows/3.svg");
bottom: 6%;
left: 6%;
transform: translateY(100%);
width: 55%;
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 15% 0 15%;
}
.how .fourth> div:first-child:after {
content: "and";
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("/assets/common-assets/monitor-assets/green-arrows/4.svg");
left: -18%;
top: 35%;
width: 30%;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
.how .fifth {
padding: 10% 2% 0 2%;
}
.how .fifth > div:first-child {
position: relative;
}
.how .fifth > div:first-child:after {
content: "We";
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("/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("/assets/common-assets/monitor-assets/green-arrows/6.svg");
left: -20%;
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";
position: absolute;
background-image: url("/assets/common-assets/monitor-assets/how/circle.png");
right: -220px;
top: -20%;
width: 300px;
padding: 8% 0 5% 220px;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
}
@media only screen and (min-width: 960px) {
.how .third:after {
bottom: -6%;
}
}
@media only screen and (min-width: 1200px) {
.how .third:after {
bottom: -10%;
left: 25%;
width: 25%;
}
}
@media only screen and (max-width: 639px) {
.how .first {
position: relative;
padding-bottom: 30%;
}
.how .first:after {
content: "we";
text-align: center;
padding: 25px 105px 25px 0;
position: absolute;
background-image: url("/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 26%;
top: 72%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.how .second {
position: relative;
padding: 0 15% 30% 15%;
}
.how .second:after {
content: "and";
text-align: center;
padding: 25px 105px 25px 0;
position: absolute;
background-image: url("/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 25%;
top: 70%;
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";
text-align: center;
padding: 25px 105px 25px 0;
position: absolute;
background-image: url("/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 17%;
top: 75%;
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: 25px 105px 25px 0;
position: absolute;
background-image: url("/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: 25px 105px 25px 0;
position: absolute;
background-image: url("/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("/assets/common-assets/monitor-assets/green-arrows/6.svg");
left: 32%;
top: -80%;
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";
position: absolute;
background-image: url("/assets/common-assets/monitor-assets/how/circle.png");
left: -62%;
top: 85%;
width: 300px;
padding: 12% 0 0 70%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}