CodePen

HTML

            
              <div class="container">	
      
  <div class="grid">
				
    <div class="col-1-2"><a class="linkblock" href="#">Products</a></div>
				
    <div class="col-1-2" href="#"><div class="linkblock"><a href="#">Events</a></div></div>

  </div>

</div>

            
          
!

CSS

            
              html {
		background-color: #202020;
		color: #fff;
		font-family: Futura Std, sans-serif, PT Serif, serif;
	}
a {text-decoration: none; color: inherit;}

/*layout*/
.container {
		max-width: 700px;
		margin: 0 auto;
		padding: 85px 50px;
		display: block;
	}
	
.container:after {
	  content: "";
	  display: table;
	  clear: both;
	}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}	

[class*='col-'] {float: left; padding: 20px 0 20px 20px;}
	.col-1-2 {width: 50%;}
	.col-1-3 {width: 33.33%;}
	.col-2-3 {width: 66.66%;}
	.col-1-4 {width: 25%;}	
	[class*='col-']:last-of-type {
	  padding-right: 20px;
	}
/*end layout*/
	
/*misc*/
	.linkblock {
		background-color: #ccc;
		color: #333;
		font-size: 22px;
		text-align: center;
		text-transform: uppercase;
		
  	border-radius: 1px;
		padding: 40px 0;
		
 		cursor: pointer;
		-webkit-transition: .4s ease-in-out;
		-moz-transition: .4s ease-in-out;
		-ms-transition: .4s ease-in-out;
		-o-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
	} 	
	
	.linkblock:hover {
		background-color: #f2f2f2;
		color: #ED5111;
  
		-webkit-transition: .4s ease-in-out;
		-moz-transition: .4s ease-in-out;
		-ms-transition: .4s ease-in-out;
		-o-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
	}
/*end misc*/
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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