From c24274208b078f4379298af410325baa2ed12717 Mon Sep 17 00:00:00 2001 From: David Garbanzo Date: Fri, 19 Nov 2021 21:35:12 -0600 Subject: [PATCH 1/9] Initial html modification --- Natours/starter/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Natours/starter/index.html b/Natours/starter/index.html index d590f27228..6c89b86123 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -13,7 +13,6 @@ Natours | Exciting tours for adventurous people - - +
From 23a0fc58c33f9c81c1b4919bb98c9cbdbefc994e Mon Sep 17 00:00:00 2001 From: David Garbanzo Date: Fri, 19 Nov 2021 23:43:37 -0600 Subject: [PATCH 2/9] Create and animate the header of the landing page --- Natours/starter/css/style.css | 106 +++++++++++++++++++++++++++++++++- Natours/starter/index.html | 42 +++++++++----- 2 files changed, 133 insertions(+), 15 deletions(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 9b2d76f44e..b0bb38e4cd 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -5,4 +5,108 @@ 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; +} + +.header { + height: 95vh; + background-image: linear-gradient( + to right bottom, + rgba(126, 213, 111, 0.8), + rgba(39, 180, 133, 0.8) + ), + url(../img/hero.jpg); + background-size: cover; + background-position-y: top; + position: relative; + + clip-path: polygon(0 0, 100% 0, 100% 70vh, 0 100%); +} + +.logo-box { + position: absolute; + top: 40px; + left: 40px; +} + +.logo { + height: 35px; +} + +.heading-primary { + color: #fff; + text-transform: uppercase; + + backface-visibility: hidden; +} + +.heading-primary-main { + display: block; + font-size: 60px; + font-weight: 400; + letter-spacing: 35px; + + animation-name: moveInLeft; + animation-duration: 1s; + animation-timing-function: ease-in; +} + +.heading-primary-sub { + display: block; + font-size: 20px; + font-weight: 700; + letter-spacing: 17.4px; + + animation-name: moveInRight; + animation-duration: 1s; + animation-timing-function: ease-in-out; +} + +.text-box { + position: absolute; + top: 45%; + left: 50%; + transform: translate(-50%, -50%); +} + +@keyframes moveInLeft { + 0% { + opacity: 0; + transform: translate(-100px); + } + 80% { + transform: translate(10px); + } + 100% { + opacity: 1; + transform: translate(0); + } +} + +@keyframes moveInRight { + 0% { + opacity: 0; + transform: translate(50px); + } + 80% { + transform: translate(-10px); + } + 100% { + opacity: 1; + transform: translate(0); + } +} diff --git a/Natours/starter/index.html b/Natours/starter/index.html index 6c89b86123..468f1fc3a5 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -1,18 +1,32 @@ - - - - - + + + - - - - - Natours | Exciting tours for adventurous people - - -
- + + + + + + + Natours | Exciting tours for adventurous people + + +
+
+ +
+ +
+

+ Outdoors + is where life happens +

+
+
+ From 965299a5d731405b9a0c9c3e3b1e925c132e21fb Mon Sep 17 00:00:00 2001 From: David Garbanzo Date: Mon, 22 Nov 2021 18:11:10 -0600 Subject: [PATCH 3/9] create header button --- Natours/starter/css/style.css | 27 +++++++++++++++++++++++++++ Natours/starter/index.html | 1 + 2 files changed, 28 insertions(+) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index b0bb38e4cd..99b3cc8d58 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -52,6 +52,7 @@ body { text-transform: uppercase; backface-visibility: hidden; + margin-bottom: 60px; } .heading-primary-main { @@ -81,6 +82,7 @@ body { top: 45%; left: 50%; transform: translate(-50%, -50%); + text-align: center; } @keyframes moveInLeft { @@ -110,3 +112,28 @@ body { transform: translate(0); } } + +.btn:link, btn:visited{ + text-transform: uppercase; + text-decoration:none; + padding: 15px 40px; + display: inline-block; + border-radius: 100px; + + transition: all .2s; +} + +.btn-white{ + background: #fff; + color: #777; +} + +.btn:hover{ + transform: translateY(-3px); + box-shadow: 0 10px 20px rgba(0, 0, 0, .2); +} + +.btn:active{ + transform: translateY(-1px); + box-shadow: 0 5px 10px rgba(0, 0, 0, .2); +} \ No newline at end of file diff --git a/Natours/starter/index.html b/Natours/starter/index.html index 468f1fc3a5..222846c6c9 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -26,6 +26,7 @@

Outdoors is where life happens

+ Discover our tours From a27455a3ae09c770b2cfe7817e225b89c90f63b9 Mon Sep 17 00:00:00 2001 From: David Garbanzo Date: Mon, 22 Nov 2021 22:28:12 -0600 Subject: [PATCH 4/9] animate header button --- Natours/starter/css/style.css | 61 +++++++++++++++++++++++++++++------ Natours/starter/index.html | 2 +- 2 files changed, 53 insertions(+), 10 deletions(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 99b3cc8d58..9f88635a86 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -113,27 +113,70 @@ body { } } -.btn:link, btn:visited{ +@keyframes moveInBotton { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translate(0); + } +} + +.btn:link, +btn:visited { text-transform: uppercase; - text-decoration:none; + text-decoration: none; padding: 15px 40px; display: inline-block; border-radius: 100px; - transition: all .2s; + transition: all 0.2s; + position: relative; } -.btn-white{ +.btn-white { background: #fff; color: #777; } -.btn:hover{ +.btn:hover { transform: translateY(-3px); - box-shadow: 0 10px 20px rgba(0, 0, 0, .2); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } -.btn:active{ +.btn:active { transform: translateY(-1px); - box-shadow: 0 5px 10px rgba(0, 0, 0, .2); -} \ No newline at end of file + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} + +.btn::after { + content: ""; + display: inline-block; + height: 100%; + width: 100%; + border-radius: 100px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + transition: all 0.4s; +} + +.btn-white::after { + background-color: #fff; +} + +.btn:hover::after { + transform: scaleX(1.4) scaleY(1.6); + opacity: 0; +} + +.btn-animated { + animation-name: moveInBotton; + animation-duration: 0.5s; + animation-timing-function: ease-in-out; + animation-delay: 0.75s; + animation-fill-mode: backwards; +} diff --git a/Natours/starter/index.html b/Natours/starter/index.html index 222846c6c9..2c41c88c4d 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -26,7 +26,7 @@

Outdoors is where life happens

- Discover our tours + Discover our tours From 250294a25bce3f73753775bd1dffcbeaeae32077 Mon Sep 17 00:00:00 2001 From: David Garbanzo Date: Mon, 22 Nov 2021 22:54:09 -0600 Subject: [PATCH 5/9] change header button color --- Natours/starter/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 9f88635a86..d1bf7f8aa4 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -165,7 +165,7 @@ btn:visited { } .btn-white::after { - background-color: #fff; + background-color: whitesmoke; } .btn:hover::after { From 0e4eb86afe10910fb44cd1909fd16b9b699eb06c Mon Sep 17 00:00:00 2001 From: David Garbanzo Date: Mon, 22 Nov 2021 23:04:10 -0600 Subject: [PATCH 6/9] color test --- Natours/starter/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index d1bf7f8aa4..9f88635a86 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -165,7 +165,7 @@ btn:visited { } .btn-white::after { - background-color: whitesmoke; + background-color: #fff; } .btn:hover::after { From ae3d4d92a4c867b8ed862cb34bbfb8ca6469dee4 Mon Sep 17 00:00:00 2001 From: David Garbanzo Date: Mon, 22 Nov 2021 23:33:40 -0600 Subject: [PATCH 7/9] color test --- Natours/starter/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 9f88635a86..63c170308e 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -165,7 +165,7 @@ btn:visited { } .btn-white::after { - background-color: #fff; + background-color: blue; } .btn:hover::after { From e967b093d4dbac5ee2bc11650cc2e091cd9493a8 Mon Sep 17 00:00:00 2001 From: David Garbanzo Date: Mon, 22 Nov 2021 23:42:39 -0600 Subject: [PATCH 8/9] color test --- Natours/starter/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 63c170308e..a9ca303757 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -165,7 +165,7 @@ btn:visited { } .btn-white::after { - background-color: blue; + background-color: white; } .btn:hover::after { From b33a90bc3f806607545a81f9474388b9d5df3d10 Mon Sep 17 00:00:00 2001 From: David Garbanzo Date: Mon, 22 Nov 2021 23:43:18 -0600 Subject: [PATCH 9/9] color test --- Natours/starter/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index a9ca303757..d1d7700647 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -165,7 +165,7 @@ btn:visited { } .btn-white::after { - background-color: white; + background-color: red; } .btn:hover::after {