From 5ea7df518cbc89236dcb58a89721d623c3465b2a Mon Sep 17 00:00:00 2001 From: Deep9110 <99deepsundar@gmail.com> Date: Tue, 12 Oct 2021 11:49:11 +0530 Subject: [PATCH] Added contact us page animation effect to the webpage --- .vscode/settings.json | 3 + Tinder-for-Dogs/css/styles.css | 241 ++++++++++++++++++++++++++++++++- Tinder-for-Dogs/index.html | 56 ++++++++ 3 files changed, 298 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Tinder-for-Dogs/css/styles.css b/Tinder-for-Dogs/css/styles.css index 0aa1ab6..5bf0e2e 100644 --- a/Tinder-for-Dogs/css/styles.css +++ b/Tinder-for-Dogs/css/styles.css @@ -63,8 +63,8 @@ h3{ font-size: 22px; font-family: "Ubuntu"; font-weight: lighter; - color: #ffffff; - border: 1px solid rgb(102, 235, 14); + color: #b9b9b9; + border: 1.5px solid rgb(16, 17, 16); border-radius: 8px; } @@ -213,3 +213,240 @@ margin: 0 -35px 0 35px; } } +*, *:before, *:after { + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + body { + background: linear-gradient(to right, #ea1d6f 0%, #eb466b 100%); + font-size: 12px; + } + + body, button, input { + font-family: 'Montserrat', sans-serif; + font-weight: 700; + letter-spacing: 1.4px; + } + + .background { + display: flex; + min-height: 100vh; + } + + .container { + flex: 0 1 700px; + margin: auto; + padding: 10px; + } + + .screen { + position: relative; + background: #3e3e3e; + border-radius: 15px; + } + + .screen:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 20px; + right: 20px; + bottom: 0; + border-radius: 15px; + box-shadow: 0 20px 40px rgba(0, 0, 0, .4); + z-index: -1; + } + + .screen-header { + display: flex; + align-items: center; + padding: 10px 20px; + background: #4d4d4f; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + } + + .screen-header-left { + margin-right: auto; + } + + .screen-header-button { + display: inline-block; + width: 8px; + height: 8px; + margin-right: 3px; + border-radius: 8px; + background: white; + } + + .screen-header-button.close { + background: #ed1c6f; + } + + .screen-header-button.maximize { + background: #e8e925; + } + + .screen-header-button.minimize { + background: #74c54f; + } + + .screen-header-right { + display: flex; + } + + .screen-header-ellipsis { + width: 3px; + height: 3px; + margin-left: 2px; + border-radius: 8px; + background: #999; + } + + .screen-body { + display: flex; + } + + .screen-body-item { + flex: 1; + padding: 50px; + } + + .screen-body-item.left { + display: flex; + flex-direction: column; + } + + .app-title { + display: flex; + flex-direction: column; + position: relative; + color: #1dea1d; + font-size: 26px; + } + + .app-title:after { + content: ''; + display: block; + position: absolute; + left: 0; + bottom: -10px; + width: 25px; + height: 4px; + background: #ea1d6f; + } + + .app-contact { + margin-top: auto; + font-size: 8px; + color: #888; + } + + .app-form-group { + margin-bottom: 15px; + } + + .app-form-group.message { + margin-top: 40px; + } + + .app-form-group.buttons { + margin-bottom: 0; + text-align: right; + } + + .app-form-control { + width: 100%; + padding: 10px 0; + background: none; + border: none; + border-bottom: 1px solid #666; + color: #ddd; + font-size: 14px; + text-transform: uppercase; + outline: none; + transition: border-color .2s; + } + + .app-form-control::placeholder { + color: #666; + } + + .app-form-control:focus { + border-bottom-color: #ddd; + } + + .app-form-button { + background: none; + border: none; + color: #1dea5b; + font-size: 14px; + cursor: pointer; + outline: none; + } + + .app-form-button:hover { + color: #b9134f; + } + + .credits { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + color: #ffa4bd; + font-family: 'Roboto Condensed', sans-serif; + font-size: 16px; + font-weight: normal; + } + + .credits-link { + display: flex; + align-items: center; + color: #fff; + font-weight: bold; + text-decoration: none; + } + + .dribbble { + width: 20px; + height: 20px; + margin: 0 5px; + } + + @media screen and (max-width: 520px) { + .screen-body { + flex-direction: column; + } + + .screen-body-item.left { + margin-bottom: 30px; + } + + .app-title { + flex-direction: row; + } + + .app-title span { + margin-right: 12px; + } + + .app-title:after { + display: none; + } + } + + @media screen and (max-width: 600px) { + .screen-body { + padding: 40px; + } + + .screen-body-item { + padding: 0; + } + } + + diff --git a/Tinder-for-Dogs/index.html b/Tinder-for-Dogs/index.html index c0e9cde..b5196d5 100644 --- a/Tinder-for-Dogs/index.html +++ b/Tinder-for-Dogs/index.html @@ -17,6 +17,8 @@ + + @@ -57,6 +59,7 @@
Meet new and interesting dogs nearby
@@ -247,6 +250,59 @@

Find the True Love of Your Dog's Life Today.

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ CONTACT + US +
+
CONTACT INFO : +91 81 214 728 595
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+
+
+
+ +
+
+