diff --git a/project 2/account.html b/project 2/account.html new file mode 100644 index 0000000..68200bf --- /dev/null +++ b/project 2/account.html @@ -0,0 +1,44 @@ + + + + + + JobSphere - Account + + + +
+ + +
+
+

Account Settings

+
+

Personal Information

+
+ + + + + + + + + + +
+
+ +
+ + + diff --git a/project 2/create-posting.html b/project 2/create-posting.html new file mode 100644 index 0000000..6cb222e --- /dev/null +++ b/project 2/create-posting.html @@ -0,0 +1,56 @@ + + + + + + JobSphere - Create Posting + + + +
+ + +
+
+

Create Job Posting

+
+ + + + + + + + + +
+ Requirements +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + diff --git a/project 2/home.html b/project 2/home.html new file mode 100644 index 0000000..9fb22a7 --- /dev/null +++ b/project 2/home.html @@ -0,0 +1,66 @@ + + + + + + JobSphere - Home + + + +
+ +
Inbox
+ +
+
+
+

Welcome, Username

+
+
+

Quick Look

+
+ + + + + +
+
+
+

Application Status

+

No. of Jobs Applied: 0

+

Status:

+
+
+ + + diff --git a/project 2/job-thumb.png b/project 2/job-thumb.png new file mode 100644 index 0000000..04469b1 Binary files /dev/null and b/project 2/job-thumb.png differ diff --git a/project 2/job.png b/project 2/job.png new file mode 100644 index 0000000..60dd7dc Binary files /dev/null and b/project 2/job.png differ diff --git a/project 2/jobs.html b/project 2/jobs.html new file mode 100644 index 0000000..730f70b --- /dev/null +++ b/project 2/jobs.html @@ -0,0 +1,118 @@ + + + + + + JobSphere - Jobs + + + +
+ + +
+
+

Jobs

+
+

Recents

+
+ +
+ ★ + + Job 2 + +

Job 2

+
+
+ ★ + + Job 2 + +

Job 3

+
+
+ ★ + + Job 2 + +

Job 4

+
+
+ ★ + + Job 2 + +

Job 5

+
+
+ ★ + + Job 2 + +

Job 6

+
+
+ ★ + + Job 2 + +

Job 7

+
+
+ ★ + + Job 2 + +

Job 8

+
+
+ ★ + + Job 2 + +

Job 9

+
+
+
+
+

Recommended

+ +
+
+ + + diff --git a/project 2/logo.png b/project 2/logo.png new file mode 100644 index 0000000..38e0ee8 Binary files /dev/null and b/project 2/logo.png differ diff --git a/project 2/logo.webp b/project 2/logo.webp new file mode 100644 index 0000000..1b3a865 Binary files /dev/null and b/project 2/logo.webp differ diff --git a/project 2/posting.html b/project 2/posting.html new file mode 100644 index 0000000..50aff3d --- /dev/null +++ b/project 2/posting.html @@ -0,0 +1,52 @@ + + + + + + JobSphere - Job Posting + + + +
+ + +
+
+
+
+

Job Title

+

Company Name

+
+
+

Job Description content...

+
+ + +
+
+ + + diff --git a/project 2/rough.txt b/project 2/rough.txt new file mode 100644 index 0000000..e69de29 diff --git a/project 2/style.css b/project 2/style.css new file mode 100644 index 0000000..d36b9ef --- /dev/null +++ b/project 2/style.css @@ -0,0 +1,363 @@ +/* General Resets */ +body, h1, h2, h3, p, ul, li, nav { + margin: 0; + padding: 0; + list-style: none; +} + +/* Typography */ +body { + font-family: Arial, sans-serif; +} + +h1, h2, h3 { + margin-bottom: 0.5em; +} + +/* Navigation */ +nav ul { + display: flex; + justify-content: space-around; + background-color: #007bff; + padding: 1em 0; +} + +nav a { + color: white; + text-decoration: none; +} + +/* Main Content */ +main { + padding: 1em; +} + +/* Jobs List */ +.jobs-list article { + margin-bottom: 1em; +} + +/* Footer */ +footer { + text-align: center; + margin-top: 2em; + padding: 1em 0; + background-color: #f8f9fa; +} + +/* Responsive Design */ +@media (max-width: 768px) { + nav ul { + flex-direction: column; + } +} + + +/* Logo and Inbox */ +.logo, +.inbox { + display: inline-block; + vertical-align: top; + padding: 1em; +} + +.logo img { + height: 80px; +} + +.inbox { + float: right; + padding: 1em; + background-color: #eee; +} + +/* Navigation Styles */ +nav { + background-color: #333; + color: white; +} + +nav ul { + display: flex; +} + +nav a { + color: white; + padding: 1em; + text-decoration: none; +} + +nav a.active { + border-bottom: 3px solid yellow; +} + +.search-bar { + padding: 1em; +} + +.search-bar input[type="search"] { + padding: 0.5em; +} + +/* Main Content Styles */ +.welcome { + padding: 1em; + text-align: center; +} + +.quick-look h2, +.application-status h2 { + border-bottom: 1px solid #333; + padding-bottom: 0.5em; + margin-bottom: 1em; +} + +.jobs-list { + display: flex; + justify-content: space-between; +} + +.jobs-list article { + border: 1px solid #333; + padding: 1em; + width: 18%; /* Adjust width to have 5 items fit horizontally */ + text-align: center; +} + +.jobs-list article img { + width: 20%; +} + +/* Responsive Design Adjustments */ +@media (max-width: 768px) { + .logo img, + .inbox { + display: block; + margin: auto; + } + + .jobs-list { + flex-direction: column; + } + + .jobs-list article { + width: auto; /* Full width on smaller screens */ + margin-bottom: 1em; + } +} + +/* Jobs Page Styles */ +.jobs-grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 1em; + margin-bottom: 2em; +} + +.job-card { + width: 20%; + border: 1px solid #ccc; + padding: 0.5em; + text-align: center; + position: relative; +} + +.star-icon { + position: relative; + cursor: pointer; +} + +.star-icon:hover { + color: gold; +} + +.recommended ul { + list-style: none; + padding: 0; +} + +.recommended li { + border-bottom: 1px solid #ccc; + padding: 0.5em; + display: flex; + justify-content: space-between; + align-items: center; +} + +.recommended .star-icon { + margin-left: auto; +} + +/* Media queries for responsive design */ +@media (max-width: 768px) { + .jobs-grid { + flex-direction: column; + } +} + +.job-card img { + width: 50px; +} + +/* Account Page Specific Styles */ +.account-info { + background-color: #f3f3f3; + padding: 20px; + margin-bottom: 20px; +} + +.account-info form { + display: flex; + flex-direction: column; +} + +.account-info label { + margin-top: 10px; +} + +.account-info input[type="text"], +.account-info input[type="email"], +.account-info input[type="password"] { + padding: 8px; + margin-top: 5px; +} + +.account-info input[type="submit"] { + margin-top: 20px; + padding: 10px; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; +} + +.account-info input[type="submit"]:hover { + background-color: #0056b3; +} + + +/* Posting Page Styles */ +.job-posting { + max-width: 800px; + margin: auto; + border: 1px solid #ccc; + padding: 20px; +} + +.job-posting-header h1, +.job-posting-header h2 { + margin-bottom: 10px; +} + +.job-description { + margin-bottom: 20px; +} + +.job-requirements { + margin-bottom: 20px; +} + +.job-requirements h3 { + margin-bottom: 5px; +} + +.job-requirements ul { + list-style: none; /* Removes the default list bullet points */ + padding-left: 0; +} + +.job-requirements li:before { + content: "✔"; /* Adds a custom bullet point */ + padding-right: 5px; +} + +.apply-button { + display: block; + width: 100%; + padding: 10px; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; +} + +.apply-button:hover { + background-color: #0056b3; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .job-posting { + padding: 10px; + } + + .apply-button { + width: auto; + } +} + + +.create-posting-form { + max-width: 800px; + margin: 20px auto; + padding: 20px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; +} + +.create-posting-form h1 { + text-align: center; + margin-bottom: 1em; +} + +.create-posting-form label { + display: block; + margin-top: 1em; +} + +.create-posting-form input[type="text"], +.create-posting-form textarea { + width: 100%; + padding: 8px; + margin-top: 0.5em; + border: 1px solid #ccc; + border-radius: 4px; +} + +.create-posting-form textarea { + height: 100px; +} + +.create-posting-form ul { + list-style: none; + padding: 0; +} + +.create-posting-form li { + margin-bottom: 0.5em; +} + +.create-posting-form button { + display: block; + width: 100%; + padding: 10px; + margin-top: 1em; + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.create-posting-form button:hover { + background-color: #0056b3; +} + +/* Responsive Design Adjustments */ +@media (max-width: 768px) { + .create-posting-form { + padding: 10px; + } +}