diff --git a/4Food-png/1.png b/4Food-png/1.png new file mode 100644 index 0000000..75ab70a Binary files /dev/null and b/4Food-png/1.png differ diff --git a/4Food-png/2.png b/4Food-png/2.png new file mode 100644 index 0000000..5ecd97d Binary files /dev/null and b/4Food-png/2.png differ diff --git a/4Food-png/3.png b/4Food-png/3.png new file mode 100644 index 0000000..3ae346f Binary files /dev/null and b/4Food-png/3.png differ diff --git a/4Food-png/4.png b/4Food-png/4.png new file mode 100644 index 0000000..e8a2ff1 Binary files /dev/null and b/4Food-png/4.png differ diff --git a/4Food-png/5.png b/4Food-png/5.png new file mode 100644 index 0000000..1168d7a Binary files /dev/null and b/4Food-png/5.png differ diff --git "a/4Food-png/Pagina em constru\303\247\303\243o!.mp4" "b/4Food-png/Pagina em constru\303\247\303\243o!.mp4" new file mode 100644 index 0000000..a250564 Binary files /dev/null and "b/4Food-png/Pagina em constru\303\247\303\243o!.mp4" differ diff --git a/4Food/1.jpg b/4Food/1.jpg new file mode 100644 index 0000000..7d80f26 Binary files /dev/null and b/4Food/1.jpg differ diff --git a/4Food/2.jpg b/4Food/2.jpg new file mode 100644 index 0000000..4725603 Binary files /dev/null and b/4Food/2.jpg differ diff --git a/4Food/3.jpg b/4Food/3.jpg new file mode 100644 index 0000000..ebf59bc Binary files /dev/null and b/4Food/3.jpg differ diff --git a/4food-gif/1.gif b/4food-gif/1.gif new file mode 100644 index 0000000..ffde661 Binary files /dev/null and b/4food-gif/1.gif differ diff --git a/4food-gif/2.gif b/4food-gif/2.gif new file mode 100644 index 0000000..511ff48 Binary files /dev/null and b/4food-gif/2.gif differ diff --git a/4food-gif/3.gif b/4food-gif/3.gif new file mode 100644 index 0000000..18241f6 Binary files /dev/null and b/4food-gif/3.gif differ diff --git a/4food-gif/4.gif b/4food-gif/4.gif new file mode 100644 index 0000000..dc4915a Binary files /dev/null and b/4food-gif/4.gif differ diff --git a/4food-gif/5.gif b/4food-gif/5.gif new file mode 100644 index 0000000..9a1a21e Binary files /dev/null and b/4food-gif/5.gif differ diff --git a/README.md b/README.md index 0b7a7d4..94be580 100644 --- a/README.md +++ b/README.md @@ -1 +1,40 @@ -# landing-page-template +# 🍔 PROJETO LANDING PAGE 4FOOD + +![Printscreen do projeto](/img/readme.png) +![Printscreen do projeto](/img/readme-2.png) +![Printscreen do projeto](/img/readme-3.png) +![Printscreen do projeto](/img/readme-4.png) +![Printscreen do projeto](/img/readme-5.png) +![Printscreen do projeto](/img/readme-6.png) +![Printscreen do projeto](/img/readme-7.png) +![Printscreen do projeto](/img/readme-responsive-1.png) +![Printscreen do projeto](/img/readme-responsive-2.png) +![Printscreen do projeto](/img/readme-responsive-3.png) +![Printscreen do projeto](/img/readme-responsive-4.png) + +> Este projeto é uma atividade proposta pela Labenu. Nosso objetivo é criar um site fictício para uma plataforma de delivery do setor alimentício utilizando as tecnologias html, css e javascript aprendidas no curso até então. + +## ✅ O que está funcionando + +Página Inicial, Restaurantes, Mercados, Cupons e Sobre + +## 🤝 Divisão de tarefas + +[Douglas Rodrigues](https://github.com/Makaoshi) foi o responsável pela estilização das páginas, bem como as barras de navegação, o footer, as páginas restaurante, mercado e cupons e responsividade das mesmas. + +[Ingrid Midori](https://github.com/midoriobana) foi responsável pela criação de todos os documentos html, criação de imagens e slide-show, e a escolha da paleta de cores. + +[Bernardo Marshall](https://github.com/bemarshall) foi responsável pela criação e estilização da página sobre. + +## 🌐 Critérios + +- [x] Responsividade; +- [x] Semântica do HTML 5; +- [x] Ícones de redes sociais; +- [x] CSS comentado; +- [x] [Paleta de cores](https://color.adobe.com/pt/4Food%20Pallete-color-theme-18444602); +- [x] 5 seções navegáveis. + +## 🌎 Como acessar o projeto + +[Link Surge](https://energetic-list.surge.sh/) diff --git a/cartoes/1.png b/cartoes/1.png new file mode 100644 index 0000000..e6ed004 Binary files /dev/null and b/cartoes/1.png differ diff --git a/cartoes/10.png b/cartoes/10.png new file mode 100644 index 0000000..12ebe09 Binary files /dev/null and b/cartoes/10.png differ diff --git a/cartoes/11.png b/cartoes/11.png new file mode 100644 index 0000000..241f358 Binary files /dev/null and b/cartoes/11.png differ diff --git a/cartoes/2.png b/cartoes/2.png new file mode 100644 index 0000000..add93d2 Binary files /dev/null and b/cartoes/2.png differ diff --git a/cartoes/3.png b/cartoes/3.png new file mode 100644 index 0000000..58d1fd0 Binary files /dev/null and b/cartoes/3.png differ diff --git a/cartoes/4.png b/cartoes/4.png new file mode 100644 index 0000000..472a09e Binary files /dev/null and b/cartoes/4.png differ diff --git a/cartoes/5.png b/cartoes/5.png new file mode 100644 index 0000000..11f1d44 Binary files /dev/null and b/cartoes/5.png differ diff --git a/cartoes/6.png b/cartoes/6.png new file mode 100644 index 0000000..11c1800 Binary files /dev/null and b/cartoes/6.png differ diff --git a/cartoes/7.png b/cartoes/7.png new file mode 100644 index 0000000..78e21a5 Binary files /dev/null and b/cartoes/7.png differ diff --git a/cartoes/8.png b/cartoes/8.png new file mode 100644 index 0000000..68210c0 Binary files /dev/null and b/cartoes/8.png differ diff --git a/cartoes/9.png b/cartoes/9.png new file mode 100644 index 0000000..6b70b93 Binary files /dev/null and b/cartoes/9.png differ diff --git a/img/1.png b/img/1.png new file mode 100644 index 0000000..740d5f7 Binary files /dev/null and b/img/1.png differ diff --git a/img/4Food (1).png b/img/4Food (1).png new file mode 100644 index 0000000..1e1ea39 Binary files /dev/null and b/img/4Food (1).png differ diff --git a/img/4Food.png b/img/4Food.png new file mode 100644 index 0000000..ce46ae8 Binary files /dev/null and b/img/4Food.png differ diff --git a/img/4food-branco.png b/img/4food-branco.png new file mode 100644 index 0000000..3e9aa9b Binary files /dev/null and b/img/4food-branco.png differ diff --git a/img/8000.png b/img/8000.png new file mode 100644 index 0000000..0d1b696 Binary files /dev/null and b/img/8000.png differ diff --git a/img/Sandwich.jpeg b/img/Sandwich.jpeg new file mode 100644 index 0000000..55b706c Binary files /dev/null and b/img/Sandwich.jpeg differ diff --git a/img/Spaghetti.jpeg b/img/Spaghetti.jpeg new file mode 100644 index 0000000..c05bf38 Binary files /dev/null and b/img/Spaghetti.jpeg differ diff --git a/img/VIDEO.mp4 b/img/VIDEO.mp4 new file mode 100644 index 0000000..f85eed3 Binary files /dev/null and b/img/VIDEO.mp4 differ diff --git a/img/angus.jpg b/img/angus.jpg new file mode 100644 index 0000000..7be8f69 Binary files /dev/null and b/img/angus.jpg differ diff --git a/img/assai.png b/img/assai.png new file mode 100644 index 0000000..4189bc3 Binary files /dev/null and b/img/assai.png differ diff --git a/img/bh.png b/img/bh.png new file mode 100644 index 0000000..6028fcf Binary files /dev/null and b/img/bh.png differ diff --git a/img/brusqueta.jpg b/img/brusqueta.jpg new file mode 100644 index 0000000..8518416 Binary files /dev/null and b/img/brusqueta.jpg differ diff --git a/img/burger.jpg b/img/burger.jpg new file mode 100644 index 0000000..19f90a4 Binary files /dev/null and b/img/burger.jpg differ diff --git a/img/cafemanha.jpg b/img/cafemanha.jpg new file mode 100644 index 0000000..485ff65 Binary files /dev/null and b/img/cafemanha.jpg differ diff --git a/img/carrefour.png b/img/carrefour.png new file mode 100644 index 0000000..46b547a Binary files /dev/null and b/img/carrefour.png differ diff --git a/img/chicken.jpeg b/img/chicken.jpeg new file mode 100644 index 0000000..a7e4b30 Binary files /dev/null and b/img/chicken.jpeg differ diff --git a/img/combocerveja.jpg b/img/combocerveja.jpg new file mode 100644 index 0000000..2f4e25e Binary files /dev/null and b/img/combocerveja.jpg differ diff --git a/img/combosmercado.jpeg b/img/combosmercado.jpeg new file mode 100644 index 0000000..c07e357 Binary files /dev/null and b/img/combosmercado.jpeg differ diff --git a/img/comerjunto.jpeg b/img/comerjunto.jpeg new file mode 100644 index 0000000..54a1e69 Binary files /dev/null and b/img/comerjunto.jpeg differ diff --git a/img/dia.png b/img/dia.png new file mode 100644 index 0000000..97f723a Binary files /dev/null and b/img/dia.png differ diff --git a/img/diadasmaes.jpg b/img/diadasmaes.jpg new file mode 100644 index 0000000..d9b6081 Binary files /dev/null and b/img/diadasmaes.jpg differ diff --git a/img/extra.png b/img/extra.png new file mode 100644 index 0000000..df40d42 Binary files /dev/null and b/img/extra.png differ diff --git a/img/facebook.png b/img/facebook.png new file mode 100644 index 0000000..dad8f75 Binary files /dev/null and b/img/facebook.png differ diff --git a/img/frutos-do-mar.jpg b/img/frutos-do-mar.jpg new file mode 100644 index 0000000..c257e26 Binary files /dev/null and b/img/frutos-do-mar.jpg differ diff --git a/img/gpa.png b/img/gpa.png new file mode 100644 index 0000000..d2d9384 Binary files /dev/null and b/img/gpa.png differ diff --git a/img/happyhour.jpg b/img/happyhour.jpg new file mode 100644 index 0000000..060f7b5 Binary files /dev/null and b/img/happyhour.jpg differ diff --git a/img/instagram.png b/img/instagram.png new file mode 100644 index 0000000..e9cfcad Binary files /dev/null and b/img/instagram.png differ diff --git a/img/lanchetarde.jpg b/img/lanchetarde.jpg new file mode 100644 index 0000000..3a38a4f Binary files /dev/null and b/img/lanchetarde.jpg differ diff --git a/img/lupa.png b/img/lupa.png new file mode 100644 index 0000000..66a9207 Binary files /dev/null and b/img/lupa.png differ diff --git a/img/massas-frutos-do-mar.jpg b/img/massas-frutos-do-mar.jpg new file mode 100644 index 0000000..e3df28a Binary files /dev/null and b/img/massas-frutos-do-mar.jpg differ diff --git a/img/mateus.png b/img/mateus.png new file mode 100644 index 0000000..65b13be Binary files /dev/null and b/img/mateus.png differ diff --git a/img/paraopet.jpg b/img/paraopet.jpg new file mode 100644 index 0000000..113af02 Binary files /dev/null and b/img/paraopet.jpg differ diff --git a/img/primeira-compra.png b/img/primeira-compra.png new file mode 100644 index 0000000..8ca345f Binary files /dev/null and b/img/primeira-compra.png differ diff --git a/img/readme-2.png b/img/readme-2.png new file mode 100644 index 0000000..ce9602e Binary files /dev/null and b/img/readme-2.png differ diff --git a/img/readme-3.png b/img/readme-3.png new file mode 100644 index 0000000..1419238 Binary files /dev/null and b/img/readme-3.png differ diff --git a/img/readme-4.png b/img/readme-4.png new file mode 100644 index 0000000..8dbb03d Binary files /dev/null and b/img/readme-4.png differ diff --git a/img/readme-5.png b/img/readme-5.png new file mode 100644 index 0000000..1cd0e83 Binary files /dev/null and b/img/readme-5.png differ diff --git a/img/readme-6.png b/img/readme-6.png new file mode 100644 index 0000000..0981d68 Binary files /dev/null and b/img/readme-6.png differ diff --git a/img/readme-7.png b/img/readme-7.png new file mode 100644 index 0000000..aca2982 Binary files /dev/null and b/img/readme-7.png differ diff --git a/img/readme-responsive-1.png b/img/readme-responsive-1.png new file mode 100644 index 0000000..b08538d Binary files /dev/null and b/img/readme-responsive-1.png differ diff --git a/img/readme-responsive-2.png b/img/readme-responsive-2.png new file mode 100644 index 0000000..fda43cc Binary files /dev/null and b/img/readme-responsive-2.png differ diff --git a/img/readme-responsive-3.png b/img/readme-responsive-3.png new file mode 100644 index 0000000..eade497 Binary files /dev/null and b/img/readme-responsive-3.png differ diff --git a/img/readme-responsive-4.png b/img/readme-responsive-4.png new file mode 100644 index 0000000..0fc1e0d Binary files /dev/null and b/img/readme-responsive-4.png differ diff --git a/img/readme.png b/img/readme.png new file mode 100644 index 0000000..51867c5 Binary files /dev/null and b/img/readme.png differ diff --git a/img/restaurantesselecionados.jpg b/img/restaurantesselecionados.jpg new file mode 100644 index 0000000..e7698a1 Binary files /dev/null and b/img/restaurantesselecionados.jpg differ diff --git a/img/salmon.jpeg b/img/salmon.jpeg new file mode 100644 index 0000000..697b2c4 Binary files /dev/null and b/img/salmon.jpeg differ diff --git a/img/soup.jpeg b/img/soup.jpeg new file mode 100644 index 0000000..b164eec Binary files /dev/null and b/img/soup.jpeg differ diff --git a/img/steak-tartare.jpg b/img/steak-tartare.jpg new file mode 100644 index 0000000..937f60e Binary files /dev/null and b/img/steak-tartare.jpg differ diff --git a/img/supernosso.jpg b/img/supernosso.jpg new file mode 100644 index 0000000..2951b42 Binary files /dev/null and b/img/supernosso.jpg differ diff --git a/img/sushi.jpg b/img/sushi.jpg new file mode 100644 index 0000000..804b52c Binary files /dev/null and b/img/sushi.jpg differ diff --git a/img/torresmo.jpg b/img/torresmo.jpg new file mode 100644 index 0000000..de9454a Binary files /dev/null and b/img/torresmo.jpg differ diff --git a/img/twitter.png b/img/twitter.png new file mode 100644 index 0000000..02e901d Binary files /dev/null and b/img/twitter.png differ diff --git a/img/walmart.png b/img/walmart.png new file mode 100644 index 0000000..08dd346 Binary files /dev/null and b/img/walmart.png differ diff --git a/img/youtube.png b/img/youtube.png new file mode 100644 index 0000000..cf30b7e Binary files /dev/null and b/img/youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..877fb4d --- /dev/null +++ b/index.html @@ -0,0 +1,153 @@ + + + + + + + + + 4Food - Coma bem. Sem sair de casa + + +
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + +
+ +
+ + + \ No newline at end of file diff --git a/mobile-version-4Food-png/mobile-version-4Food-1.gif b/mobile-version-4Food-png/mobile-version-4Food-1.gif new file mode 100644 index 0000000..74e1e2f Binary files /dev/null and b/mobile-version-4Food-png/mobile-version-4Food-1.gif differ diff --git a/mobile-version-4Food-png/mobile-version-4Food-2.gif b/mobile-version-4Food-png/mobile-version-4Food-2.gif new file mode 100644 index 0000000..8bc482a Binary files /dev/null and b/mobile-version-4Food-png/mobile-version-4Food-2.gif differ diff --git a/mobile-version-4Food-png/mobile-version-4Food-3.gif b/mobile-version-4Food-png/mobile-version-4Food-3.gif new file mode 100644 index 0000000..920c71e Binary files /dev/null and b/mobile-version-4Food-png/mobile-version-4Food-3.gif differ diff --git a/mobile-version-4Food-png/mobile-version-4Food-4.gif b/mobile-version-4Food-png/mobile-version-4Food-4.gif new file mode 100644 index 0000000..1b6f6b0 Binary files /dev/null and b/mobile-version-4Food-png/mobile-version-4Food-4.gif differ diff --git a/mobile-version-4Food-png/mobile-version-4Food-5.gif b/mobile-version-4Food-png/mobile-version-4Food-5.gif new file mode 100644 index 0000000..4e1bba2 Binary files /dev/null and b/mobile-version-4Food-png/mobile-version-4Food-5.gif differ diff --git a/projeto/contato/contato.css b/projeto/contato/contato.css new file mode 100644 index 0000000..b3a3aa5 --- /dev/null +++ b/projeto/contato/contato.css @@ -0,0 +1,244 @@ +/* configs da pagina*/ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; +} + +/* header/navbar */ +nav { + background: linear-gradient(315deg, #F58B3B, #eea56d); + height: 100px; + width: 100%; +} +.brand { + height: 100%; + padding: 0 80px; + line-height: 50px; + transition: 0.5s; +} + +nav ul { + float:right; + margin-right: 20px; +} + +nav ul li{ + display: inline-block; + line-height: 50px; + margin: 0; +} + +nav ul li a { + color: rgba(0, 0, 0, 0.527); + text-decoration: none; + text-transform: uppercase; + padding: 14px 14px; + font-size: 18px; + +} + +a.active, a:hover { + background:#945d1fa1; + transition: 0.5s; +} + +.bars { + font-size: 20px; + color: #fff; + float:right; + line-height: 50px; + margin-right: 40px; + cursor: pointer; + display: none; +} + +#chk{ + display: none; +} + +@media (max-width:1182px) { + + .brand{ + font-size: 10px; + padding-left:20px; + } + + .bars{ + display:block; + } + + ul{ + position: absolute; + top:100px; + left: -100%; + width:100%; + background: #be823eed; + text-align: center; + transition: all 0.5s; + z-index:9999; +} + nav ul li { + display:block; + margin: 40px 0; + line-height: 10px; + } + + nav ul li a{ + font-size: 16px; + } + + a.active, a:hover{ + background: none; + color:#945d1fa1 ; + } + + #chk:checked ~ ul{ + left: 0; + + } + +} + +/* footer */ + +.metodo{ + padding-top: 25px; +} +.cartoes{ + width: 30px; + padding-top: 15px; +} + +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); + +footer { + position:static; + bottom:0; + display:inline-flex; + height: 4.5rem; + width: 100%; + font-family: 'Montserrat', sans-serif; + background: linear-gradient(315deg, #F58B3B, #eea56d); + justify-content: space-around; + flex-wrap:wrap; +} +@media (max-width:1182px){ + footer{ + display: block; + background: linear-gradient(315deg, #F58B3B, #eea56d); + display: inline-table; + } + .cartoes{ + display:none; + + } + .metodo{ + display:none; + } +} +.wrapper { + display: inline-flex; +} + +.wrapper .icon { + position: relative; + background-color: #ffffff; + border-radius: 50%; + padding: 15px; + margin: 10px; + width: 50px; + height: 50px; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip { + position: absolute; + top: 0; + font-size: 14px; + background-color: #ffffff; + color: #ffffff; + padding: 5px 8px; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + pointer-events: none; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip::before { + position: absolute; + content: ""; + height: 8px; + width: 8px; + background-color: #ffffff; + bottom: -3px; + left: 50%; + transform: translate(-50%) rotate(45deg); + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .icon:hover .tooltip { + top: -45px; + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.wrapper .icon:hover span, +.wrapper .icon:hover .tooltip { + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); +} + +.wrapper .facebook:hover, +.wrapper .facebook:hover .tooltip, +.wrapper .facebook:hover .tooltip::before { + background-color: #3b5999; + color: #ffffff; +} +.fa-twitter:before { + content: "\f099"; +} +.wrapper .twitter:hover, +.wrapper .twitter:hover .tooltip, +.wrapper .twitter:hover .tooltip::before { + background-color: #46c1f6; + color: #ffffff; +} + +.wrapper .instagram:hover, +.wrapper .instagram:hover .tooltip, +.wrapper .instagram:hover .tooltip::before { + background-color: #e1306c; + color: #ffffff; +} + +.wrapper .github:hover, +.wrapper .github:hover .tooltip, +.wrapper .github:hover .tooltip::before { + background-color: #333333; + color: #ffffff; +} + +.wrapper .youtube:hover, +.wrapper .youtube:hover .tooltip, +.wrapper .youtube:hover .tooltip::before { + background-color: #de463b; + color: #ffffff; +} +h3{ + color:rgba(0, 0, 0, 0.527); + align-self:center; +} +.icones{ + width: 18px; + margin-top: 3px; +} diff --git a/projeto/contato/contato.html b/projeto/contato/contato.html new file mode 100644 index 0000000..937ae74 --- /dev/null +++ b/projeto/contato/contato.html @@ -0,0 +1,72 @@ + + + + + + 4Food - Coma bem. Sem sair de casa + + + + + + +
+ +
+
+ +
+ + + \ No newline at end of file diff --git a/projeto/cupom/cupom.css b/projeto/cupom/cupom.css new file mode 100644 index 0000000..1550779 --- /dev/null +++ b/projeto/cupom/cupom.css @@ -0,0 +1,440 @@ +/* configs da pagina*/ + + + + +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; +} + + + + + + +/* header/navbar */ + + + + + +nav { + background: linear-gradient(315deg, #F58B3B, #eea56d); + height: 100px; + width: 100%; +} +.brand { + height: 100%; + padding: 0 80px; + line-height: 50px; + transition: 0.5s; +} + +nav .ul { + float:right; + margin-right: 20px; +} + +nav .ul li{ + display: inline-block; + line-height: 50px; + margin: 0; +} + +nav .ul li a { + color: rgba(0, 0, 0, 0.527); + text-decoration: none; + text-transform: uppercase; + padding: 14px 14px; + font-size: 18px; + +} + +a.active, a:hover { + background:#945d1fa1; + transition: 0.5s; +} + +.bars { + font-size: 20px; + color: #fff; + float:right; + line-height: 50px; + margin-right: 40px; + cursor: pointer; + display: none; +} + +#chk{ + display: none; +} + +@media (max-width:1182px) { + + .brand{ + font-size: 10px; + padding-left:20px; + } + + .bars{ + display:block; + } + + .ul{ + position: absolute; + top:100px; + left: -100%; + width:100%; + background: #be823eed; + text-align: center; + transition: all 0.5s; + z-index:9999; +} + nav .ul li { + display:block; + margin: 40px 0; + line-height: 10px; + } + + nav .ul li a{ + font-size: 16px; + } + + a.active, a:hover{ + background: none; + color:#945d1fa1 ; + } + + #chk:checked ~ ul{ + left: 0; + + } + +} + + + + + + +/* body */ + + + + +#ul { + list-style-type: none; + display: grid; + grid-template-columns: repeat(1,1fr); + transform-origin: top left; + transform: skewY(1.398705355deg); + margin: 20vw 25% 0 2%; +} +.li{ + transform-origin: top left; + transform: skewY(-2.398705355deg) rotatez(-14.03624deg); + padding-top: 100%; + z-index: 1; + transition-property: z-index; + transition-duration: .3s; +} +.details{ + position: absolute; + z-index: 2; + width: 70%; + height: 95%; + top: 0; + background-color: #C75600; + border-radius: 1vw; + -webkit-filter: drop-shadow(2px 6px 3px rgba(0, 0, 0, 0.4)); + filter: drop-shadow(2px 6px 3px rgba(0, 0, 0, 0.4)); + transform: rotate(0deg) translate(0, 0); + transition-property: transform; + transition-duration: .3s; +} + +.li:nth-child(3n+1) .details{ + background-color: #f9c32e; +} +.li:nth-child(3n+2) .details{ + background-color: #f1a831; +} +.product{ + position: absolute; + z-index: 3; + width: 88%; + height: 91%; + top: 0; + transform: translateX(6.5%) translateY(5%); + border-radius: 1vw; + background:#001a23; + overflow: hidden; +} +.h2, .p, .img { + position: absolute; + z-index: 4; +} +.h2, .p { + background-color: #C75600; + padding: 0.4em; +} +.li:nth-child(3n+1) .h2,.li:nth-child(3n+1) .p{ + background-color: #f9c32e; +} +.li:nth-child(3n+2) .h2,.li:nth-child(3n+2) .p{ + background-color: #f1a831; +} + +.h2{ + top: 3.5%; + left: 4%; + font-size: 20px; + font-family: 'Montserrat', sans-serif; +} +.p { + bottom: 3.5%; + right: 5%; + font-size: 1em; + font-family: 'Montserrat', sans-serif; +} +.img{ + height: 110%; + left: 50%; + transform: translateX(-50%) translateY(-2%); + transition-property: height,transform; + transition-duration: .3s; +} + +.li:hover{ + z-index: 4; +} +.li:hover .details{ + transform: rotate(14.03624deg) translate(0%, 10%) scale(1.3); +} +.li:hover .img{ + height: 210%; + transform: translateX(-50%) translateY(-14%); +} + +@media (min-width:300px) { + body{ + font-size: 2.75vw; + } + .h2{ + font-size: 10px; + } + #ul { + grid-template-columns: repeat(2,1fr); + grid-column-gap: 3vw; + margin: 10vw 14vw 0 2vw; + } +} + +@media (min-width:600px) { + body{ + font-size: 1.95vw; + } + .h2{ + font-size: 12px; + } + #ul { + grid-template-columns: repeat(3,1fr); + grid-column-gap: 2vw; + margin: 8vw 10vw 0 1vw; + } +} + +@media (min-width:900px) { + body{ + font-size: 1.5vw; + } + .h2{ + font-size: 14px; + } + #ul { + grid-template-columns: repeat(4,1fr); + grid-column-gap: 1.5vw; + margin: 6vw 7.5vw 0 0.5vw; + } +} + +@media (min-width:1200px) { + body{ + font-size: 1.25vw; + } + #ul { + grid-template-columns: repeat(5,1fr); + grid-column-gap: 1vw; + margin: 4.5vw 6vw 0 .5vw; + } +} + +@media (min-width:1500px) { + body{ + font-size: 1vw; + } + #ul { + grid-template-columns: repeat(6,1fr); + grid-column-gap: 1vw; + margin: 4vw 6vw 0 0.5vw; + } +} + + + + + + + +/* footer */ + + + + + + + + + +.metodo{ + padding-top: 25px; +} +.cartoes{ + width: 30px; + padding-top: 15px; +} + +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); + +footer { + position:fixed; + bottom:0; + display:inline-flex; + height: 4.5rem; + width: 100%; + font-family: 'Montserrat', sans-serif; + background: linear-gradient(315deg, #F58B3B, #eea56d); + justify-content: space-around; + flex-wrap:wrap; +} +@media (max-width:1182px){ + footer{ + display: block; + background: linear-gradient(315deg, #F58B3B, #eea56d); + display: inline-table; + } + .cartoes{ + display:none; + + } + .metodo{ + display:none; + } +} +.wrapper { + display: inline-flex; +} + +.wrapper .icon { + position: relative; + background-color: #ffffff; + border-radius: 50%; + padding: 15px; + margin: 10px; + width: 50px; + height: 50px; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip { + position: absolute; + top: 0; + font-size: 14px; + background-color: #ffffff; + color: #ffffff; + padding: 5px 8px; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + pointer-events: none; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip::before { + position: absolute; + content: ""; + height: 8px; + width: 8px; + background-color: #ffffff; + bottom: -3px; + left: 50%; + transform: translate(-50%) rotate(45deg); + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .icon:hover .tooltip { + top: -45px; + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.wrapper .icon:hover span, +.wrapper .icon:hover .tooltip { + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); +} + +.wrapper .facebook:hover, +.wrapper .facebook:hover .tooltip, +.wrapper .facebook:hover .tooltip::before { + background-color: #3b5999; + color: #ffffff; +} +.fa-twitter:before { + content: "\f099"; +} +.wrapper .twitter:hover, +.wrapper .twitter:hover .tooltip, +.wrapper .twitter:hover .tooltip::before { + background-color: #46c1f6; + color: #ffffff; +} + +.wrapper .instagram:hover, +.wrapper .instagram:hover .tooltip, +.wrapper .instagram:hover .tooltip::before { + background-color: #e1306c; + color: #ffffff; +} + +.wrapper .github:hover, +.wrapper .github:hover .tooltip, +.wrapper .github:hover .tooltip::before { + background-color: #333333; + color: #ffffff; +} + +.wrapper .youtube:hover, +.wrapper .youtube:hover .tooltip, +.wrapper .youtube:hover .tooltip::before { + background-color: #de463b; + color: #ffffff; +} +h3{ + color:rgba(0, 0, 0, 0.527); + align-self:center; +} +.icones{ + width: 18px; + margin-top: 3px; +} diff --git a/projeto/cupom/cupom.html b/projeto/cupom/cupom.html new file mode 100644 index 0000000..fde7140 --- /dev/null +++ b/projeto/cupom/cupom.html @@ -0,0 +1,179 @@ + + + + + + 4Food - Coma bem. Sem sair de casa + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/projeto/home/home.css b/projeto/home/home.css new file mode 100644 index 0000000..0a44d1c --- /dev/null +++ b/projeto/home/home.css @@ -0,0 +1,371 @@ +/* configs da pagina*/ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; +} + +/* header/navbar */ +nav { + background: linear-gradient(315deg, #F58B3B, #eea56d); + height: 100px; + width: 100%; +} +.brand { + height: 100%; + padding: 0 80px; + line-height: 50px; + transition: 0.5s; +} + +nav ul { + float:right; + margin-right: 20px; +} + +nav ul li{ + display: inline-block; + line-height: 50px; + margin: 0; +} + +nav ul li a { + color: rgba(0, 0, 0, 0.527); + text-decoration: none; + text-transform: uppercase; + padding: 14px 14px; + font-size: 18px; + +} + +a.active, a:hover { + background:#945d1fa1; + transition: 0.5s; +} + +.bars { + font-size: 20px; + color: #fff; + float:right; + line-height: 50px; + margin-right: 40px; + cursor: pointer; + display: none; +} + +#chk{ + display: none; +} + +@media (max-width:1182px) { + + .brand{ + font-size: 10px; + padding-left:20px; + } + + .bars{ + display:block; + } + + ul{ + position: absolute; + top:100px; + left: -100%; + width:100%; + background: #be823eed; + text-align: center; + transition: all 0.5s; + z-index:9999; +} + nav ul li { + display:block; + margin: 40px 0; + line-height: 10px; + } + + nav ul li a{ + font-size: 16px; + } + + a.active, a:hover{ + background: none; + color:#945d1fa1 ; + } + + #chk:checked ~ ul{ + left: 0; + + } + +} + +/* body */ +.slider { + position: relative; + height: 100vh; +} + +.slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 0.4s ease-in-out; +} + +.slide.current { + opacity: 1; +} + +.slide .content { + position: absolute; + bottom: 70px; + left: -600px; + opacity: 0; + width: 600px; + background-color: rgba(255, 255, 255, 0.8); + color: #333; + padding: 35px; +} + +.slide.current .content { + opacity: 1; + transform: translateX(600px); + transition: all 0.7s ease-in-out 0.3s; +} + +.buttons button#next { + position: absolute; + top: 40%; + right: 15px; +} + +.buttons button#prev { + position: absolute; + top: 40%; + left: 15px; +} + +.buttons button { + border: 2px solid #fff; + background-color: transparent; + color: #fff; + cursor: pointer; + padding: 13px 15px; + border-radius: 50%; + outline: none; +} + +.buttons button:hover { + background-color: rgb(255, 255, 255); + color: #333; +} + +@media (max-width: 500px) { + body{ + width: 100% !important; + height: 100vh !important; + background-size: cover; + } + .slide:first-child { + max-width: 100%; + background-position: center; + background: url(/mobile-version-4Food-png/mobile-version-4Food-1.gif) no-repeat center top/cover !important; + } + .slide:nth-child(2) { + max-width: 100%; + max-height: 100%; + background: url(/mobile-version-4Food-png/mobile-version-4Food-2.gif) no-repeat center top/cover !important; + } + .slide:nth-child(3) { + max-width: 100%; + max-height: 100%; + background: url(/mobile-version-4Food-png/mobile-version-4Food-3.gif) no-repeat center top/cover !important; + } + .slide:nth-child(4) { + max-width: 100%; + max-height: 100%; + background: url(/mobile-version-4Food-png/mobile-version-4Food-4.gif) no-repeat center top/cover !important; + } + .slide:nth-child(5) { + max-width: 100%; + max-height: 100%; + background: url(/mobile-version-4Food-png/mobile-version-4Food-5.gif) no-repeat center top/cover !important; + } + .slide .content { + bottom: -300px; + left: 0; + width: 100%; + } + .slide.current .content { + transform: translateY(-300px); + } +} + +/* Background Images */ +.slide:first-child { + background: url(/4food-gif/1.gif) no-repeat + center top/cover; +} +.slide:nth-child(2) { + background: url(/4food-gif/2.gif) no-repeat + center top/cover; +} +.slide:nth-child(3) { + background: url(/4food-gif/3.gif) no-repeat + center top/cover; +} +.slide:nth-child(4) { + background: url(/4food-gif/4.gif) no-repeat + center top/cover; +} +.slide:nth-child(5) { + background: url(/4food-gif/5.gif) no-repeat + center top/cover; +} + +/* footer */ + +.metodo{ + padding-top: 25px; +} +.cartoes{ + width: 30px; + padding-top: 15px; +} + +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); + +footer { + position:static; + bottom:0; + display:inline-flex; + height: 4.5rem; + width: 100%; + font-family: 'Montserrat', sans-serif; + background: linear-gradient(315deg, #F58B3B, #eea56d); + justify-content: space-around; + flex-wrap:wrap; +} +@media (max-width:1182px){ + footer{ + display: block; + background: linear-gradient(315deg, #F58B3B, #eea56d); + display: inline-table; + } + .cartoes{ + display:none; + + } + .metodo{ + display:none; + } +} +.wrapper { + display: inline-flex; +} + +.wrapper .icon { + position: relative; + background-color: #ffffff; + border-radius: 50%; + padding: 15px; + margin: 10px; + width: 50px; + height: 50px; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip { + position: absolute; + top: 0; + font-size: 14px; + background-color: #ffffff; + color: #ffffff; + padding: 5px 8px; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + pointer-events: none; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip::before { + position: absolute; + content: ""; + height: 8px; + width: 8px; + background-color: #ffffff; + bottom: -3px; + left: 50%; + transform: translate(-50%) rotate(45deg); + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .icon:hover .tooltip { + top: -45px; + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.wrapper .icon:hover span, +.wrapper .icon:hover .tooltip { + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); +} + +.wrapper .facebook:hover, +.wrapper .facebook:hover .tooltip, +.wrapper .facebook:hover .tooltip::before { + background-color: #3b5999; + color: #ffffff; +} +.fa-twitter:before { + content: "\f099"; +} +.wrapper .twitter:hover, +.wrapper .twitter:hover .tooltip, +.wrapper .twitter:hover .tooltip::before { + background-color: #46c1f6; + color: #ffffff; +} + +.wrapper .instagram:hover, +.wrapper .instagram:hover .tooltip, +.wrapper .instagram:hover .tooltip::before { + background-color: #e1306c; + color: #ffffff; +} + +.wrapper .github:hover, +.wrapper .github:hover .tooltip, +.wrapper .github:hover .tooltip::before { + background-color: #333333; + color: #ffffff; +} + +.wrapper .youtube:hover, +.wrapper .youtube:hover .tooltip, +.wrapper .youtube:hover .tooltip::before { + background-color: #de463b; + color: #ffffff; +} +h3{ + color:rgba(0, 0, 0, 0.527); + align-self:center; +} +.icones{ + width: 18px; + margin-top: 3px; +} diff --git a/projeto/mercados/mercados.css b/projeto/mercados/mercados.css new file mode 100644 index 0000000..ae7239d --- /dev/null +++ b/projeto/mercados/mercados.css @@ -0,0 +1,305 @@ +/* configs */ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; + } + + /* header/navbar */ + nav { + background: linear-gradient(315deg, #F58B3B, #eea56d); + height: 100px; + width: 100%; + } + .brand { + height: 100%; + padding: 0 80px; + line-height: 50px; + transition: 0.5s; + } + nav ul { + float:right; + margin-right: 20px; + } + + nav ul li{ + display: inline-block; + line-height: 50px; + margin: 0; + /* margin:0 5px; */ + } + + nav ul li a { + color: rgba(0, 0, 0, 0.527); + text-decoration: none; + text-transform: uppercase; + padding: 14px 14px; + font-size: 18px; + + } + + a.active, a:hover { + background:#945d1fa1; + transition: 0.5s; + } + + .bars { + font-size: 20px; + color: #fff; + float:right; + line-height: 50px; + margin-right: 40px; + cursor: pointer; + display: none; + } + + #chk{ + display: none; + } + + @media (max-width:1182px) { + + .brand{ + font-size: 10px; + padding-left:20px; + } + + .bars{ + display:block; + } + + ul{ + position: absolute; + top:100px; + left: -100%; + width:100%; + background: #be823eed; + text-align: center; + transition: all 0.5s; + z-index:9999; + } + nav ul li { + display:block; + margin: 40px 0; + line-height: 10px; + } + + nav ul li a{ + font-size: 16px; + } + + a.active, a:hover{ + background: none; + color:#945d1fa1 ; + } + + #chk:checked ~ ul{ + left: 0; + + } + + } + + /* footer */ + .metodo{ + padding-top: 25px; + } + .cartoes{ + width: 25px; + padding-top: 10px; + } + + @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); + + footer { + position:static; + bottom:0; + display:inline-flex; + height: 4.5rem; + width: 100%; + font-family: 'Montserrat', sans-serif; + background: linear-gradient(315deg, #F58B3B, #eea56d); + justify-content: space-around; + flex-wrap:wrap; + } + @media (max-width:1182px){ + footer{ + display: block; + background: linear-gradient(315deg, #F58B3B, #eea56d); + display: inline-table; + } + .cartoes{ + display:none; + + } + .metodo{ + display:none; + } + } + .wrapper { + display: inline-flex; + } + + .wrapper .icon { + position: relative; + background-color: #ffffff; + border-radius: 50%; + padding: 15px; + margin: 10px; + width: 50px; + height: 50px; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); + } + + .wrapper .tooltip { + position: absolute; + top: 0; + font-size: 14px; + background-color: #ffffff; + color: #ffffff; + padding: 5px 8px; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + pointer-events: none; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + } + + .wrapper .tooltip::before { + position: absolute; + content: ""; + height: 8px; + width: 8px; + background-color: #ffffff; + bottom: -3px; + left: 50%; + transform: translate(-50%) rotate(45deg); + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + } + + .wrapper .icon:hover .tooltip { + top: -45px; + opacity: 1; + visibility: visible; + pointer-events: auto; + } + + .wrapper .icon:hover span, + .wrapper .icon:hover .tooltip { + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); + } + + .wrapper .facebook:hover, + .wrapper .facebook:hover .tooltip, + .wrapper .facebook:hover .tooltip::before { + background-color: #3b5999; + color: #ffffff; + } + .fa-twitter:before { + content: "\f099"; + } + .wrapper .twitter:hover, + .wrapper .twitter:hover .tooltip, + .wrapper .twitter:hover .tooltip::before { + background-color: #46c1f6; + color: #ffffff; + } + + .wrapper .instagram:hover, + .wrapper .instagram:hover .tooltip, + .wrapper .instagram:hover .tooltip::before { + background-color: #e1306c; + color: #ffffff; + } + + .wrapper .github:hover, + .wrapper .github:hover .tooltip, + .wrapper .github:hover .tooltip::before { + background-color: #333333; + color: #ffffff; + } + + .wrapper .youtube:hover, + .wrapper .youtube:hover .tooltip, + .wrapper .youtube:hover .tooltip::before { + background-color: #de463b; + color: #ffffff; + } + h3{ + color:rgba(0, 0, 0, 0.527); + align-self:center; + } + .icones{ + width: 18px; + margin-top: 3px; + } + + + /* body */ + .menu{ + padding: 60px 10px; + padding-bottom: 20px; + display:grid; + grid-template-columns: repeat( auto-fit, minmax(350px, 1fr)); + grid-gap: 20px 20px; + } + .food-items{ + display: grid; + position: relative; + grid-template-rows: auto 1fr; + border-radius: 15px; + box-shadow: 0 0 15px rgba(0,0,0,0.1); + margin: 0 20px; + } + .food-items img{ + position: relative; + width: 100%; + border-radius: 15px 15px 0 0; + } + + .details{ + padding: 20px 10px; + display: grid; + grid-template-rows: auto 1fr 50px; + grid-row-gap: 15px; + } + .details-sub{ + display: grid; + grid-template-columns: auto auto; + } + .details-sub>h5{ + font-weight: 600; + font-size: 18px; + } + .price{ + text-align: right; + } + .details>p{ + color: #6f6f6f; + font-size: 15px; + line-height: 28px; + font-weight: 400; + align-self: stretch; + } + .details>button{ + background-color: #8c4118; + border: none; + color: #ffffff; + font-size: 16px; + font-weight: 600; + border-radius: 5px; + width: 180px; + } + .ajuste{ + text-decoration:solid; + color: #ffffff; + padding: 11px 11px; + } \ No newline at end of file diff --git a/projeto/mercados/mercados.html b/projeto/mercados/mercados.html new file mode 100644 index 0000000..285906a --- /dev/null +++ b/projeto/mercados/mercados.html @@ -0,0 +1,175 @@ + + + + + + 4Food - Coma bem. Sem sair de casa + + + + + + +
+ +
+
+
+
+ +
+
+
Assaí ATACADISTA
+
$$$
+
+

Novas conquistas. Novas histórias. Para nós, ser um grande atacadista não é só ser gigante em números, é ser gigante em propósitos. Mais do que estrutura, pessoas.

+ +
+
+
+ +
+
+
Supermercados BH
+
$
+
+

Supermercados BH, para você e sua família, sempre o melhor!

+ +
+
+
+ +
+
+
CARREFOUR
+
$$$$
+
+

Preços baixos, confiança maior.

+ +
+
+
+ +
+
+
DIA %
+
$$
+
+

O DIA tem o preço mais acessível para todos os nossos clientes, que merecem os melhores produtos por um preço que caiba no bolso.

+ +
+
+
+ +
+
+
EXTRA
+
$$$$
+
+

Sempre pensando em você, o Extra oferece os melhores serviços para tornar sua vida mais prática: Retira Rápido, Lista de Casamento, Cartão Extra, Revelação Digital e muito mais! Tudo o que você precisa está aqui!

+ +
+
+
+ +
+
+
GRUPO PÃO DE AÇÚCAR
+
$$$$$
+
+

Somos uma empresa do Grupo Casino e estamos presentes em todas as regiões do Brasil, além de concentrarmos operações na Colômbia, no Uruguai e na Argentina com o Grupo Éxito.

+ +
+
+
+ +
+
+
Grupo Mateus
+
$$
+
+

O Grupo Mateus é a maior rede varejista de alimentos do Brasil com capital 100% nacional. Atuamos no varejo supermercadista, atacarejo, atacado, eletrodomésticos, móveis, panificação, central de fatiamento e porcionamento.

+ +
+
+ +
+ +
+
+
Super Nosso
+
$$$
+
+

O Super Nosso, empresa mineira desde 1998 no mercado com tradição e referência em qualidade e atendimento, tem o prazer de oferecer a cidade de Belo Horizonte e sua região metropolitana, o mais inovador, confortável e seguro sistema de compras online de supermercados.

+ +
+
+ +
+ +
+
+
Walmart
+
$$$$
+
+

Quem economiza, realiza.

+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/projeto/restaurantes/restaurante.css b/projeto/restaurantes/restaurante.css new file mode 100644 index 0000000..4c9cfd8 --- /dev/null +++ b/projeto/restaurantes/restaurante.css @@ -0,0 +1,308 @@ +/* configs */ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; +} + +/* header/navbar */ +nav { + background: linear-gradient(315deg, #F58B3B, #eea56d); + height: 100px; + width: 100%; +} +.brand { + height: 100%; + padding: 0 80px; + line-height: 50px; + transition: 0.5s; +} +nav ul { + float:right; + margin-right: 20px; +} + +nav ul li{ + display: inline-block; + line-height: 50px; + margin: 0; + /* margin:0 5px; */ +} + +nav ul li a { + color: rgba(0, 0, 0, 0.527); + text-decoration: none; + text-transform: uppercase; + padding: 14px 14px; + font-size: 18px; + +} + +a.active, a:hover { + background:#945d1fa1; + transition: 0.5s; +} + +.bars { + font-size: 20px; + color: #fff; + float:right; + line-height: 50px; + margin-right: 40px; + cursor: pointer; + display: none; +} + +#chk{ + display: none; +} + +@media (max-width:1182px) { + + .brand{ + font-size: 10px; + padding-left:20px; + } + + .bars{ + display:block; + } + + ul{ + position: absolute; + top:100px; + left: -100%; + width:100%; + background: #be823eed; + text-align: center; + transition: all 0.5s; + z-index:9999; + } + nav ul li { + display:block; + margin: 40px 0; + line-height: 10px; + } + + nav ul li a{ + font-size: 16px; + } + + a.active, a:hover{ + background: none; + color:#945d1fa1 ; + } + + #chk:checked ~ ul{ + left: 0; + + } + +} + +/* footer */ +.metodo{ + padding-top: 25px; +} +.cartoes{ + width: 25px; + padding-top: 10px; +} + +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); + +footer { + position:static; + bottom:0; + display:inline-flex; + height: 4.5rem; + width: 100%; + font-family: 'Montserrat', sans-serif; + background: linear-gradient(315deg, #F58B3B, #eea56d); + justify-content: space-around; + flex-wrap:wrap; +} +@media (max-width:1182px){ + footer{ + display: block; + background: linear-gradient(315deg, #F58B3B, #eea56d); + display: inline-table; + } + .cartoes{ + display:none; + + } + .metodo{ + display:none; + } +} +.wrapper { + display: inline-flex; +} + +.wrapper .icon { + position: relative; + background-color: #ffffff; + border-radius: 50%; + padding: 15px; + margin: 10px; + width: 50px; + height: 50px; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip { + position: absolute; + top: 0; + font-size: 14px; + background-color: #ffffff; + color: #ffffff; + padding: 5px 8px; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + pointer-events: none; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip::before { + position: absolute; + content: ""; + height: 8px; + width: 8px; + background-color: #ffffff; + bottom: -3px; + left: 50%; + transform: translate(-50%) rotate(45deg); + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .icon:hover .tooltip { + top: -45px; + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.wrapper .icon:hover span, +.wrapper .icon:hover .tooltip { + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); +} + +.wrapper .facebook:hover, +.wrapper .facebook:hover .tooltip, +.wrapper .facebook:hover .tooltip::before { + background-color: #3b5999; + color: #ffffff; +} +.fa-twitter:before { + content: "\f099"; +} +.wrapper .twitter:hover, +.wrapper .twitter:hover .tooltip, +.wrapper .twitter:hover .tooltip::before { + background-color: #46c1f6; + color: #ffffff; +} + +.wrapper .instagram:hover, +.wrapper .instagram:hover .tooltip, +.wrapper .instagram:hover .tooltip::before { + background-color: #e1306c; + color: #ffffff; +} + +.wrapper .github:hover, +.wrapper .github:hover .tooltip, +.wrapper .github:hover .tooltip::before { + background-color: #333333; + color: #ffffff; +} + +.wrapper .youtube:hover, +.wrapper .youtube:hover .tooltip, +.wrapper .youtube:hover .tooltip::before { + background-color: #de463b; + color: #ffffff; +} +h3{ + color:rgba(0, 0, 0, 0.527); + align-self:center; +} +.icones{ + width: 18px; + margin-top: 3px; +} + + +/* body */ + + + +.menu{ + padding: 60px 10px; + padding-bottom: 20px; + display:grid; + grid-template-columns: repeat( auto-fit, minmax(350px, 1fr)); + grid-gap: 20px 20px; +} +.food-items{ + display: grid; + position: relative; + grid-template-rows: auto 1fr; + border-radius: 15px; + box-shadow: 0 0 15px rgba(0,0,0,0.1); + margin: 0 20px; +} +.food-items img{ + position: relative; + width: 100%; + border-radius: 15px 15px 0 0; +} + +.details{ + padding: 20px 10px; + display: grid; + grid-template-rows: auto 1fr 50px; + grid-row-gap: 15px; +} +.details-sub{ + display: grid; + grid-template-columns: auto auto; +} +.details-sub>h5{ + font-weight: 600; + font-size: 18px; +} +.price{ + text-align: right; +} +.details>p{ + color: #6f6f6f; + font-size: 15px; + line-height: 28px; + font-weight: 400; + align-self: stretch; +} +.details>button{ + background-color: #8c4118; + border: none; + color: #ffffff; + font-size: 16px; + font-weight: 600; + border-radius: 5px; + width: 180px; +} +.ajuste{ + text-decoration:solid; + color: #ffffff; + padding: 11px 11px; +} \ No newline at end of file diff --git a/projeto/restaurantes/restaurante.html b/projeto/restaurantes/restaurante.html new file mode 100644 index 0000000..35e9dfa --- /dev/null +++ b/projeto/restaurantes/restaurante.html @@ -0,0 +1,198 @@ + + + + + + 4Food - Coma bem. Sem sair de casa + + + + + + +
+ +
+
+
+
+ +
+
+
La Macelleria Lourdes
+
$$$$
+
+

Ótima opção para se comer uma carne boa e macia de gado red angus e harmonizar com uma variedade de vinhos que também podem ser adquiridos. No menu também pode ser encontrado outros pratos como massas, salmão grelhado, entre outros. O ambiente é muito bom, assim como o custo benefício.

+ +
+
+
+ +
+
+
Taste-Vin
+
$$$
+
+

Bistrô francês elegante com pratos à la carte de suflê, frutos do mar, pato e coelho, além de loja de vinhos.

+ +
+
+
+ +
+
+
Restaurante Quinto do Ouro
+
$$
+
+

Pratos com filés, massas e frutos do mar estão entre os itens de menu no elegante Quinto do Ouro.

+ +
+
+
+ +
+
+
Amadeus - Bar e Restaurante
+
$$$$$
+
+

Enoteca e restaurante contemporâneo com buffet internacional, incluindo sushi, saladas, risotos e queijos.

+ +
+
+
+ +
+
+
O Conde Restaurante
+
$$$$$
+
+

Restaurante que serve iguarias como steak tartare, lagosta e vinhos.

+ +
+
+
+ +
+
+
Asgard
+
$$$$$
+
+

Um hambúrguer artesanal, inspirado na cultura Viking, com aquele blend grelhado 100% asgardiano, no alcance das suas mãos com a velocidade do cavalo de Odin. Alimente o guerreiro que há em você!

+ +
+
+
+ +
+
+
Glouton
+
$$
+
+

Sofisticação da alta gastronomia, precisão técnica e apresentação primorosa se aliam ao inigualável sabor de Minas Gerais. E como toda comida mineira, no Glouton o prato tem gosto de verdade e se torna inesquecível não pela aparência, mas pelo sabor.

+ +
+
+ +
+ +
+
+
Udon
+
$$$
+
+

Receitas criativas, como sushi de atum com foie gras e teriyaki, servidas em um espaço moderno e artístico.

+ +
+
+ +
+ +
+
+
Anella Ristorante
+
$
+
+

No Anella Ristorante você tem o prazer de saborear o melhor da legítima cozinha italiana, preparada com massas artesanais.

+ +
+
+ +
+ +
+
+
Cantina do Lucas
+
$$$$
+
+

Cantina italiana que serve amplo cardápio de pratos tradicionais e mineiros, com carta de vinhos.

+ +
+
+ +
+ +
+
+
Restaurante Paladino
+
$$
+
+

Oferecemos um cardápio variado, em que cada detalhe foi criado com muito carinho para te oferecer uma experiência gastronômica única.Muitos ingredientes que utilizamos são cultivados em nossa própria horta, garantindo mais sabor e autenticidade aos nossos pratos. Venha experimentar os sabores e aromas no melhor estilo de Minas!

+ +
+
+
+
+ + + \ No newline at end of file diff --git a/projeto/restaurantes/restaurante.js b/projeto/restaurantes/restaurante.js new file mode 100644 index 0000000..e69de29 diff --git a/projeto/sobre/sobre.css b/projeto/sobre/sobre.css new file mode 100644 index 0000000..62a69cf --- /dev/null +++ b/projeto/sobre/sobre.css @@ -0,0 +1,275 @@ +/* configs da pagina*/ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; +} + +/* header/navbar */ +nav { + background: linear-gradient(315deg, #F58B3B, #eea56d); + height: 100px; + width: 100%; +} +.brand { + height: 100%; + padding: 0 80px; + line-height: 50px; + transition: 0.5s; +} + +nav ul { + float:right; + margin-right: 20px; +} + +nav ul li{ + display: inline-block; + line-height: 50px; + margin: 0; +} + +nav ul li a { + color: rgba(0, 0, 0, 0.527); + text-decoration: none; + text-transform: uppercase; + padding: 14px 14px; + font-size: 18px; + +} + +a.active, a:hover { + background:#945d1fa1; + transition: 0.5s; +} + +.bars { + font-size: 20px; + color: #fff; + float:right; + line-height: 50px; + margin-right: 40px; + cursor: pointer; + display: none; +} + +#chk{ + display: none; +} + +@media (max-width:1182px) { + + .brand{ + font-size: 10px; + padding-left:20px; + } + + .bars{ + display:block; + } + + ul{ + position: absolute; + top:100px; + left: -100%; + width:100%; + background: #be823eed; + text-align: center; + transition: all 0.5s; + z-index:9999; +} + nav ul li { + display:block; + margin: 40px 0; + line-height: 10px; + } + + nav ul li a{ + font-size: 16px; + } + + a.active, a:hover{ + background: none; + color:#945d1fa1 ; + } + + #chk:checked ~ ul{ + left: 0; + + } + +} + +/* footer */ +.metodo{ + padding-top: 25px; +} +.cartoes{ + width: 30px; + padding-top: 15px; +} + +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); + +footer { + position:static; + bottom:0; + display:inline-flex; + height: 4.5rem; + width: 100%; + font-family: 'Montserrat', sans-serif; + background: linear-gradient(315deg, #F58B3B, #eea56d); + justify-content: space-around; + flex-wrap:wrap; +} +@media (max-width:1182px){ + footer{ + display: block; + background: linear-gradient(315deg, #F58B3B, #eea56d); + display: inline-table; + } + .cartoes{ + display:none; + + } + .metodo{ + display:none; + } +} +.wrapper { + display: inline-flex; +} + +.wrapper .icon { + position: relative; + background-color: #ffffff; + border-radius: 50%; + padding: 15px; + margin: 10px; + width: 50px; + height: 50px; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip { + position: absolute; + top: 0; + font-size: 14px; + background-color: #ffffff; + color: #ffffff; + padding: 5px 8px; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + pointer-events: none; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip::before { + position: absolute; + content: ""; + height: 8px; + width: 8px; + background-color: #ffffff; + bottom: -3px; + left: 50%; + transform: translate(-50%) rotate(45deg); + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .icon:hover .tooltip { + top: -45px; + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.wrapper .icon:hover span, +.wrapper .icon:hover .tooltip { + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); +} + +.wrapper .facebook:hover, +.wrapper .facebook:hover .tooltip, +.wrapper .facebook:hover .tooltip::before { + background-color: #3b5999; + color: #ffffff; +} +.fa-twitter:before { + content: "\f099"; +} +.wrapper .twitter:hover, +.wrapper .twitter:hover .tooltip, +.wrapper .twitter:hover .tooltip::before { + background-color: #46c1f6; + color: #ffffff; +} + +.wrapper .instagram:hover, +.wrapper .instagram:hover .tooltip, +.wrapper .instagram:hover .tooltip::before { + background-color: #e1306c; + color: #ffffff; +} + +.wrapper .github:hover, +.wrapper .github:hover .tooltip, +.wrapper .github:hover .tooltip::before { + background-color: #333333; + color: #ffffff; +} + +.wrapper .youtube:hover, +.wrapper .youtube:hover .tooltip, +.wrapper .youtube:hover .tooltip::before { + background-color: #de463b; + color: #ffffff; +} +h3{ + color:rgba(0, 0, 0, 0.527); + align-self:center; +} +.icones{ + width: 18px; + margin-top: 3px; +} +/* main */ + +.sobre-nos { + font-size: 24px; + color: white; + padding: 12px; +} + +.banner-quem-somos { + display: flex; + background: linear-gradient(315deg, #F58B3B, white); + color: #532d01a1; + padding: 12px; + justify-content: center; + align-items: center; + +} + +.cultura { + display: flex; + background: linear-gradient(315deg, white, #eea56d); + color: #532d01a1; + padding: 12px; + justify-content: center; + align-items: center; + padding-left: 12px; +} + +.imagem-banner { + max-width: 20vw; + padding: 20 px; +} diff --git a/projeto/sobre/sobre.html b/projeto/sobre/sobre.html new file mode 100644 index 0000000..29cd087 --- /dev/null +++ b/projeto/sobre/sobre.html @@ -0,0 +1,119 @@ + + + + + + 4Food - Coma bem. Sem sair de casa + + + + + + +
+ +
+
+
+ +
+
+ + diversidade + +

+ Nós prezamos pelo diferente. +

+

+ Não existe diversidade gastronômica sem diversidade cultural. + No 4Food, prezamos pela pluralidade e representatividade +

+
+ +
+
+ + +
+ + Nossa cultura + +

+ O estilo de vida 4Food. +

+

+ O estilo 4Food é dinâmico, ágil atento aos detalhes e focado nos resultados. + Nossa maior preocupação é o serviço de qualidade e satisfação total do cliente. +

+
+
+
+
+ + + \ No newline at end of file