<!DOCTYPE html>
<head>
<title>Egiptul Antic</title>
<SCRIPT language="JavaScript">
<!--
if(screen.width>=1500) {document.write("<style>body{zoom:102%;}.hand_ipad img {top:114px}</style>");}
if(screen.width>=2000) {document.write("<style>body{zoom:135%;}.hand_ipad img {top:114px}.hand_ipad iframe{height:275px;}</style>");}
if(screen.width>=2500) {document.write("<style>body{zoom:150%;}.hand_ipad img {top:114px}.hand_ipad iframe{height:275px;}</style>");}
-->
</SCRIPT>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
button{
position:relative;
top:10%;
left:4%;
}
button{
background:none;
color:#ccc;
width:100px;
height:50px;
border:10px solid transparent;
-webkit-border-image:u rl(rama.png) 30 stretch;
-o-border-image:u rl(rama.png) 30 stretch;
border-image:u rl(rama.png) 70 stretch;
15px;
transition:.6s;
overflow:hidden;
}
button:focus{
outline:none;}
button:before{
content:'';
display:block;
position:absolute;
background:rgba(255,255,255.5);
width:60px;
height:100%;
left:0;
top:0;
opacity:.5s;
filter:blur(30px);
transform:translateX(-130px) skewX(-15deg);
}
button:after {
content: '';
display:block;
position:absolute;
background:rgba(255,255,255,.2);
width:30px;
height:100%;
left:30px;
top:0;
opacity:0;
filter:blur(30px);
transform:translate(-100px) scaleX(-15deg);
}
button:hover{
background:#B8860B;
cursor:pointer;
}
button:hover:before{
transform:translateX(300px) skewX(-15deg);
opacity:.6;
transition:.7s;
}
button:hover:after{
transform:translateX(300px) skewX(-15deg);
opacity:1;
transition:.7s;
}
div {
height: auto;
width: auto;
0 auto;
}
body {
padding: 0;
0;
}
#my{
zoom: 100%;
}
#sus{
left:16%;
top:50px;
width:70%;
height:15%;
position:absolute;
z-index:1;
}
#sus1{
left:19%;
top:205px;
width:64%;
height:7%;
position:absolute;
z-index:1;
}
#mijloc{
left:16%;
top:285px;
width:70%;
height:550px;
position:absolute;
z-index:1;
}
#jos{
left:16%;
top:860px;
width:70%;
height:75px;
position:absolute;
z-index:1;
}
#stanga{
background-image:u rl("poza345.png");
background-image:no-repeat;
left:-9%;
top:310px;
width:30%;
height:63%;
position:absolute;
z-index:1;
}
#dreapta{
background-image:u rl("poza245.png");
background-image:no-repeat;
right:1%;
top:310px;
width:24%;
height:64%;
position:absolute;
z-index:1;
}
#susst{
background-image:u rl("tutan1.png");
background-image:no-repeat;
background-size:300px 280px;
left:1%;
top:15px;
width:15%;
height:280px;
position:absolute;
z-index:1;
}
#susdr{
background-image:u rl("tutan1.png");
background-image:no-repeat;
background-size:300px 280px;
right:1%;
top:15px;
width:15%;
height:280px;
position:absolute;
z-index:1;
}
body {
background: u rl("123.jpg") no-repeat center center fixed;
background-size: cover;
}
</style>
</head>
<body>
<div id="sus" style="background-color:green;color:white;">Primu
al doilea
al treilea
<p>al patrulea</p>
<p>yes</p></div>
<div id="sus1">
<table>
<tr>
<td><div class="btn">
<button type="button"><font color="#856514">Acasa</font></button>
</div></td>
<td> </td>
<td><div class="btn">
<button type="button"><font color="#856514">Acasa1</font></button>
</div></td>
<td> </td>
<td><div class="btn">
<button type="button"><font color="#856514">Acasa2</font></button>
</div></td>
<td> </td>
<td><div class="btn">
<button type="button"><font color="#856514">Acasa3</font></button>
</div></td>
<td> </td>
<td><div class="btn">
<button type="button"><font color="#856514">Acasa4</font></button>
</div></td>
<td> </td>
<td><div class="btn">
<button type="button"><font color="#856514">Acasa5</font></button>
</div></td>
<td> </td>
<td><div class="btn">
<button type="button"><font color="#856514">Acasa6</font></button>
</div></td>
</tr>
</table>
</div>
<div id="mijloc" style="background-color:blue;color:white;">Al treilea
<p>al patrulea</p></div>
<div id="jos" style="background-color:black;color:white;">Al patrulea
<p>al cincilea</p></div>
<div id="stanga""></div>
<div id="dreapta""></div>
<div id="susst""></div>
<div id="susdr""></div>
</body>
</html>