From 8cdc879bb5cb054a3797bed6971a4b8ae6d51478 Mon Sep 17 00:00:00 2001 From: Soledad Li Wang Date: Thu, 17 Jun 2021 16:17:58 -0300 Subject: [PATCH 1/2] Section 2: First steps --- Natours/starter/css/style.css | 176 +++++++++++++++++++++++++++++++++- Natours/starter/index.html | 14 ++- 2 files changed, 188 insertions(+), 2 deletions(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 9b2d76f44e..87950fb1dc 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -5,4 +5,178 @@ Light green: #7ed56f Medium green: #55c57a Dark green: #28b485 -*/ \ No newline at end of file +*/ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Lato", sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.7; + color: #777; + padding: 30px; /* para que el rededor tenga un borde */ +} + +.header { + height: 95vh; + background-image: linear-gradient( + to right bottom, /*aca dice que vaya para la derecha y abajo (esquina de abajo derecha) */ + rgba(126, 213, 111, 0.8), rgb(40, 180, 131, 0.8) ), /*LINEAR-GRADIENT para poner el gradiante de colores por encima de la imagen, por eso esta adelante tambien*/ + url("../img/hero.jpg"); /*URL para obtener la imagen desde la carpeta img*/ + background-size: cover; /* para que siempre cubra la totalidad de la pantalla, por mas que se agrande/achique */ + background-position: top; /* hace que siempre se muestre arriba de todo, sin importar si se mueve la ventada */ + position: relative; /* referencia para los elementos que esten dentro de ella, como el logo, que tiene top y left dependiendo de esta posicion */ + + clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); /* las posiciones son x y, x y, x y, x y, comenzando desde la esquina izquierda superior y para la derecha */ +} + +.logo-box { + position: absolute; + top: 40px; + left: 40px; +} + +.logo { + height: 35px; +} + +.text-box { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; /* pone todo dentro de este cuadro en el centro */ + +} + +.heading-primary { + color: #fff; + text-transform: uppercase; + + backface-visibility: hidden; + margin-bottom: 60px; /* mueve el elemento para abajo */ +} + +.heading-primary-main { + display: block; + font-size: 60px; + font-weight: 400; + letter-spacing: 35px; + + animation-name: moveInLeft; /* all this animation can be replace by animation: name duration function delay */ + animation-duration: 1s; + animation-timing-function: ease-in; +} + +.heading-primary-sub { + display: block; + font-size: 20px; + font-weight: 700; + letter-spacing:17.4px; + + animation: moveInRight 1s ease-in; +} + +@keyframes moveInLeft { + 0% { + opacity: 0; + transform: translateX(-100px); + } + + 80% { + transform: translateX(10px); + } + + 100% { + opacity: 1; + transform: translateX(0); + + } +} + +@keyframes moveInRight { + 0% { + opacity: 0; + transform: translateX(100px); /* se desplaza por el eje x */ + } + + 80% { + transform: translateX(-10px); + } + + 100% { + opacity: 1; + transform: translateX(0); + + } +} + +@keyframes moveInBottom { + 0% { + opacity: 0; + transform: translateY(30px); /* se desplaza por el eje x */ + } + + 100% { + opacity: 1; + transform: translateY(0); + + } +} + +.btn:link, +.btn:visited { + text-transform: uppercase; + text-decoration: none; + padding: 15px 40px; + display: inline-block; + border-radius: 100px; + transition: all 0.2s; + position: relative; +} + +.btn:hover { /* hover cuando el mouse se posiciona sobre ella */ + transform: translateY(-3px); + box-shadow: 0 10px 20px rgba(0,0,0,.2); +} + +.btn:active { /* cuando se realiza la accion del click */ + transform: translateY(-1px); + box-shadow: 0 5px 10px rgba(0,0,0,.2); +} + +.btn-white { + background-color: #fff; + color: #777; +} + +.btn::after { /* sudo tener como una copia del boton dentras del boton */ + content: ""; + display: inline-block; /* porque el boton estaba en inline-block ya */ + height: 100%; /* 100% porque es igual al otro boton, entocnes 100% mismo tamaño */ + width: 100%; + border-radius: 100px; + position: absolute; + top: 0; + left: 0; + z-index: -1; /* define la posicion del elemento cuando uno esta encima del otro, entonces -1 es atras */ + transition: all 0.4s; +} + +.btn-white::after { + background-color: #fff; +} + +.btn:hover::after { /* esto pasa solo cuando nosotros estamos sobre el hover */ + transform: scaleX(1.4) scaleY(1.6); /* increse de size of the element */ + opacity: 0; /* hace un gradiante a transparente, entonces hace efecto de que desaparece */ +} + +.btn-animated { + animation: moveInBottom .5s ease-out .75s; + animation-fill-mode: backwards; /* automaticamente pone los estilos en 0% antes de que la animacion empiece */ +} \ No newline at end of file diff --git a/Natours/starter/index.html b/Natours/starter/index.html index d590f27228..952ee529e6 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -13,7 +13,19 @@ Natours | Exciting tours for adventurous people - +
+
+ +
+
+

+ Outdoors + is where life happens +

+ + Discover our tours +
+
From 810d1718accc96115c65cfa160679e1e3924dc67 Mon Sep 17 00:00:00 2001 From: Soledad Li Wang Date: Thu, 17 Jun 2021 17:47:08 -0300 Subject: [PATCH 2/2] first steps --- Natours/starter/css/style.css | 2 +- Natours/starter/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 87950fb1dc..aed52d48a4 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -178,5 +178,5 @@ body { .btn-animated { animation: moveInBottom .5s ease-out .75s; - animation-fill-mode: backwards; /* automaticamente pone los estilos en 0% antes de que la animacion empiece */ + animation-fill-mode: backwards; /*automaticamente pone los estilos en 0% antes de que la animacion empiece */ } \ No newline at end of file diff --git a/Natours/starter/index.html b/Natours/starter/index.html index 952ee529e6..af10981f26 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -23,7 +23,7 @@

is where life happens

- Discover our tours + Discover our tours