hot-it-works almost finished (error with images)

This commit is contained in:
Tancre
2020-10-12 20:47:17 +02:00
parent a4e97c6bcf
commit af96ccbf7e
13 changed files with 296 additions and 100 deletions

View File

@ -582,13 +582,21 @@ img {
margin-right: auto; }
.wrapper--medium {
max-width: 976px; }
.wrapper--centered {
text-align: center; }
@media (min-width: 1200px) {
.wrapper--centered {
text-align: left; } }
.wrapper--small {
max-width: 750px; }
.wrapper--t-margins {
margin-top: 100px; }
.page-section {
position: relative; }
.page-section--t-margin-external {
margin-top: -70px; }
@media (min-width: 800px) {
.page-section--b-margin-external {
margin-bottom: -140px; } }
.page-section--tb-padding {
padding: 1.2rem 0; }
@media (min-width: 800px) {
@ -621,38 +629,16 @@ img {
.page-section--lightGreen {
background-color: #A5C90F;
color: #fff; }
.page-section--arrow-down {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 85px solid #FF3D04;
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%); }
@media (min-width: 530px) {
.page-section--arrow-down {
position: relative;
top: -10px;
margin: auto;
left: 0;
transform: translateX(0%); } }
@media (min-width: 800px) {
.page-section--arrow-down {
position: relative;
top: 20px;
margin: auto;
left: 0;
transform: translateX(0%); } }
.headline {
margin: auto; }
.headline strong {
font-weight: 800; }
.headline--lt-margin {
margin-left: 55px;
margin-top: -5px; }
@media (min-width: 1200px) {
.headline--lt-margin {
margin-left: 55px; } }
.headline--s-width {
max-width: 500px; }
@media (min-width: 800px) {
@ -777,15 +763,30 @@ img {
margin: 50px 0px; }
.how-it-works strong {
font-weight: 800; }
.how-it-works--atSmall-centered {
text-align: center; }
@media (min-width: 1200px) {
.how-it-works--atSmall-centered {
text-align: left; } }
.how-it-works--atSmall-t-margin {
margin-top: 70px !important; }
@media (min-width: 530px) {
.how-it-works--atSmall-t-margin {
margin-top: 20px; } }
@media (min-width: 1200px) {
.how-it-works--atSmall-t-margin {
margin-top: 100px; } }
.how-it-works--centered {
position: absolute;
top: 50%;
left: 0px;
top: 0px;
width: 100%;
transform: translateY(-50%);
text-align: center; }
.how-it-works--t-margin {
margin-top: -30px; }
@media (min-width: 530px) {
.how-it-works--t-margin {
margin-top: 10px; } }
@media (min-width: 800px) {
.how-it-works--t-margin {
margin-top: -45px; } }
.how-it-works__last-section {
padding: 100px 0px 50px 0px;
background-color: rgba(255, 255, 255, 0.9); }
@ -806,9 +807,20 @@ img {
.how-it-works__title {
margin-top: 10px;
font-size: 2.1rem; } }
.how-it-works__img {
display: none; }
@media (min-width: 1200px) {
.how-it-works__img {
display: inline-block; } }
.how-it-works__icon--1 {
width: 225px;
margin-left: 60px; }
width: 150px; }
@media (min-width: 800px) {
.how-it-works__icon--1 {
width: 200px; } }
@media (min-width: 1200px) {
.how-it-works__icon--1 {
width: 225px;
margin-left: 80px; } }
.how-it-works__icon--2 {
width: 130px;
margin-right: .8rem;
@ -822,4 +834,70 @@ img {
margin-bottom: -30px;
margin-right: 20px; }
.arrow {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent; }
.arrow--about {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%); }
@media (min-width: 800px) {
.arrow--about {
position: relative;
bottom: -70px;
left: 50%;
transform: translateX(-50%); } }
@media (min-width: 1200px) {
.arrow--about {
position: relative;
bottom: -70px;
left: 50%;
transform: translateX(-50%); } }
.arrow--how-it-works-1 {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%); }
@media (min-width: 800px) {
.arrow--how-it-works-1 {
position: relative;
bottom: -50px;
left: 50%;
transform: translateX(-50%); } }
@media (min-width: 1200px) {
.arrow--how-it-works-1 {
position: relative;
bottom: -50px;
left: 50%;
transform: translateX(-50%); } }
.arrow--how-it-works-2 {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%); }
@media (min-width: 800px) {
.arrow--how-it-works-2 {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%); } }
@media (min-width: 1200px) {
.arrow--how-it-works-2 {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%); } }
.arrow--red {
border-top: 85px solid #FF3D04; }
.arrow--darkGreen {
border-top: 85px solid #6F9C3D; }
.arrow--lightGreen {
border-top: 85px solid #A5C90F; }
/*# sourceMappingURL=style.css.map */

File diff suppressed because one or more lines are too long