diff --git a/UI/css/signup.css b/UI/css/signup.css new file mode 100644 index 0000000..097fe3f --- /dev/null +++ b/UI/css/signup.css @@ -0,0 +1,196 @@ +body{ + font: 15px/1.5 'Montserrat', sans-serif; + padding: o; + margin: 0; + background-color: #A2D7E9; +} + +/* Global */ +.container{ + width: 70%; + margin: auto; + overflow: hidden; +} + +ul{ + margin: 0; + padding: 0; +} + +.button_1{ + height: 38px; + background: #08242D; + border: none; + padding-right: 20px; + padding-left: 20px; +} + +.navy{ + padding: 15px; + background: #0B5068; + color: #cccccc; + margin-top: 10px; + margin-bottom: 10px; +} + +/* header */ +header{ + background: #0B5068; + color: #ffffff; + padding-top: 30px; + min-height: 70px; +} + +header a{ + color: #ffffff; + text-decoration: none; + text-transform: uppercase; + font-size: 16px; +} +header li{ + float: left; + display: inline; + padding: 0 20px 0 20px; +} +header #brand{ + float: left; +} +header #brand h1{ + margin: 0; +} +header nav{ + float: right; + margin-top: 10px; +} +header .highlight{ + color: #A2D7E9; + font-weight: bold; +} +header a:hover{ + color: #cccccc; + font-weight: bold; +} + +/* Main pillar styling */ +#about{ + margin-top: 300px; + margin-bottom: 200px; +} +article#about-col{ + float: right; + width: 65%; +} + +/* sidebar style */ +aside#leftbar{ + float: left; + width: 30%; + margin-top: 10px; +} + +/* footer */ +footer{ + padding: 20px; + margin-top: 20px; + color: #ffffff; + background-color: #0B5068; + text-align: center; +} + +/***** Registration page styles ******/ + +/* form input fields */ +input[type=text], input[type=password] { + width: 100%; + padding: 15px; + margin: 5px 0 22px 0; + display: inline-block; + border: none; + background: #f1f1f1; + } + + input[type=text]:focus, input[type=password]:focus { + background-color: #ddd; + outline: none; + } + + hr { + border: 1px solid #f1f1f1; + margin-bottom: 25px; + } + + /* style buttons */ + .delbtn, .regbtn { + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: 100%; + opacity: 0.9; + } + + button:hover { + opacity:1; + } + + /* more style for cancel button */ + .delbtn { + padding: 14px 20px; + background-color: #f44336; + } + + /* Float cancel and register account buttons*/ + .delbtn, .regbtn { + float: left; + width: 50%; + } + + /* Add padding to container elements */ + .regisdiv { + padding: 16px; + } + + /* float the buttons on the same line */ + .clearfix::after { + content: ""; + clear: both; + display: table; + } + + /* Change styles for cancel button and signup button on extra small screens */ + @media screen and (max-width: 300px) { + .cancelbtn, .signupbtn { + width: 100%; + } + } + + +/* mobile responsiveness */ +@media(max-width: 768px){ + header #brand, + header nav, + header nav li, + #squares .box + article#about-col, + aside#leftbar{ + float: none; + text-align: center; + width: 100%; + } + header{ + padding-bottom: 20px; + } + #display h1{ + margin-top: 40px; + } + .order button{ + display: block; + width: 100%; + } + .fab { + font-size: 20px; + padding: 10px; + } +} \ No newline at end of file diff --git a/UI/register_page.html b/UI/register_page.html new file mode 100644 index 0000000..ca66c00 --- /dev/null +++ b/UI/register_page.html @@ -0,0 +1,67 @@ + + + + + + Register Account + + + + + +
+
+
+

Registration

+
+ +
+
+ +
+
+
+
+

REGISTER TO SEND-IT

+

kINDLY FILL IN YOUR PERSONAL DETAILS

+
+ + + + + + + + + + + + +

Already have an account? login here.

+ +
+ + +
+
+
+ +
+
+ + + + + + + \ No newline at end of file