biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2025-06-26 17:00:46 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

85
app/assets/scss/modules/_arrow.scss Normal file
View File

@ -0,0 +1,85 @@
.arrow{
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
&--about{
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform:translateX(-50%);
@include atMedium{
position: relative;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
}
}
&--how-it-works-1{
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform:translateX(-50%);
@include atMedium{
position: relative;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
}
&--how-it-works-2{
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform:translateX(-50%);
@include atMedium{
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
}
&--red{
border-top: 85px solid $myRed;
}
&--darkGreen{
border-top: 85px solid $myDarkGreen;
}
&--lightGreen{
border-top: 85px solid $myLightGreen;
}
}

5
app/assets/scss/modules/_headline.scss
View File

@ -6,8 +6,11 @@
}
&--lt-margin{
margin-left: 55px;
margin-top: -5px;
@include atLarge{
margin-left: 55px;
}
}
&--s-width {

53
app/assets/scss/modules/_how-it-works.scss
View File

@ -5,17 +5,42 @@
font-weight: 800;
}
&--atSmall-centered{
text-align: center;
@include atLarge{
text-align: left;
}
}
&--atSmall-t-margin{
margin-top: 70px !important;
@include atSmall{
margin-top: 20px;
}
@include atLarge{
margin-top: 100px;
}
}
&--centered{
position: absolute;
top: 50%;
left: 0px;
top: 0px;
width: 100%;
transform: translateY(-50%);
text-align: center;
}
&--t-margin{
margin-top: -30px;
@include atSmall{
margin-top: 10px;
}
@include atMedium{
margin-top: -45px;
}
}
&__last-section{
@ -47,9 +72,25 @@
}
&__img{
display: none;
@include atLarge{
display: inline-block;
}
}
&__icon--1{
width: 225px;
margin-left: 60px;
width: 150px;
@include atMedium{
width: 200px;
}
@include atLarge{
width: 225px;
margin-left: 80px;
}
}
&__icon--2{

42
app/assets/scss/modules/_page-section.scss
View File

@ -1,6 +1,17 @@
.page-section{
position: relative;
&--t-margin-external{
margin-top: -70px;
}
&--b-margin-external{
@include atMedium(){
margin-bottom: -140px;
}
}
&--tb-padding{
padding: 1.2rem 0;
@ -52,37 +63,6 @@
color: #fff;
}
&--arrow-down{
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 85px solid $myRed;
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
@include atSmall{
position: relative;
top: -10px;
margin: auto;
left: 0;
transform: translateX(0%);
}
@include atMedium{
position: relative;
top: 20px;
margin: auto;
left: 0;
transform: translateX(0%);
}
}
// &--testimonials{
// background: #e0e6ef;

11
app/assets/scss/modules/_wrapper.scss
View File

@ -10,11 +10,16 @@
max-width: 976px;
}
&--centered{
text-align: center;
@include atLarge{
text-align: left;
}
}
&--small{
max-width: 750px;
}
&--t-margins{
margin-top: 100px;
}
}

1
app/assets/scss/style.scss
View File

@ -14,5 +14,6 @@
@import './modules/_generic-content-container';
@import './modules/_video-container';
@import './modules/_how-it-works.scss';
@import './modules/_arrow.scss';