CodePen

HTML

            
              <ul>

  <li class="content">
    	<img src="http://schwarttzy.com/wp-content/uploads/2012/10/kaboom.jpg" />
    </li>
    
	<li class="contnt"></li>
    
</ul>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, img, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {background: transparent;border: 0;font-size: 100%;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
html {min-height:100%;height: 100%; min-width:100%; width: 100%;}
blockquote, q {quotes:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
table {border-collapse:collapse;border-spacing:0;}

body {
  height:100%;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
	width:100%;}

li {display:inline-block; float:right; clear:both;}

ul {
	max-width:50%;
	height:3000px;
	background-color: #063;
	margin: 0 auto;
	overflow:visible;}

.content {
	background:#09F;5
	padding:10% 0;
	width:50%;
	z-index:100;}
	
.content img {
	height:auto;
	padding:10% 0;
	width:200%;}

.contnt {
	background:#939;
	height:50%;
	width:50%;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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