|
/* COLORS |
|
========================================== */ |
|
|
|
$bg-color: #ffffff; |
|
$color-1: #eb524a; |
|
$color-2: #c63535; |
|
$color-3: #ffbe44; |
|
|
|
$white: #ffffff; |
|
$black: #000000; |
|
|
|
// Social media |
|
|
|
$gmail: #d14836; |
|
$facebook: #3b5998; |
|
$twitter: #1da1f2; |
|
|
|
|
|
/* MIXINS |
|
========================================== */ |
|
|
|
@mixin animation($animation) { |
|
-webkit-animation: #{$animation}; |
|
-moz-animation: #{$animation}; |
|
-o-animation: #{$animation}; |
|
animation: #{$animation}; |
|
} |
|
|
|
@mixin keyframes($keyframes) { |
|
@-webkit-keyframes #{$keyframes} { @content; } |
|
@-moz-keyframes #{$keyframes} { @content; } |
|
@-o-keyframes #{$keyframes} { @content; } |
|
@keyframes #{$keyframes} { @content; } |
|
} |
|
|
|
@mixin transform($transform) { |
|
-webkit-transform: $transform; |
|
-moz-transform: $transform; |
|
-ms-transform: $transform; |
|
-o-transform: $transform; |
|
transform: $transform; |
|
} |
|
|
|
@mixin transition($transition) { |
|
-webkit-transition: #{$transition}; |
|
-moz-transition: #{$transition}; |
|
-o-transition: #{$transition}; |
|
transition: #{$transition}; |
|
} |
|
|
|
@mixin transition-delay($transition-delay) { |
|
-webkit-transition-delay: #{$transition-delay}; |
|
-moz-transition-delay: #{$transition-delay}; |
|
-o-transition-delay: #{$transition-delay}; |
|
transition-delay: #{$transition-delay}; |
|
} |
|
|
|
/* RESET |
|
========================================== */ |
|
|
|
*, *:before, *:after { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
background: $bg-color; |
|
//font-family: 'Open Sans', sans-serif; |
|
font-family: 'Roboto Condensed', sans-serif; |
|
} |
|
|
|
/* CONTACT |
|
========================================== */ |
|
|
|
.contact-area { |
|
width: 100%; |
|
height: 100vh; |
|
position: relative; |
|
} |
|
|
|
.contact { |
|
position: relative; |
|
max-width: 420px; |
|
padding: 40px 20px; |
|
overflow: hidden; |
|
margin: 0 auto; |
|
|
|
@media (min-width: 1024px) { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
@include transform(translate(-50%, -50%)); |
|
} |
|
|
|
main { |
|
float: left; |
|
width: 100%; |
|
position: relative; |
|
|
|
section { |
|
border-radius: 5px; |
|
float: left; |
|
width: 100%; |
|
background-color: $color-1; |
|
|
|
.content { |
|
float: left; |
|
width: 100%; |
|
padding: 20px 30px 50px 30px; |
|
position: relative; |
|
text-align: center; |
|
|
|
@media (min-width: 414px) { |
|
text-align: left; |
|
} |
|
|
|
img { |
|
display: inline-block; |
|
width: 140px; |
|
border-radius: 50%; |
|
|
|
@media (min-width: 414px) { |
|
float: left; |
|
width: 30%; |
|
margin-right: 10%; |
|
} |
|
} |
|
|
|
aside { |
|
float: left; |
|
width: 100%; |
|
color: $white; |
|
margin-top: 10px; |
|
|
|
@media (min-width: 414px) { |
|
width: 60%; |
|
} |
|
|
|
h1 { |
|
font-weight: 100; |
|
font-size: 22px; |
|
margin-bottom: 10px; |
|
} |
|
|
|
p { |
|
font-size: 14px; |
|
letter-spacing: .5px; |
|
line-height: 160%; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.title { |
|
float: left; |
|
width: 100%; |
|
background-color: $color-2; |
|
max-height: 0px; |
|
border-bottom-left-radius: 5px; |
|
border-bottom-right-radius: 5px; |
|
overflow: hidden; |
|
@include transition(all .55s); |
|
|
|
&.active { |
|
max-height: 100px; |
|
@include transition(all 1.3s); |
|
|
|
p { |
|
@include transform(scale(1)); |
|
transition-delay: .2s; |
|
} |
|
} |
|
|
|
p { |
|
padding: 15px 30px; |
|
color: $white; |
|
font-size: 16px; |
|
display: inline-block; |
|
font-weight: 500; |
|
text-transform: uppercase; |
|
letter-spacing: .5px; |
|
@include transition(all .3s); |
|
@include transform(scale(0)); |
|
} |
|
} |
|
|
|
button { |
|
position: absolute; |
|
bottom: 0; |
|
right: 50%; |
|
background-color: $color-3; |
|
color: $color-2; |
|
border: 0; |
|
width: 200px; |
|
height: 48px; |
|
text-align: center; |
|
border-radius: 30px; |
|
font-size: 16px; |
|
letter-spacing: .5px; |
|
text-transform: uppercase; |
|
margin-bottom: -24px; |
|
margin-right: -100px; |
|
@include transition(all .4s); |
|
transition-delay: .1s; |
|
outline: none; |
|
overflow: hidden; |
|
z-index: 10; |
|
font-family: inherit; |
|
|
|
span { |
|
opacity: 1; |
|
@include transition(opacity .2s); |
|
transition-delay: .4s; |
|
display: block; |
|
width: 200px; |
|
float: left; |
|
padding: 15px 0px; |
|
} |
|
|
|
svg { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
@include transform(translate(-50%, -50%)); |
|
opacity: 0; |
|
@include transition(all .4s); |
|
|
|
path { |
|
fill: $color-2; |
|
} |
|
} |
|
|
|
&.active { |
|
margin-right: 0; |
|
right: 20px; |
|
width: 65px; |
|
height: 65px; |
|
margin-bottom: -32.5px; |
|
text-indent: 100%; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
border-radius: 65px; |
|
box-shadow: 0px 3px 15px rgba(0,0,0,0.2); |
|
|
|
span { |
|
opacity: 0; |
|
transition-delay: 0s; |
|
width: 200px; |
|
} |
|
|
|
svg { |
|
opacity: 1; |
|
transition-delay: .5s; |
|
} |
|
} |
|
} |
|
} |
|
|
|
nav { |
|
float: left; |
|
width: 100%; |
|
overflow: hidden; |
|
max-height: 0px; |
|
@include transition(all .5s); |
|
|
|
&.active { |
|
max-height: 600px; |
|
@include transition(all 1s); |
|
|
|
a { |
|
opacity: 1; |
|
@include transform(translateY(0px)); |
|
@include transition(all .7s); |
|
|
|
&:nth-of-type(1) { |
|
transition-delay: .5s; |
|
} |
|
|
|
&:nth-of-type(2) { |
|
transition-delay: .7s; |
|
} |
|
|
|
&:nth-of-type(3) { |
|
transition-delay: .9s; |
|
} |
|
} |
|
} |
|
|
|
a { |
|
float: left; |
|
width: 100%; |
|
margin-top: 18px; |
|
background-color: $white; |
|
padding: 18px 20px; |
|
border-radius: 5px; |
|
text-decoration: none; |
|
@include transition(all .3s); |
|
opacity: 0; |
|
@include transform(translateY(-10px)); |
|
position: relative; |
|
|
|
@media (min-width: 414px) { |
|
padding: 18px 30px; |
|
} |
|
|
|
.arrow { |
|
position: absolute; |
|
right: 15px; |
|
top: 50%; |
|
@include transform(translateY(-50%)); |
|
|
|
path { |
|
fill: darken($white, 10%); |
|
} |
|
} |
|
|
|
&.gmail { |
|
.icon { |
|
svg { |
|
background-color: $gmail; |
|
} |
|
} |
|
|
|
.content { |
|
h1 { |
|
color: $gmail; |
|
} |
|
} |
|
} |
|
|
|
&.facebook { |
|
.icon { |
|
svg { |
|
background-color: $facebook; |
|
} |
|
} |
|
|
|
.content { |
|
h1 { |
|
color: $facebook; |
|
} |
|
} |
|
} |
|
|
|
&.twitter { |
|
.icon { |
|
svg { |
|
background-color: $twitter; |
|
} |
|
} |
|
|
|
.content { |
|
h1 { |
|
color: $twitter; |
|
} |
|
} |
|
} |
|
|
|
.icon { |
|
float: left; |
|
width: 50px; |
|
height: 50px; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
margin-right: 20px; |
|
|
|
svg { |
|
width: 100%; |
|
height: 100%; |
|
padding: 14px; |
|
|
|
path { |
|
fill: $white; |
|
} |
|
} |
|
} |
|
|
|
.content { |
|
h1 { |
|
font-size: 20px; |
|
font-weight: 400; |
|
line-height: 160%; |
|
letter-spacing: .4px; |
|
} |
|
|
|
span { |
|
font-size: 14px; |
|
color: darken($white, 30%); |
|
display: block; |
|
letter-spacing: .4px; |
|
} |
|
} |
|
} |
|
} |
|
} |