diff --git a/projects/sign-up-form/index.html b/projects/sign-up-form/index.html index b6de40a..7c31ccd 100644 --- a/projects/sign-up-form/index.html +++ b/projects/sign-up-form/index.html @@ -22,12 +22,57 @@
-

This is not a real online service! You know you need something like this in your life to help you realize your deepest dreams. Sign up now to get started.

-

You know you want to.

+

+ This is not a real online service! You know you need something like + this in your life to help you realize your deepest dreams. Sign up + now to get started. +

+

+ You know you want to. +

+
+
+
+
+

Let's do this!

+
+
+
+
First name
+ +
+
+
Last name
+ +
+
+
Email
+ +
+
+
Phone number
+ +
+
+
Password
+ +
+
+
Confirm password
+ +
+
+
-
ola
-
Create Account
+ +
diff --git a/projects/sign-up-form/style.css b/projects/sign-up-form/style.css index 7b04ba2..8116b54 100644 --- a/projects/sign-up-form/style.css +++ b/projects/sign-up-form/style.css @@ -4,7 +4,7 @@ } :root { - --main-color: green; + --main-color: rgb(80, 126, 80); font-family: Arial, Helvetica, sans-serif; } @@ -106,6 +106,38 @@ body { width: 100%; } +.form-contents { + position: relative; + width: 60%; +} + +.form-fields { + display: grid; + grid-template-columns: repeat(2, auto); +} + +.form-field-container { + margin-bottom: 30px; +} + +.form-field-header { + text-transform: uppercase; + color: gray; + margin: 0; +} + +.form-field-value-container { + border: 1px solid rgb(218, 218, 218); + border-radius: 5px; + height: 25px; + width: 250px; +} + +.form-field-value-container:focus { + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); + border: 0px solid blue; +} + .right-panel-left-margin { left: 5%; } @@ -122,16 +154,35 @@ body { .right-panel-header.first { top: 45%; + max-width: 50%; } .right-panel-header.second { top: 75%; } -.bg-green { - background-color: rgb(46, 65, 46) +.create-account-button { + position: absolute; + bottom: 25%; + padding: 10px 30px; + border-radius: 10px; + color: white; + font-weight: bold; +} + +.existing-account-nudge-text { + position: absolute; + bottom: 18%; +} + +.bg-main { + background-color: var(--main-color); +} + +.text-color-main { + color: var(--main-color); } .subtle-shadow { - box-shadow: ; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); } \ No newline at end of file