diff --git a/Natours/starter/README.md b/Natours/starter/README.md new file mode 100644 index 0000000..572b7fc --- /dev/null +++ b/Natours/starter/README.md @@ -0,0 +1,35 @@ +## Run + +$ live-server +$ npm run compile:sass + +## Bases of responsive design + +- Use fluid layouts +- Use `%` instead of `px`, especially in images +- Use `max-width` instead of `width`, especially in images +- Use `rem` instead of `px` +- Use media queries when the rest fails + +## Fluid Layouts + +- Float : older way of doing the same job +- Flexbox : 1 dimensional rows +- CSS Grid : 2 dimensional grids + + +## Selectors + +- Select all the elements that starts with col- +```css +[class^='col-'] { + background-color: red; +} +``` + +- Select all the elements that ends with col- +```css +[class$='col-'] { + background-color: red; +} +``` \ No newline at end of file diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index af5d1eb..5f0bb62 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -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; } diff --git a/Natours/starter/index.html b/Natours/starter/index.html index c4f8641..4e49e51 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -26,5 +26,86 @@ Discover our tours + + + + + + + Exciting tours for adventurous people + + + + + Text left + + + Images right + + + + + +