future4code · MirandaFayra · Aug 27, 2021 · Aug 27, 2021 · Aug 27, 2021 · Aug 30, 2021
diff --git a/4Food-png/1.png b/4Food-png/1.png
diff --git a/4Food-png/2.png b/4Food-png/2.png
diff --git a/4Food-png/3.png b/4Food-png/3.png
diff --git a/4Food-png/4.png b/4Food-png/4.png
diff --git a/4Food-png/5.png b/4Food-png/5.png
diff --git a/4Food-png/Pagina em construção!.mp4 b/4Food-png/Pagina em construção!.mp4
diff --git a/4Food/1.jpg b/4Food/1.jpg
diff --git a/4Food/2.jpg b/4Food/2.jpg
diff --git a/4Food/3.jpg b/4Food/3.jpg
diff --git a/4food-gif/1.gif b/4food-gif/1.gif
diff --git a/4food-gif/2.gif b/4food-gif/2.gif
diff --git a/4food-gif/3.gif b/4food-gif/3.gif
diff --git a/4food-gif/4.gif b/4food-gif/4.gif
diff --git a/4food-gif/5.gif b/4food-gif/5.gif
diff --git 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
diff --git a/cartoes/10.png b/cartoes/10.png
diff --git a/cartoes/11.png b/cartoes/11.png
diff --git a/cartoes/2.png b/cartoes/2.png
diff --git a/cartoes/3.png b/cartoes/3.png
diff --git a/cartoes/4.png b/cartoes/4.png
diff --git a/cartoes/5.png b/cartoes/5.png
diff --git a/cartoes/6.png b/cartoes/6.png
diff --git a/cartoes/7.png b/cartoes/7.png
diff --git a/cartoes/8.png b/cartoes/8.png
diff --git a/cartoes/9.png b/cartoes/9.png
diff --git a/img/1.png b/img/1.png
diff --git a/img/4Food (1).png b/img/4Food (1).png
diff --git a/img/4Food.png b/img/4Food.png
diff --git a/img/4food-branco.png b/img/4food-branco.png
diff --git a/img/8000.png b/img/8000.png
diff --git a/img/Sandwich.jpeg b/img/Sandwich.jpeg
diff --git a/img/Spaghetti.jpeg b/img/Spaghetti.jpeg
diff --git a/img/VIDEO.mp4 b/img/VIDEO.mp4
diff --git a/img/angus.jpg b/img/angus.jpg
diff --git a/img/assai.png b/img/assai.png
diff --git a/img/bh.png b/img/bh.png
diff --git a/img/brusqueta.jpg b/img/brusqueta.jpg
diff --git a/img/burger.jpg b/img/burger.jpg
diff --git a/img/cafemanha.jpg b/img/cafemanha.jpg
diff --git a/img/carrefour.png b/img/carrefour.png
diff --git a/img/chicken.jpeg b/img/chicken.jpeg
diff --git a/img/combocerveja.jpg b/img/combocerveja.jpg
diff --git a/img/combosmercado.jpeg b/img/combosmercado.jpeg
diff --git a/img/comerjunto.jpeg b/img/comerjunto.jpeg
diff --git a/img/dia.png b/img/dia.png
diff --git a/img/diadasmaes.jpg b/img/diadasmaes.jpg
diff --git a/img/extra.png b/img/extra.png
diff --git a/img/facebook.png b/img/facebook.png
diff --git a/img/frutos-do-mar.jpg b/img/frutos-do-mar.jpg
diff --git a/img/gpa.png b/img/gpa.png
diff --git a/img/happyhour.jpg b/img/happyhour.jpg
diff --git a/img/instagram.png b/img/instagram.png
diff --git a/img/lanchetarde.jpg b/img/lanchetarde.jpg
diff --git a/img/lupa.png b/img/lupa.png
diff --git a/img/massas-frutos-do-mar.jpg b/img/massas-frutos-do-mar.jpg
diff --git a/img/mateus.png b/img/mateus.png
diff --git a/img/paraopet.jpg b/img/paraopet.jpg
diff --git a/img/primeira-compra.png b/img/primeira-compra.png
diff --git a/img/readme-2.png b/img/readme-2.png
diff --git a/img/readme-3.png b/img/readme-3.png
diff --git a/img/readme-4.png b/img/readme-4.png
diff --git a/img/readme-5.png b/img/readme-5.png
diff --git a/img/readme-6.png b/img/readme-6.png
diff --git a/img/readme-7.png b/img/readme-7.png
diff --git a/img/readme-responsive-1.png b/img/readme-responsive-1.png
diff --git a/img/readme-responsive-2.png b/img/readme-responsive-2.png
diff --git a/img/readme-responsive-3.png b/img/readme-responsive-3.png
diff --git a/img/readme-responsive-4.png b/img/readme-responsive-4.png
diff --git a/img/readme.png b/img/readme.png
diff --git a/img/restaurantesselecionados.jpg b/img/restaurantesselecionados.jpg
diff --git a/img/salmon.jpeg b/img/salmon.jpeg
diff --git a/img/soup.jpeg b/img/soup.jpeg
diff --git a/img/steak-tartare.jpg b/img/steak-tartare.jpg
diff --git a/img/supernosso.jpg b/img/supernosso.jpg
diff --git a/img/sushi.jpg b/img/sushi.jpg
diff --git a/img/torresmo.jpg b/img/torresmo.jpg
diff --git a/img/twitter.png b/img/twitter.png
diff --git a/img/walmart.png b/img/walmart.png
diff --git a/img/youtube.png b/img/youtube.png
diff --git a/index.html b/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type= "text/css" href="/projeto/home/home.css">
+    <link rel="shortcut icon" href="/img/4food-branco.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title>4Food - Coma bem. Sem sair de casa</title>
+</head>
+<body>
+    <header>
+        <nav>
+            <input type="checkbox" id="chk"/>
+            <label for="chk" class="bars"> 
+                <i class="fa fa-bars"></i>
+            </label>
+        <img class="brand" src="/img/4Food (1).png">
+        <ul>
+            <li><a href="/index.html">PAGINA INICIAL</a></li>
+            <li><a href="/projeto/restaurantes/restaurante.html">RESTAURANTES</a></li>
+            <li><a href="/projeto/mercados/mercados.html">MERCADOS</a></li>
+            <li><a href="/projeto/contato/contato.html">CONTATO</a></li>
+            <li><a href="/projeto/cupom/cupom.html">CUPONS</a></li> 
+            <li><a href="/projeto/sobre/sobre.html">SOBRE</a></li>
+        </ul>
+        </nav>
+    </header>
+    <main>
+        <div class="slider">
+            <div class="slide current">
+
+            </div>
+            <div class="slide">
+
+            </div>
+            <div class="slide">
+
+            </div>
+            <div class="slide">
+
+            </div>
+            <div class="slide">
+            </div>
+          </div>
+          <div class="buttons">
+            <button id="prev">◂</button>
+            <button id="next">▸</button>
+          </div>
+          <script>
+            const slides = document.querySelectorAll('.slide');
+            const next = document.querySelector('#next');
+            const prev = document.querySelector('#prev');
+            const auto = false; // Auto scroll
+            const intervalTime = 5000;
+            let slideInterval;
+
+            const nextSlide = () => {
+            // Get current class
+            const current = document.querySelector('.current');
+            // Remove current class
+            current.classList.remove('current');
+            // Check for next slide
+            if (current.nextElementSibling) {
+                // Add current to next sibling
+                current.nextElementSibling.classList.add('current');
+            } else {
+                // Add current to start
+                slides[0].classList.add('current');
+            }
+            setTimeout(() => current.classList.remove('current'));
+            };
+
+            const prevSlide = () => {
+            // Get current class
+            const current = document.querySelector('.current');
+            // Remove current class
+            current.classList.remove('current');
+            // Check for prev slide
+            if (current.previousElementSibling) {
+                // Add current to prev sibling
+                current.previousElementSibling.classList.add('current');
+            } else {
+                // Add current to last
+                slides[slides.length - 1].classList.add('current');
+            }
+            setTimeout(() => current.classList.remove('current'));
+            };
+
+            // Button events
+            next.addEventListener('click', e => {
+            nextSlide();
+            if (auto) {
+                clearInterval(slideInterval);
+                slideInterval = setInterval(nextSlide, intervalTime);
+            }
+            });
+
+            prev.addEventListener('click', e => {
+            prevSlide();
+            if (auto) {
+                clearInterval(slideInterval);
+                slideInterval = setInterval(nextSlide, intervalTime);
+            }
+            });
+
+            // Auto slide
+            if (auto) {
+            // Run next slide at interval time
+            slideInterval = setInterval(nextSlide, intervalTime);
+            }
+        </script>
+    </main>
+  <footer>
+    <div class="wrapper">
+        <div  class="icon facebook">
+            <div class="tooltip">Facebook</div>
+            <span><a target="_blank" href="https://www.facebook.com"><img class="icones" src="/img/facebook.png"></a></span>
+        </div>
+        <div class="icon twitter">
+            <div class="tooltip">Twitter</div>
+            <span><a target="_blank" href="https://twitter.com/home"><img class="icones" src="/img/twitter.png"></a></span>
+        </div>
+        <div class="icon instagram">
+            <div class="tooltip">Instagram</div>
+            <span><a target="_blank" href="https://www.instagram.com"><img class="icones" src="/img/instagram.png"><link href="www.instagram.com"></a></span>
+        </div>
+        <div class="icon youtube">
+            <div class="tooltip">Youtube</div>
+            <span><a target="_blank" href="https://www.youtube.com"><img class="icones" src="/img/youtube.png"></a></span>
+        </div>
+      </div>
+    <div>
+        <h3 class="metodo">© 2021 por 4Food. feito com 💙 e CSS.</h3>
+    </div>
+    <div>
+        <h3 class="metodo">Métodos de Pagamento</h3>
+    </div>
+    <div>
+        <img class="cartoes"src ="/cartoes/1.png">
+        <img class="cartoes" src ="/cartoes/2.png">
+        <img class="cartoes" src ="/cartoes/3.png">
+        <img class="cartoes" src ="/cartoes/4.png">
+        <img class="cartoes" src ="/cartoes/5.png">
+        <img class="cartoes" src ="/cartoes/6.png">
+        <img class="cartoes" src = "/cartoes/7.png">
+        <img class="cartoes" src = "/cartoes/8.png">
+        <img class="cartoes" src = "/cartoes/9.png">
+        <img class="cartoes" src = "/cartoes/10.png">
+    </div>
+  </footer>
+</body>
+</html>
diff --git a/mobile-version-4Food-png/mobile-version-4Food-1.gif b/mobile-version-4Food-png/mobile-version-4Food-1.gif
diff --git a/mobile-version-4Food-png/mobile-version-4Food-2.gif b/mobile-version-4Food-png/mobile-version-4Food-2.gif
diff --git a/mobile-version-4Food-png/mobile-version-4Food-3.gif b/mobile-version-4Food-png/mobile-version-4Food-3.gif
diff --git a/mobile-version-4Food-png/mobile-version-4Food-4.gif b/mobile-version-4Food-png/mobile-version-4Food-4.gif
diff --git a/mobile-version-4Food-png/mobile-version-4Food-5.gif b/mobile-version-4Food-png/mobile-version-4Food-5.gif