├── src
    ├── images
    │   ├── avatar.png
    │   ├── chef.png
    │   ├── dish.png
    │   ├── dish2.png
    │   ├── dish3.png
    │   ├── dish4.png
    │   ├── hero.png
    │   └── wave.svg
    ├── styles
    │   ├── footer.css
    │   ├── header.css
    │   ├── menu.css
    │   ├── testimonials.css
    │   ├── home.css
    │   └── styles.css
    └── javascript
    │   └── script.js
├── README.md
└── index.html


/src/images/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/landing-page-food-theme/HEAD/src/images/avatar.png


--------------------------------------------------------------------------------
/src/images/chef.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/landing-page-food-theme/HEAD/src/images/chef.png


--------------------------------------------------------------------------------
/src/images/dish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/landing-page-food-theme/HEAD/src/images/dish.png


--------------------------------------------------------------------------------
/src/images/dish2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/landing-page-food-theme/HEAD/src/images/dish2.png


--------------------------------------------------------------------------------
/src/images/dish3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/landing-page-food-theme/HEAD/src/images/dish3.png


--------------------------------------------------------------------------------
/src/images/dish4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/landing-page-food-theme/HEAD/src/images/dish4.png


--------------------------------------------------------------------------------
/src/images/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/landing-page-food-theme/HEAD/src/images/hero.png


--------------------------------------------------------------------------------
/src/styles/footer.css:
--------------------------------------------------------------------------------
 1 | footer {
 2 |     background-color: var(--color-primary-2);
 3 | }
 4 | 
 5 | #footer_items {
 6 |     display: flex;
 7 |     justify-content: space-between;
 8 |     padding: 0px 8% 24px 8%;
 9 |     align-items: center;
10 | }
11 | 
12 | #copyright {
13 |     color: var(--color-neutral-1);;
14 |     font-weight: 500;
15 | }
16 | 
17 | @media screen and (max-width: 600px) {
18 |     #footer_items {
19 |         flex-direction: column;
20 |         gap: 20px;
21 |     }
22 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🍔 Landing Page
 2 | 
 3 | Uma landing page responsiva com tema de restaurante, construída com HTML, CSS e JavaScript. Este projeto apresenta um design limpo com animações suaves.
 4 | 
 5 | ## 🌐 Visualize o projeto:
 6 | 
 7 | **[Ver Projeto Online](https://larissakich.github.io/landing-page-food-theme/)**
 8 | 
 9 | ## 🛠️ Tecnologias Utilizadas
10 | 
11 | - **HTML5**: Marcação semântica
12 | - **CSS3**: Estilização
13 | - **JavaScript**: Funcionalidade interativa
14 | - **jQuery**: Manipulação DOM e manipulação de eventos
15 | - **ScrollReveal**: Animações de scroll
16 | - **Font Awesome**: Ícones
17 | - **Google Fonts**: Fontes
18 | 
19 | ## 🚀 Como Começar
20 | 
21 | 1. Clone ou baixe os arquivos do projeto
22 | 2. Abra o arquivo `index.html` no seu navegador
23 | 3. Não é necessária configuração adicional - todas as dependências são carregadas via CDN
24 | 


--------------------------------------------------------------------------------
/src/images/wave.svg:
--------------------------------------------------------------------------------
1 | <svg id="wave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 90" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(255, 249, 234, 1)" offset="0%"></stop><stop stop-color="rgba(255, 249, 234, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,90L48,81.7C96,73,192,57,288,51.7C384,47,480,53,576,58.3C672,63,768,67,864,66.7C960,67,1056,63,1152,55C1248,47,1344,33,1440,28.3C1536,23,1632,27,1728,35C1824,43,1920,57,2016,56.7C2112,57,2208,43,2304,46.7C2400,50,2496,70,2592,65C2688,60,2784,30,2880,15C2976,0,3072,0,3168,3.3C3264,7,3360,13,3456,28.3C3552,43,3648,67,3744,75C3840,83,3936,77,4032,68.3C4128,60,4224,50,4320,48.3C4416,47,4512,53,4608,61.7C4704,70,4800,80,4896,85C4992,90,5088,90,5184,88.3C5280,87,5376,83,5472,83.3C5568,83,5664,87,5760,86.7C5856,87,5952,83,6048,71.7C6144,60,6240,40,6336,33.3C6432,27,6528,33,6624,38.3C6720,43,6816,47,6864,48.3L6912,50L6912,100L6864,100C6816,100,6720,100,6624,100C6528,100,6432,100,6336,100C6240,100,6144,100,6048,100C5952,100,5856,100,5760,100C5664,100,5568,100,5472,100C5376,100,5280,100,5184,100C5088,100,4992,100,4896,100C4800,100,4704,100,4608,100C4512,100,4416,100,4320,100C4224,100,4128,100,4032,100C3936,100,3840,100,3744,100C3648,100,3552,100,3456,100C3360,100,3264,100,3168,100C3072,100,2976,100,2880,100C2784,100,2688,100,2592,100C2496,100,2400,100,2304,100C2208,100,2112,100,2016,100C1920,100,1824,100,1728,100C1632,100,1536,100,1440,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z"></path></svg>


--------------------------------------------------------------------------------
/src/styles/header.css:
--------------------------------------------------------------------------------
 1 | header {
 2 |     width: 100%;
 3 |     padding: 28px 8%;
 4 |     position: sticky;
 5 |     top: 0;
 6 |     background-color: var(--color-primary-1);
 7 |     z-index: 3;
 8 | }
 9 | 
10 | #navbar {
11 |     width: 100%;
12 |     display: flex;
13 |     align-items: center;
14 |     justify-content: space-between;
15 | }
16 | 
17 | #nav_logo {
18 |     font-size: 24px;
19 |     color: var(--color-primary-6);
20 | }
21 | 
22 | #nav_list {
23 |     display: flex;
24 |     list-style: none;
25 |     gap: 48px;
26 | }
27 | 
28 | .nav-item a {
29 |     text-decoration: none;
30 |     color: #1d1d1dad;
31 |     font-weight: 600;
32 | }
33 | 
34 | .nav-item.active a {
35 |     color: var(--color-neutral-1);
36 |     border-bottom: 3px solid var(--color-primary-4);
37 | }
38 | 
39 | #mobile_btn {
40 |     display: none;
41 | }
42 | 
43 | #mobile_menu {
44 |     display: none;
45 | }
46 | 
47 | @media screen and (max-width: 1170px) {
48 |     #nav_list,
49 |     #navbar .btn-default {
50 |         display: none;
51 |     }
52 | 
53 |     #mobile_btn {
54 |         display: block;
55 |         border: none;
56 |         background-color: transparent;
57 |         font-size: 1.5rem;
58 |         cursor: pointer;
59 |     }
60 | 
61 |     #mobile_menu.active {
62 |         display: flex;
63 |         flex-direction: column;
64 |         align-items: center;
65 |     }
66 | 
67 |     #mobile_nav_list {
68 |         display: flex;
69 |         flex-direction: column;
70 |         gap: 12px;
71 |         margin: 12px 0px;
72 |     }
73 | 
74 |     #mobile_nav_list .nav-item {
75 |         list-style: none;
76 |         text-align: center;
77 |     } 
78 | }


--------------------------------------------------------------------------------
/src/styles/menu.css:
--------------------------------------------------------------------------------
 1 | #menu {
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     min-height: 100vh;
 7 | }
 8 | 
 9 | #dishes {
10 |     width: 100%;
11 |     display: flex;
12 |     justify-content: center;
13 |     gap: 24px;
14 |     margin-top: 32px;
15 | }
16 | 
17 | .dish {
18 |     display: flex;
19 |     flex-direction: column;
20 |     align-items: center;
21 |     border-radius: 20px;
22 |     gap: 18px;
23 |     width: 25%;
24 |     padding: 20px;
25 |     background-color: var(--color-neutral-0);
26 |     box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, 0.1);
27 |     position: relative;
28 |     overflow: hidden;
29 | }
30 | 
31 | .dish-heart {
32 |     position: absolute;
33 |     background-color: var(--color-primary-6);
34 |     display: flex;
35 |     align-items: center;
36 |     justify-content: center;
37 |     font-size: 1.563rem;
38 |     color: var(--color-primary-1);
39 |     width: 70px;
40 |     height: 70px;
41 |     right: -10px;
42 |     top: -10px;
43 |     border-radius: 0px 37.5px 0px 42.5px;
44 | }
45 | 
46 | .dish-description {
47 |     color: #434343;
48 |     text-align: center;
49 | }
50 | 
51 | .dish-rate i {
52 |     color: var(--color-primary-6);
53 | }
54 | 
55 | .dish-price {
56 |     display: flex;
57 |     align-items: center;
58 |     gap: 20px;
59 | }
60 | 
61 | @media screen and (max-width: 1170px) {
62 |     #dishes {
63 |         flex-wrap: wrap;
64 |         justify-content: center;
65 |     }
66 | 
67 |     .dish {
68 |         width: calc(50% - 12px);
69 |     }
70 | }
71 | 
72 | @media screen and (max-width: 600px) {
73 |     .dish {
74 |         width: 100%;
75 |     }
76 | 
77 |     #menu .section-subtitle {
78 |         text-align: center;
79 |     }
80 | } 


--------------------------------------------------------------------------------
/src/javascript/script.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function() {
 2 |     $('#mobile_btn').on('click', function () {
 3 |         $('#mobile_menu').toggleClass('active');
 4 |         $('#mobile_btn').find('i').toggleClass('fa-x');
 5 |     });
 6 | 
 7 |     const sections = $('section');
 8 |     const navItems = $('.nav-item');
 9 | 
10 |     $(window).on('scroll', function () {
11 |         const header = $('header');
12 |         const scrollPosition = $(window).scrollTop() - header.outerHeight();
13 | 
14 |         let activeSectionIndex = 0;
15 | 
16 |         if (scrollPosition <= 0) {
17 |             header.css('box-shadow', 'none');
18 |         } else {
19 |             header.css('box-shadow', '5px 1px 5px rgba(0, 0, 0, 0.1');
20 |         }
21 | 
22 |         sections.each(function(i) {
23 |             const section = $(this);
24 |             const sectionTop = section.offset().top - 96;
25 |             const sectionBottom = sectionTop+ section.outerHeight();
26 | 
27 |             if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
28 |                 activeSectionIndex = i;
29 |                 return false;
30 |             }
31 |         })
32 | 
33 |         navItems.removeClass('active');
34 |         $(navItems[activeSectionIndex]).addClass('active');
35 |     });
36 | 
37 |     ScrollReveal().reveal('#cta', {
38 |         origin: 'left',
39 |         duration: 2000,
40 |         distance: '20%'
41 |     });
42 | 
43 |     ScrollReveal().reveal('.dish', {
44 |         origin: 'left',
45 |         duration: 2000,
46 |         distance: '20%'
47 |     });
48 | 
49 |     ScrollReveal().reveal('#testimonial_chef', {
50 |         origin: 'left',
51 |         duration: 1000,
52 |         distance: '20%'
53 |     })
54 | 
55 |     ScrollReveal().reveal('.feedback', {
56 |         origin: 'right',
57 |         duration: 1000,
58 |         distance: '20%'
59 |     })
60 | });


--------------------------------------------------------------------------------
/src/styles/testimonials.css:
--------------------------------------------------------------------------------
 1 | #testimonials {
 2 |     min-height: calc(100vh - 91px);
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     gap: 48px;
 7 | }
 8 | 
 9 | #testimonial_chef {
10 |     width: 500px;
11 |     height: auto;
12 | }
13 | 
14 | #testimonials .section-subtitle {
15 |     font-size: 3rem;
16 | }
17 | 
18 | #testimonials_content {
19 |     width: 50%;
20 | }
21 | 
22 | #feedbacks {
23 |     display: flex;
24 |     flex-direction: column;
25 |     gap: 20px;
26 |     margin-bottom: 40px;
27 |     margin-top: 30px;
28 | }
29 | 
30 | .feedback {
31 |     display: flex;
32 |     align-items: center;
33 |     gap: 20px;
34 |     background-color: var(--color-neutral-0);
35 |     padding: 12px;
36 |     border-radius: 12px;
37 |     box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, 0.1);
38 | }
39 | 
40 | .feedback-avatar {
41 |     width: 100px;
42 |     height: 100px;
43 |     border-radius: 100%;
44 |     object-fit: cover;
45 | }
46 | 
47 | .feedback-content p {
48 |     display: flex;
49 |     justify-content: space-between;
50 | }
51 | 
52 | .feedback-content p span {
53 |     color: var(--color-primary-6);
54 | }
55 | 
56 | @media screen and (max-width: 1170px) {
57 |     #testimonials {
58 |         flex-direction: column;
59 |     }
60 | 
61 |     #testimonials .section-subtitle {
62 |         text-align: center;
63 |         font-size: 2.5rem;
64 |     }
65 | 
66 |     #testimonial_chef {
67 |         display: none;
68 |     }
69 | 
70 |     #testimonials_content {
71 |         width: 70%;
72 |         display: flex;
73 |         flex-direction: column;
74 |         align-items: center;
75 |     }
76 | }
77 | 
78 | @media screen and (max-width: 600px) {
79 |     #testimonials .section-subtitle {
80 |         font-size: 2rem;
81 |     }
82 | 
83 |     #testimonials_content {
84 |         width: 100%;
85 |     }
86 | 
87 |     .feedback {
88 |         flex-direction: column;
89 |     }
90 | } 


--------------------------------------------------------------------------------
/src/styles/home.css:
--------------------------------------------------------------------------------
  1 | #home {
  2 |     display: flex;
  3 |     min-height: calc(100vh - 91px);
  4 |     position: relative;
  5 | }
  6 | 
  7 | #cta {
  8 |     width: 35%;
  9 |     display: flex;
 10 |     flex-direction: column;
 11 |     gap: 28px;
 12 |     margin-top: 5%;
 13 | }
 14 | 
 15 | #cta .title {
 16 |     font-size: 4rem;
 17 |     color: var(--color-neutral-1);;
 18 | }
 19 | 
 20 | #cta .title span {
 21 |     color: var(--color-primary-6);
 22 | }
 23 | 
 24 | #cta .description {
 25 |     font-size: 1.2rem;
 26 | }
 27 | 
 28 | #cta_buttons {
 29 |     display: flex;
 30 |     gap: 24px;
 31 | }
 32 | 
 33 | #cta_buttons a {
 34 |     text-decoration: none;
 35 |     color: var(--color-neutral-1);;
 36 | }
 37 | 
 38 | #phone_button {
 39 |     display: flex;
 40 |     gap: 8px;
 41 |     align-items: center;
 42 |     background-color: #ffffff;
 43 |     padding: 8px 14px;
 44 |     font-weight: 500;
 45 |     box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, 0.1);
 46 |     border-radius: 12px;
 47 | }
 48 | 
 49 | #phone_button button {
 50 |     box-shadow: none;
 51 | }
 52 | 
 53 | #banner {
 54 |     display: flex;
 55 |     align-items: start;
 56 |     justify-content: end;
 57 |     width: 70%;
 58 |     z-index: 2;
 59 | }
 60 | 
 61 | #banner img {
 62 |     height: 100%;
 63 |     width: fit-content;
 64 | }
 65 | 
 66 | .shape {
 67 |     background-color: var(--color-primary-2);
 68 |     width: 50%;
 69 |     height: 100%;
 70 |     position: absolute;
 71 |     border-radius: 40% 30% 0% 20%;
 72 |     top: 0;
 73 |     right: 0;
 74 |     z-index: 1;
 75 | }
 76 | 
 77 | @media screen and (max-width: 1170px) {
 78 |     #home {
 79 |         min-height: 100%;
 80 |         padding-top: 0px;
 81 |     }
 82 | 
 83 |     #banner,
 84 |     #banner img,
 85 |     #home .shape {
 86 |         display: none;
 87 |     }
 88 | 
 89 |     #cta {
 90 |         width: 100%;
 91 |         text-align: center;
 92 |         align-items: center;
 93 |     }
 94 | }
 95 | 
 96 | @media screen and (max-width: 450px) {
 97 |     #phone_button button {
 98 |         display: none;
 99 |     }
100 | }


--------------------------------------------------------------------------------
/src/styles/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 2 | @import url('header.css');
 3 | @import url('home.css');
 4 | @import url('menu.css');
 5 | @import url('testimonials.css');
 6 | @import url('footer.css');
 7 | 
 8 | :root {
 9 |     --color-primary-1: #fff9ea;
10 |     --color-primary-2: #ffe8b4;
11 |     --color-primary-3: #f8d477;
12 |     --color-primary-4: #ffe100;
13 |     --color-primary-5: #ffcb45;
14 |     --color-primary-6: #e9a209;
15 | 
16 |     --color-neutral-0: #fff;
17 |     --color-neutral-1: #1d1d1d;
18 | }
19 | 
20 | * {
21 |     font-family: 'Poppins', sans-serif;
22 |     margin: 0;
23 |     padding: 0;
24 |     box-sizing: border-box;
25 | }
26 | 
27 | html {
28 |     scroll-behavior: smooth;
29 | }
30 | 
31 | body {
32 |     background-color: var(--color-primary-1);
33 | }
34 | 
35 | section {
36 |     padding: 28px 8%;
37 | }
38 | 
39 | .btn-default {
40 |     border: none;
41 |     display: flex;
42 |     align-items: center;
43 |     justify-content: center;
44 |     background-color: var(--color-primary-5);
45 |     border-radius: 12px;
46 |     padding: 10px 14px;
47 |     font-weight: 600;
48 |     box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
49 |     cursor: pointer;
50 |     transition: background-color .3s ease;
51 | }
52 | 
53 | .btn-default:hover {
54 |     background-color: var(--color-primary-3);
55 | }
56 | 
57 | .social-media-buttons {
58 |     display: flex;
59 |     gap: 18px;
60 | }
61 | 
62 | .social-media-buttons a {
63 |     display: flex;
64 |     align-items: center;
65 |     justify-content: center;
66 |     width: 45px;
67 |     height: 40px;
68 |     background-color: var(--color-neutral-0);
69 |     font-size: 1.25rem;
70 |     border-radius: 10px;
71 |     text-decoration: none;
72 |     color: var(--color-neutral-1);;
73 |     box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, 0.1);
74 |     transition: box-shadow .3s ease;
75 | }
76 | 
77 | .social-media-buttons a:hover {
78 |     box-shadow: 0px 0px 12px 8px rgba(0, 0, 0, 0.1);
79 | }
80 | 
81 | .section-title {
82 |     color: var(--color-primary-6);
83 |     font-size: 1.563rem;
84 | }
85 | 
86 | .section-subtitle {
87 |     font-size: 2.1875rem;
88 | } 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  7 |     <link rel="stylesheet" href="src/styles/styles.css">
  8 | 
  9 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 10 |     <script src="https://unpkg.com/scrollreveal"></script>
 11 |     <title>Landing page</title>
 12 | </head>
 13 | <body>
 14 |     <header>
 15 |         <nav id="navbar">
 16 |             <i class="fa-solid fa-burger" id="nav_logo"> food</i>
 17 | 
 18 |             <ul id="nav_list">
 19 |                 <li class="nav-item active">
 20 |                     <a href="#home">Início</a>
 21 |                 </li>
 22 |                 <li class="nav-item">
 23 |                     <a href="#menu">Cardápio</a>
 24 |                 </li>
 25 |                 <li class="nav-item">
 26 |                     <a href="#testimonials">Avaliações</a>
 27 |                 </li>
 28 |             </ul>
 29 | 
 30 |             <button class="btn-default">
 31 |                 Peça aqui
 32 |             </button>
 33 | 
 34 |             <button id="mobile_btn">
 35 |                 <i class="fa-solid fa-bars"></i>
 36 |             </button>
 37 |         </nav>
 38 | 
 39 |         <div id="mobile_menu">
 40 |             <ul id="mobile_nav_list">
 41 |                 <li class="nav-item">
 42 |                     <a href="#home">Início</a>
 43 |                 </li>
 44 |                 <li class="nav-item">
 45 |                     <a href="#menu">Cardápio</a>
 46 |                 </li>
 47 |                 <li class="nav-item">
 48 |                     <a href="#testimonials">Avaliações</a>
 49 |                 </li>
 50 |             </ul>
 51 | 
 52 |             <button class="btn-default">
 53 |                 Peça aqui
 54 |             </button>
 55 |         </div>
 56 |     </header>
 57 | 
 58 |     <main id="content">
 59 |         <section id="home">
 60 |             <div class="shape"></div>
 61 |             <div id="cta">
 62 |                 <h1 class="title">
 63 |                     O sabor que vai até
 64 |                     <span>você</span>
 65 |                 </h1>
 66 | 
 67 |                 <p class="description">
 68 |                     Lorem ipsum dolor sit amet, consectetur 
 69 |                     adipiscing elit ut aliquam, purus sit amet
 70 |                 </p>
 71 | 
 72 |                 <div id="cta_buttons">
 73 |                     <a href="#" class="btn-default">
 74 |                         Ver cardápio
 75 |                     </a>
 76 | 
 77 |                     <a href="tel:+55555555555" id="phone_button">
 78 |                         <button class="btn-default">
 79 |                             <i class="fa-solid fa-phone"></i>
 80 |                         </button>
 81 |                         (51) 92342-3243
 82 |                     </a>
 83 |                 </div>
 84 | 
 85 |                 <div class="social-media-buttons">
 86 |                     <a href="">
 87 |                         <i class="fa-brands fa-whatsapp"></i>
 88 |                     </a>
 89 | 
 90 |                     <a href="">
 91 |                         <i class="fa-brands fa-instagram"></i>
 92 |                     </a>
 93 | 
 94 |                     <a href="">
 95 |                         <i class="fa-brands fa-facebook"></i>
 96 |                     </a>
 97 |                 </div>
 98 |             </div>
 99 | 
100 |             <div id="banner">
101 |                 <img src="src/images/hero.png" alt="">
102 |             </div>
103 |         </section>
104 | 
105 |         <section id="menu">
106 |             <h2 class="section-title">Cardápio</h2>
107 |             <h3 class="section-subtitle">Nossos pratos especiais</h3>
108 | 
109 |             <div id="dishes">
110 |                 <div class="dish">
111 |                     <div class="dish-heart">
112 |                         <i class="fa-solid fa-heart"></i>
113 |                     </div>
114 | 
115 |                     <img src="src/images/dish.png" class="dish-image" alt="">
116 | 
117 |                     <h3 class="dish-title">
118 |                         Lorem Ipsum
119 |                     </h3>
120 | 
121 |                     <span class="dish-description">
122 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
123 |                     </span>
124 | 
125 |                     <div class="dish-rate">
126 |                         <i class="fa-solid fa-star"></i>
127 |                         <i class="fa-solid fa-star"></i>
128 |                         <i class="fa-solid fa-star"></i>
129 |                         <i class="fa-solid fa-star"></i>
130 |                         <i class="fa-solid fa-star"></i>
131 |                         <span>(500+)</span>
132 |                     </div>
133 | 
134 |                     <div class="dish-price">
135 |                         <h4>R$20,00</h4>
136 |                         <button class="btn-default">
137 |                             <i class="fa-solid fa-basket-shopping"></i>
138 |                         </button>
139 |                     </div>
140 |                 </div>
141 | 
142 |                 <div class="dish">
143 |                     <div class="dish-heart">
144 |                         <i class="fa-solid fa-heart"></i>
145 |                     </div>
146 | 
147 |                     <img src="src/images/dish2.png" class="dish-image" alt="">
148 | 
149 |                     <h3 class="dish-title">
150 |                         Lorem Ipsum
151 |                     </h3>
152 | 
153 |                     <span class="dish-description">
154 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
155 |                     </span>
156 | 
157 |                     <div class="dish-rate">
158 |                         <i class="fa-solid fa-star"></i>
159 |                         <i class="fa-solid fa-star"></i>
160 |                         <i class="fa-solid fa-star"></i>
161 |                         <i class="fa-solid fa-star"></i>
162 |                         <i class="fa-solid fa-star"></i>
163 |                         <span>(500+)</span>
164 |                     </div>
165 | 
166 |                     <div class="dish-price">
167 |                         <h4>R$20,00</h4>
168 |                         <button class="btn-default">
169 |                             <i class="fa-solid fa-basket-shopping"></i>
170 |                         </button>
171 |                     </div>
172 |                 </div>
173 | 
174 |                 <div class="dish">
175 |                     <div class="dish-heart">
176 |                         <i class="fa-solid fa-heart"></i>
177 |                     </div>
178 | 
179 |                     <img src="src/images/dish3.png" class="dish-image" alt="">
180 | 
181 |                     <h3 class="dish-title">
182 |                         Lorem Ipsum
183 |                     </h3>
184 | 
185 |                     <span class="dish-description">
186 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
187 |                     </span>
188 | 
189 |                     <div class="dish-rate">
190 |                         <i class="fa-solid fa-star"></i>
191 |                         <i class="fa-solid fa-star"></i>
192 |                         <i class="fa-solid fa-star"></i>
193 |                         <i class="fa-solid fa-star"></i>
194 |                         <i class="fa-solid fa-star"></i>
195 |                         <span>(500+)</span>
196 |                     </div>
197 | 
198 |                     <div class="dish-price">
199 |                         <h4>R$20,00</h4>
200 |                         <button class="btn-default">
201 |                             <i class="fa-solid fa-basket-shopping"></i>
202 |                         </button>
203 |                     </div>
204 |                 </div>
205 | 
206 |                 <div class="dish">
207 |                     <div class="dish-heart">
208 |                         <i class="fa-solid fa-heart"></i>
209 |                     </div>
210 | 
211 |                     <img src="src/images/dish4.png" class="dish-image" alt="">
212 | 
213 |                     <h3 class="dish-title">
214 |                         Lorem Ipsum
215 |                     </h3>
216 | 
217 |                     <span class="dish-description">
218 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
219 |                     </span>
220 | 
221 |                     <div class="dish-rate">
222 |                         <i class="fa-solid fa-star"></i>
223 |                         <i class="fa-solid fa-star"></i>
224 |                         <i class="fa-solid fa-star"></i>
225 |                         <i class="fa-solid fa-star"></i>
226 |                         <i class="fa-solid fa-star"></i>
227 |                         <span>(500+)</span>
228 |                     </div>
229 | 
230 |                     <div class="dish-price">
231 |                         <h4>R$20,00</h4>
232 |                         <button class="btn-default">
233 |                             <i class="fa-solid fa-basket-shopping"></i>
234 |                         </button>
235 |                     </div>
236 |                 </div>
237 |             </div>
238 |         </section>
239 | 
240 |         <section id="testimonials">
241 |             <img src="src/images/chef.png" id="testimonial_chef" alt="">
242 | 
243 |             <div id="testimonials_content">
244 |                 <h2 class="section-title">
245 |                     Depoimentos
246 |                 </h2>
247 |                 <h3 class="section-subtitle">
248 |                     O que os clientes falam sobre nós
249 |                 </h3>
250 | 
251 |                 <div id="feedbacks">
252 |                     <div class="feedback">
253 |                         <img src="src/images/avatar.png" class="feedback-avatar" alt="">
254 | 
255 |                         <div class="feedback-content">
256 |                             <p>
257 |                                 Fulana de Tal
258 |                                 <span>
259 |                                     <i class="fa-solid fa-star"></i>
260 |                                     <i class="fa-solid fa-star"></i>
261 |                                     <i class="fa-solid fa-star"></i>
262 |                                     <i class="fa-solid fa-star"></i>
263 |                                     <i class="fa-solid fa-star"></i>
264 |                                 </span>
265 |                             </p>
266 |                             <p>
267 |                                 "Lorem ipsum dolor sit, amet consectetur adipisicing elit.
268 |                                 Repellat voluptatibus cumque dolor ea est quae alias necessitatibus"
269 |                             </p>
270 |                         </div>
271 |                     </div>
272 | 
273 |                     <div class="feedback">
274 |                         <img src="src/images/avatar.png" class="feedback-avatar" alt="">
275 | 
276 |                         <div class="feedback-content">
277 |                             <p>
278 |                                 Fulana de Tal
279 |                                 <span>
280 |                                     <i class="fa-solid fa-star"></i>
281 |                                     <i class="fa-solid fa-star"></i>
282 |                                     <i class="fa-solid fa-star"></i>
283 |                                     <i class="fa-solid fa-star"></i>
284 |                                     <i class="fa-solid fa-star"></i>
285 |                                 </span>
286 |                             </p>
287 |                             <p>
288 |                                 "Lorem ipsum dolor sit, amet consectetur adipisicing elit.
289 |                                 Repellat voluptatibus cumque dolor ea est quae alias necessitatibus"
290 |                             </p>
291 |                         </div>
292 |                     </div>
293 |                 </div>
294 | 
295 |                 <button class="btn-default">
296 |                     Ver mais avaliações
297 |                 </button>
298 |             </div>
299 |         </section>
300 |     </main>
301 | 
302 |     <footer>
303 |         <img src="src/images/wave.svg" alt="">
304 | 
305 |         <div id="footer_items">
306 |             <span id="copyright">
307 |                 &copy 2024 Larissa Kich
308 |             </span>
309 | 
310 |             <div class="social-media-buttons">
311 |                 <a href="">
312 |                     <i class="fa-brands fa-whatsapp"></i>
313 |                 </a>
314 | 
315 |                 <a href="">
316 |                     <i class="fa-brands fa-instagram"></i>
317 |                 </a>
318 | 
319 |                 <a href="">
320 |                     <i class="fa-brands fa-facebook"></i>
321 |                 </a>
322 |             </div>
323 |         </div>
324 |     </footer>
325 |     <script src="src/javascript/script.js"></script>
326 | </body>
327 | </html>


--------------------------------------------------------------------------------