fluid layouts started

Natours/starter/sass/layout/_grid.scss

@@ -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});
+    }
+}

Natours/starter/sass/layout/_header.scss

@@ -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;
+    }
+}