рони
<!DOCTYPE html>
<html>
<head>
<title>Grace</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link href="Grace.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='js/Grace.js'></script>
<script type='text/javascript' src='js/Sliding.js'></script>
</head>
<body>
<div id='header'>
<h1> Grace </h1>
<ul>
<li>Production
</li>
<li>Gallery
</li>
<li>About
</li>
<li>Contacts
</li>
</ul>
</div>
<div id='lent'>
<div id='first'>
<img src='' alt='' />
</div>
<div id='second'>
<img src='' alt='' />
</div>
<div id='third'>
<img src='' alt='' />
</div>
<div id='forth'>
<img src='' alt='' />
</div>
</div>
<div id='hidden1'></div>
<div id='hidden2'></div>
<div id='hidden3'></div>
<div id='hidden4'></div>
</body>
</html>
*{
margin:0;
padding:0;
}
html,
body {
height: 100%;
}
body {
background-color: #FDF5E6;
}
#header {
width: 100%;
height:16%;
background-color: #CC99CC;
}
h1 {
color: silver;
font-size: xx-large;
}
ul {
margin-left: 70%;
}
li {
display: inline-block;
margin-left: 2%;
}
#lent {
width: 70%;
height: 30%;
font-size: 0;
margin-left: 16%;
margin-top: 15%;
}
#first,
#second,
#third,
#forth {
height:100%;
width:25%;
display: inline-block;
}
#first {
background-color: blue;
}
#second {
background-color: yellow;
}
#third {
background-color: green;
}
#forth {
background-color:red;
}
#hidden1,
#hidden2,
#hidden3,
#hidden4
{
width:100%;
height: 79%;
margin-top: 26.5%;
position: absolute;
}
#hidden1 {
background-color: blue;
}
#hidden2 {
background-color: yellow;
}
#hidden3 {
background-color: green;
}
#hidden4 {
background-color: red;
}