Skip to content
Snippets Groups Projects
Commit c0c94e2b authored by Gabriel John Phillip Martin's avatar Gabriel John Phillip Martin
Browse files

update

parent 7e4f7646
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
images/bgimg.jpg 0 → 100644
+ 0
− 0
View file @ c0c94e2b
images/bgimg.jpg

210 KiB

registerPage.html
+ 88
− 50
View file @ c0c94e2b
<!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>
styles.css
+ 22
− 41
View file @ c0c94e2b
@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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment