diff --git a/README.md b/README.md index 0b7a7d4..09343ba 100644 --- a/README.md +++ b/README.md @@ -1 +1,44 @@ -# landing-page-template +## Projeto 4Food + +Esse é um projeto de Frontend Web feito utilizando HTML e CSS. + +## Sobre + +Projeto básico de site de uma rede de supermercados, visando velocidade e praticidade nas compras online. + +Divisão base(tarefa não só e somente limitada à pessoa) de tarefas : +- Vitor Suzuki: Header e Footer +- Bruno Santos: Páginas de Compras +- Pedro Rodrigues: Página Inicial e Contato + +## O que funciona + +- Transição entre as páginas HTML do projeto +- Redirecionamento para links de rede social em nova aba + +## O que não funciona + +- Nenhum botão ou envio de formulário +- O carrinho de compras é só um ícone + +## Imagens do projeto +![image](https://user-images.githubusercontent.com/48807462/115073906-5b2c9780-9ecf-11eb-9124-149d5c825872.png) + +![image](https://user-images.githubusercontent.com/48807462/115073961-6da6d100-9ecf-11eb-8f52-3c6b514704cd.png) + +![image](https://user-images.githubusercontent.com/48807462/115073974-71d2ee80-9ecf-11eb-804e-b66892ff17a0.png) + +![image](https://user-images.githubusercontent.com/48807462/115073987-75667580-9ecf-11eb-9507-f5e1dc409a55.png) + +![image](https://user-images.githubusercontent.com/48807462/115074021-83b49180-9ecf-11eb-8bb6-8cd6037cf09f.png) + +![image](https://user-images.githubusercontent.com/48807462/115074033-87481880-9ecf-11eb-8c73-025f05099e5d.png) + +![image](https://user-images.githubusercontent.com/48807462/115074047-8a430900-9ecf-11eb-8a8a-b2dae7464c5e.png) + +![image](https://user-images.githubusercontent.com/48807462/115074060-8e6f2680-9ecf-11eb-92d3-32f9997fffd1.png) + + +## Link do Surge + +http://knowing-place.surge.sh/ diff --git a/compra-comida.html b/compra-comida.html new file mode 100644 index 0000000..bc6b131 --- /dev/null +++ b/compra-comida.html @@ -0,0 +1,190 @@ + + + + + + + + + + Comidas | 4Food + + + +
+
+
+
+ +
+

+ 4FOOD +

+
+ +
+ + + +
+ +
+ +
+ +
+
+ +
+
+
+
Cardápio da Casa
+
+
Pratos 4Food
+
+
+ bife acebolado com arroz a grega +
+

Bife acebolado com arroz à grega 4Food

+

R$18,90

+ +
+
+
+ feijoada +
+

Feijoada 4Food

+

R$23,90

+ +
+
+
+ frango grelhado com arroz e fritas +
+

Frango grelhado com fritas 4Food

+

R$15,90

+ +
+
+
+ linguiça toscana com arroz e fritas +
+

Linguiça toscana com fritas 4Food

+

R$15,90

+ +
+
+
+ salmao grelhado a grega +
+

Salmão grelhado à grega 4Food

+

R$25,90

+ +
+
+
+
+
+
Sucos 4Food
+
+
+ suco de laranja +
+

Suco de laranja 4Food

+

R$8,90

+ +
+
+
+ suco de limão +
+

Suco de limão 4Food

+

R$8,90

+ +
+
+
+ suco de morango +
+

Suco de morango 4Food

+

R$8,90

+ +
+
+
+
+
+
Padaria 4Food
+
+
+ bolo de cenoura +
+

Bolo de cenoura 4Food - pedaço

+

R$5,90

+ +
+
+
+ pão de queijo +
+

Pao de queijo 4Food - 6un

+

R$8,90

+ +
+
+
+ pão francês +
+

Pão francês 4Food - kg

+

R$10,90

+ +
+
+
+ pão na chapa com café +
+

Pão na chapa com café 4Food

+

R$7,90

+ +
+
+
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/compra-mercado.html b/compra-mercado.html new file mode 100644 index 0000000..13fcd32 --- /dev/null +++ b/compra-mercado.html @@ -0,0 +1,226 @@ + + + + + + + + + + + Produtos | 4food + + + + +
+
+
+
+ +
+

+ 4FOOD +

+
+ +
+ + + +
+ +
+ +
+ +
+
+ +
+
+
+
PRODUTOS DISPONÍVEIS
+
+
+
Produto
+
Descrição
+
Preço (R$)
+
Quantidade
+
+
+
+ + +
+
+
+
+
vinho merlot Casillero del Diablo
+
Vinho chileno tipo Merlot Casillero del Diablo - 750mL
+
54,90
+
+
+
+
+
cerveja Leffe
+
Cerveja belgium blonde ale Leffe - 330mL
+
11,90
+
+
+
+
+
garrafa de Coca-cola
+
Refrigerante Coca-Cola - 2L
+
7,90
+
+
+
+
+
caixa suco de uva Ades
+
Suco de uva com soja Ades - 1L
+
6,90
+
+
+
+
+
detergente Ype
+
Detergente Ypê - 1un
+
1,79
+
+
+
+
+
pasta de dente Colgate
+
Pasta de dente Colgate - 90g
+
3,19
+
+
+
+
+
sabonete Dove
+
Sabonete original Dove - 1un
+
2,90
+
+
+
+
+
shampoo Nivea
+
Shampoo classic Nivea - 1L
+
13,90
+
+
+
+
+
abacate +
+
Abacate - kg
+
9,99
+
+
+
+
+
banana prata
+
Banana prata - kg
+
5,99
+
+
+
+
+
melancia +
+
Melancia - kg
+
7,99
+
+
+
+
+
queijo minas Vitoria
+
Queijo minas Vitoria - kg
+
25,90
+
+
+
+
+
queijo prato Regina
+
Queijo prato Regina - 1kg
+
22,90
+
+
+
+
+
bolinho Ana Maria
+
Bolinho Ana Maria - 100g
+
3,99
+
+
+
+
+
pao de forma Plus Vita
+
Pao de forma Plus Vita - 500g
+
6,99
+
+
+
+
+
pao sirio PitaBread
+
Pao sirio Pita Bread - 250g
+
7,99
+
+
+
+
+ +
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/contato.html b/contato.html new file mode 100644 index 0000000..0494429 --- /dev/null +++ b/contato.html @@ -0,0 +1,88 @@ + + + + + + + + + + + Contato | 4Food + + + +
+
+
+
+ +
+

+ 4FOOD +

+
+ +
+ + + +
+ +
+ +
+ +
+
+ +
+ +
+
+

Contato

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/img/comida/bife-acebolado-arroz-grega.jpg b/img/comida/bife-acebolado-arroz-grega.jpg new file mode 100644 index 0000000..861c614 Binary files /dev/null and b/img/comida/bife-acebolado-arroz-grega.jpg differ diff --git a/img/comida/bolo-de-cenoura.jpg b/img/comida/bolo-de-cenoura.jpg new file mode 100644 index 0000000..df61dea Binary files /dev/null and b/img/comida/bolo-de-cenoura.jpg differ diff --git a/img/comida/feijoada.jpg b/img/comida/feijoada.jpg new file mode 100644 index 0000000..6534f37 Binary files /dev/null and b/img/comida/feijoada.jpg differ diff --git a/img/comida/frango-grelhado.jpg b/img/comida/frango-grelhado.jpg new file mode 100644 index 0000000..7d3bb4c Binary files /dev/null and b/img/comida/frango-grelhado.jpg differ diff --git "a/img/comida/lingui\303\247a-toscana.jpg" "b/img/comida/lingui\303\247a-toscana.jpg" new file mode 100644 index 0000000..bc8e8d6 Binary files /dev/null and "b/img/comida/lingui\303\247a-toscana.jpg" differ diff --git a/img/comida/pao-de-queijo.jpg b/img/comida/pao-de-queijo.jpg new file mode 100644 index 0000000..54557f2 Binary files /dev/null and b/img/comida/pao-de-queijo.jpg differ diff --git a/img/comida/pao-frances.jpg b/img/comida/pao-frances.jpg new file mode 100644 index 0000000..718d11f Binary files /dev/null and b/img/comida/pao-frances.jpg differ diff --git a/img/comida/pao-na-chapa-e-cafe.jpg b/img/comida/pao-na-chapa-e-cafe.jpg new file mode 100644 index 0000000..d0acbad Binary files /dev/null and b/img/comida/pao-na-chapa-e-cafe.jpg differ diff --git a/img/comida/queijo-minas.jpg b/img/comida/queijo-minas.jpg new file mode 100644 index 0000000..f69a3ea Binary files /dev/null and b/img/comida/queijo-minas.jpg differ diff --git a/img/comida/salmao-grelhado.jpg b/img/comida/salmao-grelhado.jpg new file mode 100644 index 0000000..8162d7c Binary files /dev/null and b/img/comida/salmao-grelhado.jpg differ diff --git a/img/comida/suco-de-laranja.jpg b/img/comida/suco-de-laranja.jpg new file mode 100644 index 0000000..39f46ef Binary files /dev/null and b/img/comida/suco-de-laranja.jpg differ diff --git a/img/comida/suco-de-limao.jpg b/img/comida/suco-de-limao.jpg new file mode 100644 index 0000000..84a16e1 Binary files /dev/null and b/img/comida/suco-de-limao.jpg differ diff --git a/img/comida/suco-de-morango.png b/img/comida/suco-de-morango.png new file mode 100644 index 0000000..1229730 Binary files /dev/null and b/img/comida/suco-de-morango.png differ diff --git a/img/compra-comida.jpg b/img/compra-comida.jpg new file mode 100644 index 0000000..a311903 Binary files /dev/null and b/img/compra-comida.jpg differ diff --git a/img/compra-mercado.jpg b/img/compra-mercado.jpg new file mode 100644 index 0000000..efa0492 Binary files /dev/null and b/img/compra-mercado.jpg differ diff --git a/img/compras.jpg b/img/compras.jpg new file mode 100644 index 0000000..6548bfb Binary files /dev/null and b/img/compras.jpg differ diff --git a/img/fb.png b/img/fb.png new file mode 100644 index 0000000..a16c8b3 Binary files /dev/null and b/img/fb.png differ diff --git a/img/fundo-cardapio.jpg b/img/fundo-cardapio.jpg new file mode 100644 index 0000000..95a43f6 Binary files /dev/null and b/img/fundo-cardapio.jpg differ diff --git a/img/fundo-mercado.jpg b/img/fundo-mercado.jpg new file mode 100644 index 0000000..b186b0d Binary files /dev/null and b/img/fundo-mercado.jpg differ diff --git a/img/icon.png b/img/icon.png new file mode 100644 index 0000000..eebae9b Binary files /dev/null and b/img/icon.png differ diff --git a/img/insta.png b/img/insta.png new file mode 100644 index 0000000..494e4e9 Binary files /dev/null and b/img/insta.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..437743e Binary files /dev/null and b/img/logo.png differ diff --git a/img/mercado.jpg b/img/mercado.jpg new file mode 100644 index 0000000..b186b0d Binary files /dev/null and b/img/mercado.jpg differ diff --git a/img/mercado/Bebidas/casillero-del-diablo-merlot.jpg b/img/mercado/Bebidas/casillero-del-diablo-merlot.jpg new file mode 100644 index 0000000..0260117 Binary files /dev/null and b/img/mercado/Bebidas/casillero-del-diablo-merlot.jpg differ diff --git a/img/mercado/Bebidas/cerveja-leffe.jpg b/img/mercado/Bebidas/cerveja-leffe.jpg new file mode 100644 index 0000000..585a2fa Binary files /dev/null and b/img/mercado/Bebidas/cerveja-leffe.jpg differ diff --git a/img/mercado/Bebidas/coca-cola.jpg b/img/mercado/Bebidas/coca-cola.jpg new file mode 100644 index 0000000..f79c350 Binary files /dev/null and b/img/mercado/Bebidas/coca-cola.jpg differ diff --git a/img/mercado/Bebidas/suco-de-uva-ades.jpg b/img/mercado/Bebidas/suco-de-uva-ades.jpg new file mode 100644 index 0000000..3cbda68 Binary files /dev/null and b/img/mercado/Bebidas/suco-de-uva-ades.jpg differ diff --git a/img/mercado/Higiene e Limpeza/detergente-ype.jpg b/img/mercado/Higiene e Limpeza/detergente-ype.jpg new file mode 100644 index 0000000..f4917ab Binary files /dev/null and b/img/mercado/Higiene e Limpeza/detergente-ype.jpg differ diff --git a/img/mercado/Higiene e Limpeza/pasta-de-dente-colgate.jpg b/img/mercado/Higiene e Limpeza/pasta-de-dente-colgate.jpg new file mode 100644 index 0000000..2218aa6 Binary files /dev/null and b/img/mercado/Higiene e Limpeza/pasta-de-dente-colgate.jpg differ diff --git a/img/mercado/Higiene e Limpeza/sabonete-dove.jpg b/img/mercado/Higiene e Limpeza/sabonete-dove.jpg new file mode 100644 index 0000000..4250261 Binary files /dev/null and b/img/mercado/Higiene e Limpeza/sabonete-dove.jpg differ diff --git a/img/mercado/Higiene e Limpeza/shampoo-nivea.jpg b/img/mercado/Higiene e Limpeza/shampoo-nivea.jpg new file mode 100644 index 0000000..d666c5b Binary files /dev/null and b/img/mercado/Higiene e Limpeza/shampoo-nivea.jpg differ diff --git a/img/mercado/Hortifruti/abacate.jpg b/img/mercado/Hortifruti/abacate.jpg new file mode 100644 index 0000000..55c235b Binary files /dev/null and b/img/mercado/Hortifruti/abacate.jpg differ diff --git a/img/mercado/Hortifruti/bananas-prata.jpg b/img/mercado/Hortifruti/bananas-prata.jpg new file mode 100644 index 0000000..f3e9ea8 Binary files /dev/null and b/img/mercado/Hortifruti/bananas-prata.jpg differ diff --git a/img/mercado/Hortifruti/melancia.jpg b/img/mercado/Hortifruti/melancia.jpg new file mode 100644 index 0000000..fa1fd22 Binary files /dev/null and b/img/mercado/Hortifruti/melancia.jpg differ diff --git a/img/mercado/Laticinios/queijo-minas-vitoria.png b/img/mercado/Laticinios/queijo-minas-vitoria.png new file mode 100644 index 0000000..0f1e671 Binary files /dev/null and b/img/mercado/Laticinios/queijo-minas-vitoria.png differ diff --git a/img/mercado/Laticinios/queijo-prato-regina.jpg b/img/mercado/Laticinios/queijo-prato-regina.jpg new file mode 100644 index 0000000..cfdd80f Binary files /dev/null and b/img/mercado/Laticinios/queijo-prato-regina.jpg differ diff --git a/img/mercado/Padaria/bolinho-ana-maria.png b/img/mercado/Padaria/bolinho-ana-maria.png new file mode 100644 index 0000000..bb14ae9 Binary files /dev/null and b/img/mercado/Padaria/bolinho-ana-maria.png differ diff --git a/img/mercado/Padaria/pao-de-forma-plus-vita.png b/img/mercado/Padaria/pao-de-forma-plus-vita.png new file mode 100644 index 0000000..1f2fa82 Binary files /dev/null and b/img/mercado/Padaria/pao-de-forma-plus-vita.png differ diff --git a/img/mercado/Padaria/pao-sirio-pita-bread.png b/img/mercado/Padaria/pao-sirio-pita-bread.png new file mode 100644 index 0000000..6e2c958 Binary files /dev/null and b/img/mercado/Padaria/pao-sirio-pita-bread.png differ diff --git a/img/mercado/abacate.jpg b/img/mercado/abacate.jpg new file mode 100644 index 0000000..55c235b Binary files /dev/null and b/img/mercado/abacate.jpg differ diff --git a/img/mercado/bananas-prata.jpg b/img/mercado/bananas-prata.jpg new file mode 100644 index 0000000..f3e9ea8 Binary files /dev/null and b/img/mercado/bananas-prata.jpg differ diff --git a/img/mercado/bolinho-ana-maria.png b/img/mercado/bolinho-ana-maria.png new file mode 100644 index 0000000..bb14ae9 Binary files /dev/null and b/img/mercado/bolinho-ana-maria.png differ diff --git a/img/mercado/casillero-del-diablo-merlot.jpg b/img/mercado/casillero-del-diablo-merlot.jpg new file mode 100644 index 0000000..0260117 Binary files /dev/null and b/img/mercado/casillero-del-diablo-merlot.jpg differ diff --git a/img/mercado/cerveja-leffe.jpg b/img/mercado/cerveja-leffe.jpg new file mode 100644 index 0000000..585a2fa Binary files /dev/null and b/img/mercado/cerveja-leffe.jpg differ diff --git a/img/mercado/coca-cola.jpg b/img/mercado/coca-cola.jpg new file mode 100644 index 0000000..f79c350 Binary files /dev/null and b/img/mercado/coca-cola.jpg differ diff --git a/img/mercado/detergente-ype.jpg b/img/mercado/detergente-ype.jpg new file mode 100644 index 0000000..f4917ab Binary files /dev/null and b/img/mercado/detergente-ype.jpg differ diff --git a/img/mercado/melancia.jpg b/img/mercado/melancia.jpg new file mode 100644 index 0000000..fa1fd22 Binary files /dev/null and b/img/mercado/melancia.jpg differ diff --git a/img/mercado/pao-de-forma-plus-vita.png b/img/mercado/pao-de-forma-plus-vita.png new file mode 100644 index 0000000..1f2fa82 Binary files /dev/null and b/img/mercado/pao-de-forma-plus-vita.png differ diff --git a/img/mercado/pao-sirio-pita-bread.png b/img/mercado/pao-sirio-pita-bread.png new file mode 100644 index 0000000..6e2c958 Binary files /dev/null and b/img/mercado/pao-sirio-pita-bread.png differ diff --git a/img/mercado/pasta-de-dente-colgate.jpg b/img/mercado/pasta-de-dente-colgate.jpg new file mode 100644 index 0000000..2218aa6 Binary files /dev/null and b/img/mercado/pasta-de-dente-colgate.jpg differ diff --git a/img/mercado/queijo-minas-vitoria.png b/img/mercado/queijo-minas-vitoria.png new file mode 100644 index 0000000..0f1e671 Binary files /dev/null and b/img/mercado/queijo-minas-vitoria.png differ diff --git a/img/mercado/queijo-prato-regina.jpg b/img/mercado/queijo-prato-regina.jpg new file mode 100644 index 0000000..cfdd80f Binary files /dev/null and b/img/mercado/queijo-prato-regina.jpg differ diff --git a/img/mercado/sabonete-dove.jpg b/img/mercado/sabonete-dove.jpg new file mode 100644 index 0000000..4250261 Binary files /dev/null and b/img/mercado/sabonete-dove.jpg differ diff --git a/img/mercado/shampoo-nivea.jpg b/img/mercado/shampoo-nivea.jpg new file mode 100644 index 0000000..d666c5b Binary files /dev/null and b/img/mercado/shampoo-nivea.jpg differ diff --git a/img/mercado/suco-de-uva-ades.jpg b/img/mercado/suco-de-uva-ades.jpg new file mode 100644 index 0000000..3cbda68 Binary files /dev/null and b/img/mercado/suco-de-uva-ades.jpg differ diff --git a/img/tt.png b/img/tt.png new file mode 100644 index 0000000..cd315ff Binary files /dev/null and b/img/tt.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..78d2605 --- /dev/null +++ b/index.html @@ -0,0 +1,112 @@ + + + + + + + + + + + Página Principal | 4food + + + + +
+
+
+
+ +
+

+ 4FOOD +

+
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+
+

Coma bem. +
+ Sem sair de casa. +

+

Temos uma alta gama de produtos, para nos certificar de que + você possa criar um cardápio extenso, + diretamente de sua casa. +
+ Não quer cozinhar? Sem problemas! Temos o nosso próprio cardápio! +

+
+
+
+

Nossos serviços

+
+ +
+ Compras mercado + +

Faça aqui suas compras do mercado!

+ + Compras comida + +

Compre aqui sua comida prontinha!

+ +
+ +
+

Quem somos

+
+ +
+

+ A 4food foi digitalizada em 2021, pra + facilitar acesso aos produtos de nossa rede de supermercados + através de delivery, bem como nossas comidas prontas semanais. + Nosso objetivo é trazer a você os melhores preços, como sempre, + com todo conforto e praticidade! +

+
+ + +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..75a7beb --- /dev/null +++ b/style.css @@ -0,0 +1,772 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Lato', sans-serif; +} + +body { + background-color: rgba(115, 72, 56, 0.4); +} + +/* AQUI É O HEADER */ + +#home { + letter-spacing: 1px; + font-size: 30px; + color: white; + font-weight: 100; + +} + +#home-responsive { + position: absolute; + height: 100px; + width: 50px; + z-index: 1000; +} + + +header { + display: flex; + position: fixed; + justify-content: space-between; + width: 100vw; + background-image: linear-gradient(to right, #693920 , #22130b); + box-shadow: inset 0px 0px 15px 0px #00000063; + opacity: 0.94; +} + +footer { + display: flex; + justify-content: center; + align-items: center; + background-image:radial-gradient( #693920 , #22130b); + width: 100%; + height: 40vh; + position: relative; + bottom: 0; +} + +.facebook, .instagram, .twitter { + display: flex; +} + +#redes-sociais { + object-fit: cover; + width: 94px; + height: 88px; + object-position: 0% 3%; +} + +nav { + display: flex; + justify-content: center; + margin-left: 5vw; + +} + +main{ + height: fit-content; +} + +a { + margin: 1vw; + outline: none; +} + +#all-header { + display: flex; + justify-content: center; + +} + +#titulo-header { + opacity: 0.9; + display: flex; + justify-content: flex-start; + align-items: center; +} + +#logo-header { + display: flex; +} + +#logo { + object-fit: cover; + width: 94px; + height: 88px; + object-position: 0% 3%; +} + +#buy-icon { + display: flex; + width: 50px; + height: 50px; + margin-right: 50px; +} + +#buy { + + display: flex; + width: 100%; +} + +.carrinho { + display: flex; + justify-content: center; + align-items: center; +} + +#mercado { + display: flex; + justify-content: center; + align-items: center; + font-weight: 700; + + +} + +#comida-pronta { + display: flex; + justify-content: center; + align-items: center; + font-weight: 700; +} + +#contato { + display: flex; + justify-content: center; + align-items: center; + font-weight: 700; +} + + +header a:link { + color: white; + text-decoration: none; + } + +header a:visited { + color: white; + } + +header a:hover { + color: #fdc400; + transition: color .250s ease-in-out; +} + +header a:active { + color: black; + } + + +@media screen and (max-width: 375px) { + h1 { + display: none; + } + + nav { + margin-left: -11vw; + width: 257px; + } + + #logo { + object-position: 75% 3%; + } + + #buy-icon { + margin-right: 16px; + + } + + footer { + height: 100px; + } + +} + +/* CSS Página principal */ + +.grid-home { + display: grid; + height: fit-content; + grid-template-rows: 95vh 10vh 90vh 10vh 25vh; +} + +#background-inicio { + display: grid; + background: center transparent url(/img/compras.jpg) no-repeat; + background-size: 100vw; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 50% 50%; +} + +#quadro { + display: flex; + font-size: 2vh; + flex-direction: column; + line-height: 4vh; + justify-content: center; + align-items: center; + background-color: #5b321c; + width: 100%; + height: 100%; + color: white; + letter-spacing: 0.1vw; + grid-row: 2 / 3; + border-radius: 2em; +} + +#espaco-p { + padding-top: 3vh; + line-height: 2; + width: 20vw; +} + +.config-article { + display: grid; + font-size: 3vh; + margin-top: 8vh; + text-align: center; + grid-template-columns: repeat(11, 1fr); + grid-template-rows: repeat(11, 1fr); +} + +.config-article a { + text-decoration: none; + color: white; +} + +#texto-mercado { + display: flex; + grid-column: 2 / 6; + grid-row: 9 / 10; + justify-content: center; + align-items: center; +} + +#texto-mercado:hover { + background-color: #5b321c; + color: black; + border-radius: 10vh; +} + +#texto-comida { + display: flex; + grid-column: 7 / 11; + grid-row: 9 / 10; + justify-content: center; + align-items: center; +} + +#texto-comida:hover { + background-color: #5b321c; + color: black; + border-radius: 10vh; +} + +#config-titulo1 { + margin-top: 12vh; + text-align: center; + font-size: 4vh; +} + +#config-titulo2 { + text-align: center; + font-size: 4vh; +} + +#imagem-mercado { + grid-column: 2 / 6; + grid-row: 2 / 9; + width: 100%; + height: 60%; + border-radius: 2vh; +} + +#imagem-comida { + grid-column: 7 / 11; + grid-row: 2 / 9; + width: 100%; + height: 60%; + border-radius: 2vh; +} + +#red-texto-4foods { + display: grid; + grid-template-columns: 1fr 3fr 1fr; +} + +#texto-4foods { + color: #5b321c; + font-size: 3vh; + grid-column: 2/3; +} + +/* CSS Página principal desktop*/ + +/* CSS Página principal mobile*/ + +@media screen and (max-device-width: 420px) { + .grid-home { + display: grid; + grid-template-rows: 60vh 13vh 90vh 13vh 40vh; + } + #background-inicio { + display: grid; + background: center transparent url(/img/compras.jpg) no-repeat; + background-size: 100% 100%; + grid-template-rows: repeat(3, 1fr); + } + #quadro { + display: flex; + font-size: 3vw; + flex-direction: column; + line-height: 3.5vh; + justify-content: center; + align-items: center; + background-color: #5b321c; + width: 100%; + height: 100%; + color: white; + letter-spacing: 0.1vw; + grid-row: 3 / 4; + grid-column: 1 / -1; + border-radius: 0; + } + #quadro h2 { + display: flex; + align-items: flex-start; + width: 70%; + } + #espaco-p { + font-size: 3.5vw; + padding-top: 1vh; + line-height: 2vh; + width: 70%; + } + .config-article { + display: grid; + font-size: 3vh; + margin-top: 8vh; + text-align: center; + } + .config-article a { + text-decoration: none; + color: white; + } + #texto-mercado { + display: flex; + grid-column: 1 / -1; + grid-row: 5 / 6; + justify-content: center; + align-items: center; + } + #texto-mercado:hover { + background-color: #5b321c; + color: black; + border-radius: 10vh; + } + #texto-comida { + display: flex; + grid-column: 1 / -1; + grid-row: 11 / 12; + justify-content: center; + align-items: center; + } + #texto-comida:hover { + background-color: #5b321c; + color: black; + border-radius: 10vh; + } + #config-titulo1 { + margin-top: 12vh; + text-align: center; + font-size: 4vh; + } + #config-titulo2 { + margin-top: 12vh; + text-align: center; + font-size: 4vh; + } + #imagem-mercado { + grid-column: 1 / -1; + grid-row: 1 / 5; + width: 100%; + height: 35%; + border-radius: 0; + } + #imagem-comida { + grid-column: 1 / -1; + grid-row: 7 / 11; + width: 100%; + height: 35%; + border-radius: 0; + } + #red-texto-4foods { + display: grid; + grid-template-columns: 1fr 3fr 1fr; + } + #texto-4foods { + color: #5b321c; + font-size: 2.5vh; + grid-column: 2/3; + } +} + +/* CSS Página principal mobile*/ + +/* CSS Página contato desktop */ + +#form-edit { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + color: #5b321c; + font-size: 2vh; +} + +#form-edit input[type=text], [type=email] { + width: 30vw; + height: 4vh; + font-size: 2vh; +} + +#form-edit textarea { + width: 30vw; + height: 20vh; + font-size: 2vh; +} + +#form-edit button { + width: 5vw; + height: 3vh; +} + +#config-contato { + margin-bottom: 6vh; + font-size: 4vh; + color: black; +} + +/* CSS Página contato desktop */ + + +/* CSS Página contato mobile */ + +@media screen and (max-device-width: 420px) { + #form-edit { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + color: #5b321c; + font-size: 3vh; + padding-top: 15vh; + } + #form-edit input[type=text], [type=email] { + width: 50vw; + height: 4vh; + font-size: 2.5vh; + } + #form-edit textarea { + width: 50vw; + height: 25vh; + font-size: 2.5vh; + } + #form-edit button { + width: 25vw; + height: 5vh; + } + #config-contato { + margin-bottom: 6vh; + font-size: 4vh; + color: black; + } +} + +/* CSS Página contato mobile */ + + + +/* +* +* PÁGINA MERCADO +* +*/ + +.espacamento-header-mercado { + height: 8vh; +} + +.afastamento-template { + display: grid; + grid-template-rows: 10vh 1fr; + padding: 2vw; + background-image: url('img/fundo-mercado.jpg'); + background-size: 100% 100vh; +} + +.titulo-produtos { + display: grid; + justify-content: center; + align-items: center; + font-size: 2rem; + font-style: italic; + font-weight: bold; + background-color: #cfa38e; +} + +.template-produtos { + display: grid; + grid-template-rows: repeat(18, 1fr); +} + +.infos-produtos { + display: grid; + grid-template-columns: repeat(5, 1fr); + font-size: 2rem; + font-style: italic; + background-color: #c0aca3a2; +} + +.pesquisa-produtos { + justify-self: normal; +} + +.botao-secoes { + height: 5vh; + width: 8vh; + border-radius: 50%; + background-color: #f5774915; +} + +.botao-secoes:hover { + cursor: pointer; + color: white; + background-color: #f57749cc; +} + +.abas-produtos1 { + display: grid; + grid-template-columns: repeat(5, 1fr); + background-color: #BFACA4; +} + +.abas-produtos2 { + display: grid; + grid-template-columns: repeat(5, 1fr); + background-color: #F2F2F2; +} + +.abas-produtos1 div, .abas-produtos2 div, .infos-produtos div { + display: grid; + justify-self: center; + align-self: center; +} + +.imagens-produtos { + border-radius: 50%; + width: 10vw; +} + +.botao-quantidade { + height: 3vh; + width: 10vh; + text-align: center; + border-color: #c0aca3a2; + border-radius: 5px; + cursor: pointer; + background-color: white; +} + +.botao-adicionar-quantidade { + height: 3vh; + background-color: #c26d4e8f; + border-radius: 8px; +} + +.botao-adicionar-quantidade:hover { + cursor: pointer; + color: white; + background-color: #b3502ddc; +} + +.container-botao-subir { + display: grid; + justify-content: center; + align-items: center; +} + +.botao-subir { + height: 5vh; + width: 10vh; + border-radius: 32px; + background-color: rgb(119, 160, 48); +} + +.botao-subir:hover { + cursor: pointer; + color: goldenrod; + background-color: darkolivegreen; +} + +@media screen and (max-device-width: 800px) { + .afastamento-template { + padding: 2vw 0 2vw 0; + } + .infos-produtos { + font-size: 1rem; + font-weight: bold; + } +} + +@media screen and (max-device-width: 420px) { + .espacamento-header-mercado { + height: 10vh; + } + + .titulo-produtos { + font-size: 1.5rem; + } + + .info-produtos { + font-size: 0.8rem; + } + + div form select { + width: 64px; + } +} + +/* +* +* PÁGINA MERCADO +* +*/ + +/* +* +* PÁGINA COMIDAS +* +*/ + +.espacamento-header-comida { + height: 9vh; +} + +#layout-fundo-comidas { + background-image: url('img/fundo-cardapio.jpg'); + text-align: center; + padding-top: 3vh;; + background-size: 100% 50%; +} + +#titulo-principal-comidas { + text-align: center; + font-size: 4rem; + font-style: italic; + font-weight: bold; +} + +.secoes-casa { + display: grid; + grid-template-rows: 20vh 1fr; + justify-content: center; + align-items: center; +} + +.titulo-comidas { + font-style: italic; + font-weight: bold; + font-size: 2rem; + background-color: #cfa38e; + border-radius: 3vh; + justify-self: stretch; + align-self: center; + display: grid; + justify-content: center; +} + +.arranjo-cards { + display: flex; + flex-wrap: wrap; + margin-left: 4vw; +} + +.card-comidas { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + width: 30vh; + margin-left: 10vw; + margin-bottom: 2vh; + box-shadow: 4px 4px 8px darkgrey; + background-color: #F2F2F2; +} + +.imagens-comidas { + border-radius: 50%; + height: 20vh; + width: 30vh; +} + +div div div div { + align-self: stretch; + text-align: center; + padding-top: 2vh; +} +.botao-pedir { + margin: 2vh 0; + height: 3vh; + width: 6vh; + border-radius: 2vh; + background-color: #c26d4e8f; +} + +.botao-pedir:hover { + cursor: pointer; + color: white; + background-color:#b3502ddc; +} + +.botao-subir-comida { + height: 5vh; + width: 10vh; + border-radius: 32px; + background-color:rgb(119, 160, 48); +} + +.botao-subir-comida:hover { + cursor: pointer; + color: goldenrod; + background-color: darkolivegreen; +} + +@media screen and (max-device-width: 420px) { + .arranjo-cards { + justify-content: center; + margin-left: 0; + } + + .card-comidas { + margin-left: 0; + } + + #layout-fundo-comidas { + background-size: 100% 30vh; + } +} + +/* +* +* PÁGINA COMIDAS +* +*/ + +/* AQUI É O FOOTER */ \ No newline at end of file