mirror of
https://github.com/biobulkbende/biobulkbende.org.git
synced 2025-10-19 02:06:30 +00:00
how-it-works section finished
This commit is contained in:
Tancre
@ -336,6 +336,7 @@ template {
|
||||
box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
font-family: 'roboto', sans-serif;
|
||||
color: #333; }
|
||||
|
||||
@ -361,13 +362,16 @@ img {
|
||||
padding: 32px 0px 32px 0px;
|
||||
float: right; } }
|
||||
.site-header__language {
|
||||
margin: 13px auto 5px auto;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -5px;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
width: 25px;
|
||||
height: 25px; }
|
||||
@media (min-width: 800px) {
|
||||
.site-header__language {
|
||||
position: unset;
|
||||
margin: 40px 20px 0px 0px;
|
||||
float: right; } }
|
||||
.site-header__menu-icon {
|
||||
@ -423,20 +427,23 @@ img {
|
||||
position: relative;
|
||||
z-index: -10;
|
||||
padding-top: 90px;
|
||||
text-align: center; }
|
||||
text-align: center;
|
||||
display: none; }
|
||||
.site-header__menu-content--is-visible {
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
z-index: 1; }
|
||||
@media (min-width: 800px) {
|
||||
.site-header__menu-content {
|
||||
display: inline;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
padding-top: 0;
|
||||
transform: scale(1); } }
|
||||
.site-header__logo {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
top: -1px;
|
||||
padding: 5px 15px;
|
||||
left: 50%;
|
||||
transform-origin: 50% 0%;
|
||||
@ -460,7 +467,7 @@ img {
|
||||
padding-top: 10px; }
|
||||
@media (min-width: 800px) {
|
||||
.primary-nav {
|
||||
padding: 31px 0px; } }
|
||||
padding: 22px 0px; } }
|
||||
@media (min-width: 800px) {
|
||||
.primary-nav--pull-right {
|
||||
float: right; } }
|
||||
@ -474,7 +481,8 @@ img {
|
||||
.primary-nav li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding-right: 7px; }
|
||||
padding-right: 7px;
|
||||
padding-top: 10px; }
|
||||
@media (min-width: 800px) {
|
||||
.primary-nav li {
|
||||
float: left;
|
||||
@ -509,6 +517,8 @@ img {
|
||||
padding: .75rem 1.2rem;
|
||||
display: inline-block;
|
||||
border-radius: 30px; }
|
||||
.btn--l-margin {
|
||||
margin-left: 20px; }
|
||||
.btn--medium {
|
||||
margin-bottom: 1.5rem; }
|
||||
@media (min-width: 530px) {
|
||||
@ -527,7 +537,6 @@ img {
|
||||
.large-hero__image {
|
||||
display: block; }
|
||||
.large-hero__text-content {
|
||||
padding-top: 88px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
@ -540,7 +549,7 @@ img {
|
||||
.large-hero__title {
|
||||
font-family: "CocogooseBold";
|
||||
color: white;
|
||||
font-size: 2.5rem;
|
||||
font-size: 2.2rem;
|
||||
margin: 0; }
|
||||
@media (min-width: 530px) {
|
||||
.large-hero__title {
|
||||
@ -551,7 +560,7 @@ img {
|
||||
.large-hero__subtitle {
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.3rem;
|
||||
margin: 0; }
|
||||
@media (min-width: 530px) {
|
||||
.large-hero__subtitle {
|
||||
@ -604,11 +613,17 @@ img {
|
||||
position: unset;
|
||||
padding: 4.5rem 0; } }
|
||||
.page-section--t-padding {
|
||||
padding-top: 1.2rem; }
|
||||
padding-top: 5.2rem; }
|
||||
@media (min-width: 800px) {
|
||||
.page-section--t-padding {
|
||||
position: unset;
|
||||
padding-top: 4.5rem; } }
|
||||
.page-section--t-padding-larger {
|
||||
padding-top: 5.2rem; }
|
||||
@media (min-width: 800px) {
|
||||
.page-section--t-padding-larger {
|
||||
position: unset;
|
||||
padding-top: 6rem; } }
|
||||
.page-section--b-padding-small {
|
||||
padding-bottom: 1rem; }
|
||||
@media (min-width: 800px) {
|
||||
@ -646,13 +661,13 @@ img {
|
||||
max-width: 1000px; } }
|
||||
.headline__title {
|
||||
font-weight: 400;
|
||||
font-size: 1.7rem; }
|
||||
font-size: 1.6rem; }
|
||||
@media (min-width: 800px) {
|
||||
.headline__title {
|
||||
font-size: 2.1rem; } }
|
||||
.headline__subtitle {
|
||||
font-weight: 300;
|
||||
font-size: 1.4rem; }
|
||||
font-size: 1.3rem; }
|
||||
@media (min-width: 800px) {
|
||||
.headline__subtitle {
|
||||
font-size: 1.6rem; } }
|
||||
@ -676,6 +691,11 @@ img {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table; }
|
||||
.row--large-only {
|
||||
display: none; }
|
||||
@media (min-width: 1200px) {
|
||||
.row--large-only {
|
||||
display: inline-block; } }
|
||||
.row--gutters {
|
||||
margin-right: -60px; }
|
||||
.row--gutters > div {
|
||||
@ -710,10 +730,11 @@ img {
|
||||
display: flex; }
|
||||
|
||||
.generic-content-container--t-b-margin {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 70px; }
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2.5rem; }
|
||||
@media (min-width: 1200px) {
|
||||
.generic-content-container--t-b-margin {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 0px; } }
|
||||
|
||||
.generic-content-container--t-center {
|
||||
@ -723,7 +744,7 @@ img {
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
font-size: 1.2rem; }
|
||||
font-size: 1.1rem; }
|
||||
@media (min-width: 800px) {
|
||||
.generic-content-container p {
|
||||
margin: 0 0 1.8rem 0;
|
||||
@ -734,7 +755,7 @@ img {
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 61.15%;
|
||||
padding-bottom: 63.15%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: -3px 3px 10px #000000ba;
|
||||
@ -760,7 +781,7 @@ img {
|
||||
height: 100%; }
|
||||
|
||||
.how-it-works {
|
||||
margin: 50px 0px; }
|
||||
margin-bottom: 2.5rem; }
|
||||
.how-it-works strong {
|
||||
font-weight: 800; }
|
||||
.how-it-works--atSmall-centered {
|
||||
@ -769,10 +790,10 @@ img {
|
||||
.how-it-works--atSmall-centered {
|
||||
text-align: left; } }
|
||||
.how-it-works--atSmall-t-margin {
|
||||
margin-top: 70px !important; }
|
||||
@media (min-width: 530px) {
|
||||
margin-top: 6rem !important; }
|
||||
@media (min-width: 800px) {
|
||||
.how-it-works--atSmall-t-margin {
|
||||
margin-top: 20px; } }
|
||||
margin-top: 4rem !important; } }
|
||||
@media (min-width: 1200px) {
|
||||
.how-it-works--atSmall-t-margin {
|
||||
margin-top: 100px; } }
|
||||
@ -788,8 +809,11 @@ img {
|
||||
.how-it-works--t-margin {
|
||||
margin-top: -45px; } }
|
||||
.how-it-works__last-section {
|
||||
padding: 100px 0px 50px 0px;
|
||||
padding: 3rem 0px 50px 0px;
|
||||
background-color: rgba(255, 255, 255, 0.9); }
|
||||
@media (min-width: 1200px) {
|
||||
.how-it-works__last-section {
|
||||
padding: 100px 0px 50px 0px; } }
|
||||
.how-it-works p {
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
@ -807,11 +831,20 @@ img {
|
||||
.how-it-works__title {
|
||||
margin-top: 10px;
|
||||
font-size: 2.1rem; } }
|
||||
.how-it-works__img {
|
||||
display: none; }
|
||||
.how-it-works__title-small {
|
||||
font-weight: 300;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 45px; }
|
||||
@media (min-width: 800px) {
|
||||
.how-it-works__title-small {
|
||||
margin-top: 10px;
|
||||
font-size: 2.1rem; } }
|
||||
.how-it-works__img--small-only {
|
||||
display: inline-block;
|
||||
margin: 10px 0px; }
|
||||
@media (min-width: 1200px) {
|
||||
.how-it-works__img {
|
||||
display: inline-block; } }
|
||||
.how-it-works__img--small-only {
|
||||
display: none; } }
|
||||
.how-it-works__icon--1 {
|
||||
width: 150px; }
|
||||
@media (min-width: 800px) {
|
||||
@ -822,13 +855,20 @@ img {
|
||||
width: 225px;
|
||||
margin-left: 80px; } }
|
||||
.how-it-works__icon--2 {
|
||||
width: 130px;
|
||||
margin-right: .8rem;
|
||||
margin-bottom: -45px; }
|
||||
.how-it-works__icon--3 {
|
||||
width: 130px;
|
||||
width: 100px;
|
||||
margin-right: .8rem;
|
||||
margin-bottom: -35px; }
|
||||
.how-it-works__icon--3 {
|
||||
width: 100px;
|
||||
margin-right: .8rem;
|
||||
margin-bottom: -30px;
|
||||
margin-top: 1.2rem; }
|
||||
@media (min-width: 800px) {
|
||||
.how-it-works__icon--3 {
|
||||
margin-top: 3.2rem; } }
|
||||
@media (min-width: 1200px) {
|
||||
.how-it-works__icon--3 {
|
||||
margin-top: 0rem; } }
|
||||
.how-it-works__icon--4 {
|
||||
width: 100px;
|
||||
margin-bottom: -30px;
|
||||
@ -848,7 +888,7 @@ img {
|
||||
@media (min-width: 800px) {
|
||||
.arrow--about {
|
||||
position: relative;
|
||||
bottom: -70px;
|
||||
bottom: -40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); } }
|
||||
@media (min-width: 1200px) {
|
||||
@ -866,14 +906,14 @@ img {
|
||||
@media (min-width: 800px) {
|
||||
.arrow--how-it-works-1 {
|
||||
position: relative;
|
||||
bottom: -50px;
|
||||
bottom: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); } }
|
||||
@media (min-width: 1200px) {
|
||||
.arrow--how-it-works-1 {
|
||||
position: relative;
|
||||
bottom: -50px;
|
||||
left: 50%;
|
||||
bottom: -30px;
|
||||
left: 70%;
|
||||
transform: translateX(-50%); } }
|
||||
.arrow--how-it-works-2 {
|
||||
position: absolute;
|
||||
@ -900,4 +940,12 @@ img {
|
||||
.arrow--lightGreen {
|
||||
border-top: 85px solid #A5C90F; }
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
width: 100%;
|
||||
background-color: #FF3D04;
|
||||
color: white;
|
||||
text-align: center; }
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user