Lilacbeauty/index.html at main · SofiaAlvarez06/Lilacbeauty · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lilac Beauty - Maquiagem Premium</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>

<body>
  <div id="mensagem-carrinho" class="mensagem-carrinho"></div>

  <header class="header">
    <div class="navbar-container">
      <a href="index.html" class="logo">
        <img src="https://i.pinimg.com/736x/e0/0f/2a/e00f2af7f7c453ce9c75b028c4034449.jpg" alt="Lilac Beauty Logo">
      </a>

      <h1 class="site-title">Lilac Beauty</h1>

      <nav class="nav-center">
        <ul class="nav-links">
          <li><a href="index.html">Início</a></li>
          <li><a href="produtos.html">Produtos</a></li>
          <li><a href="sobre.html">Sobre Nós</a></li>
          <li><button id="dark-mode-btn" class="dark-mode-toggle">🌙 Modo Escuro</button></li>
          <li><a href="carrinho.html">🛒 Carrinho</a></li>
          <li><a href="favoritos.html">❤ Favoritos</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="hero">
    <div class="hero-content">
      <h1>Realce sua Beleza com Lilac Beauty</h1>
      <p>Produtos premium que valorizam sua essência</p>
      <a href="produtos.html" class="btn-produtos">Ver Produtos</a>
    </div>
  </section>

  <main>
    <section class="vitrine">
      <h1>Produtos mais vendidos</h1>
      <h2>Confira nossos produtos mais vendidos e aproveite as ofertas!</h2>
      <h1>Bases do momento!</h1>

      <div class="card-container">
        <div class="card">
          <img src="https://i.pinimg.com/736x/33/86/85/3386852543c647b0292fe25de7628577.jpg" alt="Base Mari Maria" class="menu-icon">
          <h1>Base Mari Maria Cover Up</h1>
          <h2>A base Cover Up deixa a pele aveludada e uniforme sem craquelar.</h2>
          <span>R$56,00</span>
          <button class="comprar">Comprar</button>
        </div>

        <div class="card">
          <img src="https://i.pinimg.com/736x/4a/80/66/4a80666a2abbe818b79f98b09590b6a8.jpg" alt="Base Vizella" class="menu-icon">
          <h1>Base líquida FIX</h1>
          <h2>A Base FIX é fluida, tem média cobertura e é perfeita para usar no dia a dia.</h2>
          <span>R$69,90</span>
          <button class="comprar">Comprar</button>
        </div>

        <div class="card">
          <img src="https://i.pinimg.com/736x/ef/67/cf/ef67cfb838d107c294a361d9b4b35bfb.jpg" alt="Base Stick Oceane" class="menu-icon">
          <h1>Base Stick Oceane</h1>
          <h2>Base em bastão com alta cobertura e acabamento matte.</h2>
          <span>R$49,90</span>
          <button class="comprar">Comprar</button>
        </div>

        <div class="card">
          <img src="https://i.pinimg.com/736x/d2/fc/ab/d2fcab1bb9ac5f3b29dfdf72b806bbe3.jpg" alt="Base Nina Secrets" class="menu-icon">
          <h1>Base Niina Secrets</h1>
          <h2>A Base Líquida Niina Secrets Hidra Glow hidrata e deixa sua pele radiante.</h2>
          <span>R$89,90</span>
          <button class="comprar">Comprar</button>
        </div>

        <div class="card">
          <img src="https://bocarosa.com.br/cdn/shop/files/BR_01.png?v=1744145027&width=600" alt="Base Boca Rosa" class="menu-icon">
          <h1>Base Boca Rosa</h1>
          <h2>Base em bastão perfeita para o dia a dia, com cobertura leve e multifunções.</h2>
          <span>R$80,00</span>
          <button class="comprar">Comprar</button>
        </div>
      </div>
    </section>

    <section class="vitrine vitrine-olhos">
      <h1>Maquiagem para olhos</h1>
      <h2>Produtos para realçar seu olhar!</h2>

      <div class="card-container">
        <div class="card">
          <img src="https://i.pinimg.com/736x/20/17/f3/2017f331081f70ce8d90947566105c34.jpg" alt="Rímel Laranja Melu" class="menu-icon">
          <h1>Rímel Laranja Melu</h1>
          <h2>Alongamento, definição e volume com efeito de cílios postiços.</h2>
          <span>R$19,90</span>
          <button class="comprar">Comprar</button>
        </div>

        <div class="card">
          <img src="https://i.pinimg.com/736x/7c/5f/96/7c5f96ad4c7b2f7d6644ecaa49c38432.jpg" alt="Rímel Marrom Vizella" class="menu-icon">
          <h1>Rímel Marrom Vizella</h1>
          <h2>Alongamento com acabamento fino, natural e fórmula peel off.</h2>
          <span>R$50,00</span>
          <button class="comprar">Comprar</button>
        </div>

        <div class="card">
          <img src="https://i.pinimg.com/736x/6d/93/82/6d9382daa83376c5eea00aa3743885c6.jpg" alt="Máscara para cílios FRAN" class="menu-icon">
          <h1>Máscara para cílios FRAN</h1>
          <h2>A máscara MARAVICHERRY fornece extremo volume a cada aplicação.</h2>
          <span>R$60,00</span>
          <button class="comprar">Comprar</button>
        </div>

        <div class="card">
          <img src="https://epocacosmeticos.vteximg.com.br/arquivos/ids/595090-450-450/7899026456051_2.jpg?v=638447475276070000" alt="Máscara para cílios Maybelline" class="menu-icon">
          <h1>Máscara para cílios Maybelline</h1>
          <h2>Oferece 24 horas de volume sem borrar e resiste ao calor, umidade e suor.</h2>
          <span>R$60,00</span>
          <button class="comprar">Comprar</button>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer-completo">
    <div class="footer-newsletter">
      <h2>JUNTE-SE A NÓS</h2>
      <p>Obtenha descontos exclusivos</p>

      <form>
        <input type="text" placeholder="Nome" required>
        <input type="email" placeholder="E-mail" required>
        <button type="submit">QUERO ME INSCREVER</button>
      </form>
    </div>

    <div class="footer-info">
      <div class="footer-coluna">
        <h3>CONECTE-SE</h3>
        <ul>
          <li><a href="#">Minha conta</a></li>
          <li><a href="#">Minhas compras</a></li>
          <li><a href="carrinho.html">Meu carrinho</a></li>
        </ul>
      </div>

      <div class="footer-coluna">
        <h3>INSTITUCIONAL</h3>
        <ul>
          <li><a href="sobre.html">Sobre Nós</a></li>
          <li><a href="produtos.html">Produtos</a></li>
          <li><a href="#">Formas de pagamento</a></li>
          <li><a href="#">Prazos e entregas</a></li>
          <li><a href="#">Trocas e devoluções</a></li>
        </ul>
      </div>

      <div class="footer-coluna">
        <h3>ATENDIMENTO</h3>
        <p>Segunda à sexta das 9h às 18h<br>Sábado das 9h30 às 13h<br>Exceto feriados</p>
        <p>Email: contato@lilacbeauty.com.br</p>
      </div>

      <div class="footer-coluna">
        <h3>PRECISA DE AJUDA?</h3>
        <ul>
          <li><a href="#">Rastreie seu pedido</a></li>
          <li><a href="#">Fale conosco</a></li>
        </ul>

        <h3>FORMAS DE PAGAMENTO</h3>
        <p>Pague com Mercado Pago<br>Pague com Pix ou crédito!</p>

        <img src="https://i.pinimg.com/736x/de/72/b5/de72b5cd21b9c827639853f666b51b50.jpg" alt="Visa" width="40">
        <img src="https://i.pinimg.com/736x/36/7c/26/367c26d9ba9b9043c9bb4b5a17ab4d2f.jpg" alt="Mastercard" width="40">
        <img src="https://i.pinimg.com/736x/94/92/8e/94928ed7721f00d89bdac062650579ae.jpg" alt="Pix" width="40">
      </div>
    </div>

    <p>&copy; 2025 Lilac Beauty. Todos os direitos reservados.</p>
    <p>Desenvolvido por Sofia Carolina Villa Alvarez • Projeto Acadêmico</p>
  </footer>

  <script src="js/script.js"></script>
  <script src="js/carrinho.js"></script>
  <script src="js/favoritos.js"></script>
  <script src="js/pesquisa.js"></script>
  <script src="js/darkmode.js"></script>
  <script src="js/animacoes.js"></script>
  <script src="js/newsletter.js"></script>
</body>
</html>