Merge pull request #33 from GSG-G8/8-styling

8 styling
GSG-G8 · Mar 4, 2020 · faea5f7 · faea5f7
2 parents 370861d + fe128c9
commit faea5f7
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "start": "NODE_ENV=production node src/index.js",
     "dev": "NODE_ENV=development nodemon src/index.js",
     "test": "NODE_ENV=test jest",
-    "kill": "fuser -k 3030/tcp"
+    "kill": "fuser -k 5000/tcp"
   },
   "repository": {
     "type": "git",

diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="style.css">
   <title>TodoList</title>
 </head>
 <body>
@@ -16,24 +17,20 @@ <h1 class="main-header__h1">Organize it all with Todoist</h1>
       <input  class="login-form__password-input" type="password" id="password" name="password" value="" placeholder="password" required>
       <input  class="login-form__login-btn" type="submit" name="button" value="Log In">
         <div class="main-header__container">
-          <span class="container__span"><a href="#"> Forgot password?</a></span>
-          <label>
-            <input class="container__input" type="checkbox" checked="checked" name="remember"> Remember me 
-          </label>
         </div>
     </form>
   </header>
   <section class="section-signup">
-  <h2 class="section-signup__h2"> Create an account </h2>
+  <h1 class="section-signup__h1"> Create an account </h1>
   <form class="section-signup__signup-form" action="/signUp" method="POST">
       <label class="signup-form__fname-label" for="fname"><b>First Name</b></label>
-      <input class="signup-form__fname-input" type="text" placeholder="Enter Firstname" name="fname" required>
+      <input class="signup-form__fname-input" type="text" placeholder="Enter Firstname" name="fname" required><br>
       <label class="signup-form__lname-label" for="Lname"><b>Last Name</b></label>
-      <input class="signup-form__lname-input" type="text" placeholder="Enter Lastname" name="lname" required>
+      <input class="signup-form__lname-input" type="text" placeholder="Enter Lastname" name="lname" required><br>
       <label class="signup-form__email-label" for="email"><b>Email:</b></label>
-      <input class="signup-form__email-input" type="email" id="email" name="email" value="" placeholder="Email" required>
+      <input class="signup-form__email-input" type="email" id="email" name="email" value="" placeholder="Email" required><br>
       <label class="signup-form__newpass-label" for="psw"><b> New Password</b></label>
-      <input class="signup-form__newpass-input" type="password" placeholder="Enter New Password" name="psw" required>   
+      <input class="signup-form__newpass-input" type="password" placeholder="Enter New Password" name="psw" required> <br>  
       <input class="signup-form__signup-btn" type="submit" value="Sign Up">
   </form>
 </section>

diff --git a/public/style.css b/public/style.css
@@ -2,4 +2,56 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: sans-serif;
+}
+.main-header{
+  background-color: wheat;
+  color: white;
+  text-align: center;
+}
+.main-header__h1{
+  padding:20px 0px;
+}
+.login-form__email-input,.login-form__password-input{
+  width: 20%;
+  padding: 20px;
+  border: 2px solid #333;
+  border-radius: 20px;
+  margin: 20px 0px;
+}
+.login-form__login-btn{
+  padding: 20px;
+  border: 2px solid white;
+  border-radius: 20px;
+  background-color: wheat;
+}
+.login-form__login-btn:hover{
+  background-color: tomato;
+  color: aliceblue;
+}
+
+.section-signup__h1{
+  text-align: center;
+  margin-top: 20px;
+  padding: 20px;
+}
+.section-signup__signup-form{
+  text-align: center;
+}
+.signup-form__fname-input, .signup-form__lname-input,.signup-form__email-input,.signup-form__newpass-input{
+  width: 20%;
+  padding: 20px;
+  border: 2px solid #333;
+  border-radius: 20px;
+  margin: 20px 0px;
+}
+.signup-form__signup-btn{
+  padding: 20px;
+  border: 2px solid white;
+  border-radius: 20px;
+  background-color: wheat;
+}
+.signup-form__signup-btn:hover{
+  background-color: tomato;
+  color: aliceblue;
 }
diff --git a/src/app.js b/src/app.js
@@ -5,7 +5,7 @@ const cookieParser = require('cookie-parser');
 const routes = require('./routes');
 
 const app = express();
-app.set('PORT', process.env.PORT || 3030);
+app.set('PORT', process.env.PORT || 5000);
 app.use(cookieParser());
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));