Cara-Jo

#The three words that mean so much when they come from a cyclist.

"On. Your. Left."

Also known as calling your pass.

I ride my bike a lot. I ride it to work, I ride it to meet friends for a drink, I also ride it super fast up really big hills for exercise. So, I know a few things about riding a bike and bike etiquette.

Saying "On your left" is a courtesy that should be extended by every single cyclist - and, more importantly, every single cyclist using one of the many multi-use paths in the great city of Denver. You might be asking me "Why is this important?", so I've created you an FAQ of sorts as an easy reference.

Cara-Jo

javascript:(function(){document.getElementsByName('issue[body]')[0].value='### Design needed for:\n*Include a high-level description of what this design is needed for. Slides? Website graphic? Other material? If it is an animation, provide a sample of the animation needing replication.*\n\n### Design requirements\n*What should this graphic look like? If it is a chart or diagram include a photo or sketch of it. If it is a redesign of a previous graphic, include the previous version and any changes required. If this graphic needs to explain a concept - explain that concept in detail and provide any sketches.*\n\n### Final Deliverables\n- [ ] What assets\n- [ ] Are needed\n- [ ] For completion\n\n### Other assets\n*Including sketches, drawings, mindmaps, screenshots or anything else that could be helpful.*\n\n### Due Date\n*When is this design due?*';})();

Cara-Jo

.border-box {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

// Font things
.helvetica {
  font-family:'Helvetica Neue', helvetica, arial, verdana, sans-serif;
  font-weight: 300;
}

Cara-Jo

javascript:(function(){document.getElementsByName('pull_request[body]')[0].value='### What is the problem / feature ?\n\n\n\n### How did it get fixed / implemented ?\n\n\n\n### How can someone test / see it ?\n\n\n\n#### Related Issues: [ #]()\n\n\n\n*Here is a cute animal picture for your troubles...*\n\n![image]()';})();

Cara-Jo

javascript:(function(){document.getElementsByName('issue[body]')[0].value='**Description** \n\n *Include a high level description of the feature or error here including steps of how to recreate if applicable. Include any benefits, challenges or considerations. Can be short and sweet.* \n\n\n\n **Ask** \n\n *Describe the desired behavior and what would deem this issue/bug/feature complete.* \n\n\n\n **To Do** \n\n - [ ] Steps \n - [ ] To \n - [ ] Complete/Fix\n\n\n **Additional Info** \n';})();

Cara-Jo

/* While in sport mode do this once per second */

/* USER DATA */

/* If the user does not have an age - they are now 18 */
if (SUUNTO_USER_AGE > 10) {
  userAge = SUUNTO_USER_AGE;
}
else {
  userAge = 18;

Cara-Jo

<div class="hero hero-static large" style="background: url(http://mkt-product-images.s3.amazonaws.com/hero-images/xcel-hero.jpg) no-repeat center center; background-size: cover;">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h3>SPECIAL OFFER FOR XCEL ENERGY COLORADO RESIDENTIAL CUSTOMERS</h3>
        <h1>BIG ENERGY SAVINGS MADE EASY</h1>
        <p>Smart thermostats are one of the easiest ways to reduce your energy bill – and now we’re making them even more affordable.</p>
        <p>With a $50 INSTANT REBATE for Colorado residential customers with a central air conditioning system, your smart thermostat can pay for itself in less than a year.</p>
        <p>Control your smart thermostat from anywhere with your mobile device, and enjoy then convenience of automatic  scheduling with all of these smart thermostat options!</p>
      </div>

Cara-Jo

In the HTML add:

<div class="media-query">
	<h1></h1>
</div>
	
In the CSS (at the bottom) add:

.media-query h1::before {background: rgba(0,0,0,.8); color: magenta; text-transform: uppercase; position: fixed; top: 0; left: 0; z-index: 9000; font-size: 48px;}
@media only screen and (max-width: 767px) {

Cara-Jo

<div class="hero hero-static large" style="background: url([image url]) no-repeat center center; background-size: cover;">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h3>[sub-headline]</h3>
        <h1>[headline]</h1>
        <p>[copy]</p>
      </div>
    </div>
  </div>

Cara-Jo

<!-- Hero image on the right text on the left. Image spans full width of the page -->
<div class="feature-hero left" style="background: url(http://i.imgur.com/3qv3CSt.png) no-repeat top right;">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-md-5 col-md-offset-1 feature-descriptions">
				<h3>Auto-Schedule&trade;</h3>
				<p>No more confusing programming. Nest remembers the temperatures you like and programs itself.</p>
				<h3>Airwave&trade;</h3>
				<p>Airwave automatically turns off the AC a few minute early, but keeps the fan running. Your AC runs less while your home stays just as cool.</p>
			</div>