CodePen

HTML

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300&subset=latin-ext' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="mediaqueries.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 5</title>
</head>

<body>
<div class="navigacija"><a href="#pronadinas">Lokacija</a></div>
<div id="reference">
	<div class="referenceunutra">
    	<div class="boxbox">
        	<h1>Portfolio</h1>
        </div>
        <div class="referenceopis">
        Pogledajte nase posljedne radove ...
        </div>
        
        <div class="zadnjiradovi">
        	<div class="rad"><a href="#">
            	<img src="images/maxpayne3.jpg" />
                <div class="imerada"> Vip Tours </div>
                </a>
            </div>
            <div class="rad">
            <a href="#">
            	<img src="images/MaxPayne3-2012-06-04-14-55-38-68.jpg" />
                <div class="imerada"> Fortuna obrt </div></a>
            </div>
            <div class="rad">
            <a href="#">
            	<img src="images/bid.jpg" />
                <div class="imerada"> Hoteli Makarska </div></a>
            </div>    
        
        </div>
    </div>

</div>


<div id="bodyvideo">

 	 <div class="videounutra">
     
    	 <div class="videotext">
     		Moderan i responzivan dizajn kako bi vasa Web stranica izgleda
            savršeno na svakom uređaju.
            <ul>
            <li>HTML / HTMl5</li>
            <li>Css / Css3</li>
            <li>Wordpress</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            </ul>
     	</div>
        
     <div class="tablet">
 	  	<img src="images/windows_8_tablet__by_cocainemonster-d5co2mr.png" /></div>
           <div style="clear:both"></div>     
	</div>

</div> 


<div id="body2">

	<div class="mapa"> 
    <div class="mapinfo">
<div class="mapinfoboja">Lokacija</div> 
   <p>
Obala kneza Domagoja bb</p>

<div class="mapinfoboja">Telefon</div>  

<p>0800 200 204</p>  

<div class="mapinfoboja"> Radno vrijeme</div>

Ponedjeljak-Petak: 8:00-24:00

Subota-Nedjelja: 8:00-24:00
</div>
<div class="googlemaps">
<iframe width="100%" height="460" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.hr/maps/ms?msa=0&amp;msid=209691675682087685006.0004c0a4d495f75e354ad&amp;ie=UTF8&amp;t=m&amp;ll=42.646366,18.105125&amp;spn=0.014205,0.042915&amp;z=15&amp;output=embed"></iframe>
</div>
</div>

</div>

</body>
</html>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              *{
	padding:0;
	margin:0;
}
body{
	font-family: 'Source Sans Pro', sans-serif;
}
.navigacija{
  min-width:1000px;
	background-color:#3d73ce;
}

<!--REFERENCEDIV-->


#reference{
  min-width:1000px;
	width:100%;
	background-color:#FFF;
}
.referenceunutra{
	padding-top:100px;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:150px;
}
.boxbox{

}


.referenceopis{
	padding-bottom:55px;

	padding-left:100px;

}
.zadnjiradovi{
	margin-left:auto;
	margin-right:auto;
	width:990px;
	overflow:hidden;
}
.rad:last-child{
	margin-right:0px;
}
.rad{
	float:left;
	margin-right:15px;
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
	padding-bottom:5px;
}
.rad img{
	border:none;
	position:relative;
	display:block;
	width:290px;
	-moz-transition:all 0.2s ease;
	-webkit-transition:all 0.2s ease;
	-ms-transition:all 0.2s ease;
		transition:all 0.2s ease;

}
.rad:hover img, .rad:active img{
	-webkit-transform:translateY(-10px);
	-moz-transform:translateY(-10px);
	-ms-transform:translateY(-10px);
		transform:translateY(-10px);
}
.rad a:link, .rad a:visited{
	font-size:20px;
	color:#2b2a2a;
	text-decoration:none;
}
.rad a:hover, .rad a:active{
	color:#000000;
}

.imerada{
	padding-top:2px;
}






#bodyvideo{
  min-width:1000px;
	width:100%;
	background-color:#3d73ce;
}

.videounutra{
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	padding-top:100px;
	padding-bottom:100px;
}
.videotext{
	float:left;
	width:440px;

	
}
.videotext ul{
	list-style-type:disc;
	padding-left:100px;
	padding-top:20px;
}
.videotext li{
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;

}
.videotext li:hover{
	color:#FFF;
}
.tablet img{
	padding-left:20px;
	float:right;
	width:540px;
}



<!-- DIV MAPA -->
#body2{
	width:100%;
	background-color:#f0f4f6;
}
.mapa{
		width:1000px;
	margin-left: auto;
	margin-right:auto;
	padding-top:100px;
	padding-bottom:100px;
}
.mapinfo{

	position:absolute;
	width:210px;

	color:#ffffff;
	  -moz-transition: background-color 0.4s , color 0.4s ;
    -o-transition: background-color 0.4s , color 0.4s ;
    -webkit-transition: background-color 0.4s , color 0.4s ;
    transition: background-color 0.4s , color 0.4s ;
	
}
.googlemaps{

}
.mapinfo:hover, .mapinfo:active{
	background-color:#5a9ad0;
}

.mapinfoboja{


}
.mapinfo p{
}
.box{
	font-weight:normal;


}
.box:hover{
	color:#ffffff;
}


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

JS

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