octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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>
            
          
!
            
              /** 
 * 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;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console