fluid layouts started
This commit is contained in:
dqnid committed
1 parent
66af4a8c63
commit
3b2818d583
62 files changed
+2213
-3752
No files matched your search
Whitespace-only changes.
@@ -0,0 +1,7 @@
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//Colors
|
||||
$color-primary: #7ed56f;
|
||||
$color-primary-light: #55c57a;
|
||||
$color-primary-dark: #28b485;
|
||||
|
||||
$color-grey-light-1: #f7f7f7;
|
||||
|
||||
$color-gray-dark: #777;
|
||||
$color-white: #fff;
|
||||
$color-black: #000;
|
||||
|
||||
//Grid Spacing
|
||||
$grid-width: 114rem;
|
||||
$gutter-vertical: 8rem;
|
||||
$gutter-horizontal: 6rem;
|
||||
@@ -0,0 +1,43 @@
|
||||
@keyframes slideLeft {
|
||||
0% {
|
||||
transform: translateX(-16rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(1.5rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRight {
|
||||
0% {
|
||||
transform: translateX(16rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(-1.5rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideBottom {
|
||||
0% {
|
||||
transform: translateY(5rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 3rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
body {
|
||||
font-family: "Lato",Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-weight: 400;
|
||||
/* font-size: 16px; */
|
||||
line-height: 1.7;
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
|
||||
.heading--primary {
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
&-main {
|
||||
display: block;
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3.5rem;
|
||||
|
||||
animation-name: slideLeft;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
&-sub {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.75rem;
|
||||
|
||||
animation-name: slideRight;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.heading--secondary {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
|
||||
|
||||
background-clip: floor($number: 0);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
transition: all .2s;
|
||||
|
||||
&:hover {
|
||||
transform: skewY(2deg) skewX(15deg) scale(1.1);
|
||||
text-shadow: .5rem 1rem 2rem rgba($color-black, .2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.u-center-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u-margin-bottom-8 {
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.btn {
|
||||
&:link,
|
||||
&:visited {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding: 1.5rem 4rem;
|
||||
display: inline-block;
|
||||
border-radius: 10rem;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
&--animated {
|
||||
animation: slideBottom 0.7s ease-out .75s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.4rem);
|
||||
box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
|
||||
&::after {
|
||||
transform: scaleX(1.4) scaleY(1.6);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(-0.1rem);
|
||||
box-shadow: 0 .5rem 1rem rgba($color-black, 0.2);
|
||||
}
|
||||
|
||||
&--white {
|
||||
background-color: $color-white;
|
||||
color: $color-gray-dark;
|
||||
&::after{
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.row {
|
||||
max-width: $grid-width;
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $gutter-vertical;
|
||||
}
|
||||
|
||||
@include clearfix;
|
||||
|
||||
//Select all the elements that starts with col-
|
||||
[class^='col-'] {
|
||||
float: left;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $gutter-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
.col-1-of-2 {
|
||||
width: calc((100% - #{$gutter-horizontal}) / 2);
|
||||
}
|
||||
|
||||
.col-1-of-3 {
|
||||
width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
|
||||
}
|
||||
|
||||
.col-2-of-3 {
|
||||
width: calc(((100% - 2 * #{$gutter-horizontal}) / 3) * 2 + #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
.col-1-of-4 {
|
||||
width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
|
||||
}
|
||||
|
||||
.col-2-of-4 {
|
||||
width: calc(2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
.col-3-of-4 {
|
||||
width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.header {
|
||||
height: 95vh;
|
||||
background-image: linear-gradient(to right bottom,rgba($color-primary-light, 0.801), rgba($color-primary-dark, 0.808)) , url("../img/hero.jpg");
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
||||
|
||||
position: relative;
|
||||
|
||||
&__logo-box {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 4rem;
|
||||
}
|
||||
&__logo {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
.logo:hover{
|
||||
animation: moveInRight 1s ease-out;
|
||||
}
|
||||
*/
|
||||
|
||||
&__text-box{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
/*
|
||||
* Limpiar animaciones para evitar temblores
|
||||
* No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace
|
||||
*/
|
||||
backface-visibility: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
+11
-191
@@ -1,194 +1,14 @@
|
||||
$color-primary: #7ed56f;
|
||||
$color-primary-light: #55c57a;
|
||||
$color-primary-dark: #28b485;
|
||||
@import "abstracts/functions";
|
||||
@import "abstracts/mixins";
|
||||
@import "abstracts/variables";
|
||||
|
||||
$color-gray-dark: #777;
|
||||
$color-white: #fff;
|
||||
$color-black: #000;
|
||||
@import "base/base";
|
||||
@import "base/animations";
|
||||
@import "base/typography";
|
||||
@import "base/utilities";
|
||||
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
@import "components/button";
|
||||
@import "layout/header";
|
||||
@import "layout/grid";
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato",Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-weight: 400;
|
||||
/* font-size: 16px; */
|
||||
line-height: 1.7;
|
||||
color: $color-gray-dark;
|
||||
padding: 3rem;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 95vh;
|
||||
background-image: linear-gradient(to right bottom,rgba($color-primary-light, 0.801), rgba($color-primary-dark, 0.808)) , url("../img/hero.jpg");
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
||||
|
||||
position: relative;
|
||||
|
||||
&__logo-box {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 4rem;
|
||||
}
|
||||
&__logo {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
.logo:hover{
|
||||
animation: moveInRight 1s ease-out;
|
||||
}
|
||||
*/
|
||||
|
||||
&__text-box{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
/*
|
||||
* Limpiar animaciones para evitar temblores
|
||||
* No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace
|
||||
*/
|
||||
backface-visibility: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.heading--primary {
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
&-main {
|
||||
display: block;
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3.5rem;
|
||||
|
||||
animation-name: slideLeft;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
&-sub {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.75rem;
|
||||
|
||||
animation-name: slideRight;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeft {
|
||||
0% {
|
||||
transform: translateX(-16rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(1.5rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRight {
|
||||
0% {
|
||||
transform: translateX(16rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(-1.5rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideBottom {
|
||||
0% {
|
||||
transform: translateY(5rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:link,
|
||||
.btn:visited {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding: 1.5rem 4rem;
|
||||
display: inline-block;
|
||||
border-radius: 10rem;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.btn--animated {
|
||||
animation: slideBottom 0.7s ease-out .75s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-0.4rem);
|
||||
box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(-0.1rem);
|
||||
box-shadow: 0 .5rem 1rem rgba($color-black, 0.2);
|
||||
}
|
||||
|
||||
.btn--white {
|
||||
background-color: $color-white;
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
|
||||
.btn::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.btn--white::after{
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.btn:hover::after {
|
||||
transform: scaleX(1.4) scaleY(1.6);
|
||||
opacity: 0;
|
||||
}
|
||||
@import "pages/home"
|
||||
@@ -0,0 +1,5 @@
|
||||
.section-about {
|
||||
background-color: $color-grey-light-1;
|
||||
padding: 25rem 0;
|
||||
margin-top: -20vh;
|
||||
}
|
||||
Reference in new issue
Block a user