diff --git a/images/bgimg.jpg b/images/bgimg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d7b5f415d49d4d477e1eec6923a78c77a9cb5892
Binary files /dev/null and b/images/bgimg.jpg differ
diff --git a/registerPage.html b/registerPage.html
index 7cc37ea406576caedc4d37d4da66b97ac80ecc19..ce82385d9f3372fb408b960623482d3a1b7289ae 100644
--- a/registerPage.html
+++ b/registerPage.html
@@ -1,53 +1,91 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
- <head>
- <meta charset="utf-8" />
- <title>Group 2 Showcase Project</title>
- <link rel="stylesheet" href="styles.css" />
- </head>
- <body>
- <header>
- <div class="appBar">
- <span class="appName">StudentProfile</span>
- <nav class="navigation">
- <a class="navLink" href="./main.html">Home</a>
- <a class="navLink active" href="./registerPage.html">Register</a>
- <a class="navLink" href="./addProjectPage.html">Add Project</a>
- </nav>
- </div>
- </header>
- <main>
- <h1 class="header">Hi, let's register your profile here!</h1>
- <p class="text">Please input your details below:</p>
- <form class="formContainer" id="myform" method="post">
- <div class="fieldContainer">
- <label class="formLabel" for="email"> First name: </label>
- <input
- class="formInput"
- type="text"
- id="firstname"
- name="firstname"
- />
- </div>
- <div class="fieldContainer">
- <label class="formLabel" for="surname"> Surname: </label>
- <input class="formInput" type="text" id="surname" name="surname" />
- </div>
- <div class="fieldContainer">
- <label class="formLabel" for="email">Email:</label>
- <input class="formInput" type="email" id="email" name="email" />
- </div>
- <div class="fieldContainer">
- <label class="formLabel" for="password">Password:</label>
- <input
- class="formInput"
- type="password"
- id="password"
- name="password"
- />
- </div>
- <button class="submitButton" type="submit">Register</button>
- </form>
- </main>
- </body>
+<head>
+ <meta charset="utf-8" />
+ <title>Group 2 Showcase Project</title>
+ <link rel="stylesheet" href="styles.css" />
+</head>
+<body class="bodymain">
+<header>
+ <div class="appBar">
+ <span class="appName">StudentProfile</span>
+ <nav class="navigation">
+ <a class="navLink active" href="./registerPage.html">Register</a>
+ <a class="navLink" href="./addProjectPage.html">Add Project</a>
+ </nav>
+ </div>
+</header>
+<main>
+ <form class="formContainer" id="myform" method="post">
+ <h1 class="header">Hi, let's register your profile here!</h1>
+ <p class="text">Please input your details below:</p>
+ <div class="fieldContainer">
+ <label class="formLabel" for="firstname"> First name: </label>
+ <input class="formInput" type="text" id="firstname" name="firstname"/>
+ </div>
+ <div class="fieldContainer">
+ <label class="formLabel" for="surname"> Surname: </label>
+ <input class="formInput" type="text" id="surname" name="surname" />
+ </div>
+ <div class="fieldContainer">
+ <label class="formLabel" for="address">Address: </label>
+ <textarea class="formInput" type="text" id="address" name="addresss" rows="5"></textarea>
+ </div>
+ <div class="fieldContainer">
+ <label class="formLabel" for="grade">Grade: </label>
+ <select class="formInput" id="grade" name="grade" onchange="enableCourse(this)">
+ <option value="undergraduate" id="undergraduate">Undergraduate</option>
+ <option value="postgraduate" id="postgraduate">Postgraduate</option>
+ </select>
+ </div>
+ <div class="fieldContainer">
+ <label class="formLabel">Course: </label>
+ <select class="formInput" type="text" name="course" id="ugcourse">
+ <option value="archaeology">Archaeology</option>
+ <option value="biochemistry">Biochemistry</option>
+ <option value="chemistry">Chemistry</option>
+ <option value="dental surgery">Dental Surgery</option>
+ <option value="economics">Economics</option>
+ </select>
+ <select class="formInput d-none" type="text" name="course" id="pgcourse">
+ <option value="ACS">Advanced Computer Science</option>
+ <option value="broadcast journalism">Broadcast Journalism</option>
+ <option value="civil engineering">Civil Engineering</option>
+ <option value="DMS">Digital Media and Society</option>
+ <option value="english literature">English Literature</option>
+ </select>
+ </div>
+ <!--<div class="fieldContainer">
+ <label class="formLabel" for="surname">: </label>
+ <input class="formInput" type="text" id="" name="" />
+ </div>-->
+ <div class="fieldContainer">
+ <label class="formLabel" for="email">Email:</label>
+ <input class="formInput" type="email" id="email" name="email"/>
+ </div>
+ <div class="fieldContainer">
+ <label class="formLabel" for="password">Password:</label>
+ <input class="formInput" type="password" id="password" name="password"/>
+ </div>
+ <div class="fieldContainer">
+ <label class="formLabel" for="password">Confirm Password Again:</label>
+ <input class="formInput" type="password" id="passwordagain" name="passwordagain"/>
+ </div>
+ <button class="submitButton" type="submit">Register</button>
+ </form>
+</main>
+<script type="text/javascript">
+ function enableCourse(answer){
+ console.log(answer.value);
+ if (answer.value == "undergraduate"){
+ document.getElementById('ugcourse').classList.remove('d-none');
+ document.getElementById('pgcourse').classList.add('d-none');
+ }
+ else if (answer.value == "postgraduate"){
+ document.getElementById('pgcourse').classList.remove('d-none');
+ document.getElementById('ugcourse').classList.add('d-none');
+ };
+ };
+</script>
+</body>
</html>
diff --git a/styles.css b/styles.css
index f995ecac4d9526e4a4968db2e3733f409a734c20..8bdcb00460c1596da1d43f590ba7c27228837b4d 100644
--- a/styles.css
+++ b/styles.css
@@ -1,29 +1,42 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap");
-body {
+.bodymain {
margin: 0;
font-family: -apple-system, Poppins, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
- "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background-image: url("images/bgimg.jpg");
+ background-position: center;
+ background-size: cover;
+ background-color: #377d71;
+ background-repeat: no-repeat;
+}
+.body{
+ margin: 0;
+ font-family: -apple-system, Poppins, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+ "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- height: 100%;
}
-
.appBar {
padding: 16px 40px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: rgba(136, 121, 176, 0.4) 0px 3px 8px;
+ background-color: white;
}
.appName {
margin-right: 15px;
- color: #395b64;
+ color: maroon;
font-size: 20px;
font-weight: 500;
}
-
+.d-none{
+ display: none!important;
+}
.navigation {
align-items: center;
}
@@ -36,7 +49,7 @@ body {
}
.navLink.active {
- color: #8879b0;
+ color: maroon;
}
.navLink:not(:last-child) {
@@ -55,15 +68,14 @@ body {
}
.formContainer {
+ margin-top: 25px;
margin-left: auto;
margin-right: auto;
- padding: 30px;
+ padding: 50px;
width: fit-content;
-
display: flex;
flex-direction: column;
align-items: center;
-
border: 1.5px solid #d6dbdf;
border-radius: 6px;
background-color: #f6f8fa;
@@ -98,21 +110,6 @@ body {
outline: #8879b0 solid 2px;
}
-.formTextarea{
- padding: 4px 8px;
-
- border-radius: 6px;
- border: #d6dbdf solid 1.5px;
- outline: none;
-
- font-size: 14px;
-}
-
-.formTextarea:focus {
- border-color: #fff;
- outline: #8879b0 solid 2px;
-}
-
.submitButton {
margin-top: 10px;
padding: 10px 60px;
@@ -132,19 +129,3 @@ body {
.submitButton:hover {
background-color: #395b64;
}
-
-#myFile::file-selector-button{
- padding: 10px 15px;
- width:35%;
-
- font-size: 14px;
- border: none;
- border-radius: 6px;
-
- font-weight: 400;
- color: #fff;
- background-color: #377d71;
- transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-
- cursor: pointer;
-}