registration page in progress

client/src/App.js

@@ -1,13 +1,13 @@
-import { Route, Routes } from "react-router-dom";
+//import { Route, Routes } from "react-router-dom";
 
 import About from "./pages/About";
-import Home from "./pages/Home";
+import RegistrationForm from "./components/RegistrationForm";
 
 const App = () => (
-	<Routes>
-		<Route path="/" element={<Home />} />
-		<Route path="/about/this/site" element={<About />} />
-	</Routes>
+	<div>
+		<About />
+		<RegistrationForm />
+	</div>
 );
 
 export default App;

client/src/components/RegistrationForm.js

@@ -0,0 +1,79 @@
+import "./registrationform.css";
+import React from "react";
+
+
+function RegistrationForm() {
+	return (
+		<form action="action_page.php">
+			<div className="container">
+				<h1>Register</h1>
+				<p>Please fill in this form to create an account.</p>
+				<hr />
+				<label htmlFor="Firstname">
+					<b>Firstname</b>
+				</label>
+				<input
+					type="text"
+					placeholder="Enter Firstname"
+					name="text"
+					id="firstname"
+					required
+				/>
+				<label htmlFor="Lastname">
+					<b>Lastname</b>
+				</label>
+				<input
+					type="text"
+					placeholder="Enter Lastname"
+					name="text"
+					id="Lastname"
+					required
+				/>
+				<label htmlFor="email">
+					<b>Email</b>
+				</label>
+				<input
+					type="text"
+					placeholder="Enter Email"
+					name="email"
+					id="email"
+					required
+				/>
+				<label htmlFor="psw">
+					<b>Password</b>
+				</label>
+				<input
+					type="password"
+					placeholder="Enter Password"
+					name="psw"
+					id="psw"
+					required
+				/>
+				<label htmlFor="psw-repeat">
+					<b>Repeat Password</b>
+				</label>
+				<input
+					type="password"
+					placeholder="Repeat Password"
+					name="psw-repeat"
+					id="psw-repeat"
+					required
+				/>
+				<hr />
+				<p>
+					By creating an account you agree to our{" "}
+					<a href="/">Terms &amp; Privacy</a>.
+				</p>
+				<button type="submit" className="registerbtn">
+					Register
+				</button>
+			</div>
+			<div className="container signin">
+				<p>
+					Already have an account? <a href="/">Sign in</a>.
+				</p>
+			</div>
+		</form>
+	);
+}
+export default RegistrationForm;

client/src/components/registrationform.css

@@ -0,0 +1,58 @@
+* {
+    box-sizing: border-box
+}
+
+/* Add padding to containers */
+.container {
+    padding: 16px;
+}
+
+/* Full-width 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;
+}
+
+/* Overwrite default styles of hr */
+hr {
+    border: 1px solid #F1F1F1;
+    margin-bottom: 25px;
+}
+
+/* Set a style for the submit/register button */
+.registerbtn {
+    background-color: #04AA6D;
+    color: white;
+    padding: 16px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    opacity: 0.9;
+}
+
+.registerbtn:hover {
+    opacity: 1;
+}
+
+/* Add a blue text color to links */
+a {
+    color: dodgerblue;
+}
+
+/* Set a grey background color and center the text of the "sign in" section */
+.signin {
+    background-color: #F1F1F1;
+    text-align: center;
+}

client/src/pages/About.js

@@ -1,14 +1,9 @@
 const About = () => (
 	<main role="main">
 		<div>
-			<h1>About</h1>
-			<p>
-				Starter kit for full-stack JavaScript projects. For more information,
-				see the wiki:
-			</p>
-			<a href="https://github.com/textbook/starter-kit/wiki">Wiki</a>
+
+
 		</div>
 	</main>
 );
-
 export default About;

client/src/pages/Home.css

@@ -8,4 +8,4 @@
 
 .message:hover {
 	background-color: yellow;
-}
+}