O projeto está inativo
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.
90
38
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/Index.html
Página inicial do projeto:
<html>
<head>
<title>Projeto Prático - 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">
<!-- Cabeçalho -->
<div class="row ei">
<div class="coluna_logomarca">
<img src="imgs/logomarca_249x49.png" alt="logomarca_249x49"width="249"
height="49" alt="Logomarca Hotel Devmedia" />
</div>
<div class="coluna_menu">
<div class="container_menu bordaArredondada">
<a href="index.html" title="index">Página Inicial</a>
<a href="interna.html" title="interna">Quem Somos</a>
<a href="interna.html" title="interna">Nossos Produtos</a>
<a href="interna.html" title="interna">Localização</a>
<a href="interna.html" title="interna">Fale Conosco</a>
</div>
</div>
</div>
<!-- // Cabeçalho -->
<!-- Slider -->
<div class="row ei">
<div id="containerSlider">
<div id="wrapper">
<div id="images">
<div class="carousel">
<img src="imgs/slider/img01.jpg" alt="img01" width="925"
height="295" alt="imga01" />
<img src="imgs/slider/img02.jpg" alt="img02" width="925"
height="295" alt="imga02" />
<img src="imgs/slider/img03.jpg" alt="img03" 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 -->
<!-- ícones -->
<div class="row ei">
<div class="bordaArredondada divBordaCinzaVazada efeitoHover iconeInicial">
<div class="marginInterna">
<div class="icone"><img src="imgs/icone_fale_conoco.png"
alt="icone_fale_conoco" /></div>
<div class="tituloIcone">Fale Conosco</div>
</div>
</div>
<div class="bordaArredondada divBordaCinzaVazada efeitoHover iconeInicial">
<div class="marginInterna">
<div class="icone"><img src="imgs/icone_localizacao.png"
alt="icone_localizacao"/></div>
<div class="tituloIcone">Localizaçao</div>
</div>
</div>
<div class="bordaArredondada divBordaCinzaVazada efeitoHover iconeInicial">
<div class="marginInterna">
<div class="icone"><img src="imgs/icone_galeria_de_fotos.png"
alt="icone_galeria_de_fotos"/></div>
<div class="tituloIcone">Galeria de Fotos</div>
</div>
</div>
<div class="bordaArredondada divBordaCinzaVazada efeitoHover iconeInicial">
<div class="marginInterna">
<div class="icone"><img src="imgs/icone_redes_sociais.png"
alt="icone_redes_sociais" /></div>
<div class="tituloIcone">Redes Sociais</div>
</div>
</div>
</div>
<!-- // ícones -->
<!-- Noticias -->
<div class="row ei">
<div class="divBordaCinzaVazada bordaArredondada coluna_areaNoticias">
<div class="marginInterna ">
<div class="titulo ei">Notícias</div>
<div class="fundoBrancoTransp ei">
<div class="marginInterna">
<p><a href="#" title="#">Titulo da notícia</a></p>
<p>Breve descrição da notícia</p>
</div>
</div>
<div class="fundoBrancoTransp ei">
<div class="marginInterna">
<p><a href="#" title="#">Título da notícia</a></p>
<p>Breve descrição da notícia</p>
</div>
</div>
</div>
</div>
<div class="coluna_areaProdutos">
<div class="coluna_produto01 fundoBrancoTransp bordaArredondada ">
<div class="marginInterna">
<p>
<center><img src="imgs/foto_produto.jpg"
alt="foto_produto"/></center>
</p>
<p align="center">
<a href="#" title="#">Nome do Produto</a>
</p>
</div>
</div>
<div class="coluna_produto02 fundoBrancoTransp bordaArredondada">
<div class="marginInterna">
<p>
<center><img src="imgs/foto_produto.jpg"
alt="foto_produto" /></center>
</p>
<p align="center">
<a href="#" title="#">Nome do Produto</a>
</p>
</div>
</div>
</div>
</div>
<!-- // Noticias -->
<!-- Rodapé -->
<div class="row fundoBrancoTransp bordaArredondada rodape ei">
Informação de rodapé
</div>
<!-- // Rodapé -->
</div>
</body>
</html>