You actually may be able to do it with one page. I'll show you how to. Try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AirRockStar - 2006</title>
<style type="text/css" media="screen">
<!--
body,td,th {
font-family: Tahoma;
font-size: 10px;
color: #FFFFFF;
}
body {
background-color: #000000;
}
#mobile {
display:none;
}
#nomobile {
text-align:center;
}
-->
</style>
<style type="text/css" media="handheld">
<!--
body {
background-color: #000000;
background-image: url();
background-position: center top;
}
body,td,th {
font-family: Century Gothic;
color: #FFFFFF;
}
#mobile {
display:block;
text-align:center;
}
#nomobile {
display:none;
}
.style1 {
font-size: 12px;
font-family: Tahoma;
}
a:link {
color: #008000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #003300;
}
a:hover {
text-decoration: none;
color: #003300;
}
a:active {
text-decoration: none;
}
.style3 {font-size: 12px; font-family: Tahoma; color: #003300; }
.style5 {font-size: 12px; font-family: Tahoma; color: #FFFFFF; }
-->
</style>
</head>
<body>
<div id="nomobile" style="text-align:center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" id="table1">
<tr>
<td width="100%" height="100%" align="center" bgcolor="#000000">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="769" height="600" id="table2">
<tr>
<td>
<p align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="768" height="600">
<param name="movie" value="intro.swf">
<param name="quality" value="high">
<embed src="intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="768" height="600"></embed>
</object>
</p></td>
</tr>
</table>
</div> </td>
</tr>
</table>
</div>
<div id="mobile">
<p><img src="../images/ARSMobileLogo.gif" width="179" height="179" alt=""><br>
My Ringer's<br>
<span class="style1"><a href="http://airrockstar.com/mobile/Sanctuary.gcd">Sanctuary</a> <br>
<a href="http://airrockstar.com/mobile/Dance4Me.gcd">Dance 4 Me</a> <br>
<a href="http://airrockstar.com/mobile/Simple&Clean.gcd">Simple & Clean</a><br>
<a href="http://airrockstar.com/mobile/SOSRemix.gcd">S.O.S. (Remix)<br>
<br>
</a></span>My Picture's <br>
<span class="style3">Coming Soon<br>
<br>
</span><span class="style5">© AirRockStar 2006</span></p>
</div>
</body>
</html>
You can use media="" in the style tags to use styles for certain user agents. In this case we use screen for the browsers, and we hide the mobile version. Then when you use your phone you hide the flash and display the mobile version.