Initial careers work

This commit is contained in:
Thomas Smith 2023-02-28 19:14:53 -05:00
parent f0033e210d
commit 5dfdb9b41e

View file

@ -1,20 +1,13 @@
{{ define "main" }} {{ define "main" }}
<section class="two-boxes hero-section"> <!-- Hero Section -->
<section class="hero one-box">
<div>
<span id="aa62fd265a9f"></span>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row gx-5">
<div class="col"> <div class="col-xl-2 col-lg-2 col-md-0 col-sm-0 col-0"></div>
<h1>Careers</h1> <div class="hero-col col-xl-8 col-lg-8 col-md-0 col-sm-0 col-0 my-auto">
<p class="lead">Join us!</p> <h1 class="display-1 hero-text text-center" style="z-index:3; position: relative;"><span class="inner-glow ">Careers</h1>
<p>tea is building an open-source ecosystem that is fair for everyone. We are growing our team of talented people to make this happen. We are looking for curious, passionate, and smart teammates. If you are interested please check out our open positions below.</p> <p class="lead hero-lead mb-5 text-center">tea is building an open-source ecosystem that is fair for everyone. We are growing our team of talented people to make this happen. We are looking for curious, passionate, and smart teammates. If you are interested please check out our open positions below.</p>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div> </div>
</div> </div>
</div> </div>
@ -22,90 +15,22 @@
<hr> <hr>
<div class="accordion" id="accordionExample"> <section>
<div class="accordion-item"> <div class="container one-box">
<h2 class="accordion-header" id="headingOne"> <div class="container mt-5 mb-5">
<button class="accordion-button" id="jobOne" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <div class="row">
Accordion Item #1 <div class="col">
</button> <h3 class="display-6 mb-4">Current Openings</h3>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body two-boxes">
<div class="one-box-down">
<p>Employment type: <span id="typeOne"></span></p>
<p>Department: <span id="deptOne"></span></p>
<p>Location: <span id="locOne"></span></p>
</div>
<div class="one-box-down">
<hr>
</div>
<div class="one-box-down" id="descOne"></div>
<div>
<a href="" id="linkOne">
<button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</a>
</div> </div>
</div> </div>
<div class="row" id="card-container"></div>
</div> </div>
</div> </section>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" id="jobTwo" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body two-boxes">
<div class="one-box-down">
<p>Employment type: <span id="typeTwo"></span></p>
<p>Department: <span id="deptTwo"></span></p>
<p>Location: <span id="locTwo"></span></p>
</div>
<div class="one-box-down">
<hr>
</div>
<div class="one-box-down" id="descTwo"></div>
<div>
<a href="" id="linkTwo">
<button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</a>
</div>
</div>
</div>
</div>
<!--
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" id="jobThree" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body two-boxes">
<div class="one-box-down">
<p>Employment type: <span id="typeThree"></span></p>
<p>Department: <span id="deptThree"></span></p>
<p>Location: <span id="locThree"></span></p>
</div>
<div class="one-box-down">
<hr>
</div>
<div class="one-box-down" id="descThree"></div>
<div>
<a href="" id="linkThree">
<button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</a>
</div>
</div>
</div>
</div>
-->
</div>
<!-- Why Work at tea --> <!-- Why Work at tea -->
<section class="teal-bg two-boxes"> <section class="teal-bg two-boxes">
<div class="row"> <div class="row">
<div class="container two-boxes"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3 class="black text-center">Why work @ tea?</h3> <h3 class="black text-center">Why work @ tea?</h3>
@ -117,12 +42,89 @@
</section> </section>
<script>
// Fetch data from API
fetch("https://tea.breezy.hr/json?verbose=true")
.then(response => response.json())
.then(data => {
// Loop through data and create card for each item
data.forEach(item => {
// Create card element
const card = document.createElement("div");
card.classList.add("card", "mb-3");
// Create card body element
const cardBody = document.createElement("div");
cardBody.classList.add("card-body");
// Add name to card body
const title = document.createElement("h5");
title.classList.add("card-title");
title.textContent = item.name;
cardBody.appendChild(title);
// Add description to card body
const description = document.createElement("div");
description.classList.add("card-text");
description.innerHTML = item.description.slice(0, 100);
cardBody.appendChild(description);
// Add show more link to card body
const showMoreLink = document.createElement("a");
showMoreLink.classList.add("text-primary", "mr-3");
showMoreLink.href = "#";
showMoreLink.textContent = "Show more";
showMoreLink.addEventListener("click", event => {
event.preventDefault();
if (description.innerHTML === item.description) {
description.innerHTML = item.description.slice(0, 100);
showMoreLink.textContent = "Show more";
} else {
description.innerHTML = item.description;
showMoreLink.textContent = "Show less";
}
});
cardBody.appendChild(showMoreLink);
// Add url link to card body
const urlLink = document.createElement("a");
urlLink.classList.add("text-primary");
urlLink.href = item.url;
urlLink.textContent = "Go to URL";
cardBody.appendChild(urlLink);
// Add card body to card
card.appendChild(cardBody);
// Add card to container
const container = document.getElementById("card-container");
const row = document.createElement("div");
row.classList.add("row");
const col = document.createElement("div");
col.classList.add("col");
col.appendChild(card);
row.appendChild(col);
container.appendChild(row);
});
})
.catch(error => console.log(error));
</script>
<style> <style>
.accordion-button{ .accordion-button{
line-height: 6vw; line-height: 6vw;
} }
.card-body{
background-color: #1a1a1a;
}
.card-text.show-more {
max-height: none !important;
}
</style> </style>
{{ end }} {{ end }}