From 90ed85831f45ffe95c5ba257887b0c2d32775e82 Mon Sep 17 00:00:00 2001 From: elismountain Date: Thu, 9 Nov 2023 13:43:33 +0000 Subject: [PATCH] first lesson --- Natours/starter/css/style.css | 184 +++++++++++++++++++++++++++++++++- Natours/starter/index.html | 18 +++- 2 files changed, 199 insertions(+), 3 deletions(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 9b2d76f44e..dab3c1bc1c 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -5,4 +5,186 @@ 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; +} + +.header { + height: 95vh; + background-image: linear-gradient( + to right bottom, + rgba(126, 213, 111, 0.8), + rgba(40, 180, 131, 0.8)), + url(../img/hero.jpg); + background-size: cover; + background-position: top; + clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%); + position: relative; +} + +.logo-box { + position: absolute; + top: 40px; + left: 40px; +} + +.logo { + height: 35px; +} + +.logo:hover { + animation: moveInLeft 1s ease-out; + +} + +.text-box { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.heading-primary { + color: #fff; + text-transform: uppercase; + backface-visibility: hidden; + margin-bottom: 60px; +} + +.heading-primary-main { + display: block; + font-size: 60px; + font-weight: 400; + letter-spacing: 35px; + animation: moveInLeft; + animation-duration: 2s; + animation-timing-function: ease-out; +} + +.heading-primary-sub { + display: block; + font-size: 20px; + font-weight: 700; + letter-spacing: 17px; + animation: moveInRight; + animation-duration: 2s; + animation-timing-function: ease-out; +} + + +@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); + } + + 80% { + transform: translateX(-10px); + + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.btn:link, +.btn:visited { + text-transform: uppercase; + text-decoration: none; + padding: 15px 40px; + display: inline-block; + border-radius: 100px; + transition: all .2s; + position: relative; +} + +.btn:hover { + transform: translateY(-3px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); + +} + +.btn:active { + transform: translateY(-1px); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} + +.btn-white { + background-color: #fff; + color: #777; +} + +.btn::after { + content: ""; + display: inline-block; + height: 100%; + width: 100%; + border-radius: 100px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + transition: all .4s; +} + +.btn-white::after { + background-color: #fff; + color: #777; +} + +.btn:hover::after { + transform: scaleX(1.2) scaleY(1.5); + opacity: 0; +} + + +@keyframes moveInBottom { + 0% { + opacity: 0; + transform: translateY(30px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.btn-animated { + animation: moveInBottom .5s ease-out .75s; + animation-fill-mode: backwards; +} + diff --git a/Natours/starter/index.html b/Natours/starter/index.html index d590f27228..7da66dfe13 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -13,7 +13,21 @@ Natours | Exciting tours for adventurous people - - +
+
+
+ +
+
> +
+

+ Outdoors + is there life happens +

+ + discover out tours + +
+