Basic Font Styles

h1, Geogrotesque, @text-insane

h2, Geogrotesque Bold, @text-insane

h3, Geogrotesque Bold, @text-huge

h4, Geogrotesque Bold, @text-medium

h5, Geogrotesque, @text-small
h6, Geogrotesque, @text-tiny

p tag, Geogrotesque Light, @text-small, and here's em in Geogrotesque Italic and strong in Geogrotesque Bold


        <h1>h1, Geogrotesque, @text-insane</h1>
        <h2>h2, Geogrotesque Bold, @text-insane</h2>
        <h3>h3, Geogrotesque Bold, @text-huge</h3>
        <h4>h4, Geogrotesque Bold, @text-medium</h4>
        <h5>h5, Geogrotesque, @text-small</h5>
        <h6>h6, Geogrotesque, @text-tiny</h6>
        <p>p tag, Geogrotesque Light, @text-small, and here's <em>em in Geogrotesque Italic</em> and <strong>strong in Geogrotesque Bold</strong></p>
      

Buttons

Red Button (default) Blue Button Orange Button Green Button Red Button


        <a href="#" class="oe-button">Red Button (default)</a>
        <a href="#" class="oe-button oe-button--blue">Blue Button</a>
        <a href="#" class="oe-button oe-button--orange">Orange Button</a>
        <a href="#" class="oe-button oe-button--green">Green Button</a>
        <a href="#" class="oe-button oe-button--red">Red Button</a>

      

Navigation Button Groups



        <div class="oe-button-group">
          <a href="#" class="oe-button oe-button--blue">Blue Button</a>
          <a href="#" class="oe-button oe-button--blue">Blue Button</a>
          <div class="oe-button oe-button--blue-light oe-button--dropdown">
            Dropdown
            <div class="oe-dropdown-contents">
              <a href="#" class="oe-dropdown-item">Dropdown Item 1</a>
              <a href="#" class="oe-dropdown-item">Dropdown Item 2</a>
              <a href="#" class="oe-dropdown-item">Dropdown Item 3</a>
            </div>
          </div>
        </div>

      

Image Button


      <!-- 10/3/14 switched image buttons around so they
           don't provide their own size and require a grid -->
      <div class="oe-grid oe-grid--3">
        <div class="oe-grid-element">
          <div class="oe-image-button">
            <div class="oe-thumbnail">
              { aposSingleton(page, 'thumbnail', 'slideshow') }
            </div>
            <a href="#" class="oe-button oe-button--blue">Allentown, PA</a>
          </div>
        </div>
      </div>

      

PDF Button

Logo & Logo Toggle


^ toggle `oe-logo--small`


        <div class="oe-logo oe-logo--text"></div>
        <div class="oe-logo oe-logo--white-text sg-bg-black"></div>
        <div class="oe-logo"></div>
        <!-- demonstration only -->
        <div class="oe-logo oe-logo--text oe-logo--small" data-oe-logo></div><br />
        <div class="oe-button" data-oe-logo-toggle>^ toggle `oe-logo--small`</div>

      

Background Marquee Layouts

this is the foreground

BUTTON STUFF

        <!-- use oe-marquee--edit-button if you need access to
             an edit button in the oe-background and use
             oe-marquee--fixed for fixed height (680px) -->

        <div class="oe-marquee oe-marquee--edit-button oe-marquee--fixed">
          <div class="oe-background">
            { aposSingleton(page, 'sgMarquee', 'marquee', {}) }
          </div>
          <div class="oe-foreground">
            <h3>this is the foreground</h3>
            <div class="oe-button">BUTTON STUFF</div>
          </div>
        </div>
      

 

Vertical Centering

A few more classes gets you vertically centered...


this is centered content

made possible by oe-marquee--fixed

        <div class="oe-marquee oe-marquee--edit-button oe-marquee--fixed oe-marquee--vertical-center">
          <div class="oe-background">
            { aposSingleton(page, 'sgMarquee', 'marquee', {}) }
          </div>
          <div class="oe-foreground">
            <div class="oe-foreground-content oe-foreground-content--centered">
              <h3>this is centered content</h3>
              <div class="oe-button">made possible by oe-marquee--fixed</div>
            </div>
          </div>
        </div>
      

 

Color Overlays

And yet more classes give you colored overlays.


this is centered content

made possible by oe-marquee--fixed

        <div class="oe-marquee oe-marquee--edit-button oe-marquee--fixed oe-marquee--vertical-center">
          <div class="oe-background oe-background--overlay oe-background--overlay--orange">
            { aposSingleton(page, 'sgMarquee', 'marquee', {}) }
          </div>
          <div class="oe-foreground">
            <div class="oe-foreground-content oe-foreground-content--centered">
              <h1>this is centered content</h1>
              <div class="oe-button">made possible by oe-marquee--fixed</div>
            </div>
          </div>
        </div>
      

Schema Widget

Fully-functioning widget version of marquee

Sidebar

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptatum, in qui. Iusto ab nemo dolor odit distinctio assumenda quas unde quam eligendi corrupti, maiores, nobis pariatur officia omnis laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque, minus iure tempore quo odio itaque cupiditate autem quis amet quibusdam nisi minima necessitatibus facilis id, odit quod in dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto soluta nostrum repudiandae suscipit perspiciatis eos quasi esse, culpa nesciunt quibusdam, accusantium numquam necessitatibus error itaque iure quaerat. Tempora, iste possimus.


        <div class="column-25">
          <div class="oe-sidebar-image">
            { aposSingleton(page, 'sidebarImage', 'slideshow') }
          </div>
          <a href="#" class="oe-sidebar-item">Subpage 1</a>
          <a href="#" class="oe-sidebar-item">Subpage 2</a>
          <a href="#" class="oe-sidebar-item">Subpage 3</a>
          <a href="#" class="oe-sidebar-item">Subpage 4</a>
        </div>
        <div class="column-75">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptatum, in qui.
          Iusto ab nemo dolor odit distinctio assumenda quas unde quam eligendi corrupti,
          maiores, nobis pariatur officia omnis laboriosam.
        </div>

      

Page Title & Breadcrumbs

Page Title


        <div class="oe-title-block">
          <div class="oe-title-block-inner">
            <h1 class="oe-title oe-title--indent">Page Title</h1>
          </div>
        </div>
      

 

Page Title


        <div class="oe-menu oe-menu--right">
          <div class="oe-button-group oe-button--overlap">
            <a href="#" class="oe-button oe-button--blue">Blue Button</a>
            <a href="#" class="oe-button oe-button--blue">Blue Button</a><!--
         --><div class="oe-button oe-button--blue-light oe-button--dropdown">
              Dropdown
              <div class="oe-dropdown-contents">
                <a href="#" class="oe-dropdown-item">Dropdown Item 1</a>
                <a href="#" class="oe-dropdown-item">Dropdown Item 2</a>
                <a href="#" class="oe-dropdown-item">Dropdown Item 3</a>
              </div>
            </div>
          </div>
        </div>
        <div class="oe-title-block">
          <div class="oe-title-block-inner">
            <div class="oe-breadcrumbs">
              <a class="oe-breadcrumb" href>Home</a> > <a class="oe-breadcrumb oe-breadcrumb--current" href>Page Title</a>
            </div>
            <h1 class="oe-title oe-title--indent">Page Title</h1>
          </div>
        </div>
      

Card Widget

3.20.14
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, obcaecati, delectus. Totam, doloribus. Quibusdam consectetur velit explicabo adipisci maiores vitae dolorum repellat!


        <div class="oe-card">
          <div class="oe-card-image oe-slideshow--cover">{aposSingleton(page, 'cardImage', 'slideshow')}</div>
          <div class="oe-card-date">3.20.14</div>
          <div class="oe-card-body">
            <div class="oe-card-title">Card Title</div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, obcaecati, delectus. Totam, doloribus. Quibusdam consectetur velit explicabo adipisci maiores vitae dolorum repellat!
            <div class="oe-card-link">Read More</div>
          </div>
        </div>

      

Sections

This is a section


        <div class="oe-section">
          <div class="oe-section-inner">
            <h4>This is a section</h4>
            <div class="oe-section-tri oe-section-tri--left"></div>
          </div>
        </div>
        <!-- the wrapper is not necessary but allows us to fix the height -->
        <div class="oe-section-wrapper oe-section-wrapper--fixed-height">
          <div class="oe-section oe-section--half oe-section--white">
          </div><div class="oe-section oe-section--half oe-section--orange">
            <div class="oe-section-tri oe-section-tri--left-side oe-section-tri--orange"></div>
          </div>
        </div>
      

Section Schema-Widget


        { aposSingleton(page, 'sectionSlideshow', 'sectionSlideshow') }
      

Slideshow Colulmn

Tags

All
Interviewing Skills
Resume Skills
Amazon
Tips

        <div class="oe-tag oe-tag--active">All</div>
        <div class="oe-tag">Interviewing Skills</div>
        <div class="oe-tag">Resume Skills</div>
        <div class="oe-tag">Amazon</div>
        <div class="oe-tag">Tips</div>
      

Inputs

 

Natural Language module view
I am looking for a shift operator job within
50 miles
  • 50 miles
  • 25 miles
  • 10 miles
  • 5 miles
of Philadelphia.

 

5 miles
10 miles
15 miles
Allentown, PA
Lancaster, PA
New York, NY

        <!-- oe-form-element is NOT necessary for the styles to apply,
             but let's stick to the format in case we need grouping styles -->
        <div class="oe-form-element">
          <label class="oe-label" for="what">What are you looking for?</label>
          <input type="text" name="what" class="oe-input width-50" placeholder="Job Title, Industry, etc." />
        </div>
        <div class="oe-form-element">
          <label class="oe-label" for="where">Where should we look?</label>
          <input type="text" name="where" class="oe-input width-50" placeholder="Zip Code, City, State, etc." />
        </div>

        <input type="submit" value="Search" />


        <div class="oe-form-element">
        <div class="oe-multiselect width-50" data-oe-multiselect>
          <div class="oe-multiselect-group">
            <label class="oe-multiselect-group-label" data-oe-multiselect-toggle>Distance</label>
            <div class="oe-multiselect-group-items">
              <div class="oe-multiselect-group-item radio" data-oe-multiselect-radio>5 miles</div>
              <div class="oe-multiselect-group-item radio" data-oe-multiselect-radio>10 miles</div>
              <div class="oe-multiselect-group-item radio" data-oe-multiselect-radio>15 miles</div>
            </div>
          </div>
          <div class="oe-multiselect-group">
            <label class="oe-multiselect-group-label" data-oe-multiselect-toggle>Location</label>
            <div class="oe-multiselect-group-items">
              <div class="oe-multiselect-group-item" data-oe-multiselect-checkbox>Allentown, PA</div>
              <div class="oe-multiselect-group-item" data-oe-multiselect-checkbox>Lancaster, PA</div>
              <div class="oe-multiselect-group-item" data-oe-multiselect-checkbox>New York, NY</div>
            </div>
          </div>
        </div>
      

Footer


        <div class="oe-footer">
          <div class="column-25">{ aposArea(global, 'footerCol1', { textOnly: true }) }</div>
          <div class="column-25">{ aposArea(global, 'footerCol2', { textOnly: true }) }</div>
          <div class="column-25">{ aposArea(global, 'footerCol3', { textOnly: true }) }</div>
          <div class="column-25">{ aposArea(global, 'footerCol4', { textOnly: true }) }</div>
        </div>
      

Slideshow Projectors

Projector-enabled lockups need to follow this format:


        <div data-oe-projector>
          <div data-slideshow-items>
            <div data-slideshow-item></div>
            <div data-slideshow-item></div>
            <div data-slideshow-item></div>
          </div>
          <div data-next></div>
          <div data-previous></div>
        </div>
      

 

this is slide #1

this is slide #2

this is slide #3


        <div class="oe-projector oe-projector--large" data-oe-projector>
          
          <div class="oe-slides" data-slideshow-items>
            <div class="oe-slide oe-marquee--vertical-center oe-marquee--fixed oe-current" data-slideshow-item>
              <div class="oe-background oe-background--overlay oe-background--overlay--blue"></div>
              <div class="oe-foreground">
                <div class="oe-foreground-content oe-foreground-content--centered">
                  <p>this is slide #1</p>
                </div>
              </div>
            </div>
            
            <div class="oe-slide oe-marquee--vertical-center oe-marquee--fixed" data-slideshow-item>
              <div class="oe-background oe-background--overlay oe-background--overlay--orange"></div>
              <div class="oe-foreground">
                <div class="oe-foreground-content oe-foreground-content--centered">
                  <p>this is slide #2</p>
                  { aposArea(page, 'projectorArea', { textOnly: true }) }
                </div>
              </div>
            </div>
            
            <div class="oe-slide oe-marquee--vertical-center oe-marquee--fixed" data-slideshow-item>
              <div class="oe-background oe-background--overlay oe-background--overlay--red"></div>
              <div class="oe-foreground">
                <div class="oe-foreground-content oe-foreground-content--centered">
                  <p>this is slide #3</p>
                </div>
              </div>
            </div>
            
          </div>
          <div class="oe-projector-previous" data-previous></div>
          <div class="oe-projector-next" data-next></div>
        </div>
      

 

This is section #1

This is section #2

This is section #3


        <div class="oe-projector oe-projector--small" data-oe-projector>
          <div class="oe-slides" data-slideshow-items>
            
            <div class="oe-slide oe-current" data-slideshow-item>
              <div class="oe-section">
                <div class="oe-section-inner">
                  <h4>This is section #1</h4>
                  <div class="oe-section-tri oe-section-tri--left"></div>
                </div>
              </div>
              <div class="oe-section-wrapper oe-section-wrapper--fixed-height">
                <div class="oe-section oe-section--half oe-section--white oe-slideshow--cover">
                  { aposSingleton(page, 'cardImage', 'slideshow', { noHeight: true }) }
                </div><div class="oe-section oe-section--half oe-section--orange">
                  <div class="oe-section-tri oe-section-tri--left-side oe-section-tri--orange"></div>
                </div>
              </div>
            </div>
            
            <div class="oe-slide" data-slideshow-item>
              <div class="oe-section oe-section--red">
                <div class="oe-section-inner">
                  <h4>This is section #2</h4>
                  <div class="oe-section-tri oe-section-tri--left oe-section-tri--red"></div>
                </div>
              </div>
              <div class="oe-section-wrapper oe-section-wrapper--fixed-height">
                <div class="oe-section oe-section--half oe-section--white oe-slideshow--cover">
                  { aposSingleton(page, 'cardImage', 'slideshow', { noHeight: true }) }
                </div><div class="oe-section oe-section--half oe-section--orange">
                  <div class="oe-section-tri oe-section-tri--left-side oe-section-tri--orange"></div>
                </div>
              </div>
            </div>
            
            <div class="oe-slide" data-slideshow-item>
              <div class="oe-section oe-section--gray">
                <div class="oe-section-inner">
                  <h4>This is section #3</h4>
                  <div class="oe-section-tri oe-section-tri--left oe-section-tri--gray"></div>
                </div>
              </div>
              <div class="oe-section-wrapper oe-section-wrapper--fixed-height">
                <div class="oe-section oe-section--half oe-section--white oe-slideshow--cover">
                  { aposSingleton(page, 'cardImage', 'slideshow', { noHeight: true }) }
                </div><div class="oe-section oe-section--half oe-section--orange">
                  <div class="oe-section-tri oe-section-tri--left-side oe-section-tri--orange"></div>
                </div>
              </div>
            </div>
            
          </div>
          <div class="oe-projector-previous" data-previous></div>
          <div class="oe-projector-next" data-next></div>
        </div>
      

Blur Transitions

this is centered content

made possible by oe-marquee--fixed

        <div class="oe-marquee oe-marquee--edit-button oe-marquee--fixed oe-marquee--vertical-center" data-blur-container>
          <div class="oe-background oe-slideshow--cover">
            { aposSingleton(page, 'sgMarquee', 'slideshow', {}) }
          </div>
          <div class="oe-background oe-blur-layer oe-slideshow--cover oe-blur" data-blur-target>
            { aposSingleton(page, 'sgMarquee', 'slideshow', { blur: true }) }
          </div>
          <div class="oe-foreground">
            <div class="oe-foreground-content oe-foreground-content--centered">
              <h3>this is centered content</h3>
              <div class="oe-button" data-blur-controller>made possible by oe-marquee--fixed</div>
            </div>
          </div>
        </div>
      

Story Marquee

Style #1

Sam D'Agostino

Associate

Without a doubt, Opportunity Engine changed my life.

Back to the Main Site
Explore other Associates' stories

  <div class="oe-story-marquee oe-marquee oe-marquee--edit-button oe-marquee--fixed oe-marquee--vertical-center">
    <div class="oe-background oe-background--gradient oe-slideshow--cover">
      { aposSingleton(page, 'sgPerson', 'slideshow', {}) }
    </div>
    <div class="oe-foreground oe-story-marquee-content">
      <div class="oe-avatar">
        <div class="oe-avatar-image oe-slideshow--cover">
          { aposSingleton(page, 'sgAvatarImage', 'slideshow') }
        </div>
        <div class="oe-avatar-text">
          <h3 class="oe-avatar-name">Sam D'Agostino</h3>
          <h4 class="oe-avatar-title">Associate</h4>
        </div>
      </div>
    </div>
    <div class="oe-foreground oe-foreground--cover oe-story-marquee-content">
      <div class="oe-foreground-content oe-foreground-content--centered">
        <h1 class="oe-big-quote oe-big-quote--right">Without a doubt, Opportunity Engine changed my life.</h1>
      </div>
    </div>
  </div>

  <div class="oe-section oe-section--blue-gray oe-section--center">
    <div class="oe-section-inner">
      <h5 class="caps">Explore other Associates' stories</h5>
    </div>
  </div>

  <div class="oe-story-slider oe-projector" data-oe-slider>
    <div class="oe-story-slider-overflow" data-oe-slider-width>
      <div class="oe-story-slider-items" data-oe-slider-items>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
        <div class="oe-story-slider-item" data-oe-slider-item></div>
      </div>
    </div>
    <div class="oe-projector-previous oe-disabled" data-previous></div>
    <div class="oe-projector-next" data-next></div>
  </div>
      

Style #2

Sam D'Agostino

Associate

Without a doubt, Opportunity Engine changed my life.

Back to the Main Site

Style #3

Sam D'Agostino

Associate

A screwdriver of the disease is assumed to be a bleary china.

A filial weeder is a jennifer of the mind. Far from the truth, we can assume that any instance of a can can be construed as an ungilt cause. A space of the wave is assumed to be an uphill currency. The first midi ping is, in its own way, a salmon.

Authors often misinterpret the rainstorm as a silvan back, when in actuality it feels more like a tearing secretary. However, the unscoured colon reveals itself as an agone professor to those who look. They were lost without the scombroid orchid that composed their hen.

Back to the Main Site

Style #4

Sam D'Agostino

Associate

A screwdriver of the disease is assumed to be a bleary china.

Sam's Story

A filial weeder is a jennifer of the mind. Far from the truth, we can assume that any instance of a can can be construed as an ungilt cause. A space of the wave is assumed to be an uphill currency. The first midi ping is, in its own way, a salmon.

Authors often misinterpret the rainstorm as a silvan back, when in actuality it feels more like a tearing secretary. However, the unscoured colon reveals itself as an agone professor to those who look. They were lost without the scombroid orchid that composed their hen.

Back to the Main Site

Results View

Sort By
Date Posted
  • Date Posted
  • Start Date
  • Distance
Date Posted
Start Date
Description
8
8.6.2014
10.6.2014
Administrative Assistant
Oklahoma City
9
10.21.2014
11.10.2014
10
10.2.2014
10.2.2014
Results 1 10 of 221
1 2 3 4 5 6 23

Mini dropdown

Sort
  • Date Posted
  • Start Date
  • Distance

 

 

 


        <div class="oe-mini-dropdown">
          <div class="oe-mini-dropdown-title">Sort</div>
          <ul class="oe-mini-dropdown-items">
            <li class="oe-mini-dropdown-title">Date Posted</li>
            <li class="oe-mini-dropdown-item">Start Date</li>
            <li class="oe-mini-dropdown-item">Distance</li>
          </ul>
        </div>
      

Video Widget

General

Title

More Info
You need an account to do that Set up an account Never Mind

Please register for an account first. If you already have one, log in here.