CodePen

HTML

            
              <div class="container">
  <div class="inner-container">
  <div class="title">
  
    <span class="title-span">Freelance Jobs</span>
  
    </div>
  <!--title ends here-->
    <ul class="positions">
    <li>
      <a href="#">Shopify Developer
      <p>
        Los Angeles, CA        
        </p>
      
      </a> 
      </li>
      <li>
        <a href="#">Design For DVD Cover/ DVD labels
         <p>
        Anywhere       
        </p>
        
        </a> 
        
      </li>
      <li>
        <a href="#">Pattern Cutter/Sample Maker Required
           <p>
        London, UK      
        </p>
        
        </a> 
      </li>
      <li>
        <a href="#">Basic HTML/CSS
           <p>
        USA, Canada, India      
        </p>
        
        </a> 
      </li>
      <li>
        <a href="#">PHP Coders/ Developers needed
           <p>
        Anywhere    
        </p>
        
        </a> 
      </li>
    <li class="morejobs">
      <a href="#">More Freelance Jobs...</a>
      
      </li>
      
      
    </ul>
  </div>
  <!--inner-container ends-->
</div>
<!--container ends-->
            
          
!

CSS

            
              .container{width:500px; padding:20px; overflow:hidden; background:url(http://allroundnews.com/wp-content/uploads/2012/02/seamless-wood-texture-free-16.jpg); background-repeat:repeat-y; margin:20px auto;
  /* rounded corners */
  -webkit-border-radius: 12px; 
    -moz-border-radius: 12px;   
    border-radius: 12px; border:2px solid #b5895e;   
}

.inner-container{background:#414141;
  -moz-box-shadow:    inset 0 0 50px #111;
  -webkit-box-shadow: inset 0 0 50px #111;
  box-shadow:         inset 0 0 50px #111;
;-webkit-border-radius: 6px;   -moz-border-radius: 6px; border-radius: 6px; border-right:2px solid #daa26b; border-left:2px solid #68523c; border-top:2px solid #c08654; overflow:hidden;  border-bottom:2px solid #f2b77d;}
.title{display:block; padding:20px 0 20px 0; font-family:Comic Sans, Comic Sans MS, cursive; color:#fff; font-wright:bold; font-style:italic; text-align:center; text-decoration:underline; font-size:30px; height:60px; border-bottom:1px solid #222;}
.title-span{display:block; -webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

-o-transform: rotate(-3deg);}

.positions{display:block; margin:0; padding:0; list-style:none;}
.positions li{display:block; border-bottom:1px solid #222; border-top:1px solid #444;}
.positions li a{padding:20px 25px; font-family:Arial; font-size:14px; color:#e4dfdf; font-weight:bold;
text-shadow: 1px 1px 1px #000; text-decoration:none; display:block; 
  background: url(bg-image.png) no-repeat #474747; /*non-CSS3 browsers will use this*/
	background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#474747) to(#2f2f2f)); /*old webkit*/
	background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#474747, #2f2f2f); /*new webkit*/
	background: url(bg-image.png) no-repeat, -moz-linear-gradient(#474747, #2f2f2f); /*gecko*/
	background: url(bg-image.png) no-repeat, -ms-linear-gradient(#474747, #2f2f2f); /*IE10 preview*/
	background: url(bg-image.png) no-repeat, -o-linear-gradient(#474747, #2f2f2f); /*opera 11.10+*/
	background: url(bg-image.png) no-repeat, linear-gradient(#474747, #2f2f2f); /*future CSS3 browsers*/
	/* for IE9*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#474747', endColorstr='#2f2f2f');
  -moz-box-shadow:    inset 0 -5px 20px #272727;
  -webkit-box-shadow: inset 0 -5px 20px #272727;
  box-shadow:         inset 0 -5px 20px #272727;
}
.positions li a p{dispay:block; font-size:11px; font-style:italic; margin:2px 0 0 0; color:#999;}
.positions li.morejobs{border-bottom:0px solid #414141; border-top:1px solid #568891;
 }
.positions li.morejobs a{
/*negate default properties */
  padding:10px 15px; font-family:Arial; font-size:11px; color:#e4dfdf; font-weight:bold;
text-shadow: 1px 1px 1px #333; text-decoration:none; display:block; text-align:right;
  background: url(bg-image.png) no-repeat #3d7077; /*non-CSS3 browsers will use this*/
	background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#3d7077) to(#29616b)); /*old webkit*/
	background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#3d7077, #29616b); /*new webkit*/
	background: url(bg-image.png) no-repeat, -moz-linear-gradient(#3d7077, #29616b); /*gecko*/
	background: url(bg-image.png) no-repeat, -ms-linear-gradient(#3d7077, #29616b); /*IE10 preview*/
	background: url(bg-image.png) no-repeat, -o-linear-gradient(#3d7077, #29616b); /*opera 11.10+*/
	background: url(bg-image.png) no-repeat, linear-gradient(#3d7077, #29616b); /*future CSS3 browsers*/
	/* for IE9*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d7077', endColorstr='#29616b');
  -moz-box-shadow:    inset 0 -5px 20px #255860;
  -webkit-box-shadow: inset 0 -5px 20px #255860;
  box-shadow:         inset 0 -5px 20px #255860;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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