diff --git a/project 2/style.css b/project 2/style.css new file mode 100644 index 0000000..14d9aba --- /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%; + 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; + 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; + padding-left: 0; +} + +.job-requirements li:before { + content: "✔"; + 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; + } +}