Skip to content

Instantly share code, notes, and snippets.

@johannaRlee

johannaRlee/careers-page.markdown

Created October 2, 2018 14:45
Show Gist options
  • Save johannaRlee/e016f7df99aeae4cd84981551c5f7b7c to your computer and use it in GitHub Desktop.
Save johannaRlee/e016f7df99aeae4cd84981551c5f7b7c to your computer and use it in GitHub Desktop.
Download ZIP
Careers Page
Raw
careers-page.markdown
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="./careerspage.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link script="script" type="text/javascript" src="./careerspage.js"/>
</head>
<h1 class="mainheading">CAREERS</h1>
<h4 class="mainheading">We’re connecting travelers with experiences through best in class technology and innovation.</h4>
<h5 class="mainheading">Ready for your next adventure?</h5>
<body class="container">
<section class="fadein">
<div class="row">
<p>Koddi was built on the idea that when you do better, bigger just happens. We are inspired by going beyond the expectations of our clients and as a result, we get to work with the biggest names and best people in the travel industry. At Koddi, every employee is empowered to make a massive impact for our clients and our team. </p>
</div>
<div class="row">
<p class="mainheading">Are you ready to make an impact?</p>
</div>
<div class="row">
<div class="col-xs-12 text-center">
<button class="a btn btn-info btn-lg btn-3d btn-round" href="#">APPLY NOW</button>
</div>
</div>
</section>
<section class="fadein">
<h1 class="mainheading">Perks and Benefits</h1>
<div class="row">
<div class="col-xs-3"><i class="fa fa-arrow-up" aria-hidden="true"> </i>
<h5>401K w/Employer Match *</h5>
<p>We invest in more than just your professional and personal growth.</p>
</div>
<div class="col-xs-3"><i class="fa fa-briefcase-medical" aria-hidden="true"> </i>
<h5>Wellness</h5>
<p>We've got you covered from quality insurance as well as other adhoc wellness programs.</p>
</div>
<div class="col-xs-3"><i class="fa fa-arrow-up" aria-hidden="true"></i>
<h5>Unlimited Vacation *</h5>
<p>We believe when our employees are well-rested, they do better work for our clients.</p>
</div>
<div class="col-xs-3"><i class="fa fa-arrow-up" aria-hidden="true"></i>
<h5>Gym Reimbursement</h5>
<p>Physical health is just as important to your well-being as anything else!</p>
</div>
</div>
<div class="row">
<div class="col-xs-3"><i class="fa fa-arrow-up" aria-hidden="true"></i>
<h5>Maternity/Paternity Leave</h5>
<p>Grow your family when you join ours</p>
</div>
<div class="col-xs-3"><i class="fa fa-arrow-up" aria-hidden="true"></i>
<h5>Generous Holiday Schedule*</h5>
<p>Holidays vary by country </p>
</div>
<div class="col-xs-3"><i class="fa fa-arrow-up" aria-hidden="true"></i>
<h5>Company Sponsored Happy Hours</h5>
<p>We love playing just as hard as we work</p>
</div>
<div class="col-xs-3"><i class="fa fa-arrow-up" aria-hidden="true"></i>
<h5>Team Bonding Events</h5>
<p>Company wide off-sites, friendly product competitions, and team specific outings!</p>
</div>
</div>
<div class="row">
<p>*Benefit only offered in US</p>
</div>
</section>
<section class="fadein">
<h1 class="mainheading">Culture At Koddi</h1>
<hr/>
<div class="row">
<div class="col-xs-6">
<h5>Who We Are</h5>
<p class="cardbody">We are inspired by the imagination of what’s possible and embrace challenges as opportunities. We push each other to go beyond, all in an effort to forge a better path for travelers through integrity, insights, inclusivity, and innovation. We raise our hand to work on projects outside the scope of our job descriptions. We work in open office spaces with open communication. </p>
</div>
<div class="col-xs-2 cultureimg specialculturea"><img class="image img-responsive culturebox" src="https://image.ibb.co/mPTeUz/life10.png"/></div>
<div class="col-xs-4 cultureimg specialcultureb"><img class="image img-responsive" src="https://preview.ibb.co/cK8MsK/life1.jpg"/></div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="cardbody">We’re not the 9 to 5’ers. We just get the job done when it needs done, and at the end of the day, we come back together to celebrate, relax and joke around with one another. We don’t put a cap on vacation, it’s based on mutual trust and teamwork…and we take real vacations. We’re casual and playful, but respectful. When we include, we don’t exclude. When we connect travelers, ideas, solutions and our offices, we are whole.</p>
</div>
<div class="col-xs-2 cultureimg specialculturea"><img class="image img-responsive culturebox" src="https://image.ibb.co/hfjKUz/life9.png"/></div>
<div class="col-xs-4 cultureimg specialcultureb"><img class="image img-responsive" src="https://preview.ibb.co/ekYXzz/life3.jpg"/></div>
</div>
</section>
<section class="fadein">
<h3 class="mainheading">Working here rocks...</h3>
<h4 class="mainheading">But don't just take it from us:</h4>
<hr/>
<div class="row mainheading">
<div class="col-xs-3"><img class="image img-responsive centerimg" src="https://via.placeholder.com/150x150"/>
<p class="cardbody">Award Title</p>
</div>
<div class="col-xs-3 cultureimg"><img class="image img-responsive centerimg" src="https://via.placeholder.com/150x150"/>
<p class="cardbody">Award Title</p>
</div>
<div class="col-xs-3 cultureimg"><img class="image img-responsive centerimg" src="https://via.placeholder.com/150x150"/>
<p class="cardbody">Award Title</p>
</div>
<div class="col-xs-3 cultureimg"><img class="image img-responsive centerimg" src="https://via.placeholder.com/150x150"/>
<p class="cardbody">Award Title</p>
</div>
</div>
</section>
<section class="fadein">
<h2 class="mainheading">Our Hiring Process</h2>
<div class="row">
<div class="col-md-12 centerimg"><img class="image img-responsive centerimg" id="hiringimg" src="https://image.ibb.co/dGMF1e/koddihiringprocess.png"/></div>
</div>
</section>
<section class="fadein">
<h3 class="mainheading">Begin your journey with us </h3>
<div class="row">
<div class="col-xs-12 text-center">
<button class="a btn btn-info btn-lg btn-3d btn-round" href="#">APPLY NOW</button>
</div>
</div>
</section>
<section class="fadein">
<h1 class="mainheading">Office locations</h1>
<div class="row">
<div class="col-xs-4"><img class="image img-responsive centerimg cultureimg officebox" src="https://image.ibb.co/eOjVHK/fw.png"/></div>
<div class="col-xs-4"><img class="image img-responsive centerimg cultureimg officebox" src="https://image.ibb.co/jN7T4z/d2.png"/></div>
<div class="col-xs-4"><img class="image img-responsive centerimg cultureimg officebox" src="https://image.ibb.co/iMz0jz/austin.png"/></div>
</div>
<div class="row">
<div class="col-xs-4"><img class="image img-responsive centerimg officebox" src="https://image.ibb.co/diCHxK/nyc.png"/></div>
<div class="col-xs-4"><img class="image img-responsive centerimg officebox" src="https://image.ibb.co/dLEVHK/a2.png"/></div>
<div class="col-xs-4"><img class="image img-responsive centerimg officebox" src="https://image.ibb.co/nDEBre/sanfran.png"/></div>
</div>
</section>
</body>
</html>
Raw
style.css
/*body div {
border: 1px solid black !important;
}*/
body {
font: 'helvetica neue';
}
.container {
margin-bottom: 15px;
}
.mainheading {
text-align: center;
}
.cardbody {
padding: 20px;
}
.cultureimg {
margin-bottom: 10px;
}
.centerimg {
display: block;
margin-left: auto;
margin-right: auto;
}
.specialculturea {
z-index: 2;
right: -50px;
height: 200px !important;
width: 200px !important;
position: absolute;
}
.specialcultureb {
z-index: 1;
position: absolute;
height: 250px !important;
width: 250px !important;
top: 20px;
left: -40px;
}
.culturebox {
box-shadow: 2px 3px 1px rgba(41, 36, 36, 0.39);
}
#hiringimg {
max-width: 30% !important;
}
.officebox {
box-shadow: 1mm;
top: 5px;
bottom: 5px;
left: 10px;
right: 10px;
z-index: -1;
box-shadow:0 0 5px 3px #7897b857;
border-radius:5px/5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment