<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta charset="UTF-8">
<title>Talent Aquisition Portal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-Frame-Options" content="DENY" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<!--
<meta http-equiv="X-UA-Compatible" content="IE=10" />
-->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/styles.css" rel="stylesheet"/>
</head>
<body>
<header class="bg-deepblue" id="headerArea" role="navigation">
<div class="container-fluid">
<nav class="navbar-header"> <a class="navbar-brand"> <img src="http://static.wixstatic.com/media/3a6d42_34f11c8b4b094c61837864622010b438.png_srz_1525_901_85_22_0.50_1.20_0.00_png_srz"height="65"alt="Company Name"> </a> </nav>
</div>
<div class="container"> <span class="row pull-right charterTitle"> Sample Application Title </span> </div>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-lg-10" id="bodyText" style="padding: 0px 0px 0px 0px">
<div clas="navbar navbar-inverse">
<div class="container-fluid bg-teal">
<ul class="nav nav-pills nav-justified col-md-12 col-lg-12">
<li class="nav-item"><a class="nav-link" href="#rules" data-toggle="tab">Nav-Tab 1</a></li>
<li class="nav-item"><a class="nav-link" href="#piplining" data-toggle="tab">Nav-Tab 2</a></li>
<li class="nav-item"><a class="nav-link" href="#branding" data-toggle="tab">Nav-Tab 3</a></li>
<li class="nav-item"><a class="nav-link" href="#selection" data-toggle="tab">Nav-Tab 4</a></li>
<li class="nav-item"><a class="nav-link" href="#resources" data-toggle="tab">Nav-Tab 5</a></li>
<li class="nav-item"><a class="nav-link" href="#benefits" data-toggle="tab">Nav-Tab 6</a></li>
<li class="nav-item"><a class="nav-link" href="#onboarding" data-toggle="tab">Nav-Tab 7</a></li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="row col-md-12 col-lg-12" id="home">
<p> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices mauris tellus, id facilisis dui dignissim a.
Cras facilisis metus sed eros lobortis, vel tempor sem sollicitudin. In et lectus condimentum, porta mauris ac, semper felis. </span> </p>
<p> <span><b>Section Heading:</b><br />
Morbi a nulla hendrerit, malesuada erat vel, ornare turpis. Phasellus pulvinar maximus iaculis. Proin at magna at enim scelerisque tempor.
Nam at lorem nibh. Mauris pharetra in ligula nec imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Mauris fringilla volutpat nulla, in pellentesque tortor placerat nec.
Vestibulum eu arcu at quam aliquam vestibulum. Integer sit amet convallis purus. Duis purus neque,
placerat in felis venenatis, lobortis vulputate nibh. Sed vel felis tortor.</span> </p>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 collapse" id="homefullspan" style="padding: 0px 0px 0px 0px">
<div clas="navbar navbar-inverse">
<div class="container-fluid bg-teal">
<ul class="nav nav-pills nav-justified col-md-12 col-lg-12">
<li class="nav-item"><a class="nav-link" href="#rules" data-toggle="tab">Nav-Tab 1</a></li>
<li class="nav-item"><a class="nav-link" href="#piplining" data-toggle="tab">Nav-Tab 2</a></li>
<li class="nav-item"><a class="nav-link" href="#branding" data-toggle="tab">Nav-Tab 3</a></li>
<li class="nav-item"><a class="nav-link" href="#selection" data-toggle="tab">Nav-Tab 4</a></li>
<li class="nav-item"><a class="nav-link" href="#resources" data-toggle="tab">Nav-Tab 5</a></li>
<li class="nav-item"><a class="nav-link" href="#benefits" data-toggle="tab">Nav-Tab 6</a></li>
<li class="nav-item"><a class="nav-link" href="#onboarding" data-toggle="tab">Nav-Tab 7</a></li>
</ul>
</div>
</div>
<div class="tab-content clearfix" role="navigation">
<div class="tab-pane fade" id="rules"style="padding:25px 25px 50px 0px;">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12 "> <a href="" onclick="return false;"target="_blank">Compliance at a Glance Reference Tool</a> </div>
<div class="col-lg-12"> <a href="https://charter.bravais.com/s/OgRA4NbYS5npS6BUm1PD" target="_blank">Affirmative Action Responsibilities</a> </div>
<div class="col-lg-12 "> <a href="" onclick="return false;"target="_blank">Definition of an Applicant</a> </div>
<div class="col-lg-12 "> <a href="" onclick="return false;"target="_blank">Dispositioning Applicants</a> </div>
<div class="col-lg-12"> <a href="https://charter.bravais.com/s/N7digq8LdLqKtC6NvA7T" target="_blank">ESC Onboarding Lifecycle & Process</a> </div>
<div class="col-lg-12 "> <a href="" onclick="return false;"target="_blank">Final Disposition Codes List</a> </div>
<div class="col-lg-12 "> <a href="" onclick="return false;"target="_blank">Identifying Best Candidate</a> </div>
<div class="col-lg-12 "> <a href="" onclick="return false;"target="_blank">Internal Transfer Process</a> </div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-lg-8"></div>
<div class="col-md-4 col-lg-4 pull-right" style="border-bottom:5px solid #0077BC" id="rcorners1">
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"style="color:#0077BC;">
<div class="row">
<div class="col-lg-5"> <a href="#"><img src="" class="img-circle center-block" alt=""></a> </div>
<div class="col-lg-7">
<h3 style="color:#0077BC;">Contact Us<i class="glyphicon-envelope"></i></h3>
<hr />
<address class="col text-left">
<label>Business Rules and Compliance: </label>
</address>
</div>
</div>
<div class="row col-lg-12 text-right"> <a style="color:#0077BC" title="Send email to Business Rules and Compliance" href="mailto:recruitmentmarketingservices@charter.com?subject=Feedback&body=Message"> <small>ecxczxczczxczczzxzczczcxczxzmail@charter.com</small> </a>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
</div>
</div>
</div>
<div class="tab-pane fade" id="piplining"style="padding:25px 25px 50px 0px;">
<div class="row">
<div class="col-lg-4">
<!-- <div class="groupHeader">
<h2 class="text-capitalize">Overview</h2>
</div>-->
<div class="col-lg-12 fa-font"> <a href="https://charter.bravais.com/s/mNyYmPWUd8LO2MXiCMuG" target="_blank">Pipeling and Sourcing Overvew</a> </div>
<div class="col-lg-12 fa-font"> <a href="" onclick="return false;"target="_blank">Pipelining & Sourcing Event Playbook</a> </div>
<div class="col-lg-12"> <a href="" onclick="return false;"target="_blank">Charter Apprenticeship Overview Executive Summary</a> </div>
<!-- <div class="col-lg-12"> <a href="" target="_blank">Sourcing Roadmap</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Sourcing Engagement & Support</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Scopes of Services</a> </div>
<div class="groupHeader">
<h2 class="text-capitalize">Priority Programs & Initiatives</h2>
</div>
<div class="col-lg-12"> <a href="" target="_blank">Diversity</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Military</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">University</a> </div>-->
</div>
<div class="col-lg-4">
<!--<div class="groupHeader">
<h2 class="text-capitalize">Education & Training</h2>
</div>
<div class="col-lg-12"> <a href="" target="_blank">Sourcing Tool Kit</a> </div>-->
</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-md-4 col-lg-4"></div>
<div class="col-md-6 col-lg-6 pull-right" style="border-bottom:5px solid #0077BC" id="rcorners1">
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" style="color:#0077BC;">
<div class="row">
<div class="col-lg-5"> <a href="#"> <img src="assets/SourcingPipeliningPrograms.png" class="img-circle center-block" alt="" style="padding-top:10px"> </a> </div>
<div class="col-lg-7">
<h3 style="color:#0077BC;">Contact Us<i class="glyphicon-envelope"></i></h3>
<hr />
<label>Diversity Recruiting: </label>
<a style="color:#0077BC" title="" href="mailto:spectrum.diversityrecruiting@charter.com"><small> Spectrum.Diversityrecruiting@charter.com </small>
<label>Military Recruiting: </label>
<a style="color:#0077BC" title="" href="mailto:Spectrum.MilitaryRecruitment@charter.com"><small> Spectrum.MilitaryRecruitment@charter.com </small>
<label>University Recruiting: </label>
<a style="color:#0077BC" title="" href="mailto:SpectrumUniversityRelations@charter.com"><small> SpectrumUniversityRelations@charter.com </small> </div>
</div>
</div>
<div class="row col-lg-offset-4"> </div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
</div>
</div>
</div>
<div class="tab-pane" id="branding"style="padding:25px 25px 50px 0px;">
<div class="row">
<div class="col-lg-4">
<div class="groupHeader">
<h2 class="text-capitalize">Social Media</h2>
</div>
<div class="col-lg-12"> <a href="" target="_blank">Career Social Media Pages</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Hard-to-fill social postings</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Event Posts</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Content and Requests</a> </div>
<div class="groupHeader">
<h2 class="text-capitalize">Career Site</h2>
</div>
<div class="col-lg-12"> <a href="" target="_blank">Advanced Job Descriptions</a> </div>
</div>
<div class="col-lg-4">
<div class="groupHeader">
<h2 class="text-capitalize">Employment Branding</h2>
</div>
<div class="col-lg-12"> <a href="" target="_blank">Brand Guidelines/Logos</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Video Assets</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Collateral</a> </div>
<div class="groupHeader">
<h2 class="text-capitalize">Recruitment Marketing</h2>
</div>
<div class="col-lg-12"> <a href="" target="_blank">PPC Advertising</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Online Banners</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Digital Radio</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Job Boards</a> </div>
</div>
<div class="col-lg-4">
<div class="groupHeader">
<h2 class="text-capitalize">Support Services</h2>
</div>
<div class="col-lg-12"> <a href="" target="_blank">Vendor Contracts</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">License Management</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Metrics</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Data Request</a> </div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-lg-8"></div>
<div class="col-md-4 col-lg-4 pull-right" style="border-bottom:5px solid #0077BC" id="rcorners1">
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"style="color:#0077BC;">
<div class="row">
<div class="col-lg-5"> <a href="#"><img src="assets/EmploymentBrandingSocialMedia.png" class="img-circle center-block" alt="" style="padding-top:10px"></a> </div>
<div class="col-lg-7">
<h3 style="color:#0077BC;">Contact Us<i class="glyphicon-envelope"></i></h3>
<hr />
<address class="col text-left">
<label>Marketing Services: </label>
<a style="color:#0077BC" title="Send email to Recruitment Marketing Services" href="mailto:recruitmentmarketingservices@charter.com?subject=Feedback&body=Message"> <small>recruitmentmarketingservices@charter.com</small> </a>
</address>
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
</div>
</div>
</div>
<div class="tab-pane fade" id="selection"style="padding:25px 25px 50px 0px;">
<div class="row">
<div class="col-lg-4">
<div class="groupHeader">
<h2 class="text-capitalize">Selection Support Tools</h2>
</div>
<div class="col-lg-12"> <a href="" target="_blank">Selection & Assessment at Charter</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Assessment Demo Links</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Additional Work Aids and Information</a> </div>
<div class="groupHeader">
<h2 class="text-capitalize">Frequently Asked Questions</h2>
</div>
<div class="col-lg-12"> <a href="" target="_blank">Assessment-specific FAQs</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Other FAQs</a> </div>
</div>
<div class="col-lg-4">
<div class="groupHeader">
<h2 class="text-capitalize">Interviewing</h2>
</div>
<div class="col-lg-12"> </div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-lg-8"></div>
<div class="col-md-4 col-lg-4 pull-right container-fluid" style="border-bottom:5px solid #0077BC" id="rcorners1">
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" style="color:#0077BC;">
<div class="row">
<div class="col-lg-5"><a href="#"> <img src="assets/SelectionAssessment.png" class="img-circle" alt="" style="padding-top:10px"> </a> </div>
<div class="col-lg-7">
<h3 style="color:#0077BC;">Contact Us<i class="glyphicon-envelope"></i></h3>
<hr />
<a style="color:#0077BC" title="Send email to Selection Support" href="mailto:Selection.Support@charter.com?subject=Feedback&body=Message"> <small>
<label>Email: </label>
Selection.Support@charter.com</small> </div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
</div>
</div>
</div>
<div class="tab-pane fade" id="resources"style="padding:25px 25px 50px 0px;">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12 fa-font"> <a href="" target="_blank">Position/Requisition Request Form </a> </div>
</div>
</div>
</div>
<div class="tab-pane fade" id="benefits"style="padding:25px 25px 50px 0px;">
<div class="row">
<div class="col-lg-8">
<h2 style="color:#FFFFFF"> Charter 2017 Benefits Guide </h2>
<a href="" target="_blank">Intended to be used when closing a candidate; may be distributed to candidates. </a>
<h2 style="color:#FFFFFF"> Charter 2017 Benefits Highlights </h2>
<a href="" target="_blank">Intended to be used with candidates during any state in the process; may be distributed to candidates. </a>
<h2 style="color:#FFFFFF"> Charter 2017 Benefits Sales Tips </h2>
<a href="" target="_blank">Intended to be used as talking points and not to be distrubuted to candidates. </a> </div>
</div>
<div class="row">
<div class="col-md-8 col-lg-8"></div>
<div class="col-md-5 col-lg-5 pull-right container-fluid" style="border-bottom:5px solid #0077BC" id="rcorners1">
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"style="color:#0077BC;">
<div class="row">
<div class="col-lg-5"> <a href="#"><img src="assets/EmploymentBrandingSocialMedia.png" class="img-circle center-block" alt="" style="padding-top:10px"></a> </div>
<div class="col-lg-7">
<h3 style="color:#0077BC;">Contact Us<i class="glyphicon-envelope"></i></h3>
<hr />
<address>
<label>Email: </label>
<a style="color:#0077BC" title="Send email to Recruitment Marketing Services" href="mailto:recruitmentmarketingservices@charter.com?subject=Feedback&body=Message"> <small>recruitmentmarketingservices@charter.com</small> </a>
</address>
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
</div>
</div>
</div>
<div class="tab-pane fade" id="onboarding"style="padding:25px 25px 50px 0px;">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12 fa-font"> <a href="" target="_blank">Employee Service Center Overview & Contacts</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">2017 ESC OBS Process Overview</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">ESC Candidate Lifecycle Infographic</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Charter Criminal Matrix 2017</a> </div>
<div class="col-lg-12"> <a href="" target="_blank">Employee New Badge Request</a> </div>
<div class="col-lg-12"> <a href="" target="_blank"> I-9 Verify Admin Reference Guide</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 "id="mostpop">
<div class="text-center text-uppercase"><b style="color: #005F9B">nav-stacked</b></div>
<ul class="nav nav-stacked bg-lightgrey">
<li class="nav-item"> <a class="nav-link" href="#"id="1"><small class="badge bg-danger">1</small><b style="color: #005F9B"> nav-item</b></a> </li>
<li class="nav-item"> <a class="nav-link" href="#"id="2"><small class="badge bg-danger">2</small><b style="color: #005F9B"> nav-item</b></a> </li>
<li class="nav-item"> <a class="nav-link" href="#"id="3"><small class="badge bg-danger">3</small><b style="color: #005F9B"> nav-item</b></a> </li>
<li class="nav-item"> <a class="nav-link" href="#"id="4"><small class="badge bg-danger">4</small><b style="color: #005F9B"> nav-item </b></a> </li>
<li class="nav-item"> <a class="nav-link" href="#"id="5"><small class="badge bg-danger">5</small><b style="color: #005F9B"> nav-item</b></a> </li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
/* CSS Document */
p{color:#005F9B;
}
p,small{color:#005F9B;
}
.groupHeader {color:black;
}
a {
color: #FFFFFF;
text-decoration: none;
}
/* Navbar Header */
.navbar-inverse{ background-color: #003057;
}
.bg-deepblue {
background-color: #003057;
}
.bg-teal {
background-color: #009E8C;
}
.bg-lightgrey{background-color: #D3D3D3;
}
.bg-info {
background-color: #0077BB;
}
.navbar {
margin-bottom: 0px;
border:none;
}
.nav li a
{
/*height: 78px;*/
/*text-align: center;*/
/* line-height: 50px;*/
color: #FFFFFF;
}
.nav li:hover
{
background-color: #D3D3D3;
}
.nav-tabs{
background-color:#009E8C;
border-bottom: hidden;
}
.nav-pills{
background-color:#009E8C;
border-bottom: hidden;
}
.tab-content{ background-color: #808285;
border-bottom:1px solid #0077BB ;
padding-top: 5px;
padding-right: 15px;
padding-left: 15px;
}
.tab-pane{
font-size: large;
}
.nav-tabs > li > a{
border: medium none;
}
.nav-tabs > li > a:hover{
background-color: #D3D3D3;
border: medium none;
border-radius: 0;
color:#005F9B;
font-weight: bold;
}
.nav-pills > li > a:hover{
background-color: #D3D3D3;
border: medium none;
border-radius: 0;
color:#005F9B;
font-weight: normal;
}
.nav.nav-tabs li:not(:last-child) a {
border-right: 3px solid #ccc;
border-radius: 0;
}
.nav.nav-tabs li a {
border-radius: 0; /* avoid curved divisor corner */
}
.nav.nav-pills > li.active a { /* add tab dividers*/
border: 0;
}
.nav.nav-pills li:not(:last-child) a {
border-right: 1px solid #ccc;
border-radius: 0;
}
.nav.nav-pills li a {
border-radius: 0; /* avoid curved divisor corner */
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover
{
color: #FFFFFF;
background-color: #808285;
border-bottom:5px solid #0077BB ;
font-weight: bold;
}
.navbar-inverse > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover
{
color: #FFFFFF;
background-color: #808285;
border-bottom:5px solid #0077BB ;
font-weight: bold;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover
{
color: #FFFFFF;
background-color: #808285;
border-bottom:5px solid #0077BB ;
font-weight: bold;
}
/* End Navbar Header */
.btn-default {
display:block;
margin:auto;
width:120px;
}
#rcorners1 {
border-radius: 25px;
background: #D3D3D3;
padding-bottom:15px;
color:#0077BC;
}
#rcorners1 small{
border-radius: 25px;
background: #D3D3D3;
padding-bottom:15px;
color:#0077BC;
}
.vcenter {
display: inline-block;
vertical-align: bottom;
float: none;
}
.charterTitle
{
font-family: Gotham;
font-size:xx-large;
color: #FFFFFF;
}
$("#submit").click(function(){
var email = 'test@yourdomain.com';
var subject = 'Sample Subject';
var emailBody = $("#emailMessage").val();
window.location = 'mailto:' + email + '?subject=' + subject + '&body=' + emailBody;
location.reload();
});
$(document).ready(function(){
$('body').keydown(function(e){
if (e.which==27){
$("#homefullspan").collapse('hide');
$("#bodyText").show('fade');
$("#mostpop").show('fade');
}
});
$(".nav-link").hover(function(e){
//Check the div id
if(this.id=="1"){e.preventDefault();}
else if(this.id=="2"){e.preventDefault();}
else if(this.id=="3"){e.preventDefault();}
else if(this.id=="4"){e.preventDefault();}
else if(this.id=="5"){e.preventDefault();}
else
{$("#bodyText").hide();$("#mostpop").hide('fade'); $("#homefullspan").collapse('show'); $(this).tab('show');}
});
$(".navbar-inverse").hover(function(){
$("#homefullspan").collapse('hide');
$("#bodyText").show('fade');
$("#mostpop").show('fade');
});
$("#headerArea").hover(function(){
$("#homefullspan").collapse('hide');
$("#bodyText").show('fade');
$("#mostpop").show('fade');
});
$("#emailMessage").click(function(){
$("#footerArea").height(200);
$(this).attr('rows',10);
});
});
