Careers Landing Template

A mixed one- and two-column responsive template used for the Careers landing page.

Resize window to see mobile.

page screenshot
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11

  1. Section header

    Wrap header with <header class="section-header">. Define section further with <h3> and <a id="section-header-ed">; color is from class="education". On scroll on desktop and tablet, JavaScript will affix header to top (with Menu and Search). (See scripts.js.)

  2. Main body wrapper

    Below the section header, wrap the content with <div id="outer-content" class="wrap cf"> and with an inner wrapper <div id="inner-content">.

  3. Banner

    Place banner in two header tags: outer in <header class="section-header">; inner in <header class="banner-image m-all t-all d-all cf">. Enclose image in a <div>, and wrap with <img class="attachment-full size-full wp-post-image">. Image size is 960 x 132.

    Style banner title overlay with <h1 class="banner-title"><div><h1 class="careers-heading">.

  4. Main body content

    Wrap body content with <main id="main" class="m-all t-all d-all cf">. Align for tablet and desktop with <article role="article" class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12">.

  5. Header

    Style header with <h1>.

  6. Careers multimedia script

    Call multimedia gallery script:
    <div id="jquery_jplayer" style="width: 0px; height: 0px;">
    <img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
    <object id="jp_flash_0" data="../../dist/jplayer/jquery.jplayer.swf" name="jp_flash_0" type="application/x-shockwave-flash" width="1" height="1" tabindex="-1" style="width: 0px; height: 0px;">
    <param name="flashvars" value="jQuery=jQuery&id=jquery_jplayer&vol=0.8&muted=false">
    <param name="allowscriptaccess" value="always">
    <param name="bgcolor" value="#000000">
    <param name="wmode" value="window">

  7. Multimedia container

    To create the UI, wrap container in <div id="jp_container" class="demo-container">, then <div class="slideshow_large">. Enclose each large image in <div class="slide_large" id="slide_largeX"> (where X is slide number) and add <span class="active"> class to currently active image.

  8. Pull quote

    Treat pull quote with <div class="quote"> and author of pull quote with <p class="quote-author">.

  9. Audio controls

    Create a toggleable play/pause control with <ul class="careers-audio-controls">. Make a Play button via <a class="jp-play">; Pause with <a class="jp-pause">. Toggle with inline or block property as per user input.

  10. Multimedia thumbnails

    Wrap the thumbnail nav with <div class="quote">
    . Each thumbnail will toggle both corresponding slide and accompanying mp3 with <span class="slide_thumb" id="slideX_thumb" href="/files/YYY.mp3"> and <a href="#"><img src="/files/photoX-tba.jpg"></a><a href="/files/YYY.mp3" class="track track-default">, where X = slide number and YYY = audio track name.

  11. Find Job columns

    Create a responsive two-column job search section with a wrapper <div class="find-a-job">. Style section header with <h2 class="landing-section-title">. Define each column with the same tag: <div class="m-all t-all d-6of12">. Style job categories with <h5>.