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
+114
-68
@@ -10,70 +10,9 @@ 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: #777;
|
||||
padding: 3rem;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.header {
|
||||
height: 95vh;
|
||||
background-image: linear-gradient(to right bottom, rgba(85, 197, 122, 0.801), rgba(40, 180, 133, 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; }
|
||||
|
||||
.header__logo-box {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 4rem; }
|
||||
|
||||
.header__logo {
|
||||
height: 3.5rem; }
|
||||
|
||||
/*
|
||||
.logo:hover{
|
||||
animation: moveInRight 1s ease-out;
|
||||
}
|
||||
*/
|
||||
.header__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: #fff;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6rem; }
|
||||
|
||||
.heading--primary-main {
|
||||
display: block;
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3.5rem;
|
||||
animation-name: slideLeft;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in; }
|
||||
|
||||
.heading--primary-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);
|
||||
@@ -102,8 +41,56 @@ body {
|
||||
transform: translateY(0);
|
||||
opacity: 1; } }
|
||||
|
||||
.btn:link,
|
||||
.btn:visited {
|
||||
body {
|
||||
font-family: "Lato",Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-weight: 400;
|
||||
/* font-size: 16px; */
|
||||
line-height: 1.7;
|
||||
color: #777; }
|
||||
|
||||
.heading--primary {
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6rem; }
|
||||
.heading--primary-main {
|
||||
display: block;
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3.5rem;
|
||||
animation-name: slideLeft;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in; }
|
||||
.heading--primary-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, #55c57a, #28b485);
|
||||
background-clip: 0;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
transition: all .2s; }
|
||||
.heading--secondary:hover {
|
||||
transform: skewY(2deg) skewX(15deg) scale(1.1);
|
||||
text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); }
|
||||
|
||||
.u-center-text {
|
||||
text-align: center; }
|
||||
|
||||
.u-margin-bottom-8 {
|
||||
margin-bottom: 8rem; }
|
||||
|
||||
.btn:link, .btn:visited {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding: 1.5rem 4rem;
|
||||
@@ -120,6 +107,9 @@ body {
|
||||
.btn:hover {
|
||||
transform: translateY(-0.4rem);
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
|
||||
.btn:hover::after {
|
||||
transform: scaleX(1.4) scaleY(1.6);
|
||||
opacity: 0; }
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(-0.1rem);
|
||||
@@ -128,6 +118,8 @@ body {
|
||||
.btn--white {
|
||||
background-color: #fff;
|
||||
color: #777; }
|
||||
.btn--white::after {
|
||||
background-color: #fff; }
|
||||
|
||||
.btn::after {
|
||||
content: "";
|
||||
@@ -141,9 +133,63 @@ body {
|
||||
z-index: -1;
|
||||
transition: all 0.4s; }
|
||||
|
||||
.btn--white::after {
|
||||
background-color: #fff; }
|
||||
.header {
|
||||
height: 95vh;
|
||||
background-image: linear-gradient(to right bottom, rgba(85, 197, 122, 0.801), rgba(40, 180, 133, 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:hover{
|
||||
animation: moveInRight 1s ease-out;
|
||||
}
|
||||
*/ }
|
||||
.header__logo-box {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 4rem; }
|
||||
.header__logo {
|
||||
height: 3.5rem; }
|
||||
.header__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; }
|
||||
|
||||
.btn:hover::after {
|
||||
transform: scaleX(1.4) scaleY(1.6);
|
||||
opacity: 0; }
|
||||
.row {
|
||||
max-width: 114rem;
|
||||
margin: 0 auto; }
|
||||
.row:not(:last-child) {
|
||||
margin-bottom: 8rem; }
|
||||
.row::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.row [class^='col-'] {
|
||||
float: left; }
|
||||
.row [class^='col-']:not(:last-child) {
|
||||
margin-right: 6rem; }
|
||||
.row .col-1-of-2 {
|
||||
width: calc((100% - 6rem) / 2); }
|
||||
.row .col-1-of-3 {
|
||||
width: calc((100% - 2 * 6rem) / 3); }
|
||||
.row .col-2-of-3 {
|
||||
width: calc(((100% - 2 * 6rem) / 3) * 2 + 6rem); }
|
||||
.row .col-1-of-4 {
|
||||
width: calc((100% - 3 * 6rem) / 4); }
|
||||
.row .col-2-of-4 {
|
||||
width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem); }
|
||||
.row .col-3-of-4 {
|
||||
width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); }
|
||||
|
||||
.section-about {
|
||||
background-color: #f7f7f7;
|
||||
padding: 25rem 0;
|
||||
margin-top: -20vh; }
|
||||
Reference in new issue
Block a user