├── imagens
    ├── bg.png
    ├── logo.png
    ├── .DS_Store
    ├── bg-linha.gif
    ├── bg-rodape.png
    ├── ornamento.png
    ├── piscina.jpg
    ├── apartamento.jpg
    ├── depoimento.png
    ├── restaurante.jpg
    ├── bg-container.png
    ├── bg-area-lateral.png
    ├── bg-area-principal.png
    ├── topo-imagem-lateral.png
    ├── topo-imagem-principal.png
    └── topo-imagem-principal2.png
├── css
    └── style.css
└── index.html


/imagens/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/bg.png


--------------------------------------------------------------------------------
/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/logo.png


--------------------------------------------------------------------------------
/imagens/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/.DS_Store


--------------------------------------------------------------------------------
/imagens/bg-linha.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/bg-linha.gif


--------------------------------------------------------------------------------
/imagens/bg-rodape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/bg-rodape.png


--------------------------------------------------------------------------------
/imagens/ornamento.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/ornamento.png


--------------------------------------------------------------------------------
/imagens/piscina.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/piscina.jpg


--------------------------------------------------------------------------------
/imagens/apartamento.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/apartamento.jpg


--------------------------------------------------------------------------------
/imagens/depoimento.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/depoimento.png


--------------------------------------------------------------------------------
/imagens/restaurante.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/restaurante.jpg


--------------------------------------------------------------------------------
/imagens/bg-container.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/bg-container.png


--------------------------------------------------------------------------------
/imagens/bg-area-lateral.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/bg-area-lateral.png


--------------------------------------------------------------------------------
/imagens/bg-area-principal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/bg-area-principal.png


--------------------------------------------------------------------------------
/imagens/topo-imagem-lateral.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/topo-imagem-lateral.png


--------------------------------------------------------------------------------
/imagens/topo-imagem-principal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/topo-imagem-principal.png


--------------------------------------------------------------------------------
/imagens/topo-imagem-principal2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/chale-hotel/master/imagens/topo-imagem-principal2.png


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /*Estrutura do site*/
  2 | 
  3 | * {
  4 | 	margin: 0;
  5 | 	padding: 0;
  6 | }
  7 | 
  8 | body {
  9 | 	background: #fff url(../imagens/bg.png);
 10 | 	font-family: Helvetica, "Trebuchet MS", sans-serif;
 11 | 	margin: 15px;
 12 | }
 13 | 
 14 | #container {
 15 | 	background: #ede9cc url(../imagens/bg-container.png) top center repeat-y;
 16 | 	margin: 0 auto;
 17 | 	min-width: 740px;
 18 | 	max-width: 1180px;
 19 | }
 20 | 
 21 | #topo {
 22 | 	position: relative;
 23 | 	background: #dbcd87;
 24 | 	height: 15.4em;
 25 | 	min-height: 250px;
 26 | }
 27 | 
 28 | #area-logo {
 29 | 	position: absolute;
 30 | 	top: 0;
 31 | 	left: 0;
 32 | 	background: url(../imagens/topo-imagem-principal.png) no-repeat;
 33 | 	width: 100%;
 34 | 	height: 250px;
 35 | 	z-index: 1;
 36 | }
 37 | 
 38 | 
 39 | .logo a {
 40 | 	position: absolute;
 41 | 	top: 15px;
 42 | 	left: 15px;
 43 | 	z-index: 3;
 44 | 	background: url(../imagens/logo.png) no-repeat;
 45 | 	width: 151px;
 46 | 	height: 66px;
 47 | 	text-indent: -10000px;
 48 | }
 49 | 
 50 | #area-menu {
 51 | 	position: absolute;
 52 | 	top: 0;
 53 | 	right: 0;
 54 | 	background: url(../imagens/topo-imagem-lateral.png) no-repeat;
 55 | 	width: 450px;
 56 | 	height: 250px;
 57 | 	z-index: 2;
 58 | }
 59 | 
 60 | #conteudo-menu {
 61 | 	margin-left: 90px;
 62 | 	margin-right: 15px;
 63 | 	padding-top: 15px;
 64 | }
 65 | 
 66 | #menu-locais {
 67 | 	border-bottom: 1px solid #b5ab56;
 68 | 	border-top: 1px solid #b5ab56;
 69 | 	padding-top: 5px;
 70 | 	padding-bottom: 5px;
 71 | 	font-size: 0.7em;
 72 | 	color: #8b8448;
 73 | }
 74 | 
 75 | #menu-locais .locais {
 76 | 	float: left;
 77 | 	line-height: 2.1em;
 78 | }
 79 | 
 80 | a {
 81 | 	text-decoration: none;
 82 | }
 83 | 
 84 | a.reserva {
 85 | 	text-transform: uppercase;
 86 | 	background: #a29750;
 87 | 	color: #fff5b0;
 88 | 	padding: 5px 10px;
 89 | 	float: right;
 90 | }
 91 | 
 92 | /*Barra de navegação vertical*/
 93 | 
 94 | #menu { 
 95 | 	margin-top: 15px;
 96 | }
 97 | 
 98 | ul {
 99 | 	list-style: none;
100 | }
101 | 
102 | ul#navegacao {
103 | 	float: left;
104 | }
105 | 
106 | ul#navegacao a {
107 | 	text-transform: uppercase;
108 | 	font-size: 0.8em;
109 | 	padding: 5px;
110 | 	color: #6e672c;
111 | 	line-height: 30px;
112 | }
113 | 
114 | ul#navegacao a:hover {
115 | 	background: #fdf6be;
116 | }
117 | 
118 | .depoimento {
119 | 	width: 226px;
120 | 	height: 164px;
121 | 	float: right;
122 | }
123 | 
124 | /*Área de conteúdos*/
125 | 
126 | #area-principal {
127 | 	float: left;
128 | 	width: 50%;
129 | 	background: url(../imagens/bg-area-principal.png) top left repeat-x;
130 | 	padding: 15px 0;
131 | }
132 | 
133 | #area-lateral {
134 | 	float: right;
135 | 	width: 50%;
136 | 	background: url(../imagens/bg-area-lateral.png) top left repeat-x;
137 | 	padding: 20px 0;
138 | }
139 | 
140 | .conteudo {
141 | 	margin: 0 auto;
142 | 	width: 90%;
143 | }
144 | 
145 | #rodape {
146 | 	clear: both;
147 | 	color: #7d7640;
148 | 	padding: 16px;
149 | 	background: #fff url(../imagens/bg-rodape.png) repeat-x top;
150 | }
151 | 
152 | /*Formatações de texto*/
153 | 
154 | h2 {
155 | 	color: #7d7640;
156 | 	font-size: 1.1em;
157 | 	padding: 5px 0;
158 | }
159 | 
160 | p {
161 | 	font-size: 1em;
162 | 	margin-bottom: 10px;
163 | }
164 | 
165 | /*Formatações da area lateral*/
166 | 
167 | #beneficios li {
168 | 	padding: 8px;
169 | 	border-bottom: 1px solid #f3efcb;
170 | 	height: 6em;
171 | }
172 | 
173 | #beneficios li a img {
174 | 	float: left;
175 | 	margin-right: 8px;
176 | }
177 | 
178 | #beneficios li a p {
179 | 	color: #000;
180 | 	font-size: 0.8em;
181 | }
182 | 
183 | #beneficios li a h3 {
184 | 	font-size: 1em;
185 | 	color: #615b2d;
186 | 	padding: 5px 0;
187 | 	background: url(../imagens/ornamento.png) no-repeat center right;
188 | }
189 | 
190 | #beneficios li:hover {
191 | 	background: #f6f3d6;
192 | 	cursor: pointer;
193 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Chalé Hotel</title>
  5 | 	<meta charset="utf-8">
  6 | 	<link rel="stylesheet" type="text/css" href="css/style.css">
  7 | </head>
  8 | <body>
  9 | 
 10 | 	<!-- Início /container -->
 11 | 	<div id="container">
 12 | 	
 13 | 		<!-- Início /topo -->
 14 | 		<div id="topo">
 15 | 			
 16 | 			<div id="area-logo">
 17 | 				<h1 class="logo">
 18 | 					<a href="">Chalé Hotel</a>
 19 | 				</h1>
 20 | 			</div>
 21 | 
 22 | 			<div id="area-menu">
 23 | 				<div id="conteudo-menu">
 24 | 					
 25 | 					<div id="menu-locais">
 26 | 						<span class="locais">
 27 | 							Rio de Janeiro - São Paulo - Belo Horizonte
 28 | 						</span>
 29 | 						<a class="reserva" href="">Reservar</a>
 30 | 						<div style="clear:both;"></div>
 31 | 					</div>
 32 | 
 33 | 					<div id="menu">
 34 | 						<ul id="navegacao">
 35 | 							<li><a href="">Home</a></li>
 36 | 							<li><a href="">História</a></li>
 37 | 							<li><a href="">Imprensa</a></li>
 38 | 							<li><a href="">Gastronomia</a></li>
 39 | 							<li><a href="">Contato</a></li>
 40 | 						</ul>
 41 | 
 42 | 						<img class="depoimento" src="imagens/depoimento.png">
 43 | 					</div>
 44 | 
 45 | 				</div>
 46 | 			</div>
 47 | 
 48 | 		</div><!-- Fim /topo -->
 49 | 
 50 | 		<!-- Início /area-principal -->
 51 | 		<div id="area-principal">
 52 | 			<div class="conteudo">
 53 | 				
 54 | 				<h2>
 55 | 					Lorem Ipsum is simply dummy text
 56 | 				</h2>
 57 | 
 58 | 				<p>
 59 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque massa sed imperdiet lacinia. Quisque a auctor leo. In euismod molestie libero, in ullamcorper nulla lobortis at. Nulla aliquet rhoncus lorem sit amet porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque hendrerit pellentesque eros, in ornare odio fringilla ornare. Aenean massa neque, laoreet eu blandit id, pulvinar id mi. Aenean efficitur semper mauris vitae malesuada. Vestibulum eget nunc ut sapien fermentum vehicula nec eu orci. Maecenas pharetra finibus dapibus. Aliquam ac magna lorem.
 60 | 				</p>
 61 | 
 62 | 				<p>
 63 | 					Sed hendrerit massa libero. Cras egestas tellus leo, et egestas metus tristique non. Nulla at sem sed sapien pellentesque scelerisque id eu massa.
 64 | 				</p>
 65 | 
 66 | 				<p>
 67 | 					Sed hendrerit massa libero. Cras egestas tellus leo, et egestas metus tristique non. Nulla at sem sed sapien pellentesque scelerisque id eu massa.
 68 | 				</p>
 69 | 
 70 | 			</div>
 71 | 		</div><!-- Fim /area-principal -->
 72 | 
 73 | 		<!-- Início /area-lateral -->
 74 | 		<div id="area-lateral">
 75 | 			<div class="conteudo">
 76 | 				
 77 | 				<ul id="beneficios">
 78 | 					<li>
 79 | 						<a href="">
 80 | 							<img src="imagens/apartamento.jpg" width="150" alt="Apartamento">
 81 | 							<h3>Apartamento</h3>
 82 | 								<p>
 83 | 									Sed hendrerit massa libero. Cras egestas tellus leo, et egestas metus tristique non. Nulla at sem sed sapien pellentesque scelerisque id eu massa.
 84 | 							</p>
 85 | 						</a>
 86 | 					</li>
 87 | 					<li>
 88 | 						<a href="">
 89 | 							<img src="imagens/restaurante.jpg" width="150" alt="Restaurante">
 90 | 							<h3>Restaurante</h3>
 91 | 								<p>
 92 | 									Sed hendrerit massa libero. Cras egestas tellus leo, et egestas metus tristique non. Nulla at sem sed sapien pellentesque scelerisque id eu massa.
 93 | 							</p>
 94 | 						</a>
 95 | 					</li>
 96 | 					<li>
 97 | 						<a href="">
 98 | 							<img src="imagens/piscina.jpg" width="150" alt="Piscina">
 99 | 							<h3>Piscina</h3>
100 | 								<p>
101 | 									Sed hendrerit massa libero. Cras egestas tellus leo, et egestas metus tristique non. Nulla at sem sed sapien pellentesque scelerisque id eu massa.
102 | 							</p>
103 | 						</a>
104 | 					</li>
105 | 				</ul>
106 | 
107 | 			</div>
108 | 		</div><!-- Fim /area-lateral-->
109 | 
110 | 		<div id="rodape">
111 | 			<span>
112 | 				&copy; Copyright 2000-2020 Chalé Hotel
113 | 			</span>
114 | 		</div>
115 | 
116 | 	</div><!-- Fim /container -->
117 | 
118 | </body>
119 | </html>


--------------------------------------------------------------------------------