diff --git a/frontend/vanilla/css/profile.css b/frontend/vanilla/css/profile.css
index 9bfdf65..26bb0b2 100644
--- a/frontend/vanilla/css/profile.css
+++ b/frontend/vanilla/css/profile.css
@@ -38,7 +38,8 @@ h2 {
margin-bottom: 10px;
}
-.job h3, .education h3 {
+.job h3,
+.education h3 {
color: #444;
margin-bottom: 5px;
}
@@ -71,5 +72,4 @@ footer {
border-radius: 5px;
font-weight: bold;
cursor: pointer;
-}
-
+}
\ No newline at end of file
diff --git a/frontend/vanilla/css/topnav.css b/frontend/vanilla/css/topnav.css
new file mode 100644
index 0000000..72e58d7
--- /dev/null
+++ b/frontend/vanilla/css/topnav.css
@@ -0,0 +1,71 @@
+.topnav {
+ overflow: hidden;
+ background-color: #e9e9e9;
+}
+
+.topnav a {
+ float: left;
+ display: block;
+ color: black;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+}
+
+.topnav a:hover {
+ background-color: #ddd;
+ color: black;
+}
+
+.topnav a.active {
+ background-color: #2196F3;
+ color: white;
+}
+
+.topnav .search-container {
+ float: right;
+}
+
+.topnav input[type=text] {
+ padding: 6px;
+ margin-top: 8px;
+ font-size: 17px;
+ border: none;
+}
+
+.topnav .search-container button {
+ float: right;
+ padding: 6px 10px;
+ margin-top: 8px;
+ margin-right: 16px;
+ background: #ddd;
+ font-size: 17px;
+ border: none;
+ cursor: pointer;
+}
+
+.topnav .search-container button:hover {
+ background: #ccc;
+}
+
+@media screen and (max-width: 600px) {
+ .topnav .search-container {
+ float: none;
+ }
+
+ .topnav a,
+ .topnav input[type=text],
+ .topnav .search-container button {
+ float: none;
+ display: block;
+ text-align: left;
+ width: 100%;
+ margin: 0;
+ padding: 14px;
+ }
+
+ .topnav input[type=text] {
+ border: 1px solid #ccc;
+ }
+}
\ No newline at end of file
diff --git a/frontend/vanilla/html/userprofile.html b/frontend/vanilla/html/userprofile.html
index 9c7f243..bbcbab0 100644
--- a/frontend/vanilla/html/userprofile.html
+++ b/frontend/vanilla/html/userprofile.html
@@ -6,10 +6,25 @@
Page Title
+
+
-
-
+
+
+
+
Edit
@@ -82,7 +97,7 @@
const data = await response.json();
if (response.ok) {
populateFields(data.display_name, data.email, data.about_me, data.qualification);
- document.body.style.display = 'block'; // Show page
+ document.getElementById('container').style.display = 'block'; // Show page
} else if (response.status == 401) {
window.location.href = 'login.html';
} else {
@@ -101,6 +116,10 @@
function editProfile() {
alert('Editing');
}
+
+ function onSearchButtonClick(){
+ alert('Searching for something...');
+ }