A Pen by Stephen O Orelus on CodePen.
Created
August 26, 2024 19:56
-
-
Save MATFASIL/f6f4522b866e07f6abf5d37d522373a8 to your computer and use it in GitHub Desktop.
Untitled
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Coin des saveurs</title> | |
| </head> | |
| <body> | |
| <div class="cabeca"> | |
| <div class="title"> | |
| <h4><span>Coin des saveurs</span> cardápio do dia</h4> | |
| </div> | |
| <div class="menu"> | |
| <div class="principal-menu"> | |
| <img src="https://i.pinimg.com/originals/73/72/75/7372755375207955155e10e76092c879.jpg" alt="Bannan bouyi ak poul"> | |
| <div class="menu-content"> | |
| <h4>Bannan bouyi ak poul <span>R$45</span></h4> | |
| <p class="paragrafo">Com Coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p> | |
| </div> | |
| </div> | |
| <div class="principal-menu"> | |
| <img src="https://i.pinimg.com/originals/0f/d7/69/0fd7692e609e36131a22844dbef47f29.jpg" alt="Diri ak legim ayisyen"> | |
| <div class="menu-content"> | |
| <h4>Diri ak legim ayisyen <span>R$45</span></h4> | |
| <p class="paragrafo">Com Coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p> | |
| </div> | |
| </div> | |
| <div class="principal-menu"> | |
| <img src="https://foreignfork.com/wp-content/uploads/2021/12/Haitian-Griot-Recipe-Featured-Image-1024x1024.jpg" alt="Fritay Ayisyen"> | |
| <div class="menu-content"> | |
| <h4>Fritay Ayisyen <span>R$45</span></h4> | |
| <p class="paragrafo">Com Coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p> | |
| </div> | |
| </div> | |
| <div class="principal-menu"> | |
| <img src="https://i.pinimg.com/originals/a3/b8/e6/a3b8e6fc818f5ceb2262ecae5d8fbaff.jpg" alt="Spageti ak ze zaboka"> | |
| <div class="menu-content"> | |
| <h4>Spageti ak ze zaboka <span>R$45</span></h4> | |
| <p class="paragrafo">Com Coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p> | |
| </div> | |
| </div> | |
| <div class="principal-menu"> | |
| <img src="https://i.pinimg.com/originals/d2/ae/8f/d2ae8f2123cbd41245e3e9ddba25dbdd.jpg" alt="Diri ak lalo ayisyen"> | |
| <div class="menu-content"> | |
| <h4>Diri ak lalo ayisyen <span>R$45</span></h4> | |
| <p class="paragrafo">Com Coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p> | |
| </div> | |
| </div> | |
| <div class="principal-menu"> | |
| <img src="https://i.pinimg.com/originals/04/20/ad/0420ad0f8ce4f5989ae58606b665f82e.jpg" alt="Tonmtonm haitien"> | |
| <div class="menu-content"> | |
| <h4>Tonmtonm haitien <span>R$45</span></h4> | |
| <p class="paragrafo">Com Coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="rodape"> | |
| <h4>@Todos os direitos reservados para o Ministério da Cultura Haitiana</h4> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Filtro Dinâmico para o Menu | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const searchInput = document.createElement('input'); | |
| searchInput.setAttribute('type', 'text'); | |
| searchInput.setAttribute('placeholder', 'Buscar no cardápio...'); | |
| searchInput.style.display = 'block'; | |
| searchInput.style.margin = '20px auto'; | |
| searchInput.style.width = '60%'; | |
| searchInput.style.padding = '10px'; | |
| searchInput.style.borderRadius = '5px'; | |
| searchInput.style.border = '1px solid #ddd'; | |
| const cabeca = document.querySelector('.cabeca'); | |
| cabeca.insertBefore(searchInput, cabeca.firstChild); | |
| searchInput.addEventListener('input', () => { | |
| const filter = searchInput.value.toLowerCase(); | |
| const menuItems = document.querySelectorAll('.principal-menu'); | |
| menuItems.forEach(item => { | |
| const itemName = item.querySelector('h4').textContent.toLowerCase(); | |
| if (itemName.includes(filter)) { | |
| item.style.display = ''; | |
| } else { | |
| item.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Animação de Rolagem Suave | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Mensagem de Boas-Vindas | |
| window.onload = function() { | |
| setTimeout(() => { | |
| alert('Bem-vindo ao Coin des saveurs! Aproveite nosso delicioso cardápio haitiano.'); | |
| }, 500); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #ff7720; | |
| } | |
| .cabeca { | |
| width: 1200px; | |
| margin: 100px auto; | |
| } | |
| .title { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| .title h4 { | |
| text-transform: capitalize; | |
| font-size: 36px; | |
| position: relative; | |
| display: inline-block; | |
| padding-bottom: 10px; | |
| } | |
| .title h4 span { | |
| display: block; | |
| font-size: 18px; | |
| font-style: italic; | |
| margin-bottom: 10px; | |
| } | |
| .title h4:before { | |
| position: absolute; | |
| content: ""; | |
| width: 100px; | |
| height: 2px; | |
| background-color: #ff7720; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .menu { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| } | |
| .principal-menu { | |
| flex-basis: 580px; | |
| margin-bottom: 40px; | |
| padding-bottom: 40px; | |
| border-bottom: 1px solid #ddd; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| } | |
| .principal-menu:nth-child(5), | |
| .principal-menu:nth-child(6) { | |
| border-bottom: 0; | |
| } | |
| .principal-menu:hover img { | |
| border-radius: 0; | |
| } | |
| .principal-menu img { | |
| max-width: 180px; | |
| margin-right: 30px; | |
| border-radius: 50%; | |
| border: 1px solid #ddd; | |
| padding: 3px; | |
| transition: .5s; | |
| } | |
| .principal-menu h4 { | |
| text-transform: capitalize; | |
| font-size: 22px; | |
| border-bottom: 1px dashed rgb(250, 250, 250); | |
| margin-bottom: 5px; | |
| padding-bottom: 5px; | |
| } | |
| .principal-menu h4 span { | |
| float: right; | |
| color: rgb(250, 250, 250); | |
| font-style: italic; | |
| } | |
| .rodape { | |
| text-align: center; | |
| margin-top: 50px; | |
| color: rgb(250, 250, 250); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment