i have solved that. thank you. but another problem appear, that is the black line between the image, how to remove that?
[ATTACH]15781[/ATTACH]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vensta | Home</title>
<style>
html,body {
margin:0;
height:100%;
background-color:#F69220;
/*background-image:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,1.0));*/
font-family:Arial, "Gill Sans", Helvetica, "Myriad Pro";
}
#box0,#box1,#box2 {
position:relative;
z-index:2;
float:left;
width:31.5%;
height:100%;
margin:-100% 0 0;
background-image:url(images/homebg1.png);
background-size:100% 100%;
box-shadow:0px 0px 0px rgba(0,0,0,1.0),
inset 0px 0px 0px rgba(0,0,0,1.0);
-webkit-transform:skew(-8deg);
-moz-transform:skew(-30deg);
-ms-transform:skew(-8deg);
-o-transform:skew(-8deg);
transform:skew(-8deg);
animation-delay:0s;
animation-duration:1s;
animation-name:slideDown;
animation-fill-mode:forwards;
-webkit-animation-delay:0s;
-webkit-animation-duration:1s;
-webkit-animation-name:slideDown;
-webkit-animation-fill-mode:forwards;
}
#box0 {
border-left: 12px solid #FFFFFF;
}
#box1 {
z-index:1;
background-image:url(images/homebg2.png);
animation-delay:0.5s;
-webkit-animation-delay:0.5s;
border-left: 12px solid #FFFFFF;
}
#box2 {
z-index:0;
background-image:url(images/homebg3.png);
animation-delay:1s;
-webkit-animation-delay:1s;
border-left: 12px solid #FFFFFF;
border-right: 12px solid #FFFFFF;
}
/*#box3 {
z-index:0;
background-image:url(avenue.jpg);
animation-delay:1.5s;
-webkit-animation-delay:1.5s;
}*/
#nav {
position:absolute;
z-index:3;
width:100%;
padding:0;
margin:0;
border-top:0px solid rgb(0,0,0);
border-bottom:0px solid rgb(0,0,0);
bottom:20%;
list-style-type:none;
text-align:center;
background-color:#ffffff;
box-shadow:0 0 30px rgba(0,0,0,0.8);
inset 0 0 0px rgba(0,0,0,0.8);
opacity:0;
animation-delay:2.0s;
animation-duration:1.0s;
animation-name:show;
animation-fill-mode:forwards;
-webkit-animation-delay:2.0s;
-webkit-animation-duration:1.5s;
-webkit-animation-name:show;
-webkit-animation-fill-mode:forwards;
}
#nav li {
display:inline;
margin:0 20px;
}
#nav a {
color:rgb(0,0,0);
text-transform:uppercase;
text-decoration:none;
color:#E34927;
font-weight:bold;
font-size:14px;
}
#nav li.navlogo img{
padding-bottom: 0px;
vertical-align:middle;
}
div.menu {
z-index:5;
bottom: 5%;
position:absolute;
background: rgba(255,255,255,.4);
/*background-color:#FFF;*/
/*opacity: .45;
filter: alpha(opacity=80);*/
left: 50%;
margin-left: -225px;/*negative half of the divs width*/
height: 80px;
width:450px;
display:inline-block;
}
div.textfixed {
height: 80px;
width: 150px;
float:left;
font-size:14px;
font-family:"Gill Sans";
}
div.textscroll {
height: 80px;
width: 300px;
float:right;
font-size:14px;
font-family:"Gill Sans Light";
}
.text marquee {
color:#666;
}
#typetext {
font-style:italic;
}
@keyframes slideDown{
from {margin-top:-100%;}
to {margin-top:0;}
}
@-webkit-keyframes slideDown {
from {margin-top:-100%;}
to {margin-top:0;}
}
@keyframes show {
from {opacity:0}
to {opacity:1;}
}
@-webkit-keyframes show {
from {opacity:0}
to {opacity:1;}
}
</style>
</head>
<body>
<div id="box0"></div>
<div id="box1"></div>
<div id="box2"></div>
<!--<div id="box3"></div>-->
<ul id="nav">
<li class="navlogo"><a href="index.html"><img src="images/logo.png"></a></li>
<li><a href="about.html">ABOUT VENSTA</a></li>
<li><a href="#">PROPERTY DEVELOPMENT</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div class="menu">
<div class="textfixed">
<table width="150" border="0">
<tr>
<td height="76" valign="middle" style="line-height:28px; padding-left:10px;">ON GOING<br />DEVELOPMENT</td>
<td><img src="images/arrow_home.png"></td>
</tr>
</table>
</div><!--textfixed-->
<div class="textscroll">
<marquee behavior="scroll" scrolldelay="90" direction="up" height="80" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();">
<table width="300" border="0">
<tr>
<td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png"> </td>
<td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
</tr>
<tr>
<td width="138" align="right" valign="middle"><div id="typetext">TYPE A</div></td>
<td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeA.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type A" width="23" height="23"></a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png"> </td>
<td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
</tr>
<tr>
<td width="138" align="right" valign="middle"><div id="typetext">TYPE B</div></td>
<td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeB.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type B" width="23" height="23"></a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png"> </td>
<td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
<td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Semi D" width="23" height="23"></a></td>
</tr>
<tr>
<td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png"> </td>
<td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
<td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Bungalow" width="23" height="23"></a></td>
</tr>
<tr>
<td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/putra_indah_logo.png"> </td>
<td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
<td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="putra_indah_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Putra Indah Bungalow" width="23" height="23"></a></td>
</tr>
<tr>
<td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/taman_kota_muhibbah_logo.png"> </td>
<td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
<td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="kota_muhibbah_terrace.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Kota Muhibbah Terrace" width="23" height="23"></a></td>
</tr>
<tr>
<td width="138" align="right" valign="top" style="padding-right:5%;">Terrace</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/bukit_mas_logo.png"> </td>
<td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
<td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="bukit_mas_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Bukit Mas Semi D" width="23" height="23"></a></td>
</tr>
<tr>
<td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
</tr>
</table>
</marquee>
</div><!--textscroll-->
</div><!--menu-->
</body>
</html>
The attachments of this post were removed during the platform migration in 2018