cobuild-angular-stack
Version:
Base stack angular sass jade gulp
1,279 lines (1,204 loc) • 31.4 kB
text/less
.landing {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow-x: hidden;
.center-slider {
div {
text-align: center;
img {
margin: auto;
}
}
}
.slick-dots li button:before {
font-size: 12px;
color: white;
opacity: .5;
}
.slick-dots li.slick-active button:before {
opacity: 1;
color: white;
}
.fade-slider {
width: 100%;
*:focus {
outline: none;
}
.item {
width: 100%;
}
}
.banner {
position: relative;
width: 100%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: auto;
margin-bottom: 20px;
.steps {
.row {
margin: 0px;
}
}
.row {
margin: none ;
}
.header-image {
height: 50%;
background: url(../img/iffel.jpg) no-repeat;
background-size: cover;
background-position: center center;
min-height: 300px;
.content-circle {
position: absolute;
z-index: 4;
width: 100%;
height: 30px;
bottom: 22%;
text-align: center;
.circle {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f5f5f5;
display: inline-block;
margin-right: 10px;
&:hover{
cursor: pointer;
background: rgba(235, 102, 81, 0.5);
}
&.active {
background: #fc7667;
}
}
}
.button-footer {
position: absolute;
bottom: 15px;
text-align: center;
width: 100%;
margin: 0px;
}
.btn-inverse {
height: 70px;
width: 327px;
margin: 0;
color: #fff;
text-transform: uppercase;
border-radius: 4px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.8px;
}
.text-button-simple {
display: block;
font-size: 15px;
text-align: center;
width: 100%;
}
.text-button-bold {
display: block;
font-size: 20pt;
text-align: center;
width: 100%;
font-weight: bold;
}
.arrow-left {
position: absolute;
left: 20px;
top: 25%;
cursor: pointer;
z-index: 4;
width: 30px;
height: 30px;
span{
color: white;
font-size: 1.875em;
&:hover{
color: #fc7667;
}
}
}
.arrow-right {
position: absolute;
right: 20px;
top: 25%;
margin-top: 7px;
cursor: pointer;
float: right;
z-index: 4;
width: 30px;
height: 30px;
span{
color: white;
font-size: 1.875em;
&:hover{
color: #fc7667;
}
}
}
.content-opacity-header-image {
height: 100%;
position: absolute;
background-color: #000;
width: 100%;
opacity: 0.3;
}
.content-header {
display: block;
position: relative;
width: 100%;
.content-opacity {
height: 100%;
position: absolute;
background-color: #000;
width: 100%;
opacity: 0.5;
}
}
.logo {
position: relative;
width: 149px;
margin: 26px;
float: left;
padding-left: 25px;
}
.header-step {
margin-top: 4%;
height: 350px;
color: white;
font-weight: bold;
width: 100%;
text-align: center;
.step-text-title {
font-size: 24pt;
}
.step-text-body {
font-size: 16pt;
}
.m-t-5{
margin-top: 6%;
}
}
}
.arrow-landing{
position: absolute;
bottom: 80px;
left: 0;
right: 0;
margin: 0 auto;
cursor: pointer;
}
.dropdown-landing.mobile{
width: 160px;
left: inherit;
padding: 0;
li {
padding: 5px 0;
a{
font-size: 14px;
color: #333;
letter-spacing: 0;
text-transform: none;
font-weight: normal;
text-align: left;
padding-left: 10px;
}
}
}
&:before {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
// background: rgba(0, 0, 0, .4);
content: '';
}
.menu-telephone {
position: relative;
float: right;
display: grid;
color: white;
font-weight: 700;
font-size: 14px;
top: 30px;
right: 56px;
li{
list-style-type: none
}
}
.header {
position: relative;
top: 28px;
float: left;
left: 20%;
ul {
padding: 0;
margin: 0;
}
li {
display: inline-block;
padding: 6px;
margin-right: 10px;
a {
color: white;
font-size: 15px;
font-weight: 300;
text-transform: capitalize;
letter-spacing: 1px;
&:hover {
color: @color-pink;
}
}
&:first-child a,
&:last-child a {
font-weight: 700;
}
&:last-child {
margin-right: 0;
}
}
.dropdown-landing{
width: 160px;
left: inherit;
overflow: hidden;
li {
padding-bottom: 0;
a{
font-size: 14px;
color: #333;
letter-spacing: 0;
text-transform: none;
font-weight: normal;
text-align: left;
padding-left: 10px;
}
}
}
}
.info {
padding:10% 15%;
.logo {
max-width: 250px;
}
h2.message {
margin: 38px 0;
color: white;
font-size: 50px;
font-weight: 600;
text-align: center;
margin-bottom: 120px;
}
.btn-slate{
background: #525261;
margin-left: 40px;
&:hover{
background: #525261;
}
}
.btn-inverse {
height: 60px;
width: 327px;
margin: 0;
color: #fff;
text-transform: uppercase;
border-radius: 4px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.8px;
&:focus {
outline: none;
}
}
small.help-text {
display: block;
margin-top: 30px;
color: white;
font-size: 20px;
a {
color: white;
&:hover {
color: @color-pink;
}
}
}
h1.quote {
margin-top: 5%;
color: white;
font-size: 50px;
font-weight: 300;
}
}
}
.logos{
background-color: #f8f8f8;
padding: 30px 0 20px 0;
width: 100%;
margin: 0;
text-align: center;
li{
display: inline-block;
width: 12%;
margin: 0 2%;
text-align: center;
img {
max-width: 100%;
margin: 0;
padding: 0;
opacity: .5;
}
}
}
.tempDiv{
background-color: white;
}
.brands-slider-big{
visibility: hidden;
background-color: white;
padding: 30px 0 20px 0;
width: 100%;
margin-bottom: 0px;
.slick-list{
.slick-track{
text-align: center;
}
}
img{
text-align: center;
margin: auto;
width: 12%;
}
label{
text-align: center;
margin: auto;
font-size: 20px;
display: inline-block;
position: relative;
float:none;
width:auto;
}
h1{
color: #7d8c93;
font-size: 28px;
font-weight: 300;
line-height: 1.22;
font-style: italic;
}
.slick-arrow{
background-color:transparent;
color: #7d8c93;
position:absolute;
top:50%;
border:none;
outline:none;
z-index:2;
i{
padding:4px;
}
}
.arrow-prev{
left: 10px;
}
.arrow-next{
right: 10px;
}
}
.brands-slider{
background-color: white;
padding: 5%;
img{
text-align: center;
margin: auto;
}
.slick-arrow{
background-color:transparent;
color: #7d8c93;
position:absolute;
top:25%;
border:none;
outline:none;
z-index:2;
i{
padding:4px;
}
}
.arrow-prev{
left: 10px;
}
.arrow-next{
right: 10px;
}
}
.steps{
padding: 0;
.title-1 {
margin-top: 13px;
font-size: 22pt;
font-weight: 600;
color: #7d7d7d;
}
.title-2{
font-size: 17pt;
font-weight: 500;
color: #777;
margin-bottom: 15px;
}
&#step-2{
width: 100%;
height: auto;
background-color: #f0f3f5;
margin-top: 3%;
}
&#step-3{
padding-top: 44px;
text-align: center;
font-size: 32pt;
color: #fc7667;
padding-bottom: 44px;
font-weight: 600;
}
&#step-4{
height:auto;
text-align: center;
font-size: 27pt;
background: #9a999e;
opacity: 0.8;
padding-top: 30px;
a {
margin-right: 20px;
}
h1{
padding-top: 15px;
color: white;
font-size: 30px;
font-weight: 500;
padding-bottom: 50px;
}
}
.text-body-info {
font-size: 13pt;
color: #555;
margin-bottom: 15px;
}
.btn-inverse {
height: 60px;
width: 327px;
margin: 0;
color: #fff;
text-transform: uppercase;
border-radius: 4px;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.8px;
}
.text-button-simple {
display: block;
font-size: 15px;
text-align: center;
width: 100%;
}
.text-button-bold {
display: block;
font-size: 20pt;
text-align: center;
width: 100%;
font-weight: bold;
}
span.number{
font-size: 120px;
font-weight: 300;
text-align: center;
color: #fc7667;
display: inline-block;
margin-right: 10px;
}
h1{
font-size: 46px;
font-weight: normal;
color: #7d8c93;
line-height: 38px;
display: inline-block;
padding-top: 80px;
}
hr{
width: 96px;
left: 0;
top: 0px;
display: block;
margin: -30px 0 20px 50px;
height: 2px;
background: #7d8c93;
&.margin{
margin-left: 72px;
}
&.separator{
width: 100%;
margin: 20px 0;
height: 1px;
background: #e0e0e5;
}
}
h4{
color: #525261;
margin: 0;
font-weight: 600;
margin-top: 20px;
}
p{
font-size: 18px;
font-weight: 300;
line-height: 1.39;
color: #7d8c93;
&.description{
padding-left: 50px;
width: 70%;
}
}
ul{
padding:0;
li{
display: inline-block;
vertical-align: top;
margin-right: 30px;
&:last-child{
margin-right: 0;
}
img{
display: block;
margin: 25px auto;
}
p{
text-align: center;
}
}
}
}
.banner2{
position: relative;
width: 100%;
background: url("../img/landing2.jpg") no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
.title{
padding: 10% 10% 30% 0%;
padding-left: 52px;
text-align: left;
span.number{
font-size: 120px;
font-weight: 300;
text-align: center;
color: #fc7667;
display: inline-block;
margin-right: 10px;
}
h1{
font-size: 46px;
font-weight: normal;
color: #ffffff;
line-height: 38px;
display: inline-block;
}
hr{
width: 96px;
left: 0;
top: 0px;
display: block;
margin: 0% 2% 2% 5%;
height: 2px;
background: #ffffff;
}
}
p{
color: #ffffff;
font-size: 18px;
padding: 0;
padding-left: 5%;
text-align: left;
}
.btn-inverse{
font-size: 20px;
font-weight: 600;
height: 60px;
margin: 2% 0% 0% 5%;
padding:0 30px;
}
}
.quotes{
> h1{
color: #525261;
font-size: 46px;
font-weight: 600;
}
> a{
color: #525261;
display: block;
font-size: 20px;
font-weight: normal;
line-height: 1.5;
margin: 28px 0 28px 0;
}
>img{
margin-bottom: 30px;
}
.center-slider{
.slick-slide{
outline: none;
}
.content{
margin: 0 auto;
text-align:center;
width: 100%;
padding:0% 5%;
h1{
color: #7d8c93;
font-size: 28px;
font-weight: 300;
line-height: 1.22;
}
span{
color: #7d8c93;
display: block;
font-size: 35px;
letter-spacing: -4px;
margin-top: 20px;
}
a{
display: block;
color: #7d8c93;
font-size: 24px;
font-weight: 300;
line-height: 0.83;
margin: 16px 0;
&:hover{
color: @color-pink;
}
}
}
.slick-dots{
position: inherit;
li{
width: 90px;
height: 90px;
margin-right: 30px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
&.slick-active{
width: 115px;
height: 115px;
button{
width: 115px;
height: 115px;
}
}
button{
background: url("../img/landing2.jpg") no-repeat center center;
height: 90px;
width: 90px;
border-radius: 100%;
margin-right: 20px;
background-size: cover;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
}
.dot{
img{
max-width:100%;
}
:hover{
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
}
}
}
.carousel-dot{
display:none
}
}
hr{
width: 100%;
}
.numbers {
width: 90%;
margin: 100px auto 50px auto;
float: none;
h2 {
margin-bottom: 70px;
color: #525261;
font-size: 46px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
h3 {
text-align: center;
font-size: 46px;
font-weight: normal;
color: #fc7667;
}
p {
color: #7d8c93;
font-size: 24px;
line-height: 1.38;
text-align: center;
margin-top: 23px;
}
}
.banner3{
position: relative;
width: 100%;
background: url("../img/landing3.jpg") no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
h1{
font-size: 50px;
font-weight: 600;
line-height: 1.18;
color: #fff;
margin-bottom: 80px;
}
.btn-inverse{
display: block;
height: 60px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.8px;
margin: 0 auto;
padding: 0 30px;
}
.info{
padding: 15%;
}
}
.absolute-chevron{
position:absolute;
bottom:10px;
left: 0;
}
.white{
color:white;
}
}
@media (max-width: 466px) {
.landing .banner .info .btn-slate{
margin-left: 0px;
margin-top: 10px;
}
}
@media (max-width: 768px) {
.landing .banner .header-image{
display: show;
.header-step {
margin-top: 5%;
}
.menu-telephone {
display: none;
}
}
}
@media (max-width: 1040px) {
.landing .banner .header{
left: 8%;
}
}
@media (max-width: 420px) {
.landing .banner2 {
.title, p{
padding-left: 0;
}
.btn-inverse{
margin: 0;
}
}
}
@media (min-width: 1025px) and (max-width:1200px) {
.landing .banner .info {
.logo {
max-width: 200px;
}
h2.message {
margin: 28px 0;
font-size: 30px;
}
.btn-inverse {
width: 220px;
padding: 8px 7px;
font-size: 18px;
}
small.help-text {
font-size: 16px;
}
h1.quote {
font-size: 40px;
}
}
.landing{
.steps{
h1{
font-size: 30px;
&.tigh{
font-size: 30px;
}
}
.text-body-info {
font-size: 11pt;
}
&#step-2 {
width: 100%;
height: auto;
background-color: #f0f3f5;
margin-top: -15px;
}
}
}
}
@media (min-width: 768px) and (max-width:1024px) {
.landing{
.banner {
.header-image {
.header-step {
margin-top: 3%;
}
}
.header {
right: 20px;
top: 34px;
left: 85px;
ul li {
margin-right: 10px;
a {
font-size: 14px;
}
}
}
.info {
padding: 15% 15%;
.logo {
max-width: 200px;
}
h2.message {
margin: 28px 0;
font-size: 30px;
}
.btn-inverse {
width: 220px;
padding: 8px 7px;
font-size: 18px;
}
small.help-text {
font-size: 16px;
}
h1.quote {
font-size: 40px;
}
}
}
.steps{
h1{
font-size: 30px;
&.tigh{
font-size: 30px;
}
}
.text-body-info {
font-size: 11pt;
}
&#step-2 {
width: 100%;
height: auto;
background-color: #f0f3f5;
margin-top: 0px;
}
}
}
}
.landing-nav{
position:relative;
.dropdown-toggle{
&:after{
content: "";
position: absolute;
width: 100%;
height: 4px;
top:100% ;
z-index:1;
left: 0;
}
&:hover{
+.dropdown-menu{
display:block
}
}
}
&.mobile{
.dropdown-toggle{
&:after{
left: 10%;
width: 40%;
}
}
}
.dropdown-menu:hover{
display:block ;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.landing{
.banner{
.header{
right: 10px;
li{
padding:0px;
}
}
}
}
}
@media (max-width:767px) {
.landing{
.steps{
p.description{
width: 95%;
}
}
.banner {
height: auto;
#step-1 {
&:last-child{
margin-bottom: 30px;
}
}
.header-image {
height: 55%;
.btn-inverse {
height: 56px;
width: 260px;
margin: 0;
color: #fff;
text-transform: uppercase;
border-radius: 4px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.8px;
}
.text-button-bold {
display: block;
font-size: 16pt;
text-align: center;
width: 100%;
font-weight: bold;
}
.text-button-simple {
display: block;
font-size: 11px;
text-align: center;
width: 100%;
}
.menu-telephone {
display: none;
}
.logo{
margin-left: 100px;
}
.header-step {
.row {
&:last-child {
margin-bottom: 20px;
}
}
.step-text-body {
font-size: 12pt;
}
.step-text-title {
font-size: 18pt;
}
}
}
}
}
.landing .banner {
.bars {
display: block;
position: absolute;
left: 28px;
top: 28px;
font-size: 30px;
color: white;
z-index: 6;
}
.mobile-menu {
background-color: #333;
width: 100%;
position: relative;
top: 0;
left: 0;
z-index: 5;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, .7);
height: 100%;
display: none;
&.animated {
animation-duration: .5s;
}
&.slideInLeft {
display: block;
}
&.slideOutLeft {
display: none;
}
ul {
padding: 100px 0 0;
margin: 0;
li {
display: block;
padding: 20px 40px;
a {
font-size: 18px;
color: white;
font-weight: 300;
text-transform: uppercase;
&:hover {
color: @color-pink;
}
}
}
}
}
.info {
padding: 25% 15%;
.logo {
max-width: 200px;
margin-top: 80px;
}
h2.message {
font-size: 25px;
margin: 30px 0 58px;
}
.btn-inverse {
font-size: 15px;
width: 200px;
padding: 8px 7px;
}
.btn-slate{
margin-top: 5px;
margin-left: 0px;
}
small.help-text {
font-size: 18px;
font-style: normal;
text-decoration: underline;
}
h1.quote {
font-size: 26px;
margin-top: 56px;
}
}
}
.landing .steps{
>div{
margin: 0;
}
h1{
font-size: 30px;
&.tigh{
font-size: 20px;
}
}
.number{
font-size: 100px;
}
p{
&.description{
padding: 0;
width: 95%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
}
}
.landing .quotes{
.center-slider{
>div{height: 380px;}
.slick-dots li{
height: 50px;
width: 50px;
&.slick-active{
height: 70px;
width: 70px;
button{
height: 70px;
width: 70px;
}
}
button{
height: 50px;
width: 50px;
}
}
}
> h1{
font-size: 20px;
}
.center-slider .content h1{
font-size: 20px;
}
}
.landing .banner2{
.btn-inverse{
font-size:inherit;
}
}
.landing .banner3{
h1{
font-size: 40px;
}
.btn-inverse{
font-size:inherit;
}
}
}
@media (max-width:469px) {
.landing .quotes .center-slider > div {
height: 450px;
}
}
@media (max-width:640px) {
.landing {
.steps{
text-align: center;
h1{
text-align: left;
}
ul li {
width: 100%;
}
hr.margin, hr.step1{
margin: -30px auto 20px auto;
}
}
}
}