8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 761: | Linha 761: | ||
/* Teste */ | /* Teste */ | ||
. | @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900); | ||
//colors | |||
$red: #E1332D; | |||
$white: #fff; | |||
//base styles | |||
* { | |||
box-sizing: inherit; | |||
transition-property: all; | |||
transition-duration: .6s; | |||
transition-timing-function: ease; | |||
} | |||
html, | |||
body { | |||
box-sizing: border-box; | |||
height: 100%; | |||
width: 100%; | |||
} | } | ||
body { | |||
background: $red; | |||
font-family: 'Roboto', sans-serif; | |||
font-weight: 400; | |||
} | |||
// Main wrap | |||
.buttons { | |||
display: flex; | |||
flex-direction: column; | |||
height: 100%; | |||
justify-content: center; | |||
text-align: center; | |||
width: 100%; | |||
} | |||
// Button wrap | |||
.container { | |||
align-items: center; | align-items: center; | ||
display: flex; | display: flex; | ||
flex-direction: column; | |||
justify-content: center; | justify-content: center; | ||
padding: 1em; | |||
text-align: center; | |||
@media (min-width: 600px) { | |||
flex-direction: row; | |||
justify-content: space-between; | |||
} | |||
} | } | ||
. | h1 { | ||
color: $white; | |||
font-size: 1.25em; | |||
font-weight: 900; | |||
margin: 0 0 2em; | |||
@media (min-width: 450px) { | |||
font-size: 1.75em; | |||
} | |||
@media (min-width: 760px) { | |||
font-size: 3.25em; | |||
} | |||
@media (min-width: 900px) { | |||
font-size: 5.25em; | |||
margin: 0 0 1em; | |||
} | |||
} | } | ||
p { | |||
color: $white; | |||
height: | font-size: 12px; | ||
@media(min-width: 600px) { | |||
left: 50%; | |||
position: absolute; | |||
transform: translate(-50%, 0); | |||
top: 90%; | |||
} | |||
@media(max-height: 500px) { | |||
left: 0; | |||
position: relative; | |||
top: 0; | |||
transform: translate(0, 0); | |||
} | |||
a { | |||
background: rgba($white, 0); | |||
border-bottom: 1px solid; | |||
color: $white; | |||
line-height: 1.4; | |||
padding: .25em; | |||
text-decoration: none; | |||
&:hover { | |||
background: rgba($white, 1); | |||
color: $red; | |||
} | |||
} | |||
} | } | ||
//button styles | |||
. | //default button | ||
.btn { | |||
color: #fff; | |||
cursor: pointer; | |||
// display: block; | |||
font-size:16px; | |||
font-weight: 400; | |||
line-height: 45px; | |||
margin: 0 0 2em; | |||
max-width: 160px; | |||
position: relative; | |||
text-decoration: none; | |||
text-transform: uppercase; | |||
width: 100%; | |||
// @media(min-width: 400px) { | |||
// display: inline-block; | |||
// margin-right: 2.5em; | |||
// &:nth-of-type(even) { | |||
// margin-right: 0; | |||
// } | |||
// } | |||
@media(min-width: 600px) { | |||
margin: 0 1em 2em; | |||
// &:nth-of-type(even) { | |||
// margin-right: 2.5em; | |||
// } | |||
// &:nth-of-type(5) { | |||
// margin-right: 0; | |||
// } | |||
} | |||
&:hover { text-decoration: none; } | |||
} | } | ||
. | ///////////////////////////////// | ||
//button one | |||
/////////////////////////////// | |||
.btn-1 { | |||
background: darken($red, 1.5%); | |||
font-weight: 100; | |||
svg { | |||
height: 45px; | |||
left: 0; | |||
position: absolute; | |||
top: 0; | |||
width: 100%; | |||
} | |||
rect { | |||
fill: none; | |||
stroke: #fff; | |||
stroke-width: 2; | |||
stroke-dasharray: 422, 0; | |||
transition: all 0.35s linear; | |||
} | |||
} | } | ||
. | ///////////////////////////// | ||
//button-5 | |||
color: rgba(255, 255, 255, | /////////////////////////// | ||
.btn-5 { | |||
} | border: 0 solid; | ||
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0); | |||
outline: 1px solid; | |||
outline-color: rgba(255, 255, 255, .5); | |||
outline-offset: 0px; | |||
text-shadow: none; | |||
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); | |||
} | |||
. | .btn-5:hover { | ||
border: 1px solid; | |||
color: # | box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2); | ||
outline-color: rgba(255, 255, 255, 0); | |||
outline-offset: 15px; | |||
text-shadow: 1px 1px 2px #427388; | |||
} | } |