fluid layouts started

Natours/starter/sass/base/_animations.scss

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

Natours/starter/sass/base/_base.scss

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

Natours/starter/sass/base/_typography.scss

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

Natours/starter/sass/base/_utilities.scss

@@ -0,0 +1,7 @@
+.u-center-text {
+    text-align: center;
+}
+
+.u-margin-bottom-8 {
+    margin-bottom: 8rem;
+}