├── imagem1.JPG ├── imagem10.JPG ├── imagem11.JPG ├── imagem12.JPG ├── imagem13.JPG ├── imagem2.JPG ├── imagem3.JPG ├── imagem4.JPG ├── imagem5.JPG ├── imagem6.JPG ├── imagem7.JPG ├── imagem8.JPG ├── imagem9.JPG ├── main.js ├── index.html └── main.css /imagem1.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem1.JPG -------------------------------------------------------------------------------- /imagem10.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem10.JPG -------------------------------------------------------------------------------- /imagem11.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem11.JPG -------------------------------------------------------------------------------- /imagem12.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem12.JPG -------------------------------------------------------------------------------- /imagem13.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem13.JPG -------------------------------------------------------------------------------- /imagem2.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem2.JPG -------------------------------------------------------------------------------- /imagem3.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem3.JPG -------------------------------------------------------------------------------- /imagem4.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem4.JPG -------------------------------------------------------------------------------- /imagem5.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem5.JPG -------------------------------------------------------------------------------- /imagem6.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem6.JPG -------------------------------------------------------------------------------- /imagem7.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem7.JPG -------------------------------------------------------------------------------- /imagem8.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem8.JPG -------------------------------------------------------------------------------- /imagem9.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/claudineiaga/Site-de-Restaurante/HEAD/imagem9.JPG -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $("a").on("click", function (event) { 3 | if (this.hash !== "") { 4 | event.preventDefault(); 5 | var hash = this.hash; 6 | $("html, body").animate( 7 | { 8 | scrollTop: $(hash).offset().top, 9 | }, 10 | 800, 11 | function () { 12 | window.location.hash = hash; 13 | } 14 | ); 15 | } 16 | }); 17 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CW Bistrô 7 | 8 | 9 | 10 | 16 | 17 | 18 | 37 |
38 |
39 |

Coma a Comida Certa

40 |

Comer Saudável, é bom para a nossa saúde

41 | Menu 42 |
43 |
44 | 45 |
46 |
47 |
48 |

Sobre Nós

49 |

Há 10 anos que fazemos comida saudável durar.

50 |

51 | Comida saudável, em suma, é aquela mais natural possível, livre de conservantes, 52 | gorduras saturadas e de excessos de gordura, açúcar e sódio. 53 | Para que a comida seja saudável ela deve contemplar todos os nutrientes 54 | necessários de uma refeição, ou seja, ela precisa ser balanceada. Assim, para uma 55 | refeição ser balanceada. 56 |

57 |
58 |
59 | food 60 |
61 |
62 |
63 |
64 |

Tipos de Comida

65 |
66 |
67 |
68 | error 69 |
70 |

Frutas

71 | Ler Mais... 77 |
78 |
79 |
80 |
81 |
82 | error 83 |
84 |

Vegetais

85 | Ler Mais... 91 |
92 |
93 |
94 |
95 |
96 | error 97 |
98 |

Grãos

99 | Ler Mais... 105 |
106 |
107 |
108 |
109 |
110 |
111 |

Menu

112 |
113 |
114 |
115 | 116 |
117 |
118 |

Salada Tropical

119 |

As saladas são uma preparação culinária 120 | composta pela mistura de alimentos, como 121 | vegetais, frutas, leguminosas, castanhas, 122 | acrescidas ou não de temperos e molhos. 123 |

124 |

Preço: R$ 250

125 |
126 |
127 |
128 |
129 | error 133 |
134 |
135 |

Salada de Frango

136 |

Salada de frango é qualquer salada com frango 137 | como ingrediente principal. Outros ingredientes 138 | comuns podem incluir maionese, ovo cozido, 139 | aipo, cebola, pimenta, picles e uma variedade 140 | de mostardas. 141 |

142 |

Preço: 250

143 |
144 |
145 |
146 |
147 | 148 |
149 |
150 |

Peixe com Salada

151 |

A salada é uma boa pedida para quem está 152 | procurando uma alimentação leve, e a proteína 153 | da vez para completar o prato sãos peixes e 154 | frutos do mar. 155 |

156 |

Preço: R$ 250

157 |
158 |
159 |
160 |
161 | 162 |
163 |
164 |

Salada de Grãos

165 |

A salada de grão-de-bico é uma sugestão 166 | para uma refeição leve, prática e saudável. 167 | Feita na panela de pressão, a receita pode 168 | ser servida sozinha ou como acompanhamento 169 | no almoço ou jantar. 170 |

171 |

Preço: R$ 250

172 |
173 |
174 |
175 |
176 | 177 |
178 |
179 |

Torta de Framboesa

180 |

A cheesecake, ficou perfeita! Cremosa na medida certa. 181 | Acompanhada de um delicioso coulis de framboesas para 182 | equilibrar os sabores e muitas framboesas 183 | frescas para celebrar a minha colheita. 184 | Não poderia pedir mais nada…apenas mais dias 185 | e sobremesas como essa. 186 |

187 |

Preço: R$ 250

188 |
189 |
190 |
191 |
192 | 193 |
194 |
195 |

Sobremesa Gelada de Frutas

196 |

A sobremesa é uma das horas mais esperadas 197 | das refeições. Ela completa os sabores dos 198 | pratos com aquele toque adocicado e prazeroso 199 | ao paladar. Mas, até mesmo nesse momento, 200 | nós precisamos ter atenção com a nossa 201 | alimentação. 202 |

203 |

Preço: R$ 250

204 |
205 |
206 |
207 |
208 |
209 |

O que nossos Clientes Falam sobre nós:

210 |
211 |
212 |
213 |
214 | 215 |

Jorge Lee

216 |
217 |
218 |
219 | 220 | 221 | 222 | 223 | 224 |
225 |

226 | Comida maravilhosa e atendimento maravilhoso. 227 | Volto sempre que estou na cidade. 228 |

229 |
230 |
231 |
232 |
233 | 237 |

Amelia Gonçalves

238 |
239 |
240 |
241 | 242 | 243 | 244 | 245 | 246 |
247 |

248 | Amei o restaurante, a comida, e todo atendimento. 249 | Espero sempre voltar neste lugar maravilhoso! 250 |

251 |
252 |
253 |
254 |
255 | 256 |

João Lucas Silva

257 |
258 |
259 |
260 | 261 | 262 | 263 | 264 | 265 |
266 |

267 | Excelente ambiente, com variedade de comidas 268 | deliciosas. 269 |

270 |
271 |
272 |
273 |
274 |
275 |
276 | 277 |
278 | 279 |
280 |

Entre em Contato:

281 | 282 | 283 | 288 | Enviar 289 |
290 |
291 |
292 | 295 | 296 | 297 | 298 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | *, 4 | *::after, 5 | *::before { 6 | box-sizing: border-box; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | 11 | .html { 12 | font-size: 62.5%; 13 | } 14 | 15 | body { 16 | font-family: "Poppins", sans-serif; 17 | } 18 | 19 | .container { 20 | max-width: 1200px; 21 | width: 90%; 22 | margin: auto; 23 | } 24 | 25 | .btn { 26 | display: inline-block; 27 | padding: 0.5em 1.5em; 28 | text-decoration: none; 29 | border-radius: 50px; 30 | cursor: pointer; 31 | outline: none; 32 | margin-top: 1em; 33 | text-transform: uppercase; 34 | font-weight: small; 35 | } 36 | 37 | .btn-primary { 38 | color: rgb(247, 244, 244); 39 | background: #583509; 40 | } 41 | 42 | .btn-primary:hover { 43 | background: #a7610c; 44 | transition: background 0.3s ease-in-out; 45 | } 46 | 47 | .navbar input[type="checkbox"], 48 | .navbar .hamburger-lines { 49 | display: none; 50 | } 51 | 52 | .navbar { 53 | box-shadow: 0px 5px 10px 0px #aaa; 54 | position: fixed; 55 | width: 100%; 56 | background: #fff; 57 | color: #000; 58 | opacity: 0.85; 59 | height: 50px; 60 | z-index: 12; 61 | } 62 | 63 | .navbar-container { 64 | display: flex; 65 | justify-content: space-between; 66 | height: 64px; 67 | align-items: center; 68 | } 69 | 70 | .menu-items { 71 | order: 2; 72 | display: flex; 73 | } 74 | 75 | .menu-items li { 76 | list-style: none; 77 | margin-left: 1.5rem; 78 | margin-bottom: 0.5rem; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .menu-items a { 83 | text-decoration: none; 84 | color: rgb(78, 33, 3); 85 | font-weight: 500; 86 | transition: color 0.3s ease-in-out; 87 | } 88 | 89 | .menu-items a:hover { 90 | color: #583509; 91 | transition: color 0.3s ease-in-out; 92 | } 93 | 94 | .logo { 95 | order: 1; 96 | font-size: 1rem; 97 | margin-bottom: 0.5rem; 98 | } 99 | 100 | .showcase-area { 101 | height: 100vh; 102 | background: linear-gradient( 103 | rgba(240, 240, 240, 0.144), 104 | rgba(255, 255, 255, 0.336) 105 | ), 106 | url("imagem1.JPG"); 107 | background-size: cover; 108 | background-position: center; 109 | background-repeat: no-repeat; 110 | } 111 | 112 | .showcase-container { 113 | display: flex; 114 | flex-direction: column; 115 | align-items: center; 116 | justify-content: center; 117 | height: 100%; 118 | font-size: 1.6rem; 119 | } 120 | 121 | .main-title { 122 | text-transform: uppercase; 123 | margin-top: 1.5em; 124 | } 125 | 126 | #about { 127 | padding: 50px 0; 128 | background: #f5f5f7; 129 | } 130 | 131 | .about-wrapper { 132 | display: flex; 133 | flex-wrap: wrap; 134 | } 135 | 136 | #about h2 { 137 | font-size: 2.3rem; 138 | } 139 | 140 | #about p { 141 | font-size: 1.2rem; 142 | color: #555; 143 | } 144 | 145 | #about .small { 146 | font-size: 1.2rem; 147 | color: rgb(81, 59, 4); 148 | font-weight: 600; 149 | } 150 | 151 | .about-img { 152 | flex: 1 1 400px; 153 | padding: 30px; 154 | transform: translateX(150%); 155 | animation: about-img-animation 1s ease-in-out forwards; 156 | } 157 | 158 | @keyframes about-img-animation { 159 | 100% { 160 | transform: translate(0); 161 | } 162 | } 163 | 164 | .about-text { 165 | flex: 1 1 400px; 166 | padding: 30px; 167 | margin: auto; 168 | transform: translate(-150%); 169 | animation: about-text-animation 1s ease-in-out forwards; 170 | } 171 | 172 | @keyframes about-text-animation { 173 | 100% { 174 | transform: translate(0); 175 | } 176 | } 177 | 178 | .about-img img { 179 | display: block; 180 | height: 400px; 181 | max-width: 100%; 182 | margin: auto; 183 | object-fit: cover; 184 | object-position: right; 185 | } 186 | 187 | #food { 188 | padding: 5rem 0 10rem 0; 189 | } 190 | 191 | #food h2 { 192 | text-align: center; 193 | font-size: 2.5rem; 194 | font-weight: 400; 195 | margin-bottom: 40px; 196 | text-transform: uppercase; 197 | color: rgb(81, 48, 4); 198 | } 199 | 200 | .food-container { 201 | display: flex; 202 | justify-content: space-between; 203 | } 204 | 205 | .food-container img { 206 | display: block; 207 | width: 100%; 208 | margin: auto; 209 | max-height: 300px; 210 | object-fit: cover; 211 | object-position: center; 212 | } 213 | 214 | .img-container { 215 | margin: 0 1rem; 216 | position: relative; 217 | } 218 | 219 | .img-content { 220 | position: absolute; 221 | top: 70%; 222 | left: 50%; 223 | transform: translate(-50%, -50%); 224 | opacity: 0; 225 | z-index: 2; 226 | text-align: center; 227 | transition: all 0.3s ease-in-out 0.1s; 228 | } 229 | 230 | .img-content h3 { 231 | color: #fff; 232 | font-size: 2.2rem; 233 | } 234 | 235 | .img-content a { 236 | font-size: 1.2rem; 237 | } 238 | 239 | .img-container::after { 240 | content: ""; 241 | display: block; 242 | position: absolute; 243 | top: 0; 244 | left: 0; 245 | width: 100%; 246 | height: 100%; 247 | background: rgba(0, 0, 0, 0.871); 248 | opacity: 0; 249 | z-index: 1; 250 | 251 | transform: scaleY(0); 252 | transform-origin: 100% 100%; 253 | transition: all 0.3s ease-in-out; 254 | } 255 | 256 | .img-container:hover::after { 257 | opacity: 1; 258 | transform: scaleY(1); 259 | } 260 | 261 | .img-container:hover .img-content { 262 | opacity: 1; 263 | top: 40%; 264 | } 265 | 266 | .food-menu-heading { 267 | text-align: center; 268 | font-size: 3.4rem; 269 | font-weight: 400; 270 | color: rgb(83, 53, 6); 271 | } 272 | 273 | .food-menu-container { 274 | display: flex; 275 | flex-wrap: wrap; 276 | padding: 50px 0px 30px 0px; 277 | } 278 | 279 | .food-menu-container img { 280 | display: block; 281 | width: 250px; 282 | height: 250px; 283 | border-radius: 50%; 284 | object-fit: cover; 285 | object-position: center; 286 | } 287 | 288 | .food-menu-item { 289 | display: flex; 290 | flex: 1 1 600px; 291 | justify-content: space-evenly; 292 | margin-bottom: 3rem; 293 | } 294 | 295 | .food-description { 296 | margin: auto 1.5rem; 297 | } 298 | 299 | .font-title { 300 | font-size: 1.8rem; 301 | font-weight: 400; 302 | color: #444; 303 | } 304 | 305 | .food-description p { 306 | font-size: 1.4rem; 307 | color: #555; 308 | font-weight: 500; 309 | } 310 | 311 | .food-description .food-price { 312 | color: #583509; 313 | font-weight: 700; 314 | } 315 | 316 | #testimonials { 317 | padding: 5rem 0; 318 | background: rgba(243, 243, 243); 319 | } 320 | 321 | .testimonial-title { 322 | text-align: center; 323 | font-size: 2.8rem; 324 | font-weight: 400; 325 | color: rgb(69, 42, 5); 326 | } 327 | 328 | .testimonial-container { 329 | display: flex; 330 | justify-content: space-between; 331 | font-size: 1.4rem; 332 | padding: 1rem; 333 | } 334 | 335 | .testimonial-box .checked { 336 | color: #ff9529; 337 | } 338 | 339 | .testimonial-box .testimonial-text { 340 | margin: 1rem 0; 341 | color: #444; 342 | } 343 | 344 | .testimonial-box { 345 | text-align: center; 346 | padding: 1rem; 347 | } 348 | 349 | .customer-photo img { 350 | display: block; 351 | width: 150px; 352 | height: 150px; 353 | object-fit: cover; 354 | object-position: center; 355 | border-radius: 50%; 356 | margin: auto; 357 | } 358 | 359 | #contact { 360 | padding: 5rem 0; 361 | background: rgb(226, 226, 226); 362 | } 363 | 364 | .contact-container { 365 | display: flex; 366 | background: #fff; 367 | } 368 | 369 | .contact-img { 370 | width: 50%; 371 | } 372 | 373 | .contact-img img { 374 | display: block; 375 | height: 400px; 376 | width: 100%; 377 | object-position: center; 378 | object-fit: cover; 379 | } 380 | 381 | .form-container { 382 | padding: 1rem; 383 | width: 50%; 384 | margin: auto; 385 | } 386 | 387 | .form-container input { 388 | display: block; 389 | width: 100%; 390 | border: none; 391 | border-bottom: 2px solid #ddd; 392 | padding: 1rem 0; 393 | box-shadow: none; 394 | outline: none; 395 | margin-bottom: 1rem; 396 | color: rgb(68, 68, 68); 397 | font-weight: 500; 398 | } 399 | 400 | .form-container textarea { 401 | display: block; 402 | width: 100%; 403 | border: none; 404 | border-bottom: 2px solid #ddd; 405 | color: rgb(68, 68, 68); 406 | outline: none; 407 | padding: 1rem 0; 408 | resize: none; 409 | } 410 | 411 | .form-container h2 { 412 | font-size: 2.7rem; 413 | font-weight: 500; 414 | color: rgb(80, 51, 4); 415 | margin-bottom: 1rem; 416 | margin-top: -1.2rem; 417 | } 418 | 419 | .form-container a { 420 | font-size: 1.3rem; 421 | } 422 | 423 | #footer h2 { 424 | text-align: center; 425 | font-size: 1.8rem; 426 | padding: 2.6rem; 427 | font-weight: 500; 428 | color: #fff; 429 | background: rgb(66, 47, 4); 430 | } 431 | 432 | @media (max-width: 768px) { 433 | .navbar { 434 | opacity: 0.95; 435 | } 436 | 437 | .navbar-container input[type="checkbox"], 438 | .navbar-container .hamburger-lines { 439 | display: block; 440 | } 441 | 442 | .navbar-container { 443 | display: block; 444 | position: relative; 445 | height: 64px; 446 | } 447 | 448 | .navbar-container input[type="checkbox"] { 449 | position: absolute; 450 | display: block; 451 | height: 32px; 452 | width: 30px; 453 | top: 20px; 454 | left: 20px; 455 | z-index: 5; 456 | opacity: 0; 457 | } 458 | 459 | .navbar-container .hamburger-lines { 460 | display: block; 461 | height: 23px; 462 | width: 35px; 463 | position: absolute; 464 | top: 17px; 465 | left: 20px; 466 | z-index: 2; 467 | display: flex; 468 | flex-direction: column; 469 | justify-content: space-between; 470 | } 471 | 472 | .navbar-container .hamburger-lines .line { 473 | display: block; 474 | height: 4px; 475 | width: 100%; 476 | border-radius: 10px; 477 | background: #333; 478 | } 479 | 480 | .navbar-container .hamburger-lines .line1 { 481 | transform-origin: 0% 0%; 482 | transition: transform 0.4s ease-in-out; 483 | } 484 | 485 | .navbar-container .hamburger-lines .line2 { 486 | transition: transform 0.2s ease-in-out; 487 | } 488 | 489 | .navbar-container .hamburger-lines .line3 { 490 | transform-origin: 0% 100%; 491 | transition: transform 0.4s ease-in-out; 492 | } 493 | 494 | .navbar .menu-items { 495 | padding-top: 100px; 496 | background: #fff; 497 | height: 100vh; 498 | max-width: 300px; 499 | transform: translate(-150%); 500 | display: flex; 501 | flex-direction: column; 502 | margin-left: -40px; 503 | padding-left: 50px; 504 | transition: transform 0.5s ease-in-out; 505 | box-shadow: 5px 0px 10px 0px #aaa; 506 | } 507 | 508 | .navbar .menu-items li { 509 | margin-bottom: 1.5rem; 510 | font-size: 1.3rem; 511 | font-weight: 500; 512 | } 513 | 514 | .logo { 515 | position: absolute; 516 | top: 5px; 517 | right: 15px; 518 | font-size: 1rem; 519 | } 520 | 521 | .navbar-container input[type="checkbox"]:checked ~ 522 | .menu-items { 523 | transform: translateX(0); 524 | } 525 | 526 | .navbar-container input[type="checkbox"]:checked ~ 527 | .hamburger-lines .line1 { 528 | transform: rotate(35deg); 529 | } 530 | 531 | .navbar-container input[type="checkbox"]:checked ~ 532 | .hamburger-lines .line2 { 533 | transform: scaleY(0); 534 | } 535 | 536 | .navbar-container input[type="checkbox"]:checked ~ 537 | .hamburger-lines .line3 { 538 | transform: rotate(-35deg); 539 | } 540 | 541 | .food-container { 542 | flex-direction: column; 543 | align-items: stretch; 544 | } 545 | 546 | .food-type:not(:last-child) { 547 | margin-bottom: 3rem; 548 | } 549 | 550 | .food-type { 551 | box-shadow: 5px 5px 10px 0 #aaa; 552 | } 553 | 554 | .img-container { 555 | margin: 0; 556 | } 557 | } 558 | 559 | @media (max-width: 500px) { 560 | html { 561 | font-size: 65%; 562 | } 563 | 564 | .navbar .menu-items li{ 565 | font-size: 1.6rem; 566 | } 567 | 568 | .testimonial-container { 569 | flex-direction: column; 570 | text-align: center; 571 | } 572 | 573 | .food-menu-container img { 574 | margin: auto; 575 | } 576 | 577 | .food-menu-item { 578 | flex-direction: column; 579 | text-align: center; 580 | } 581 | 582 | .form-container { 583 | width: 90%; 584 | } 585 | 586 | .contact-container { 587 | display: flex; 588 | flex-direction: column; 589 | } 590 | 591 | .contact-img { 592 | width: 90%; 593 | margin: 3rem auto; 594 | } 595 | 596 | .logo { 597 | position: absolute; 598 | top: 06px; 599 | right: 15px; 600 | font-size: 1rem; 601 | } 602 | 603 | .navbar .menu-items li { 604 | margin-bottom: 2.5rem; 605 | font-size: 1.8rem; 606 | font-weight: 500; 607 | } 608 | } 609 | 610 | @media (min-width: 769px) and (max-width: 1200px) { 611 | .img-container h3 { 612 | font-size: 1.5rem; 613 | } 614 | 615 | .img-container .btn { 616 | font-size: 0.7rem; 617 | } 618 | } 619 | 620 | @media (orientation: landscape) and (max-height: 500px) { 621 | .showcase-area { 622 | height: 50vmax; 623 | } 624 | } --------------------------------------------------------------------------------