|
|
@@ -1,3 +1,71 @@
|
|
|
+form{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ border: 2px solid rgb(0, 27, 45);
|
|
|
+ padding: 30px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgb(240, 252, 255);
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 40px;
|
|
|
+ width: 550px;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+ input[type=text], select {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px 20px;
|
|
|
+ margin: 8px 0;
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input[type=text], input[type=password], select {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px 20px;
|
|
|
+ margin: 8px 0;
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input[type=submit] {
|
|
|
+ width: 100%;
|
|
|
+ background-color:rgb(255, 99, 107);
|
|
|
+ color: white;
|
|
|
+ padding: 14px 20px;
|
|
|
+ margin: 8px 0;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input[type=submit]:hover {
|
|
|
+ background: rgb(243, 77, 86);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ input[type=text]:focus, input[type=password]:focus {
|
|
|
+ border: 2px solid #555;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ input[type=button] {
|
|
|
+ background-color: rgb(255, 99, 107);
|
|
|
+ }
|
|
|
+
|
|
|
+ input[type=button]:hover {
|
|
|
+ background-color:rgb(0, 27, 45);
|
|
|
+ }
|
|
|
+
|
|
|
/* Public Strand */
|
|
|
#publicStrand{
|
|
|
display: flex;
|
|
|
@@ -92,6 +160,27 @@ Login Page
|
|
|
height: 91.5vh;
|
|
|
}
|
|
|
|
|
|
+/*
|
|
|
+RegisterPage
|
|
|
+*/
|
|
|
+#register{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background-image: url("/shared/images/backgroundImg01.jpg");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ height: 91.5vh;
|
|
|
+}
|
|
|
+
|
|
|
+ #agreement{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ #agreement input{
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
/*
|
|
|
Footer Partial
|
|
|
*/
|
|
|
@@ -117,178 +206,6 @@ Footer Partial
|
|
|
margin: 0 25px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-#registerStrand form{
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-
|
|
|
-#registerStrand form > *{
|
|
|
- margin: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-/* ----The Checkbox and Inputs Start---- */
|
|
|
-
|
|
|
-/* The container */
|
|
|
-.container {
|
|
|
- display: block;
|
|
|
- position: relative;
|
|
|
- padding-left: 35px;
|
|
|
- margin-bottom: 12px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 16px;
|
|
|
- -webkit-user-select: none;
|
|
|
- -moz-user-select: none;
|
|
|
- -ms-user-select: none;
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
-
|
|
|
- /* Hide the browser's default checkbox */
|
|
|
- .container input {
|
|
|
- position: absolute;
|
|
|
- opacity: 0;
|
|
|
- cursor: pointer;
|
|
|
- height: 0;
|
|
|
- width: 0;
|
|
|
- }
|
|
|
-
|
|
|
- /* Create a custom checkbox */
|
|
|
- .checkmark {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- height: 24px;
|
|
|
- width: 24px;
|
|
|
- border: 1px solid#ccc;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgb(255, 255, 255);
|
|
|
- }
|
|
|
-
|
|
|
- /* On mouse-over, add a grey background color */
|
|
|
- .checkmark:hover {
|
|
|
- background-color: #ccc;
|
|
|
- }
|
|
|
-
|
|
|
- /* When the checkbox is checked, add a blue background */
|
|
|
- .container input:checked ~ .checkmark {
|
|
|
- background-color: #5A6F7D;
|
|
|
- border: 1px solid#5A6F7D;
|
|
|
- }
|
|
|
-
|
|
|
- /* Create the checkmark/indicator (hidden when not checked) */
|
|
|
- .checkmark:after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- /* Show the checkmark when checked */
|
|
|
- .container input:checked ~ .checkmark:after {
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- /* Style the checkmark/indicator */
|
|
|
- .container .checkmark:after {
|
|
|
- left: 9px;
|
|
|
- top: 5px;
|
|
|
- width: 5px;
|
|
|
- height: 10px;
|
|
|
- border: solid white;
|
|
|
- border-width: 0 3px 3px 0;
|
|
|
- -webkit-transform: rotate(45deg);
|
|
|
- -ms-transform: rotate(45deg);
|
|
|
- transform: rotate(45deg);
|
|
|
- }
|
|
|
-/* ----The Checkbox and Inputs End---- */
|
|
|
-
|
|
|
-/* Inputs Start */
|
|
|
-
|
|
|
-input[type=text], select {
|
|
|
- width: 100%;
|
|
|
- padding: 12px 20px;
|
|
|
- margin: 8px 0;
|
|
|
- display: inline-block;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-bottom: 16px;
|
|
|
- font-size: 16px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- input[type=text], input[type=password], select {
|
|
|
- width: 100%;
|
|
|
- padding: 12px 20px;
|
|
|
- margin: 8px 0;
|
|
|
- display: inline-block;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- input[type=submit] {
|
|
|
- width: 100%;
|
|
|
- background-color:rgb(255, 99, 107);
|
|
|
- color: white;
|
|
|
- padding: 14px 20px;
|
|
|
- margin: 8px 0;
|
|
|
- border: none;
|
|
|
- border-radius: 4px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 22px;
|
|
|
- margin-top: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- input[type=submit]:hover {
|
|
|
- background: rgb(243, 77, 86);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- input[type=text]:focus, input[type=password]:focus {
|
|
|
- border: 2px solid #555;
|
|
|
- outline: none;
|
|
|
- }
|
|
|
-
|
|
|
- input[type=button] {
|
|
|
- background-color: rgb(255, 99, 107);
|
|
|
- }
|
|
|
-
|
|
|
- input[type=button]:hover {
|
|
|
- background-color:rgb(0, 27, 45);
|
|
|
- }
|
|
|
-
|
|
|
- .input-error{
|
|
|
- border-color: red;
|
|
|
-}
|
|
|
-
|
|
|
-/* Inputs End */
|
|
|
-
|
|
|
@media screen and (max-width: 600px){
|
|
|
.logo-text img{
|
|
|
max-height: 20vh;
|
Lee Morgan