CodePen

HTML

            
              <div id="page-wrap">
		<ul id="circle-list">
		
		<li class="circleblue"><div id="image"><p>Invest Now!</p></div></li>
		<li class="circleyellow"><p>Volunteer</p></li>
		<li class="clearfix"></li>
		<li class="circleyellow"><p>Rooftop Host</p></li>
		<li><img src="http://www.berishbilander.com/wp-admin/images/ycs_logo.jpg" height="140" width="361.6"></li>
		<li class="clearfix"></li>
		<li class="circleblue"><p>News</p></li>
		<li class="circleyellow"><p>Concept</p></li>
    <li class="clearfix"></li>
		</ul>
		</div>
            
          
!
via HTML Inspector

CSS

            
              * { margin: 0; padding: 0; }
html { background: #fbfbfb; }
body { font-family: 'Helvetica Neue', sans-serif; 
      -webkit-font-smoothing: antialiased;
      font-weight: 200;}
article, aside, figure, footer, header, nav, section { display: block; }
ul,li {list-style-type: none;}

#page-wrap { width: 800px; margin: 50px auto 50px; background: #fbfbfb; }
	
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

.circleyellow {
	width: 180px;
	height: 180px;
	background: #f8b500;
	-moz-border-radius: 90px;
	-webkit-border-radius: 90px;
	-webkit-transition: background 1s;
	border-radius: 90px;
	float: left;
	position: relative;
}

.circleyellow:hover {
	background: #ffd35a;
	-webkit-transition: background 1s;
}

.circleblue {
	width: 180px;
	height: 180px;
	background: #5ebce5;
	-moz-border-radius: 90px;
	-webkit-border-radius: 90px;
	-webkit-transition: background 1s;
	border-radius: 90px;
	float: left;
}

.circleblue:hover {
	background: #9edcf7;
	-webkit-transition: background 1s;
}


#image:hover{
	display:block;
	margin-left: -50px;
	background: url("http://www.berishbilander.com/wp-admin/images/arrowblue.png") no-repeat;
}


#circle-list {
	width:400px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#circle-list li p {
	font-size: 18pt;
	text-align: center;
	margin: auto;
	position: relative;
	color: #fbfbfb;
	padding: 75px 0 0 0;
}

#circle-list li:nth-child(2) { 
	margin: 0 0 10px 30px;	
}

#circle-list li:nth-child(4) {
	margin: 0 0 10px -100px;	
}

#circle-list li:nth-child(5) {
	position: absolute;
	margin-left: 120px;
	margin-top: 20px;
}

#circle-list li:nth-child(8) {  
	margin: 0 0 0 30px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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