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.

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>
Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.