File: D:/HostingSpaces/BVerhoeven/verhoevendak.nl/wwwroot/css/pages/_about.sass
/*==========================================================================
Main page
========================================================================== */
body.about
.about-content
position: relative
&:after
content: ""
opacity: 0.5
top: 0
left: 0
bottom: 0
right: 0
position: absolute
z-index: -1
background: white url('/img/clouds_bg.jpg') no-repeat
.top
position: relative
overflow: visible
font-size: 1em
line-height: 1.6em
height: 90vw
max-height: 1200px
padding-top: 65px
.textholder
vertical-align: top
font-size: 18px
line-height: 28px
color: #616161
overflow: visible
h1
margin-top: 41%
font-style: italic
font-size: 34px
line-height: 38.46px
letter-spacing: -0.2px
color: $fontGray
margin-bottom: 50px
p
margin-bottom: 60px
.imgholder
vertical-align: bottom
overflow: visible
z-index: 5
max-height: 850px
height: 60vw
figure
width: 100%
margin-top: 80px
background-size: cover
background-position: bottom center
height: 100%
display: block
.big-hexagon-holder
display: block
bottom: 0
overflow: visible
position: absolute
height: 250px
left: -344px
z-index: -1
> svg
transform: rotate(30deg) scale(0.4)
> .st0
fill: url(#SVGID_1_)
.scroll-hinter
position: absolute
z-index: 35
top: 98%
left: -120px
width: 130px
.testimonial-left,
.testimonial-right
padding-top: 120px
margin-bottom: 20px
position: relative
.grid-col
overflow: visible
padding-bottom: 15%
.textholder
padding: 4% 0 9% 11%
background: linear-gradient(-90deg, $lightOrange 0%, $darkOrange 100%)
box-shadow: 0 6px 6px -2px rgba(0,0,0,0.13)
z-index: 2
.grid-row
.quoteholder
vertical-align: middle
color: white
padding: 35px 10px 0 0
width: column(8.7)
letter-spacing: 0
h1
font-style: italic
font-size: 35px
line-height: 38.46px
letter-spacing: -0.35px
margin-bottom: 45px
p
font-size: 18px
line-height: 28px
.nameholder
vertical-align: middle
color: white
padding: 85px 0 0 2px
width: column(3.5)
h2
font-weight: bold
font-size: 24px
margin: 0
.mail
width: 75px
height: 75px
display: block
position: relative
left: -8px
top: 10px
.mail-icon
transform: scale3d(1,1,1)
transform-origin: 50%
transition: transform 0.3s
&:hover
.mail-icon
transform: scale3d(0.8, 0.8, 1)
.round-portrait
width: 263%
height: 150%
border-radius: 50%
position: absolute
left: -35%
bottom: -90%
overflow: hidden
z-index: 10
figure
height: 100%
background-size: cover
background-position: center center
.big-hexagon-holder
position: absolute
right: -104px
bottom: -49%
z-index: 0
+spinRightAnimation('spin6', 0.16)
-webkit-animation: spin6 360s linear infinite
animation: spin6 360s linear infinite
-webkit-backface-visibility: hidden
svg
width: 100%
.testimonial-right
.textholder
padding: 4% 8% 9% 0
background: $fontGray
.grid-row
.quoteholder
padding: 35px 0 0 20px
float: left
.nameholder
.mail
float: right
.mail-icon
.cls-3
fill: $lightOrange
.round-portrait
left: auto
right: 75%
bottom: -100%
.big-hexagon-holder
position: absolute
right: 55%
bottom: -52%
z-index: 0
+spinRightAnimation('spin7', 0.25)
-webkit-animation: spin7 360s linear infinite
animation: spin7 360s linear infinite
-webkit-backface-visibility: hidden
svg
& > .st0
fill: url(#SVGID_1_)
.testimonial-left.first
.big-hexagon-holder
z-index: 1
.testimonial-left.last
.big-hexagon-holder
position: absolute
right: -22%
bottom: -47%
z-index: 0
//transform: scale(0.26) rotate(15deg)
+spinRightAnimation('spin8', 0.26)
-webkit-animation: spin8 360s linear infinite
animation: spin8 360s linear infinite
-webkit-backface-visibility: hidden
svg
width: 100%
> .st0
fill: $buttonBlue
.reference-linkholder
text-align: center
margin: 115px 0 60px 0
font-size: 18px
line-height: 28px
color: #616161
a
padding-bottom: 1px
border-bottom: solid 2px $fontLightGray
text-decoration: none
color: $fontLightGray
&:hover
color: $darkOrange
border-bottom-color: $darkOrange
.yellowline
width: 10px
height: 10px
margin: 20px 0
display: inline-block
border-bottom: solid 2px $lightOrange
/* Mobile view
========================================================================== */
+respond-to-width-beyond(2000)
body.about
.testimonial-right
.round-portrait
bottom: -80%
+respond-to-width(1025)
body.about
.top
.textholder
h1
margin-top: 34%
font-size: 30px
p
font-size: 15px
line-height: 25px
.big-hexagon-holder, .scroll-hinter
display: none
.testimonial-left,
.testimonial-right
.textholder
//padding: 4% 0 9% 20%
.grid-row
.quoteholder
p
font-size: 14px
h1
font-size: 30px
.testimonial-right
.round-portrait
bottom: -140%
.about-content
a.button
min-width: 180px
height: 40px
font-size: 14px
line-height: 40px
+respond-to-width(840)
body.about
.about-content
a.button
min-width: 180px
height: 40px
font-size: 14px
line-height: 40px
.testimonial-left, .testimonial-right
.textholder
padding: 1% 0 7% 8%
.grid-row
.quoteholder
h1
font-size: 24px
line-height: 34px
margin-bottom: 16px
.testimonial-right
.textholder
padding: 1% 7% 7% 0%
+respond-to-width(760)
body.about
.top
height: auto
padding-bottom: 0
.textholder
width: 100%
margin-left: 0
h1
margin: 10% 0
.imgholder
width: 100%
.testimonial-left, .testimonial-right
width: 100%
margin-bottom: 0
margin-top: 0
padding: 0
.col-1
vertical-align: top
.round-portrait
display: none
.textholder
width: 100%
padding: 5% 0 9% 5%
.grid-row
.nameholder
width: 100%
padding-top: 0
h2
float: left
padding-top: 17px
.mail
float: right
width: 60px
.quoteholder
width: 95%
margin-left: 0
padding-left: 0
.testimonial-right
.textholder
.grid-row
.nameholder
margin-left: 0
.uit-je-dak
height: auto
padding: 10%
.textholder
width: 100%
margin: 0 5%
max-width: 90%
text-align: center
h1
margin: 10% 0
h2
p
font-size: 28px
line-height: 40px
a.button
font-size: 16px
line-height: 40px
.imgholder
display: none
+respond-to-width(435)
body.about
.top
padding-top: 30px
width: 100%
.breadcrumb
margin-left: column(1, 12)
.textholder
padding: 0 column(1, 12) 40px column(1, 12)
.imgholder
float: none
figure
margin-top: 0
.testimonial-left,
.testimonial-right
.col-1
display: none
.referenties
display: none