CodePen

HTML

            
              <html class="no-js" lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<script>(function(G,o,O,g,l){G.GoogleAnalyticsObject=O;G[O]||(G[O]=function(){(G[O].q=G[O].q||[]).push(arguments)});G[O].l=+new Date;g=o.createElement('script'),l=o.scripts[0];g.src='//www.google-analytics.com/analytics.js';l.parentNode.insertBefore(g,l)}(this,document,'ga'));ga('create','UA-XXXX-Y');ga('send','pageview')</script>

	<title>Document</title>

	<link rel="stylesheet" href="stylesheets/reset.css">
	<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville|Muli' rel='stylesheet' type='text/css'>

	<script>
		var resource = document.createElement('script'); 
		resource.src = "./javascript/vendor/modernizr-2.7.1.min.js";
		var script = document.getElementsByTagName('script')[0];
		script.parentNode.insertBefore(resource, script);
	</script>

</head>
<body>
	<header class="group" role="banner">
		<!-- <img src="../images/logo.png"> -->
		<span class="tagline">Maximize Your Online Presence</span>
		<ul class="main_navigation" role="navigation">
			<li class=""><a href="#0">Home</a></li>
			<li class="selected"><a href="#0">Journal</a></li>
			<li class=""><a href="#0">Services</a></li>
			<li class=""><a href="#0">Tools</a></li>
			<li class=""><a href="#0">Products</a></li>
			<li class=""><a href="#0">Contact</a></li>
		</ul> 

	</header>
	<section class='main-content' role='main'>
		<h1>What is Your Online Potential?</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reprehenderit aut at eligendi fugit? Ex, fuga, soluta, voluptates qui enim odio praesentium eos deleniti commodi tempore consectetur accusantium minima iure.</p>
		
		
		<img src="../images/brain.png" style="display:block;margin-left: auto; margin-right: auto;" alt="">
		<h2>Think About it...</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reprehenderit aut at eligendi fugit? Ex, fuga, soluta, voluptates qui enim odio praesentium eos deleniti commodi tempore consectetur accusantium minima iure.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reprehenderit aut at eligendi fugit? Ex, fuga, soluta, voluptates qui enim odio praesentium eos deleniti commodi tempore consectetur accusantium minima iure.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reprehenderit aut at eligendi fugit? Ex, fuga, soluta, voluptates qui enim odio praesentium eos deleniti commodi tempore consectetur accusantium minima iure.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reprehenderit aut at eligendi fugit? Ex, fuga, soluta, voluptates qui enim odio praesentium eos deleniti commodi tempore consectetur accusantium minima iure.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reprehenderit aut at eligendi fugit? Ex, fuga, soluta, voluptates qui enim odio praesentium eos deleniti commodi tempore consectetur accusantium minima iure.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reprehenderit aut at eligendi fugit? Ex, fuga, soluta, voluptates qui enim odio praesentium eos deleniti commodi tempore consectetur accusantium minima iure.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reprehenderit aut at eligendi fugit? Ex, fuga, soluta, voluptates qui enim odio praesentium eos deleniti commodi tempore consectetur accusantium minima iure.</p>
	</section>

</body>
</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /** 
 * Master Reset 
 * Compiled with notes from 4-5 other resets
 * Still needs tweeking
 */



/* ==========================================================================
   Device Elements
   ========================================================================== */



/**
 * Set device attributes
 * Only honors on initial page load (rotating to portrait wont count)
 * DO use <meta name="viewport" content="width=device-width> in HTML; CSS = backup
 * DO NOT use initial-scale=1, user-scalable=no, or maximum-scale=1 or set widths in HTML
 * - Don't want to stop people from scaling the screen
 * Comment out to debug CSS - Will show everything on 'line: 1' in dev tools
 */
@charset "UTF-8";
@-ms-viewport {width: device-width;}
@viewport {width: device-width;}

/**
 * Get rid of Content Widows while printing 
 */
@media print 
{
	p, h2, h3 { orphans: 3; widows: 3; }
}

/**
 * Set the cursor
 */
html, body 
{
	cursor: default;
}

/**
 * - 1 - Correct inability to style clickable `input` types in iOS... Only put on with mobile browser
 * - 2 - Improve usability and consistency of cursor style betewen image-type
 *       `input` and others.
 */
a, label, button, input[type=button], input[type=file], input[type=submit], 
input[type=radio], input[type=checkbox], .clickable
{
	/* -webkit-appearance: button; */ /* 1 */
	cursor: pointer; /* 2 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled], input[disabled] 
{
	cursor: default;
}

code 
{
	cursor: text;
}



/* ==========================================================================
   Main Element Defaults
   ========================================================================== */

/**
 * After adding to the DOM, some elements need told what to do
 * Some browsers put default padding/borders on elements
 * Older opera browsers display 100% too small, 100.01% fixes
 */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, big, sub, sup,
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, embed,
tbody, tfoot, thead, tr, th, td, article, aside, summary, canvas, details, figcaption, strike, tt,
figure, footer, header, hgroup, menu, nav, output, ruby, section, time, mark, audio, video, font
{    
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100.01%;
	outline: 0;
	padding: 0;
	border: 0;
	margin: 0;
	vertical-align: baseline;
	background: transparent;
}

/**
 * Correct `block` display not defined in IE 8/9.
 */
article, aside, details, figcaption, figure, footer, header, 
hgroup, main, menu, nav, section, output, details, summary
{
	display: block;
}

/**
 * Set Default margin-top spacing
 * Can run into border-collapse issues if not watched.
 * Took out headers because of already powered sizes
 */
p, pre, dt, li, hr, legend, 
input, button, textarea, select, address, table 
{
	margin-top: 1.3090rem;
}

/**
 * With all elements now, apply box layout model
 * Firefox, v11- doesn't support box-model min- or max-height
 */
*
{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}                                                                  

/**
 * Killing focus styles here.
 * Remember to design them in main css
 */
:focus {
	outline: 0;
}



/* ==========================================================================
   Display Definitions
   ========================================================================== */



/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden], template 
{
    display: none;
}



/* ==========================================================================
   Embedded Content
   ========================================================================== */

/**
 * Set constraints on embedded digital formats
 * Keeping IMG here will cause problems if using foreground images as sprites
 * If problems, use a .responsive class instead
 * - 1 - Helps IE 7 scale images prettier
 * - 2 - Prevents unwanted horizontal scroll if asset is large
 */
img, object, embed 
{
	vertical-align: middle;
	-ms-interpolation-mode: bicubic; /* 1 */
	max-width: 100% !important; /* 2 */
}


/**
 * Fix IE 9 SVG overflow bug
 */
svg:not(:root)
{
	overflow: hidden;
}


/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio, canvas, video 
{
    display: inline-block;
}


/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) 
{
    display: none;
    height: 0;
}



/* ==========================================================================
   Base
   ========================================================================== */

/**
 * Force a vertical scrollbar to prevent a jumpy page
 * Set Height to style inner containers with height: 100%; when wanted
 * text-size-adjust only works on mobile browsers, allowing text to enlarge when scaling
 * On mobile IE: If the viewport is set using <meta> element, this CSS is ignored.
 */
html
{
	font-family: Helmet, Freesans, sans-serif;
	/* Overflow-y will break chrome and safari mobile when using backface-visibility: hidden*/
  overflow-y: scroll;
  height: 100%;
  /* use when forcing backface-visibility */
  /* margin-bottom: 1px;  */

  /* Prevents iPhone and iPad from resizing Text, experimetal on MS and Moz */
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

/**
 * Set Height to style inner containers with height: 100%; when wanted
 * Make sure to put line-height in base styles, or mark it here.
 */
body 
{
	height: 100%;
	/* line-height:1; */
}



/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus 
{
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active, a:hover 
{
    outline: 0;
}



/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 * Using Golden Ratio
 */

h1 { font-size: 3.4270em; }
h2 { font-size: 2.6180em; }
h3 { font-size: 2.1180em; }
h4 { font-size: 1.6180em; }
h5 { font-size: 1.3090em; }
h6 { font-size: 1em; }

h1, h2, h3, h4, h5 {font-weight: normal;}

/**
 * Add Font Style Defaults
 */
address, caption, cite, code, dfn, em, strong, th, var 
{
	font-style:normal;
	font-weight:normal;
}


/**
 * Define text-decorations on elements
 */
del
{
	text-decoration: line-through;
}

ins 
{
	text-decoration: none;
}

/**
 * Styling not present in IE 8/9, Safari 5, and Chrome.
 * Add cursor for user feedback
 */
abbr, acronym 
{
	border:0;
	font-variant:normal;
}

abbr[title], dfn[title]
{
	border-bottom: 1px dotted #000; 
	cursor: help;
}

/**
 * Style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b, strong 
{
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn 
{
    font-style: italic;
}

/**
 * Firefox thinks it's HR is better than everyone else's
 * Added is a personal style of left/right margins.
 */
hr 
{
    height: 0;
    margin: 1em 2.1180em;
    border-style: inset;
    border-width: .0625em; /* a.k.a. 1px at 16px font */
}

/**
 * Mark styling not in IE 8/9. 
 * Make sure to declare colors in Base Styles
 */
mark
{
    font-style: italic; 
    font-weight: bold;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code, kbd, pre, samp 
{
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre 
{
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

/**
 * Set consistent quote types.
 */
blockquote, q
{
    quotes: none;
}

/**
 * Safari doesn't support the quotes attribute, so we do this instead.
 * - 1 - CSS 2; used to remove quotes in case "none" fails below.
 * - 2 - CSS2.1; will remove quotes if supported, and override the above.
 *       User-agents that don't understand "none" should ignore it, and
 * 		 keep the above value. This is here for future compatibility,
 * 		 though I'm not 100% convinced that it's a good idea...
 */
blockquote:before, blockquote:after, q:before, q:after
{
    content: ""; /* 1 */
    content: none; /* 2 */
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small 
{
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub, sup 
{
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup 
{
    top: -0.5em;
}

sub 
{
    bottom: -0.25em;
}

caption
{
	text-align:left;
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 * Can't use padding on a table to create left/right gaps
 */

table 
{
    border-collapse: collapse;
    border-spacing: 0;
    margin-left: 2.1180em;
    margin-right: 2.1180em;
}

/**
 * Text aligns are different in Chrome (centered rather than inherit)
 */
th, td 
{
  padding: 0.25em;
  text-align: left;
  border: 1px solid #ccc;
}

th 
{
	font-weight: bold; 
	vertical-align: bottom;
}

tbody th, td, td img
{
	font-weight: normal; 
	vertical-align: top;
}



/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */
fieldset 
{
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * Webkit hates the Legend Element. Not a fix, but a workaround
 * Padding is used so Internet Explorer does not cut-off letter descenders
 */
 legend + *
{
	-webkit-margin-top-collapse: separate;
	margin-top: .5em;
}

legend 
{
  padding-bottom: .5em; 
}

/**
 * Need to style correctly for this to work
 * Adds gap when styled with float and clear
 */
label { padding-top: 1.2em; }

/**
 * - 1 - Correct font family not being inherited in all browsers.
 * - 2 - Correct font size not being inherited in all browsers.
 * - 3 - Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button, input, select, textarea 
{
    font-family: inherit; /* 1 */
    font-size: 100.01%; /* 2 */
    margin: 0; /* 3 */


}

/**
 * Firefox 4+ uses `!important` in the UA stylesheet.
 */
button, input 
{
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button, select 
{
    text-transform: none;
}


/**
 * Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"], input[type="radio"] 
{
    padding: 0;
}

/**
 * Fix one pixel space between the botder-top of the toolbar and the border top of each button
 * Use IE 7 Star Hack
 */
input[type="radio"] 
{
	vertical-align: text-bottom;
}
input[type="checkbox"] 
{
	vertical-align: bottom;
	*vertical-align: baseline;
}

/**
 * vertical alignment of input fields for IE 6
 */
input {_vertical-align: text-bottom;}

/** 
 * Fix IE 6 and 7 which create extra right/left padding on buttons
 * IE6: Need to put class='inputButton' for support
 */
button, input[type="submit"], input[type="reset"], input[type="button"], .inputButton 
{
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner, input::-moz-focus-inner 
{
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}



/* ==========================================================================
   Lists and Navigation
   ========================================================================== */

/* 
 * Styling of list items
 * Note: The bullets will be in the gutter until you provide a margin/padding left
 * Taken out as default for navigation
 */
ul li           { list-style-type: disc; }        
ul ul li        { list-style-type: circle; }      
ul ul ul li     { list-style-type: square; }      
ol li, ul ol li { list-style-type: decimal; }     
ol ol li        { list-style-type: lower-alpha; } 
ol ol ol li     { list-style-type: lower-roman; } 



/* ==========================================================================
   Helper Classes
   ========================================================================== */

/**
 * The Great ClearFix!
 * If you need only IE 8+ suport...
 *  .group:after {
	  content: "";
	  display: table;
	  clear: both;
	}
 */
.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 trigger hasLayout */
}

/* There are more... Just add what you use as default. */




























/* ==========================================================================
   Base Styles... SEPARATE CSS FROM RESET, but necessary
   ========================================================================== */

/**
 * What's your main text color?
 * Color (and Background) should have some blend with main page color
 * Base Color: #3f536e;
 * In SASS: mix($color-1, $color-2, [$weight])
 * Color 1 = Color to blend in, Color 2 = Main
 */
$primary-color: #3f536e;
$background-base-color: #2f3958;

body, select, input, textarea 
{
	color: mix($primary-color, #333, 46%); /* Black with 46% mix of base color */
}

/** 
 * Not all browsers set same default background color 
 * Line-height is set to golden ratio, because I'm weird like that
 */	
body {
  font-size: 130%;
  line-height: 1.61803398875;
}

/**
 * Have a favorite highlighting color?
 */
mark 
{ 
	background-color: #ff9; 
	color: #000;
}

/**
 * Default Link Colors/Styles
 * :link selects only with [href]. Same as a[href]
 * - 1 - That short highlight time of links when you click on them (mobile)
 */
a:link
{
	color: #000;
}
a:link 
{
	-webkit-tap-highlight-color: #fcd700; /* 1 */
}

/**
 * Do you want underlines or no?
 */
a:visited, a:hover, a:focus
{
	text-decoration: none;
}

/**
 * Outline with keyboard/touch focus
 */
a:focus, :focus 
{
	outline: 1px dotted #000;
}

legend 
{
	color: #393c3f;
}

/**
 * Custom text-selection colors (remove any text shadows)
 */
::-moz-selection{background: $background-base-color; color: #eee; text-shadow: none;}
::selection {background: $background-base-color; color: #eee; text-shadow: none;} 

/**
 * Elements you want increased in size when double-tapped on mobile. Add any number of them
 */
section, aside
{
	-webkit-text-size-adjust:200%
}

ins 
{
	background-color: #fcd700; color: #000;
}

mark 
{
	background-color: #fcd700; color: #000;
}

/**
 * Mozilla dosen't style place holders by default
 */
input:-moz-placeholder 
{ 
	color:#a9a9a9; 
}
textarea:-moz-placeholder 
{ 
	color:#a9a9a9; 
}

ul, ol{
  margin-left: 1.6810em;
}


/**
 * Media Queries do not work in IE 6-8: Use this code in HTML
 * <!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
 * 
 */

/* After doing this... I realize we need more love between browsers */
body{
  margin-top: 0em;
  font-family: 'Muli', sans-serif;
}
h1,h2,h3,h4,h5,h6{ font-family: 'Libre Baskerville', serif; }

header{  
  max-width: 70em;
  margin: 0 auto;
  position: relative;
  text-align: right;
  min-height: 5em;
}
.main_navigation{
    bottom: 0;
    right: 10%;
    list-style: none;
    position: absolute;
    margin: 0;
    padding: 0 2em 0 0;
  &:after{
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #777;
    z-index: 1;
  }
  &:before{
    z-index:1; 
  }
  li{
    position: relative;
    z-index: 0;
    background-color: #ccc;
    padding: 0 0.25em;
    margin: 0 0.1em;
    list-style-type: none;
    display: inline-block;
    border: 1px solid #777;
    border-top-right-radius: 0.6em;
    border-top-left-radius: 0.6em;
    &:before{
      left: -11px;
      position: absolute;
      bottom: -3px;
      width: 10px;
      height: 16px;
      content: " ";
      border: 1px solid #777;
      border-bottom-right-radius: 0.75em;
      border-width: 0 1px 1px 0;
      box-shadow: 0.2em 0.2em 0 #ccc;
    }
    &:after{
      right: -11px;
      position: absolute;
      bottom: -3px;
      width: 10px;
      height: 16px;
      content: " ";
      border: 1px solid #777;
      border-bottom-left-radius: 0.75em;
      border-width: 0 0 1px 1px;
      box-shadow: -0.2em 0.2em 0 #ccc;
    }
    &.selected{
      background-color: #eee;
      /* background: url('../../images/main-paper-background.jpg'); */
      background-position: 50% 50%;
      color: #000;
      z-index: 2;
      border-bottom-color: rgba(0,0,0,0);
      &:before {
        width: 10px;
        height: 16px;
        bottom: -1px;
        left: -11px;
        border: 1px solid #777;
        border-width: 0 1px 1px 0;
        box-shadow: 0.2em 0.2em 0 #eee;
        border-bottom-right-radius: 0.8em;
      }
      &:after {
        width: 10px;
        height: 16px;
        bottom: -1px;
        border: 1px solid #777;
        right: -11px;
        border-width: 0 0 1px 1px;
        box-shadow: -0.2em 0.2em 0 #eee;
        border-bottom-left-radius: 0.8em;
      }
    }
  }
  
  a{
    text-decoration:none; 
    padding: 1.5em 0.5em 1em 0.5em;
  }
}



section[role="main"]{
  position: relative;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 0.2em;
  background-color: #EEE;
  margin: 0 auto;
  text-align: center;
  min-height: 25em;
  box-shadow: 2px 2px 2px #333;
  text-align: left;
  /* PS - Putting a Z-Index on Main Element will no allow Pseudo to go behind. */
  /* background: url('../../images/main-paper-background.jpg'); */
}
h1{
  text-align: center;
}

body{
  background: $background-base-color; /* Old browsers */
}
p{
  max-width: 35em;
  margin-left: auto;
  margin-right: auto;
}
header img{
  width: 200px;
  display: inline-block;
  float: left;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 10%;
}

.tagline {
  color: #E4E4E4;
  right: 10em;
  position: absolute;
  top: -6%;
  font-size: 1.2em;
  margin-top: 0.5em;
  font-family: Muli, sans-serif;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................