Skip to content

[#161676339] Repeat the registration page on new branch #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ipaullly merged 2 commits into from
Nov 2, 2018
Merged

[#161676339] Repeat the registration page on new branch #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8d67a93
[starts #161676339] Move registration markup to feature branch
ipaullly Nov 2, 2018
da11432
[finishes #161676339] Add style sheet to the repeat feature branch
ipaullly Nov 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 196 additions & 0 deletions UI/css/signup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
67 changes: 67 additions & 0 deletions UI/register_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Register Account</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/signup.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">Regis</span>tration</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
</header>

<section>
<div class="container">
<form action="">
<div class="regisdiv">
<h1>REGISTER TO SEND-IT</h1>
<p>kINDLY FILL IN YOUR PERSONAL DETAILS</p>
<hr>

<label for="uname"><b>USERNAME</b></label>
<input type="text" placeholder="Provide Username" name="uname" required>

<label for="secretword"><b>PASSOWRD</b></label>
<input type="password" placeholder="Provide a Password" name="secretword" required>

<label for="secretword-repeat"><b>CONFIRM PASSOWRD</b></label>
<input type="password" placeholder="Confirm Password" name="secretword-repeat" required>

<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>

<p>Already have an account? <a href="login.html">login here</a>.</p>

<div class="downfix">
<button type="button" class="delbtn">Cancel</button>
<button type="submit" class="regbtn">Register Account</button>
</div>
</div>
</form>

</div>
</section>



<footer>
<p>Send-IT, Copyright &copy; 2018</p>
</footer>

</body>
</html>