diff options
| -rw-r--r-- | css/colors.css | 8 | ||||
| -rw-r--r-- | css/layouts.css | 29 | ||||
| -rw-r--r-- | css/texttypes.css | 41 | ||||
| -rw-r--r-- | index.html | 13 |
4 files changed, 88 insertions, 3 deletions
diff --git a/css/colors.css b/css/colors.css index 6bbaab2..5895570 100644 --- a/css/colors.css +++ b/css/colors.css @@ -5,3 +5,11 @@ .bg-white { background-color: #ffffff; } + +.bg-purple { + background-color: #3c3cc7; +} + +.text-white { + color: #ffffff; +} diff --git a/css/layouts.css b/css/layouts.css index d4496b6..f65d7c0 100644 --- a/css/layouts.css +++ b/css/layouts.css @@ -10,7 +10,10 @@ .fullscreen_centered { z-index: 2; - margin: calc(25vh - 25px) auto 0px auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } .height_100-55 { @@ -18,8 +21,8 @@ } .mediumbox { - width: 50vh; - height: 50vh; + width: 60vh; + max-height: auto; } .padding_25 { @@ -30,3 +33,23 @@ border: 4px solid #383838; } +.center_text { + text-align: center; +} + +.justify_text { + text-align: justify; +} + +.image_block { + width: 128px; + height: 128px; + background-color: #b9b9b9; + display: inline-block; + margin-right: 20px; + cursor: pointer; +} + +.form_elements { + margin-top: 20px; +} diff --git a/css/texttypes.css b/css/texttypes.css index 1ae2a67..80d8726 100644 --- a/css/texttypes.css +++ b/css/texttypes.css @@ -2,3 +2,44 @@ font-family: 'Chicago'; font-size: 2.2rem; } + +.chicago { + font-family: 'Chicago'; +} + +.image_block_description { + position: relative; + top: calc(-60px); + font-size: 1rem; + cursor: pointer; +} + +.form_elements label { + width: 25%; + display: inline-block; + margin-right: 20px; +} + +.form_elements input { + width: calc(75% - 40px); + display: inline-block; + font-size: 1rem; + font-family: 'Chicago'; + border: solid 2px #ccc; + border-radius: 4px; + outline: none; + margin-bottom: 10px; +} + +.form_elements input:focus { + border: solid 4px #3c3cc7; +} + +.btn { + padding: 10px 20px; + border: none; + outline: none; + margin: 10px auto; + display: block; + border-radius: 4px; +} @@ -16,6 +16,19 @@ <div class="fullscreen_centered mediumbox bg-white padding_25"> <div class="bordered_4px height_100-55 padding_25"> <marquee class="welcome_heading" scrollamount="10">Hello user! Looks like you don't have an account yet!</marquee> + <h3 class="chicago center_text">Don't worry. We will help you with that!</h3> + <p class="chicago justify_text">In order to create your account, you need to provide some information. All of this information is stored on your local computer is not transmitted anywhere. Please fill in all of the following fields mentioned below and then click the 'Create My Account' button. We are waiting for you to finish. :)</p> + <div class="image_block"></div> + <span class="image_block_description chicago">Select your avatar...</span> + <div class='form_elements chicago'> + <label for="fullname">Full Name</label> + <input type="text" name="fullname" id="fullname" placeholder="Enter your full name"> + <label for="password">Password</label> + <input type="password" name="password" id="password" placeholder="Enter a new password"> + <label for="confirmPassword">Confirm Password</label> + <input type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm Password"> + <button id="createNewAccount" class="btn bg-purple chicago text-white">Create My Account</button> + </div> </div> </div> </section> |