From 038661efa416a4a07a7012f6416092ab48abb610 Mon Sep 17 00:00:00 2001 From: Siddhesh Rajale <113630547+Siddheshuncodes@users.noreply.github.com> Date: Tue, 31 Oct 2023 18:56:53 +0530 Subject: [PATCH 1/3] changes in the forget html page Added an id attribute to the submit button for differentiation Modified the anchor tag in the "Log-in" button to use a button element for consistency and added an onclick attribute to simulate the redirection #Changes in CSS Adjusted the button:hover selector to remove the duplicate properties and retain the animation Changed the login-button class to match the submit-button class for consistency: --- css/style.css | 18 +++--------------- forgot.html | 9 +++++---- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index dd6063e..2807adf 100644 --- a/css/style.css +++ b/css/style.css @@ -111,25 +111,15 @@ button { font-family: 'Roboto Condensed', sans-serif; } -.login-button { - /* width: 50%; - color: #252537; - padding: 0.9rem 1rem; - background: #fff; - border-radius: 5px; - font-size: 0.9rem; - left: 50%; */ +.login-button, .submit-button { width: 100%; padding: 0.98rem; border: none; background-color: rgb(129, 113, 222); font-size: 0.9rem; - font-family: 'Roboto Condensed', sans-serif; - - - } + .submit-button { width: 100%; display: flex; @@ -174,12 +164,10 @@ button { button:hover { transform: translatey(3px); box-shadow: none; -} - -button:hover { animation: ani9 0.4s ease-in-out infinite alternate; } + @keyframes ani9 { 0% { transform: translateY(3px); diff --git a/forgot.html b/forgot.html index 88c471a..2c692fc 100644 --- a/forgot.html +++ b/forgot.html @@ -29,11 +29,12 @@

Forgot Password

- + + - + + + From 68a390654824e82dc1d44a4923922f38a2caceb3 Mon Sep 17 00:00:00 2001 From: Siddhesh Rajale <113630547+Siddheshuncodes@users.noreply.github.com> Date: Tue, 31 Oct 2023 22:17:29 +0530 Subject: [PATCH 2/3] Added Animation to the Checkmark page Addition of a CSS animation using @keyframes for the checkmark icon. Application of the animation property to the .icon-container class for the moving effect. Definition of the @keyframes move animation to transition the checkmark icon vertically. Overall adjustments to ensure the animation blends well with the design. --- sucess.html | 147 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 86 insertions(+), 61 deletions(-) diff --git a/sucess.html b/sucess.html index d47504a..3270437 100644 --- a/sucess.html +++ b/sucess.html @@ -1,65 +1,90 @@ - - - - - - -
+ + - -
-
+ + + + + + + +
+
+
✓
-

Congratulations

-

Your account has been created
Happy Browsing❤️!

-
+

Congratulations

+

Your account has been created
Happy Browsing❤️!

- - \ No newline at end of file +
+ + + From b5437b1479cd777c09b8fba6a40d7fa727b5ec36 Mon Sep 17 00:00:00 2001 From: Siddhesh Rajale <113630547+Siddheshuncodes@users.noreply.github.com> Date: Tue, 31 Oct 2023 22:29:01 +0530 Subject: [PATCH 3/3] Update sucess.html added more style to the bouncing animation --- sucess.html | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/sucess.html b/sucess.html index 3270437..fbc857d 100644 --- a/sucess.html +++ b/sucess.html @@ -23,6 +23,23 @@ justify-content: center; } + .heartbeat { + animation: heartbeat 1s infinite; + } + + @keyframes heartbeat { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } + } + + .card { background: white; padding: 40px; @@ -73,6 +90,21 @@ font-size: 20px; margin: 0; } + .bounce { + animation: bounce 0.5s; + } + + @keyframes bounce { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } + } @@ -87,4 +119,5 @@

Congratulations

+