Skip to content

Commit

Permalink
Add Font Awesome icons to homepage headers
Browse files Browse the repository at this point in the history 
For the "Handbook acknowledgement" not to be the only header that had a line break on a large screen, I had to increase the max width of the handbook slightly.
  • Loading branch information
@WesCossick
WesCossick committed Feb 9, 2022
1 parent 3c94940 commit 78d7400
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 25 deletions.
2 changes: 1 addition & 1 deletion css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

/* Keep containers relatively narrow on large screens */
.container {
max-width: 46rem;
max-width: 48rem;
}

/* Prevent hello from being tied to view width */
Expand Down
164 changes: 140 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@

<link href="./css/main.css" rel="stylesheet" />
<script src="./components/footer.js" type="text/javascript" defer></script>

<script src="https://kit.fontawesome.com/7e296b456e.js" crossorigin="anonymous"></script>
</head>

<body class="py-4">
Expand Down Expand Up @@ -71,75 +73,141 @@ <h2 class="display-6 border-bottom pb-2 mb-4">Benefits and perks</h2>

<div class="row gy-2 mb-4">
<div class="col-12 col-sm-6">
<h4><a href="./benefits/health.html">Health</a></h4>
<h4>
<a href="./benefits/health.html"><i class="fa-regular fa-stethoscope opacity-50 me-1"></i> Health</a>
</h4>

<p>
We offer a variety of employer-sponsored health plans from a large insurance carrier, plus vision, dental,
HSAs, and FSAs.
</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/401(k).html">401(k)</a></h4>
<h4>
<a href="./benefits/401(k).html"><i class="fa-regular fa-coins opacity-50 me-1"></i> 401(k)</a>
</h4>

<p>We provide a 401(k) through a high-tech, ultra low-fee provider, with considerable company matching.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/paid-time-off.html">Paid time off</a></h4>
<h4>
<a href="./benefits/paid-time-off.html">
<i class="fa-regular fa-calendar-day opacity-50 me-1"></i> Paid time off
</a>
</h4>

<p>Employees earn a generous amount of highly flexible paid time off.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/observed-holidays.html">Observed holidays</a></h4>
<h4>
<a href="./benefits/observed-holidays.html">
<i class="fa-regular fa-lights-holiday opacity-50 me-1"></i> Observed holidays
</a>
</h4>

<p>View the holidays we observe, for which employees receive paid time off.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/flexible-working-hours.html">Flexible working hours</a></h4>
<h4>
<a href="./benefits/flexible-working-hours.html">
<i class="fa-regular fa-sliders-up opacity-50 me-1"></i> Flexible working hours
</a>
</h4>

<p>Work the hours that are best for you each day. Details about windows of time to work within.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/flexible-remote-work.html">Flexible remote work</a></h4>
<h4>
<a href="./benefits/flexible-remote-work.html">
<i class="fa-regular fa-house-building opacity-50 me-1"></i> Flexible remote work
</a>
</h4>

<p>The flexibility to work remotely when needed from week-to-week.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/free-lunch-fridays.html">Free-lunch Fridays</a></h4>
<h4>
<a href="./benefits/free-lunch-fridays.html">
<i class="fa-regular fa-pot-food opacity-50 me-1"></i> Free-lunch Fridays
</a>
</h4>

<p>On the first Friday of each month, we gather together for a free meal.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/taco-tuesdays.html">Taco Tuesdays</a></h4>
<h4>
<a href="./benefits/taco-tuesdays.html">
<i class="fa-regular fa-taco opacity-50 me-1"></i> Taco Tuesdays
</a>
</h4>

<p>Every Tuesday we enjoy delicious breakfast tacos from local restaurants.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/office.html">Office environment</a></h4>
<h4>
<a href="./benefits/office.html">
<i class="fa-regular fa-chair-office opacity-50 me-1"></i> Office environment
</a>
</h4>

<p>We’ve invested heavily into creating a place team members love to work from.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/unique-culture.html">Unique culture</a></h4>
<h4>
<a href="./benefits/unique-culture.html">
<i class="fa-regular fa-face-grin-wide opacity-50 me-1"></i> Unique culture
</a>
</h4>

<p>Fast paced, ambitious goals, cutting edge technology—but without the usual risk.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/40-hour-work-weeks.html">40 hour work weeks</a></h4>
<h4>
<a href="./benefits/40-hour-work-weeks.html">
<i class="fa-regular fa-house-person-return opacity-50 me-1"></i> 40 hour work weeks
</a>
</h4>

<p>We really mean that. Our team members should enjoy a great work and personal life balance.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/modern-tech-stacks.html">Modern tech stacks</a></h4>
<h4>
<a href="./benefits/modern-tech-stacks.html">
<i class="fa-regular fa-bolt opacity-50 me-1"></i> Modern tech stacks
</a>
</h4>

<p>Cutting edge tools for an efficient and enjoyable working environment.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/new-parent-leave.html">New parent leave</a></h4>
<h4>
<a href="./benefits/new-parent-leave.html">
<i class="fa-regular fa-baby-carriage opacity-50 me-1"></i> New parent leave
</a>
</h4>

<p>All employees can take up to 12 weeks of leave when they become a new parent.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./benefits/dependent-care-fsa.html">Dependent care FSA</a></h4>
<h4>
<a href="./benefits/dependent-care-fsa.html">
<i class="fa-regular fa-child opacity-50 me-1"></i> Dependent care FSA
</a>
</h4>

<p>Set aside pre-tax dollars to pay for dependent care, reducing your taxes.</p>
</div>
</div>
Expand All @@ -152,52 +220,100 @@ <h2 class="display-6 border-bottom pb-2 mb-4">People operations</h2>

<div class="row gy-2">
<div class="col-12 col-sm-6">
<h4><a href="./employment-policies/at-will-employment.html">At-will employment</a></h4>
<h4>
<a href="./employment-policies/at-will-employment.html">
<i class="fa-regular fa-id-badge opacity-50 me-1"></i> At-will employment
</a>
</h4>

<p>Information about the nature of employment.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./people-operations/code-of-conduct.html">Code of conduct</a></h4>
<h4>
<a href="./people-operations/code-of-conduct.html">
<i class="fa-regular fa-thumbs-up opacity-50 me-1"></i> Code of conduct
</a>
</h4>

<p>How employees should conduct themselves as representatives of our company.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./people-operations/dress-code.html">Dress code</a></h4>
<h4>
<a href="./people-operations/dress-code.html">
<i class="fa-regular fa-shirt opacity-50 me-1"></i> Dress code
</a>
</h4>

<p>Comfortable and casual, but not tacky.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./people-operations/drugs-alcohol-and-weapons.html">Drugs, alcohol, and weapons</a></h4>
<h4>
<a href="./people-operations/drugs-alcohol-and-weapons.html">
<i class="fa-regular fa-space-station-moon opacity-50 me-1"></i> Drugs, alcohol, and weapons
</a>
</h4>

<p>Ensuring a safe and productive work environment.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./people-operations/employee-privacy.html">Employee privacy</a></h4>
<h4>
<a href="./people-operations/employee-privacy.html">
<i class="fa-regular fa-user-shield opacity-50 me-1"></i> Employee privacy
</a>
</h4>

<p>Privacy as it relates to our company and the workplace.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./employment-policies/equal-opportunity.html">Equal opportunity</a></h4>
<h4>
<a href="./employment-policies/equal-opportunity.html">
<i class="fa-regular fa-equals opacity-50 me-1"></i> Equal opportunity
</a>
</h4>

<p>Our stance against discrimination.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./hiring/handbook-acknowledgement.html">Handbook acknowledgement</a></h4>
<h4>
<a href="./hiring/handbook-acknowledgement.html">
<i class="fa-regular fa-file-signature opacity-50 me-1"></i> Handbook acknowledgement
</a>
</h4>

<p>Introduction to, and acknowledgment of, this employee handbook.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./people-operations/lunch-breaks.html">Lunch breaks</a></h4>
<h4>
<a href="./people-operations/lunch-breaks.html">
<i class="fa-regular fa-avocado opacity-50 me-1"></i> Lunch breaks
</a>
</h4>

<p>Information about taking a lunch break.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./people-operations/payroll-information.html">Payroll information</a></h4>
<h4>
<a href="./people-operations/payroll-information.html">
<i class="fa-regular fa-arrows-rotate opacity-50 me-1"></i> Payroll information
</a>
</h4>

<p>Useful information about how payroll works.</p>
</div>

<div class="col-12 col-sm-6">
<h4><a href="./hiring/piiaa.html">PIIAA</a></h4>
<h4>
<a href="./hiring/piiaa.html"><i class="fa-regular fa-shield-keyhole opacity-50 me-1"></i> PIIAA</a>
</h4>

<p>Proprietary information and inventions assignment agreement.</p>
</div>
</div>
Expand Down

0 comments on commit 78d7400

Please sign in to comment.