CodePen

HTML

            
              <div id="header">
        <div class="headerunutra">
       <h1 ><a href="#">Simple design</a></h1>
       </div>
	<div class="navigacija">
        				<div class="navunutra">
        				<ul id="livo">
                        <li><a href="index.html">Početna</a></li>
					   <li><a href="onama.html">O nama</a></li>
                       <li><a href="usluge.html">Usluge</a></li>
                       </ul>
                       
                       <ul id="desno">
                       <li><a href="portfolio.html">Portfolio</a></li>
                       <li><a href="#">Kontakt</a></li>
                       <li><a href="#">Blog</a></li>
                       </ul>
                       </div>
        </div></div>
        <div class="pagetitlemother">
          <h2 class="pagetitle">Portfolio</h2></div>
<div id="container">

        	<div class="portfolioitem">
            <a href="#">
            	<img src="http://i.imgur.com/fA5baH5.jpg" /></a>
                 <h2>  <a href="#">Vip Tours  Osijek Croatia company</a></h2>
                
            </div>

            <div class="portfolioitem">
            <a href="#">
            	<img src="http://i.imgur.com/fA5baH5.jpg" /></a>
                 <h2>  <a href="#"> Fortuna obrt</a> </h2>
            </div>

            <div class="portfolioitem">
            <a href="#">
            	<img src="http://i.imgur.com/fA5baH5.jpg"></a>
                <h2>  <a href="#"> Hoteli Makarska</a> </h2>
            </div>    
  <div class="portfolioitem">
            <a href="#">
            	<img src="http://i.imgur.com/fA5baH5.jpg" /></a>
                 <h2>  <a href="#">Justin's Johnson</a> </h2>
                
            </div>

  <div class="portfolioitem">
            <a href="#">
            	<img src="http://i.imgur.com/fA5baH5.jpg" /></a>
                 <h2>  <a href="#"> Replay Hrvatska</a> </h2>
            </div>

  <div class="portfolioitem">
            <a href="#">
            	<img src="http://i.imgur.com/fA5baH5.jpg"></a>
                <h2>  <a href="#"> Park prirode "Lastovsko otočje"</a> </h2>
            </div>    


        
	
  <div style="clear:both"></div>
  </div>


<div id="footer">
	<div class="footerunutra">
    
    					<div class="logodno">
                       <p> All rights reserved. </br>Copyright © 2013</p> 
                        </div>
                        <div class="linkovidno">
						<ul>
           
                       
          

	</div>
    <div style="clear:both"></div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              *{



	padding:0;



	margin:0;



}

h1,h2,h3,h4,h5{

	font-weight:normal;
	padding-bottom:10px;

}

a:link,a:visited{

	text-decoration:none;

		color:#2358b1;

}
a:visited,a:hover{
	text-decoration:underline;
}

::selection {

	color:#252525;

	background: #417de5; /* Safari */

	}

::-moz-selection {

	color:#252525;

	background: #417de5; /* Firefox */

}

body{
	background-color:#eaedf0;

	font-family:'Source Sans Pro', sans-serif, "Times New Roman", Times, serif;



}

#container{
	background-color:#fafafa;
	padding:20px;
	width:920px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:150px;
}
.pagetitlemother{
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
.opismoj{
	float:right;
	width:320px;
}
.pagetitle{
	padding-top:50px;
	color:#202020;
	padding-bottom:15px;
	font-size:42px;
}
.osoba{
	overflow:hidden;
	width:690px;
	margin-bottom:37px;
}
.onamaboja{
	color:#316fd7;
	font-size:30px;
}
.vjestine{
		color:#316fd7;
}
.onama{
	line-height:1.3;
	padding-bottom:10px;
	font-size:20px;
}
.uslugica{
	margin-bottom:50px;
}


.portfolioitem{
	width:270px;


	padding-left:20px;



	padding-right:10px;



	padding-top:20px;


display: inline-block;
 vertical-align:top;



}



.portfolioitem img{



	border:none;



	position:relative;



	display:block;

	height:165px;

	width:270px;



	top:0px;



		-webkit-transition: top .3s ease-out;



        -moz-transition: top .3s ease-out;



		-ms-transition:top .3s ease-out;



		transition: top .3s ease-out;







}



.portfolioitem:hover img, .portfolioitem:active img{



 top:-10px;



}


.portfolioitem a:link, .portfolioitem a:visited{



	font-size:22px;



	color:#2b2a2a;



	text-decoration:none;



}

.portfolioitem:hover a, .portfolioitem:active a{

	color:#000;

}

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

JS

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