-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (110 loc) · 4.05 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
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta
name="description"
content="Product preview card for Gabrielle Essence Eau De Parfum. View details and pricing for this luxurious Chanel perfume."
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Gabrielle Essence Eau De Parfum | Product Preview</title>
</head>
<body>
<main class="card mb-md-3 m-3 rounded-3 p-0" style="max-width: 600px">
<div class="row g-0">
<div class="col-sm-6">
<!-- Imagem para dispositivos maiores que 576px -->
<img
src="images/image-product-desktop.jpg"
class="img-fluid rounded-start d-none d-sm-block"
id="img-desktop"
alt="Gabrielle Essence Eau De Parfum bottle"
aria-label="Gabrielle Essence Eau De Parfum"
/>
<!-- Imagem para dispositivos menores que 576px -->
<img
src="images/image-product-mobile.jpg"
id="img-mobile"
class="img-fluid rounded-top-3 d-block d-sm-none"
alt="Gabrielle Essence Eau De Parfum bottle"
aria-label="Gabrielle Essence Eau De Parfum"
/>
</div>
<div class="card-body col-sm-6 p-4">
<p class="card-text m-0">
<small class="text-body-secondary" id="sutitle-text">Perfume</small>
</p>
<h1 class="card-title">Gabrielle Essence Eau De Parfum</h1>
<p class="card-text">
A floral, solar, and voluptuous interpretation composed by Olivier
Polge, Perfumer-Creator for the House of CHANEL.
</p>
<div class="price d-flex align-items-center mb-3">
<h2 class="card-title" id="price-title">$149.99</h2>
<p class="card-text">
<small class="text-body-secondary" id="price-text">$169.99</small>
</p>
</div>
<button
type="button"
class="btn w-100 rounded-3"
aria-label="Add Gabrielle Essence Eau De Parfum to cart"
>
<svg
width="15"
height="16"
xmlns="http://www.w3.org/2000/svg"
class="me-2"
>
<path
d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z"
fill="#FFF"
/>
</svg>
Add to Cart
</button>
</div>
</div>
</main>
<!-- TODO Ajustar o Rodapé -->
<!--
<footer class="text-center d-flex my-4">
<p class="attribution">
Challenge by
<a
href="https://www.frontendmentor.io/solutions/recipe-page-7k_7AJxq-q"
target="_blank"
rel="noopener noreferrer"
>Frontend Mentor</a
>. Coded by
<a
href="https://github.com/deusdeteneto"
target="_blank"
rel="noopener noreferrer"
>Neto</a
>.
</p>
</footer> -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>