-
Notifications
You must be signed in to change notification settings - Fork 0
/
products-description.html
124 lines (102 loc) · 5.72 KB
/
products-description.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
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="pt-br">
<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> AluraGeek | Descrição do produto </title>
<link rel="icon" type="image" href="assets/img/icons/AluraIcon.svg">
<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=Raleway:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/CSS/base.css">
</head>
<body>
<header class="header">
<a href="index.html" role=button title="Home">
<img src="assets/img/icons/Logo-alurageek.svg" alt="Logo AluraGeek" class="header__logo">
</a>
<div class="search">
<input class="header__search" type="search" name="search" id="search-bar"
placeholder="O que deseja encontrar?" aria-label="Campo de busca de produtos">
<button class="header__search-button" title="Campo de busca">
<i class="header__search-icon "></i>
</button>
</div>
<a href="login.html" role=button class="header__button-login button__primary"
title="Login do administrador">Login</a>
</header>
<main>
<article class="products__highlights">
<div class="products__highlight-img">
<img src="assets/img/products/img-produtos-starwars/Caneca-average.png"
alt="Caneca em formato de capacete de Storm Trooper" class="product__img-heighlight">
</div>
<section class="products__highlights-description">
<span class="product__name-highlights">Caneca Storm Trooper</span>
<span class="product__value">R$ 60,00</span>
<p class="product__description">Voluptas voluptatum quibusdam similique, class debitis alias maecenas
eveniet ridiculus, facilis fusce! Ullam conubia? Sociis, minima malesuada habitasse distinctio sequi
aliqua malesuada. Quisque deleniti proin expedita, aliquid litora. Iste recusandae? Commodo, quia
ridiculus doloribus vero dictum? Penatibus donec placeat faucibus, dolorum do. Animi porta anim
magnam</p>
</section>
</article>
<section class="products">
<section class="products__section">
<div class="products__section-name">
<h3 class="products__section-title">Produtos similares</h3>
<a href="#" class="products__section-link">Ver Tudo</a>
</div>
<div class="products__section-content">
<article class="product">
<img src="assets/img/products/img-produtos-starwars/Caneca-average.png"
alt="Caneca em formato de capacete de Storm Trooper" class="product__img">
<p class="product__name">Caneca Storm Trooper</p>
<p class="product__value">R$ 60,00</p>
<a href="#" class="product__link">Ver produto</a>
</article>
<article class="product">
<img src="assets/img/products/img-produtos-starwars/VaderHead-average.png"
alt="Boneco cabeçudo Darth Vader" class="product__img">
<p class="product__name">Boneco cabeçudo Darth Vader</p>
<p class="product__value">R$ 60,00</p>
<a href="#" class="product__link">Ver produto</a>
</article>
<article class="product">
<img src="assets/img/products/img-produtos-starwars/Yoda-average.png"
alt="Boneco do mestre Yoda" class="product__img">
<p class="product__name">Boneco do mestre Yoda</p>
<p class="product__value">R$ 60,00</p>
<a href="#" class="product__link">Ver produto</a>
</article>
<article class="product">
<img src="assets/img/products/img-produtos-starwars/StormTrooper-average.png"
alt="Boneco Storm Trooper" class="product__img">
<p class="product__name">Boneco Storm Trooper</p>
<p class="product__value">R$ 60,00</p>
<a href="#" class="product__link">Ver produto</a>
</article>
<article class="product">
<img src="assets/img/products/img-produtos-starwars/Grogu-average.png" alt="Boneco baby yoda"
class="product__img">
<p class="product__name">Boneco Grogu</p>
<p class="product__value">R$ 60,00</p>
<a href="#" class="product__link">Ver produto</a>
</article>
<article class="product">
<img src="assets/img/products/img-produtos-starwars/Kylo-average.png" alt="Boneco Kylo Ren"
class="product__img">
<p class="product__name">Boneco Kylo Ren</p>
<p class="product__value">R$ 60,00</p>
<a href="#" class="product__link">Ver produto</a>
</article>
</div>
</section>
</section>
</main>
<footer class="footer" data-footer="footer">
</footer>
<script src="JS/Controller/Controller.js" type="module"></script>
</body>
</html>