HR Policies 2

Assignment – 1
CSE3150: Front-end Full Stack

Development
Name: Samarth B D
Roll number: 20211CSE0404
Section: 6_CSE_13
Date: 5th March 2024
Develop a website for managing HR policies of a department.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HR Policies Management</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color:blanchedalmond;
color:black;
padding: 20px;
text-align: center;
}
nav {
background-color: grey;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
section {
margin-bottom: 40px;
}
section hr {
border: none;
height: 1px;
background-color: #ddd;
}
article {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
form {
padding: 20px;
border-radius: 8px;
}
label {
display: block;
margin-bottom: 8px;
}
input,
textarea {
width: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
}
button {
background-color: #d35400;
color: #fff;
padding: 12px 20px;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #e67e22;
}
footer {
background-color: #34495e;
color: #fff;
text-align: center;
padding: 10px 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>HR Policies Management</h1>
</header>
<nav>
<a href="#home">Home</a> |
<a href="#policies">Policies</a> |
<a href="#benefits">Employee Benefits</a> |
<a href="#training">Training Programs</a> |
<a href="#contact">Contact</a>
</nav>
<div class="container">
<form action="#" method="post">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Submit</button>
</form>
<hr>
</div>
<div class="container">
<section id="policies">
<h2 style="text-align: center;">HR Policies</h2>
<div style="display: flex; flex-wrap: wrap; justify-content: space-
between;">
<article style="width: calc(33.33% - 20px); margin-bottom: 20px;">
<h3>Workplace Diversity Policy</h3>
<p>We promote diversity and inclusion in the workplace, valuing
differences in background, perspectives, and experiences.</p>
</article>
<h3>Employee Code of Ethics</h3>
<p>All employees are expected to adhere to our code of ethics,
maintaining honesty, integrity, and professionalism in their conduct.</p>
</article>
<h3>Telecommuting Policy</h3>
<p>Our telecommuting policy allows eligible employees to work
remotely, providing guidelines for productivity, communication, and equipment
usage.</p>
</article>
<h3>Performance Evaluation Policy</h3>
<p>We conduct regular performance evaluations to assess employee
performance, provide feedback, and identify areas for growth.</p>
</article>
<h3>Conflict Resolution Policy</h3>
<p>Our conflict resolution policy outlines procedures for
addressing workplace conflicts in a fair and respectful manner.</p>
</article>
<h3>Health and Safety Policy</h3>
<p>We are committed to providing a safe and healthy work
environment for all employees, implementing measures to prevent accidents and
injuries.</p>
</article>
</div>
<hr>
</section>
</div>
<footer>
<p>© 2024 HR Policies Management</p>
</footer>
</body>
</html>
Assignment – 1
CSE3150: Front-end Full Stack
Development
Name: Vaishnavi S
Roll number: 20211CSE0457
Section: 6_CSE_13
Date: 5th March 2024
Develop a website for managing HR policies of a department.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Management System</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #e6e6e6;
color: #333;
position: relative;
}
header {
background-color: #0b37c9;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #2ecc71;
padding: 10px;
text-align: center;
text-decoration: solid;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
section {
margin: 20px auto; /* Center the sections */
max-width: 800px; /* Limit the width */
}
article {
padding: 20px;
border-radius: 8px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns */
grid-gap: 20px;
}
.grid-item {
border-radius: 8px;
padding: 20px;
}
.form-container {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
text-align: center;
}
label {
display: block;
margin-bottom: 8px;
}
input,
textarea {
width: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
}
button {
background-color: #d35400;
color: #fff;
padding: 12px 20px;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #e67e22;
}
footer {
background-color: #34495e;
color: #fff;
text-align: center;
padding: 10px 0;
width: 100%;
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Our Employee Management System</h1>
</header>
<nav>
<a href="#home">Home</a> |
<a href="#employees">Employees</a> |
<a href="#departments">Departments</a> |
<a href="#positions">Positions</a> |
<a href="#contact">Contact</a>
</nav>
<section id="home">
<h2 style="text-align: center;">Welcome to our Employee Management System</h2>
<p style="text-align: center;">This system provides a centralized platform to
manage employees efficiently.
Explore our employee database, departments, positions, and contact information
below.</p>
<hr>
</section>
<section id="employees">
<h2>Employee Database</h2>
<div class="grid-container">
<article class="grid-item">
<h3>Vaishnavi</h3>
<p>Position: Senior Software Engineer</p>
<p>Department: Engineering</p>
<p>Phone Number: 123-456-7890</p>
</article>
<h3>Cassandra</h3>
<p>Position: HR Manager</p>
<p>Department: Human Resources</p>
<p>Phone Number: 234-567-8901</p>
</article>
<h3>Dua</h3>
<p>Position: Financial Analyst</p>
<p>Department: Finance</p>
<p>Phone Number: 345-678-9012</p>
</article>
</div>
</section>
<section id="departments"><hr>
<h2>Departments</h2>
<article>
<h3>Engineering</h3>
<p>Description: Responsible for software development and technical
operations.</p>
</article>
<article>
<h3>Human Resources</h3>
<p>Description: Manages recruitment, employee relations, and benefits
administration.</p>
</article>
<article>
<h3>Finance</h3>
<p>Description: Handles financial planning, analysis, and reporting.</p>
</article>
</section>
<section id="positions">
<hr>
<h2>Available Positions</h2>
<article>
<h3>Software Developer</h3>
<p>Description: Develops and maintains software applications.</p>
</article>
<article>
<h3>HR Assistant</h3>
<p>Description: Provides administrative support to the HR department.</p>
</article>
<article>
<h3>Financial Manager</h3>
<p>Description: Oversees financial operations and strategic planning.</p>
</article>
</section>
<section id="contact">
<hr>
<h2>Contact Information</h2>
<p>If you have any questions or inquiries, please use the form below to contact
us.</p>
<div class="form-container">
<form action="#" method="post">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Send Message</button>
<br>
</form>
</div>
</section>
<footer>
<p>© 2024 Employee Management System</p>
</footer>
</body>
</html>

HR Policies 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HR Policies 2

Uploaded by

Copyright:

Available Formats

Assignment – 1

CSE3150: Front-end Full Stack

You might also like