-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (112 loc) · 5.89 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Make up Store</title>
<link rel="stylesheet" href="./assets/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;1,100;1,300;1,500;1,600&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div id="search">
<span>Site Bonito</span>
<input type="text" placeholder="Buscar produto...">
<button><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
<ul>
<li><a href="#banner">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#products-list">Produtos</a></li>
<li><a href="#contact">Contato</a></li>
</ul>
</nav>
<header id="banner">
<img src="./assets/images/banner02.jpg" alt="Foto de banner: pincéis e maquiagens espalhadas em cima de uma superfície rosa" id="img-banner">
<div>
<span id="beauty">Beleza, cor e diversão</span>
<h1>Loja Bonita</h1>
</div>
<img src="./assets/images/banner.jpg" alt="Foto de banner: pincéis e maquiagens espalhadas em cima de uma superfície rosa">
</header>
<main>
<section id="about">
<div>
<h2>Sobre nós</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil sequi praesentium quae! Temporibus facere eaque id ea similique quos suscipit eveniet! Aut perspiciatis natus incidunt eveniet necessitatibus doloribus odit quibusdam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit soluta quaerat in mollitia eveniet dolore sapiente aliquam omnis, iure sunt exercitationem totam, placeat illo. Dicta illum porro deserunt ducimus nulla.</p>
</div>
<img src="./assets/images/about-img.jpg" alt="Foto sobre a empresa: maquiagens e flores em cima de uma mesa branca">
</section>
<section id="products-list">
<h2 id="title-product-section">Produtos</h1>
<div class="product">
<img src="./assets/images/img01.png" alt="Batom vermelho">
<h2>Nome do Produto</h2>
<span class="price">R$XX,XX</span>
<span class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ab beatae reiciendis? Dicta, sapiente.</span>
<button>Comprar</button>
</div>
<div class="product">
<img src="./assets/images/png-img02.png" alt="Batom vermelho escuro">
<h2>Nome do Produto</h2>
<span class="price">R$XX,XX</span>
<span class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ab beatae reiciendis? Dicta, sapiente.</span>
<button>Comprar</button>
</div>
<div class="product">
<img src="./assets/images/png-img03.png" alt="Rímel">
<h2>Nome do Produto</h2>
<span class="price">R$XX,XX</span>
<span class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ab beatae reiciendis? Dicta, sapiente.</span>
<button>Comprar</button>
</div>
<div class="product">
<img src="./assets/images/png-img04.png" alt="Perfume">
<h2>Nome do Produto</h2>
<span class="price">R$XX,XX</span>
<span class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ab beatae reiciendis? Dicta, sapiente.</span>
<button>Comprar</button>
</div>
<div class="product">
<img src="./assets/images/png-img05.png" alt="Kit de Hidratante">
<h2>Nome do Produto</h2>
<span class="price">R$XX,XX</span>
<span class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ab beatae reiciendis? Dicta, sapiente.</span>
<button>Comprar</button>
</div>
<div class="product">
<img src="./assets/images/png-img06.png" alt="Paleta de Sombra">
<h2>Nome do Produto</h2>
<span class="price">R$XX,XX</span>
<span class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ab beatae reiciendis? Dicta, sapiente.</span>
<button>Comprar</button>
</div>
</section>
<section id="contact">
<form action="">
<header>Entre em contato conosco</header>
<label for="name">Nome</label>
<input type="text" name="name" id="name" placeholder="Digite seu nome...">
<label for="email">E-mail</label>
<input type="text" name="name" id="email" placeholder="Digite seu e-mail...">
<label for="textarea">Mensagem</label>
<textarea placeholder="Digite sua mensagem..."></textarea>
<button>Enviar</button>
</form>
</section>
</main>
<footer>
<div id="credits"><a href="https://github.com/mkmya">Marina Kamiya - 2023</a></div>
<div id="icons-contact">
<i class="fa-brands fa-whatsapp"><a href="#"></a></i>
<i class="fa-brands fa-instagram"><a href="#"></a></i>
<i class="fa-brands fa-facebook"><a href="#"></a></i>
<i class="fa-regular fa-envelope"><a href="#"></a></i>
</div>
</footer>
<script src="https://kit.fontawesome.com/8d59b48e38.js" crossorigin="anonymous"></script>
</body>
</html>