Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Captain Anonymous.
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/bio.css" rel="stylesheet" type="text/css" media="all">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<script language="JavaScript" type="text/javascript">
var reloaded = false;
var loc=""+document.location;
loc = loc.indexOf("?reloaded=")!=-1?loc.substring(loc.indexOf("?reloaded=")+10,loc.length):"";
loc = loc.indexOf("&")!=-1?loc.substring(0,loc.indexOf("&")):loc;
reloaded = loc!=""?(loc=="true"):reloaded;
function reloadOnceOnly() {
if (!reloaded)
window.location.replace(window.location+"?reloaded=true");
/* if ($.browser.mozilla || $.browser.msie)
{
$('footer').css("position" , "absolute");
$('footer').css("width" , "82%");
$('footer').css("right" , "34px");
}*/
}
//You can call this via the body tag if desired
reloadOnceOnly();
</script>
<script type="text/javascript">
function change_bg(event){
var target = event.target ? event.target : event.srcElement;
var imgsrc = target.src;
var gal = imgsrc.replace("images", "gallery");
{
$(document.body).css("background-image", "url("+gal+")");
}
}
</script>
<script type="text/javascript">
var g=1;
function nextImage()
{
if(g == 11)
{
g=1;
var img = $("#gallery :nth-child("+g+")").attr("src");
var gal = img.replace("images", "gallery");
$(document.body).css("background-image", "url("+gal+")");
}
else
{
var img = $("#gallery :nth-child("+g+")").attr("src");
var gal = img.replace("images", "gallery");
$(document.body).css("background-image", "url("+gal+")");
++g;
}
}
function prevImage()
{
if(g == 1)
{
g=10;
var img = $("#gallery :nth-child("+g+")").attr("src");
var gal = img.replace("images", "gallery");
$(document.body).css("background-image", "url("+gal+")");
}
else
{
--g;
var img = $("#gallery :nth-child("+g+")").attr("src");
var gal = img.replace("images", "gallery");
$(document.body).css("background-image", "url("+gal+")");
}
}
function firstImage()
{
var img = $("#gallery :nth-child(1)").attr("src");
var gal = img.replace("images", "gallery");
$(document.body).css("background-image", "url("+gal+")");
}
function lastImage()
{
var img = $("#gallery :nth-child(10)").attr("src");
var gal = img.replace("images", "gallery");
$(document.body).css("background-image", "url("+gal+")");
}
</script>
</head>
<body onLoad="reloadOnceOnly();">
<div id="wrapper">
<header>
<div id="logo">
</div> <!-- end logo -->
</header> <!-- end header -->
<div id="body">
<div id="menu">
<ul>
<li><a href="#" class="active">HOME</a></li>
<li><a href="offer1.html">PONUDA</a></li>
<li><a href="#">REFERENCE</a></li>
<li><a href="about_us.html">O NAMA</a></li>
<li><a href="contact.html">KONTAKT</a></li>
</ul>
</div> <!-- end menu -->
<div id="images">
&nbsp;&nbsp;
<img src="images/first.jpg" alt="first image" title="Go the first image" onClick="firstImage();" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="images/prev.jpg" alt="next image" title="Go the prev image" onClick="prevImage();"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="images/next.jpg" alt="next image" title="Go the next image" onClick="nextImage();"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="images/last.jpg" alt="last image" title="Go the last image" onClick="lastImage();" />
</div> <!-- end images -->
</div> <!-- end sidebar -->
<div class="clear"></div>
<footer>
<div id="gallery">
<img src="images/pic01.jpg" onClick="change_bg(event);" class=".sp"/>
<img src="images/pic02.jpg" onClick="change_bg(event);" class=".sp"/>
<img src="images/pic03.jpg" onClick="change_bg(event);" class=".sp" />
<img src="images/pic04.jpg" onClick="change_bg(event);" class=".sp" />
<img src="images/pic05.jpg" onClick="change_bg(event);" class=".sp" />
<img src="images/pic06.jpg" onClick="change_bg(event);" class=".sp" />
<img src="images/pic07.jpg" onClick="change_bg(event);" class=".sp" />
<img src="images/pic08.jpg" onClick="change_bg(event);" class=".sp" />
<img src="images/pic09.jpg" onClick="change_bg(event);" class=".sp" />
<img src="images/pic10.jpg" onClick="change_bg(event);" class=".sp" />
</div> <!-- end gallery -->
</footer> <!-- end footer -->
</div>
</body>
</html>
/* ------ background ------ */
*{
}
html{
}
body {
background:url(../images/background-home.jpg) no-repeat center center;
background-size: cover ;
margin: 0px;
padding: 0px;
width:100%;
height: 100%;
min-height:768px;
position: relative;
font-family:"Times New Roman", Times, serif;
}
@font-face {
font-family:OpenSans-Bold;
src:url(../fonts/OpenSans/OpenSans-Bold.ttf);
}
@font-face {
font-family:OpenSans-Regular;
src:url(../fonts/OpenSans/OpenSans-Regular.ttf);
}
@font-face {
font-family: OpenSans-Semibold;
src:url(../fonts/OpenSans/OpenSans-Semibold.ttf);
}
#wrapper {
position: relative;
}
/* ------ header ------*/
header {
background:url(../images/grey1.jpg) repeat-y;
width: 235px;
height: 181px;
opacity: 0.8;
position:relative;
}
#logo {
position:absolute;
background:url(../images/logo.jpg) no-repeat;
width: 86px;
height: 109px;
top: 30px;
left: 58px;
}
/* ------ left content ------ */
#body {
float:left;
position:relative;
height:600px;
margin-bottom: -100px;
background-color: #a9a9a9;
width:204px;
opacity: 0.8;
z-index: 2;
}
#menu
{
font-size:0.95em;
width:150px;
padding-top: 27px;
}
#menu ul { margin:0; padding:0; }
#menu li { list-style: none; }
#menu a {
color: #000;
cursor: pointer;
display:block;
height:35px;
line-height: 25px;
text-indent: 70px;
text-decoration:none;
width:100%;
font-family:MuseoSans_500;
}
#menu li a:hover{
text-decoration:underline;
}
#menu li a.active{
text-decoration: underline;
color: #005213;
}
#images{
cursor:pointer;
position:absolute;
bottom: 25px;
}
/* ------ right content ------ */
#content {
margin: 0 0 0 204px;
background:url(../images/contack-cont-back.jpg) repeat-x;
position:relative;
height: 600px;
opacity: 0.8;
z-index: 2;
}
#content2 {
margin: 0 0 0 204px;
background:url(../images/contack-cont-back2.jpg) repeat-x;
height: 600px;
opacity: 0.8;
z-index: 2;
}
#content2 ul{
list-style-type: none;
width: 663px;
margin-top:-15px;
}
#content2 ul li{
float:left;
}
#content2 ul li a {
display: block;
line-height: 20px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
font-family:OpenSans-Semibold;
border-right: 1px solid grey;
color: #4f534f;
font-family:OpenSans-Semibold;
}
#mainnav
{
font-size:0.95em;
width:150px;
padding-top: 0;
}
#mainnav ul { margin:0; padding:0; float:left; }
#mainnav li {
list-style: none;
color: #000;
cursor: pointer;
display:block;
height:35px;
line-height: 5px;
text-indent: 30px;
text-decoration:none;
width:100%;
font-family:OpenSans-Semibold;
}
#wrap_gallery{
margin: 0 0 0 33%;
height: 600px;
opacity: 0.8;
z-index: 2;
}
#content h1{
font-family: Avenir;
position: absolute;
padding-top:350px;
}
#info h3{
position:absolute;
margin-left: 50px;
margin-top: 10px;
font-family:OpenSans-Regular;
color:#333333;
}
#info p{
line-height: 1.75em;
position:absolute;
margin-left: 50px;
margin-top: 60px;
font-family: OpenSans-Semibold;
color:#5c5f5c;
}
#pic01{
cursor: pointer;
position:absolute;
padding-left: 56px;
width: 150px;
}
#pic01 p{
margin-top: 0px;
color:#666;
text-align:center;
font-family:OpenSans-Semibold;
}
#pic02{
cursor: pointer;
position:absolute;
padding-left: 276px;
width: 150px;
}
#pic02 p{
margin-top: 0px;
color:#666;
text-align:center;
font-family:OpenSans-Semibold;
}
#pic03{
cursor: pointer;
position:absolute;
padding-left: 494px;
width: 150px;
}
#pic03 p{
margin-top: 0px;
color:#666;
text-align:center;
font-family:OpenSans-Semibold;
}
#map{
}
#form{
position:absolute;
padding-left: 500px;
padding-top: 30px;
width: 300px;
}
#form label{
float: left;
width: 25%;
text-align: right;
margin-right: 0.5em;
color: #333333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
font-family: OpenSans-Bold;
}
#form input{
display: block;
padding: 0 4px 0 10px;
background:url(../images/input1.jpg) no-repeat;
border:none;
width:200px;
height: 30px;
}
#form .input{
display: block;
padding: 0 4px 0 10px;
background:url(../images/textarea.jpg) no-repeat;
border:none;
width:200px;
height: 100px;
}
#form .submit{
cursor:pointer;
padding: 0 4px 0 10px;
background:url(../images/button.jpg);
border:none;
width:110px;
height: 30px;
border:none;
}
.clear{
clear:both;
}
/* ------ foooter ------ */
footer{
background: rgb(148, 148, 148) center center;
margin: 0 0 0 204px;
bottom:0;
position:relative;
height: 100px;
opacity: 0.8;
z-index: 2;
overflow:auto;
}
footer #gallery
{
cursor:pointer;
position: absolute;
top:10px;
left: 20px;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 90%;
position: relative;
margin: 40px 10px 10px 40px;
padding: 0;
height:90%;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment