File: /var/www/vhosts/creativefellows.nl/partof.creativefellows.nl/scss/_sections.scss
.page-section{
//padding:3rem 0;
//height:100vh;
background-color: rgba($secondary-color,0.05);
> .grid-container,
> .grid-container .grid-x{height:50rem;}
@include breakpoint(small only)
{
> .grid-container,
> .grid-container .grid-x{height:auto;}
}
h1{
line-height:3.5rem;
strong{display:block;}
}
h2{
line-height:2.75rem;
strong{display:block;}
}
figure{
position:relative;z-index:10;
&.spaced-left{
margin-left:6rem;
@include breakpoint(small only){
margin:0;
}
}
&.spaced-right{
margin-right:6rem;
@include breakpoint(small only){
margin:0;
}
}
@include breakpoint(small only)
{
padding:1.5rem 0;
}
}
figure.rounded img{border-radius:3rem;}
.button{margin-right:0.75rem;font-size:1.125rem;}
.no-margin{margin:0;}
}
.page-section__internet{
position:relative;
overflow:hidden;
.cell{position:relative;}
&::before{
content:"";
display:block;
position:absolute;
top:0;bottom:3rem;
left:calc(50% + 3rem);
width:50%;
border-radius:0 0 0 6rem;
background-color:$white;
}
@include breakpoint(small only)
{
&::before{display:none;}
h1{margin-top:3rem;}
.button.secondary{margin-bottom:3rem;}
}
}
.page-section__handig{
overflow:hidden;
position:relative;
&::before{
content:"";
display:block;
position:absolute;
top:3rem;bottom:3rem;
left:-3rem;
right:3rem;
width:50%;
border-radius:0 6rem 6rem 0;
background-color:$white;
@include breakpoint(small only)
{display:none;}
}
@include breakpoint(small only){
padding-top:3rem;
.button{margin-bottom:3rem;}
}
}
.page-section__verbonden{
overflow:hidden;
position:relative;
height:auto;
padding-top:0rem;
padding-bottom:0rem;
> .grid-container,
> .grid-container .grid-x{height:auto;}
.grid-x.background-white{position:relative;z-index:10;}
.grid-x.background-white::before{
content:"";
display:block;
position:absolute;
top:0rem;bottom:0rem;
left:0rem;
right:0rem;
border-radius:6rem;
background-color:$white;
z-index:-1;
}
.cell.small-12{padding:3rem 2.5rem 0 2.5rem;}
.cell.medium-12{padding:1.5rem 2.5rem 3rem 2.5rem;}
h2{margin-bottom:3rem;}
h3{margin-top:3rem;}
figure.rounded img{border-radius:3rem;}
@include breakpoint(small only)
{
h2{margin:1.5rem 0;}
.grid-x.background-white::before{display:none;}
.cell.small-12{padding:0 1.5rem 0 1.5rem;}
h3{margin-top:1.5rem;}
//figure{width:75%;margin:auto;}
// .cell.medium-12{padding:1.5rem 2.5rem 3rem 2.5rem;}
}
}
.page-section__altijd-verbonden{
overflow:hidden;
height:auto;
padding-top:6rem;
padding-bottom:0rem;
> .grid-container,
> .grid-container .grid-x{height:auto;position:relative;}
.grid-container{margin-top:6rem;padding-bottom: 3rem;}
.grid-x{position:relative;z-index:10;}
.grid-container::before{
content:"";
display:block;
position:absolute;
top:0rem;bottom:0rem;
left:-50%;
right:0rem;
border-radius:0 6rem 6rem 0;
background-color:$white;
z-index:0;
}
.cell.small-12{padding:3rem 2.5rem 0 2.5rem;}
@include breakpoint(small only)
{
img{margin:0.75rem 0;}
.grid-container::before{display:none;}
.cell.small-12{padding:0 1.5rem 0 1.5rem;}
.button{margin:3rem 0 0 0;}
}
}
.page-section__contact{
overflow:hidden;
position:relative;
padding-top:3rem;
.grid-container{padding-top:6rem;padding-bottom:6rem;}
> .grid-container,
> .grid-container .grid-x{height:auto;position:relative;}
&::before{
content:"";
display:block;
position:absolute;
top:6rem;bottom:3rem;
left:-3rem;
right:3rem;
width:50%;
border-radius:0 6rem 6rem 0;
background-color:$white;
@include breakpoint(small only)
{display:none;}
}
@include breakpoint(small only)
{
.grid-container{padding-top:0;padding-bottom:0;}
}
}
.page-section__footer{
background-color:$white;
padding-top:3rem;
> .grid-container,
> .grid-container .grid-x{height:auto;position:relative;}
ul{margin-bottom:3rem}
.cell__copy{
margin-top:1.5rem;
p{
margin:0;font-size:0.875rem;
}
a{
color:$white;
text-decoration:underline;
&::before{content:"|";padding-left:0.5rem;padding-right:0.5rem;}
}
}
.sitelinks{
img{margin-top:1.5rem;}
@include breakpoint(small only)
{
img{margin-bottom:3rem;}
}
}
.copyright{
background:$black;color:$white;
font-size:0.875rem;
p{margin:0.75rem 0;}
a{color:$white;padding-left:0.75rem;padding-right:0.75rem;}
}
@include breakpoint(small only)
{
// padding-top:1.5rem;
// .grid-x {justify-content: flex-start;}
}
}
.page-devider{
width:100%;
position:relative;
z-index:100;
background-color: rgba($secondary-color,0.05);
&::before{
content:"";
position:absolute;
top:-6rem;
height:12rem;
left:0;right:0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5000 289.83'%3E%3Cpath d='M5000 288.33H2596.05c-53.02 0-96-42.98-96-96v-67.87l-.1 26.73v-53.7c0-53.02-42.98-96-96-96H0' style='fill:none;stroke:%23ed3f36;stroke-width:3px'/%3E%3C/svg%3E") no-repeat;
background-position:35% 50%;
background-size:auto 12rem;
}
}
.page-devider__blue{
&::before{
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Laag 1' viewBox='0 0 5000 289.83'%3E%3Cpath d='M0 288.33h2403.95c53.02 0 96-42.98 96-96v-67.87l.1 26.73v-53.7c0-53.02 42.98-96 96-96H5000' style='fill:none;stroke:%23016487;stroke-width:3px'/%3E%3C/svg%3E") no-repeat;
background-position:75% 50%;
background-size:auto 12rem;
}
}
.page_devider__flipped{
transform: scaleX(-1);
}
.page_devider__right{
&::before{
background-position:70% 50%;
}
}
.page_devider__left{
&::before{
background-position:10% 50%;
}
padding-bottom:6rem;
@include breakpoint(small only)
{
padding:0;
}
}
.form{
input[type=text]{border-radius:0;box-shadow:none;border:none;height:auto;padding:0.75rem;margin-bottom:1.5rem;}
input::placeholder {
font-weight:700;
color:$black;
}
.checkbox-row{
position:relative;
margin-bottom:1.5rem;
input[type="checkbox"]{margin:0;position:absolute;top:0.375rem;left:0;}
label{padding-left:1.5rem;}
}
}