como solucionar les pediría el favor que me ayuden con sus conocimientos, el problema es el siguiente tengo un menu interactivo programado en html en un index que llama un css y un js aparte de las imágenes, quiero que este html me funcione en una pagina php esta pagina es el home.php de mi tema de wordpress llamado webly no se que debo hacer ya enrrute y subi al servidor de la pagina los archivos css y el js ademas de las imagenes pero no se como incluir el codigo que esta en html en el php este es el codigo de mi archivo html:<html>
<head>
<title>Promociones productos DERMA & PIEL</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
body{
bgcolor: silver;
font-family:Arial;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}
span.reference a{
color:#aaa;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
margin-right:30px;
}
span.reference a:hover{
color:#ddd;
}
ul.sdt_menu{
margin-top:90px;
}
h1.title{
text-indent:-9000px;
background:transparent url(title.png) no-repeat top left;
width:633px;
height:69px;
}
</style>
</head>
<body>
<div align="center" class="content">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/facial.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Facial</span>
<span class="sdt_descr">Restylane Perlane</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/capilar.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Capilar</span>
<span class="sdt_descr">KERIUM anticaida</span>
</span>
</li>
<li>
<a href="#">
<img src="images/corporal.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Corporal</span>
<span class="sdt_descr">Beaulife</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/maquillaje.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Maquillaje</span>
<span class="sdt_descr">PALLADIO Obsequia neceser</span>
</span>
</a>
</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
</body>
</html>
o puedo agregar este html a mi pagina principal home.php?
