-
-
+
+
+
+
diff --git a/Natours/starter/node_modules/.package-lock.json b/Natours/starter/node_modules/.package-lock.json
index 99b4f89..c7c9cdc 100644
--- a/Natours/starter/node_modules/.package-lock.json
+++ b/Natours/starter/node_modules/.package-lock.json
@@ -521,6 +521,15 @@
"node": ">=0.10.0"
}
},
+ "node_modules/bindings": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+ "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+ "optional": true,
+ "dependencies": {
+ "file-uri-to-path": "1.0.0"
+ }
+ },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1235,6 +1244,12 @@
"node": ">=0.8.0"
}
},
+ "node_modules/file-uri-to-path": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+ "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+ "optional": true
+ },
"node_modules/fill-range": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -1329,6 +1344,24 @@
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
"dev": true
},
+ "node_modules/fsevents": {
+ "version": "1.2.13",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+ "deprecated": "The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2",
+ "hasInstallScript": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "dependencies": {
+ "bindings": "^1.5.0",
+ "nan": "^2.12.1"
+ },
+ "engines": {
+ "node": ">= 4.0"
+ }
+ },
"node_modules/function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
diff --git a/Natours/starter/sass/abstracts/_variables.scss b/Natours/starter/sass/abstracts/_variables.scss
index 29bd400..af73a00 100644
--- a/Natours/starter/sass/abstracts/_variables.scss
+++ b/Natours/starter/sass/abstracts/_variables.scss
@@ -1,6 +1,6 @@
//Colors
-$color-primary: #7ed56f;
-$color-primary-light: #55c57a;
+$color-primary-light: #7ed56f;
+$color-primary: #55c57a;
$color-primary-dark: #28b485;
$color-grey-light-1: #f7f7f7;
@@ -12,4 +12,7 @@ $color-black: #000;
//Grid Spacing
$grid-width: 114rem;
$gutter-vertical: 8rem;
-$gutter-horizontal: 6rem;
\ No newline at end of file
+$gutter-horizontal: 6rem;
+
+//Font sizing
+$default-font-size: 1.6rem;
\ No newline at end of file
diff --git a/Natours/starter/sass/base/_typography.scss b/Natours/starter/sass/base/_typography.scss
index 4dd3c66..bdcf206 100644
--- a/Natours/starter/sass/base/_typography.scss
+++ b/Natours/starter/sass/base/_typography.scss
@@ -54,4 +54,17 @@ body {
transform: skewY(2deg) skewX(15deg) scale(1.1);
text-shadow: .5rem 1rem 2rem rgba($color-black, .2);
}
+}
+
+.heading--terciary {
+ font-size: $default-font-size;
+ font-weight: 700;
+ text-transform: capitalize;
+}
+
+.paragraph {
+ font-size: $default-font-size;
+ &:not(:last-child) {
+ margin-bottom: 3rem;
+ }
}
\ No newline at end of file
diff --git a/Natours/starter/sass/base/_utilities.scss b/Natours/starter/sass/base/_utilities.scss
index e90902f..6612489 100644
--- a/Natours/starter/sass/base/_utilities.scss
+++ b/Natours/starter/sass/base/_utilities.scss
@@ -2,6 +2,14 @@
text-align: center;
}
-.u-margin-bottom-8 {
+.u-margin-bottom-small {
+ margin-bottom: 2rem;
+}
+
+.u-margin-bottom-medium {
+ margin-bottom: 4rem;
+}
+
+.u-margin-bottom-big {
margin-bottom: 8rem;
}
\ No newline at end of file
diff --git a/Natours/starter/sass/components/_button.scss b/Natours/starter/sass/components/_button.scss
index 328ed49..f5be797 100644
--- a/Natours/starter/sass/components/_button.scss
+++ b/Natours/starter/sass/components/_button.scss
@@ -8,7 +8,7 @@
border-radius: 10rem;
transition: all 0.2s;
position: relative;
- font-size: 1.6rem;
+ font-size: $default-font-size;
}
&--animated {
@@ -50,4 +50,30 @@
z-index: -1;
transition: all 0.4s;
}
+}
+
+.btn-text {
+ &:link,
+ &:visited {
+ font-size: $default-font-size;
+ color: $color-primary;
+ display: inline-block;
+ text-decoration: none;
+ border-bottom: 1px solid $color-primary;
+ padding: 3px;
+ transition: all .2s;
+ }
+
+ &:hover {
+ background-color: $color-primary;
+ color: $color-white;
+ box-shadow: 0 1rem 2reem rgba($color-black, .15);
+ transform: translateY(-2px);
+ }
+
+ &:active {
+
+ box-shadow: 0 .5rem 1reem rgba($color-black, .15);
+ transform: translateY(0px);
+ }
}
\ No newline at end of file
diff --git a/Natours/starter/sass/components/_composition.scss b/Natours/starter/sass/components/_composition.scss
new file mode 100644
index 0000000..fcc5152
--- /dev/null
+++ b/Natours/starter/sass/components/_composition.scss
@@ -0,0 +1,38 @@
+.composition {
+ position: relative;
+ &__photo {
+ width: 55%;
+ box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
+ border-radius: 2px;
+ position: absolute;
+ z-index: 10;
+ transition: all .2s;
+ outline-offset: 2rem;
+
+ &--p1 {
+ left: 0;
+ top: -2rem;
+ }
+
+ &--p2 {
+ right: 0;
+ top: 2rem;
+ }
+
+ &--p3 {
+ left: 20%;
+ top: 10rem;
+ }
+
+ &:hover {
+ outline: 1.5rem solid $color-primary;
+ transform: scale(1.05) translateY(-.5rem);
+ box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
+ z-index: 20;
+ }
+ }
+
+ &:hover &__photo:not(:hover) {
+ transform: scale(0.9);
+ }
+}
\ No newline at end of file
diff --git a/Natours/starter/sass/components/_feature-box.scss b/Natours/starter/sass/components/_feature-box.scss
new file mode 100644
index 0000000..6b91b8f
--- /dev/null
+++ b/Natours/starter/sass/components/_feature-box.scss
@@ -0,0 +1,26 @@
+.feature-box {
+ background-color: rgba($color-white, .8);
+ font-size: 1.5rem;
+ padding: 2.5rem;
+ text-align: center;
+ border-radius: 3px;
+ box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
+ transition: transform .3s;
+
+ &__icon {
+ font-size: 6rem;
+ margin-bottom: .5rem;
+ display: inline-block;
+ background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
+ -webkit-background-clip: text;
+ color: transparent;
+ }
+
+ &__text {
+
+ }
+
+ &:hover {
+ transform: translateY(-1.5rem) scale(1.03);
+ }
+}
\ No newline at end of file
diff --git a/Natours/starter/sass/main.scss b/Natours/starter/sass/main.scss
index ababd5c..3cae0d7 100644
--- a/Natours/starter/sass/main.scss
+++ b/Natours/starter/sass/main.scss
@@ -8,6 +8,9 @@
@import "base/utilities";
@import "components/button";
+@import "components/composition";
+@import "components/feature-box";
+
@import "layout/header";
@import "layout/grid";
diff --git a/Natours/starter/sass/pages/_home.scss b/Natours/starter/sass/pages/_home.scss
index c0e4e81..5c38bd2 100644
--- a/Natours/starter/sass/pages/_home.scss
+++ b/Natours/starter/sass/pages/_home.scss
@@ -2,4 +2,17 @@
background-color: $color-grey-light-1;
padding: 25rem 0;
margin-top: -20vh;
+}
+
+.section-features {
+ padding: 20rem 0;
+ background-image: linear-gradient(to right bottom,rgba($color-primary-light, 0.801), rgba($color-primary-dark, 0.808)) , url("../img/nat-4.jpg");
+ background-size: cover;
+
+ margin-top: -10rem;
+ transform: skewY(-7deg);
+
+ & > * {
+ transform: skewY(7deg);
+ }
}
\ No newline at end of file
diff --git a/README.md b/README.md
index 907f9cf..08e3102 100644
--- a/README.md
+++ b/README.md
@@ -102,4 +102,36 @@ Preprocesador de css.
[class$='col-'] {
background-color: red;
}
-```
\ No newline at end of file
+```
+
+- Select all elements but the last
+
+```css
+&:not(:last-child) {
+ //stuff
+}
+```
+
+- Select elements not hovered on continer hovered 'nombre\_\_photo'
+````css
+&:hover &__photo:not(:hover) {
+ transform: scale(0.9);
+}
+````
+
+## Bordes
+
+Borders can be achieved on a more advanced way with `outline`, it allows us to create a gap on a simple manner.
+
+- Outline
+````css
+outline-offset: 2rem;
+outline: 1.5rem solid $color-primary;
+````
+
+## Shadows
+
+- box-shadow : `box-shadow: offsetX offsetY blur color`
+```css
+box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
+```
- Exciting tours for adventurous people -
+
+
+ Exciting tours for adventurous people +
- Text left
+
You're going to fall n love with nature
++ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo ipsum magnam, accusantium quo modi deserunt excepturi praesentium dolores dolorem cumque consequatur quod veniam! +
+Live adventure like never have before
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo ipsum magnam. +
+ Learn more →
- Images right
+
+
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+ Explore the world
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta. +
+
+
+
+
+
+ Meet nature
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta. +
+
+
+
+
+
+ Find your way
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta. +
+
+
+
+
Live a healthier life
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta. +
+