diff --git a/signup_form/css/style.css b/signup_form/css/style.css index 7c36e8b..3bafcae 100644 --- a/signup_form/css/style.css +++ b/signup_form/css/style.css @@ -1,10 +1,14 @@ .container { justify-content: center; display: flex; - flex-direction: column; + align-items: center; align-content: center; } +.form { + width: 50vw; +} + .form-input { margin-bottom: 40px; display: flex; @@ -13,7 +17,9 @@ flex-wrap: wrap; } -.form-row input[type='text'] { +.form-input input[type='text'], +.form-input input[type='password'], +.form-input input[type='email'] { background-color: #FFFFFF; border: 1px solid #D6D9DC; border-radius: 3px; @@ -22,29 +28,38 @@ font-size: 14px; } - .form-row label { + .form-input label { margin-bottom: 15px; } @media only screen and (min-width: 700px) { + + .container { + height: 95vh; + } + .sidebar { + width: 50vw; + } .form { - width: 600px; + width: 50vw; } - .form-row { + .form-input { flex-direction: row; align-items: flex-start; /* To avoid stretching */ margin-bottom: 20px; } - .form-row input[type='text'] { + .form-input input[type='text'], + .form-input input[type='password'], + .form-input input[type='email'] { width: 250px; height: initial; } - .form-row label { + .form-input label { text-align: right; width: 120px; margin-top: 7px; padding-right: 20px; } - } \ No newline at end of file + } diff --git a/signup_form/index.html b/signup_form/index.html index d3ad332..b50fd4b 100644 --- a/signup_form/index.html +++ b/signup_form/index.html @@ -2,7 +2,7 @@ - Join our Awesome Mailing list! + Join Our Awesome Mailing list! @@ -16,27 +16,28 @@

Join our mailing list!

-
-
- - -
-
- - -
-
- - -
-
- - -
- -
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+