I've downloaded a template that will be the index of my project, so it's all set up with web.xhtml , I'm already running other jsf projects, however I'm starting another project and I want to put a template that I've taken in html5 to run as index, but wanted to know how to adapt it to run, good see the code of the page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta charset="utf-8" />
<title>Moviereviews - Free CSS template by ChocoTemplates.com</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/colorbox.css" type="text/css" media="all" />
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.js"></script>
<![endif]-->
<script src="js/functions.js" type="text/javascript"></script>
</h:head>
<h:body>
<!-- wrapper -->
<div id="wrapper">
<div class="light-bg">
<!-- shell -->
<div class="shell">
<!-- header -->
<div class="header">
<!-- socials -->
<div class="socials">
<a href="#" class="facebook-ico">facebook-ico</a>
<a href="#" class="twitter-ico">twitter-ico</a>
<a href="#" class="you-tube-ico">you-tube-ico</a>
</div>
<!-- end of socials -->
<h1 id="logo"><a href="#">Moviereviews</a></h1>
<!-- navigation -->
<nav id="navigation">
<ul>
<li><a href="#">SHOW ALL</a></li>
<li><a href="#">LATEST MOVIES <span>20</span></a></li>
<li><a href="#">TOP RATED</a></li>
<li><a href="#">MOST COMMENTED</a></li>
</ul>
</nav>
<!-- end of navigation -->
<div class="cl"> </div>
</div>
<!-- end of header -->
<!-- main -->
<div class="main">
<!-- content -->
<section class="content">
<!-- post -->
<div class="post">
<!-- post-inner -->
<div class="post-inner">
<header>
<h2><a href="#">MovieTitle 1 Goes Here</a></h2>
<p class="tags"><a href="#">FAMILY</a> <a href="#">COMEDY</a> <a href="#">ANIMATION</a> </p>
<div class="cl"> </div>
</header>
<div class="img-holder">
<a href="#"><img src="css/images/post-img.jpg" alt="" /></a>
<a href="css/images/post-img.jpg" class="btn-full-image popup"><span>FULL IMAGE</span></a>
</div>
<!-- meta -->
<div class="meta">
<p class="date">APRIL 09, 2012 by <a href="#">JOHN DOE</a></p>
<div class="right">
<div class="rating-holder">
<p>RATING</p>
<div class="rating">
<span style="width: 100%;"></span>
</div>
</div>
<a href="#" class="comments">59 comments</a>
</div>
<div class="cl"> </div>
</div>
<!-- end of meta -->
<!-- post-cnt -->
<div class="post-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo orci vitae enim volutpat dapibus. Aliquam pharetra, odio eu luctus semper, dolor libero volutpat mi, sit amet convallis tortor justo eu nisl. Cras quis felis quis felis tempor volutpat id at dui. Donec vel turpis id odio tempus mollis quis vel justo. Etiam tortor nisi, pulvinar a mattis nec, luctus sit amet odio. Morbi id commodo ligula. </p>
<a href="#" class="more">CONTINUE READING</a>
</div>
<!-- end of post-cnt -->
</div>
<!-- post-inner -->
</div>
<!-- end of post -->
<!-- post -->
<div class="post">
<!-- post-inner -->
<div class="post-inner">
<header>
<h2><a href="#">MovieTitle 2 Goes Here</a></h2>
<p class="tags"><a href="#">FAMILY</a> <a href="#">COMEDY</a> <a href="#">ANIMATION</a> </p>
<div class="cl"> </div>
</header>
<div class="img-holder">
<a href="#"><img src="css/images/post-img2.jpg" alt="" /></a>
<a href="css/images/post-img2.jpg" class="btn-full-image popup"><span>FULL IMAGE</span></a>
</div>
<!-- meta -->
<div class="meta">
<p class="date">APRIL 09, 2012 by <a href="#">JOHN DOE</a></p>
<div class="right">
<div class="rating-holder">
<p>RATING</p>
<div class="rating">
<span style="width: 50%;"></span>
</div>
</div>
<a href="#" class="comments">59 comments</a>
</div>
<div class="cl"> </div>
</div>
<!-- end of meta -->
<!-- post-cnt -->
<div class="post-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo orci vitae enim volutpat dapibus. Aliquam pharetra, odio eu luctus semper, dolor libero volutpat mi, sit amet convallis tortor justo eu nisl. Cras quis felis quis felis tempor volutpat id at dui. Donec vel turpis id odio tempus mollis quis vel justo. Etiam tortor nisi, pulvinar a mattis nec, luctus sit amet odio. Morbi id commodo ligula. </p>
<a href="#" class="more">CONTINUE READING</a>
</div>
<!-- end of post-cnt -->
</div>
<!-- post-inner -->
</div>
<!-- end of post -->
<!-- post -->
<div class="post">
<!-- post-inner -->
<div class="post-inner">
<header>
<h2><a href="#">MovieTitle 3 Goes Here</a></h2>
<p class="tags"><a href="#">FAMILY</a> <a href="#">COMEDY</a> <a href="#">ANIMATION</a> </p>
<div class="cl"> </div>
</header>
<div class="img-holder">
<a href="#"><img src="css/images/post-img3.jpg" alt="" /></a>
<a href="css/images/post-img3.jpg" class="btn-full-image popup"><span>FULL IMAGE</span></a>
</div>
<!-- meta -->
<div class="meta">
<p class="date">APRIL 09, 2012 by <a href="#">JOHN DOE</a></p>
<div class="right">
<div class="rating-holder">
<p>RATING</p>
<div class="rating">
<span style="width: 70%;"></span>
</div>
</div>
<a href="#" class="comments">59 comments</a>
</div>
<div class="cl"> </div>
</div>
<!-- end of meta -->
<!-- post-cnt -->
<div class="post-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo orci vitae enim volutpat dapibus. Aliquam pharetra, odio eu luctus semper, dolor libero volutpat mi, sit amet convallis tortor justo eu nisl. Cras quis felis quis felis tempor volutpat id at dui. Donec vel turpis id odio tempus mollis quis vel justo. Etiam tortor nisi, pulvinar a mattis nec, luctus sit amet odio. Morbi id commodo ligula. </p>
<a href="#" class="more">CONTINUE READING</a>
</div>
<!-- end of post-cnt -->
</div>
<!-- post-inner -->
</div>
<!-- end of post -->
<div class="pagination">
<ul>
<li class="laquo"><a href="#"><span></span></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="raquo"><a href="#"><span></span></a></li>
<li><a href="#">10</a></li>
<li class="dots">. . .</li>
<li><a href="#">last</a></li>
</ul>
</div>
</section>
<!-- end of content -->
<!-- sidebar -->
<aside class="sidebar">
<div class="widget">
<h3 class="widgettitle">Genres</h3>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Comedy</a></li>
<li><a href="#">Family</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Mystery</a></li>
<li><a href="#">Sci-Fi</a></li>
<li><a href="#">War</a></li>
<li><a href="#">Western</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Crime</a></li>
<li><a href="#">Fantasy</a></li>
<li><a href="#">Horror</a></li>
<li><a href="#">Thriller</a></li>
</ul>
</div>
<div class="widget">
<h3 class="widgettitle">Opening This Week</h3>
<ul>
<li><a href="#">The Hunter Games <strong>$98 Mil</strong></a></li>
<li><a href="#">American Reunion <strong>$50 Mil</strong></a></li>
<li><a href="#">Titanic <strong>$23 Mil</strong></a></li>
<li><a href="#">Wrath of the Titans <strong>$50 Mil</strong></a></li>
<li><a href="#">Mirror Mirro <strong>$7 Mil</strong></a></li>
</ul>
</div>
<div class="widget socials-widget">
<h3 class="widgettitle">Get Connected</h3>
<ul>
<li><a href="#" class="facebook-ico"><span></span>Facebook</a></li>
<li><a href="#" class="twitter-ico"><span></span>Twitter</a></li>
<li><a href="#" class="linkedin-ico"><span></span>Linkedin</a></li>
<li><a href="#" class="you-tube-ico"><span></span>Youtube</a></li>
<li><a href="#" class="rss-ico"><span></span>RSS</a></li>
</ul>
</div>
</aside>
<!-- end of sidebar -->
<div class="cl"> </div>
</div>
<!-- end of main -->
<div class="footer">
<nav class="footer-nav">
<ul>
<li><a href="#">Show All</a></li>
<li><a href="#">Latest Movies</a></li>
<li><a href="#">Top Rated</a></li>
<li><a href="#">Most Commented</a></li>
</ul>
</nav>
<p class="copy">Copyright © 2012 <span>|</span> Sitename. Design by <a href="http://chocotemplates.com" target="_blank">ChocoTemplates.com</a></p>
</div>
</div>
<!-- end of shell -->
</div>
</div>
<!-- end of wrapper -->
however of the error:
javax.faces.view.facelets.FaceletException: Error Parsing /index.xhtml: Error Traced [line: 49] The entity "nbsp" was referenced, but not declared.
What changes do I need to make to run in jsf?