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/interna.html

Página secundária:
<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&#65533;gina Inicial</a>
                  <a href="interna.html">Quem Somos</a>
                  <a href="interna.html">Nossos Produtos</a>
                  <a href="interna.html">Localiza&#65533;&#65533;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&#65533;&#65533;o de rodap&#65533;
         </div>
         <!-- // Rodape; -->
         
      </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.