Home Page para Hotel em HTML/CSS
Neste exemplo aplicaremos os conhecimentos de HTML e CSS para desenvolver uma home page para um hotel fictício. Veremos como adicionar diversos elementos do HTML, bem como um slideshow com JavaScript.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
src/interna.html
<html> <head> <title>Projeto ficticio - Hotel Devmedia</title> <link href="css/estilo.css" rel="stylesheet" type="text/css" /> <script language="javascript" src="js/jquery-1.10.2.min.js"></script> <script language="javascript" src="js/jquery.carouFredSel-6.2.0-packed.js"></script> <script language="javascript" src="js/main.js"></script> </head> <body> <div class="container"> <!-- Cabecalho --> <div class="row ei"> <div class="coluna_logomarca"> <img src="imgs/logomarca_249x49.png" width="249" height="49" alt="Logomarca Hotel Devmedia" /> </div> <div class="coluna_menu"> <div class="container_menu bordaArredondada"> <a href="index.html">P�gina Inicial</a> <a href="interna.html">Quem Somos</a> <a href="interna.html">Nossos Produtos</a> <a href="interna.html">Localiza��o</a> <a href="interna.html">Fale Conosco</a> </div> </div> </div> <!-- // Cabecalho --> <!-- Slider --> <div class="row ei"> <div id="containerSlider"> <div id="wrapper"> <div id="images"> <div class="carousel"> <img src="imgs/slider/img01.jpg" width="925" height="295" alt="imga01" /> <img src="imgs/slider/img02.jpg" width="925" height="295" alt="imga02" /> <img src="imgs/slider/img03.jpg" width="925" height="295" alt="imga03" /> </div> </div> <div id="timer"></div> <div id="captions"> <div class="carousel"> <div class="imga01">Imagem 01 <div class="pager"></div> </div> <div class="imga02">Imagem 02 <div class="pager"></div> </div> <div class="imga03">Imagem 03 <div class="pager"></div> </div> </div> </div> </div> </div> </div> <!-- // Slider --> <!-- Conteudo --> <div class="row fundoBrancoTransp divBordaCinzaVazada bordaArredondada ei paginaInterna"> <div class=" marginInterna"> <h1 class="titulo">Titulo da pagina</h1> <p> <img src="imgs/foto_produto.jpg" class="thumbnail"/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra semper nunc quis pretium. Morbi non convallis sapien. Donec in aliquet massa, et sollicitudin turpis. Duis ornare lectus vel turpis elementum, vitae cursus arcu volutpat. Quisque tincidunt nisi justo, quis dapibus velit tempus sit amet. Nullam consequat quam sem, aliquet tincidunt arcu aliquam quis. Proin lobortis mi enim, porta malesuada dolor egestas sit amet. Quisque ut risus id augue mollis ornare. Integer id pharetra tellus, in tincidunt lorem. Sed dignissim sodales mollis. Fusce in volutpat nisl. Duis vel commodo augue, sed ullamcorper nisl. Sed tincidunt porttitor quam eu imperdiet. Vivamus faucibus felis nec magna faucibus, vitae tempor mi gravida. Sed vel libero dolor. Donec mi libero, commodo et blandit vitae, scelerisque et nunc. </p> <p> <img src="imgs/foto_produto.jpg" class="thumbnail-right"/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra semper nunc quis pretium. Morbi non convallis sapien. Donec in aliquet massa, et sollicitudin turpis. Duis ornare lectus vel turpis elementum, vitae cursus arcu volutpat. Quisque tincidunt nisi justo, quis dapibus velit tempus sit amet. Nullam consequat quam sem, aliquet tincidunt arcu aliquam quis. Proin lobortis mi enim, porta malesuada dolor egestas sit amet. Quisque ut risus id augue mollis ornare. Integer id pharetra tellus, in tincidunt lorem. Sed dignissim sodales mollis. Fusce in volutpat nisl. Duis vel commodo augue, sed ullamcorper nisl. Sed tincidunt porttitor quam eu imperdiet. Vivamus faucibus felis nec magna faucibus, vitae tempor mi gravida. Sed vel libero dolor. Donec mi libero, commodo et blandit vitae, scelerisque et nunc. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra semper nunc quis pretium. Morbi non convallis sapien. Donec in aliquet massa, et sollicitudin turpis. Duis ornare lectus vel turpis elementum, vitae cursus arcu volutpat. Quisque tincidunt nisi justo, quis dapibus velit tempus sit amet. Nullam consequat quam sem, aliquet tincidunt arcu aliquam quis. Proin lobortis mi enim, porta malesuada dolor egestas sit amet. Quisque ut risus id augue mollis ornare. Integer id pharetra tellus, in tincidunt lorem. Sed dignissim sodales mollis. Fusce in volutpat nisl. Duis vel commodo augue, sed ullamcorper nisl. Sed tincidunt porttitor quam eu imperdiet. Vivamus faucibus felis nec magna faucibus, vitae tempor mi gravida. Sed vel libero dolor. Donec mi libero, commodo et blandit vitae, scelerisque et nunc. </p> </div> </div> <!-- // Conteudo --> <!-- Rodape; --> <div class="row fundoBrancoTransp bordaArredondada rodape ei"> Informa��o de rodap� </div> <!-- // Rodape; --> </div> </body> </html>