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 @@
-
+
-
ola
-
Create Account
+
+ Create Account
+
+
+ Already have an account? Log in
+
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