diff --git a/Natours/starter/.vscode/launch.json b/Natours/starter/.vscode/launch.json new file mode 100644 index 0000000000..4a5e3a8ba2 --- /dev/null +++ b/Natours/starter/.vscode/launch.json @@ -0,0 +1,26 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Attach to Chrome", + "port": 9222, + "request": "attach", + "type": "pwa-chrome", + "webRoot": "${workspaceFolder}" + }, + { + "name": "Launch Chrome", + "request": "launch", + "type": "pwa-chrome", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + + + + + ] +} \ No newline at end of file diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 9b2d76f44e..2d9d39e373 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -5,4 +5,145 @@ 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-size: 16px; + font-weight: 400; + font-family: "Lato", sans-serif; + line-height: 1.7; + color: rgb(255, 255, 255); + padding: 30px; +} +header { + height: 95vh; + background-image: linear-gradient(to right, #7ed56fc2, #28b485d0), + url(../img/hero.jpg); + background-size: cover; + background-position: top; + position: relative; + clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%); +} +.logo-box { + position: absolute; + top: 40px; + left: 40px; +} +.logo { + height: 34px; +} +.text-box { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} +.btn:link, +.btn:visited { + text-decoration: none; + text-transform: uppercase; + position: relative; + transition: all 0.2s; +} +.btn:hover { + transform: translateY(-3px); + box-shadow: 0 10px 20px #252726d0; +} +.btn:active { + transform: translateY(-1px); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} +.btn-white { + background-color: #fff; + color: #777; + padding: 10px 40px; + border-radius: 100px; + display: inline-block; +} +.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: white; +} +.btn:hover::after { + transform: scaleX(1.4) scaleY(1.6); + opacity: 0; +} +.btn-animated { + animation: moveInBottom .5s ease-out .75s ; + animation-fill-mode: backwards; +} +.heading-primary { + color: #ffffff; + text-transform: uppercase; + margin-bottom: 60px; +} +.heading-primary-main { + letter-spacing: 35px; + display: block; + font-weight: 400; + font-size: 60px; + animation-name: moveInRight; + animation-duration: 1s; + animation-timing-function: ease-out; + backface-visibility: hidden; +} +.heading-priamry-sub { + letter-spacing: 16.4px; + display: block; + font-weight: 700px; + font-size: 20px; + animation: moveToLeft ease-out 1s; + backface-visibility: hidden; +} +@keyframes moveInRight { + 1% { + opacity: 0; + transform: translateX(-100%) rotate(90deg); + } + 80% { + transform: translateX(10%); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} +@keyframes moveToLeft { + 1% { + opacity: 0; + transform: translateX(100%) rotate(90deg); + } + 80% { + transform: translateX(-10%); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} +@keyframes moveInBottom { + 1% { + opacity: 0; + transform: translateY(30%) ; + } + 100% { + opacity: 1; + transform: translateX(0); + } +} diff --git a/Natours/starter/index.html b/Natours/starter/index.html index d590f27228..a3d11ca767 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -12,8 +12,20 @@