-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (112 loc) · 7.14 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" />
<link rel="shortcut icon" href="./img/icon-logo.png" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lexend+Tera:wght@600&display=swap"
rel="stylesheet"
/>
<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=Lexend+Tera:wght@600&display=swap"
rel="stylesheet"
/>
<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=Black+Han+Sans&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="style.css" />
<title>Product Preview Card</title>
</head>
<body>
<main class="main card">
<img class="contentinfo" src="./img/headphones.jpg" alt="Headphones" />
<section class="main">
<h2 class="title contentinfo">HEADPHONES</h2>
<h3 class="name contentinfo">Jabra Elite 85h</h3>
<h4 class="description contentinfo">
The Jabra Elite 85H is an over-the-ear headphone which uses a
Bluetooth 5.0 connectivity. There’s a multi-connect feature, too,
which lets the Elite 85H to be connected to two Bluetooth devices at
once.
</h4>
<div class="price contentinfo">
<p class="price-after">$99.99</p>
<p class="price-before">$ 149.99</p>
</div>
<button class="shop">
<svg
width="100%"
height="100%"
viewBox="0 0 40 40"
fill="#FFC3A1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M32 32C29.78 32 28 33.78 28 36C28 37.0609 28.4214 38.0783 29.1716 38.8284C29.9217 39.5786 30.9391 40 32 40C33.0609 40 34.0783 39.5786 34.8284 38.8284C35.5786 38.0783 36 37.0609 36 36C36 34.9391 35.5786 33.9217 34.8284 33.1716C34.0783 32.4214 33.0609 32 32 32ZM0 0V4H4L11.2 19.18L8.48 24.08C8.18 24.64 8 25.3 8 26C8 27.0609 8.42143 28.0783 9.17157 28.8284C9.92172 29.5786 10.9391 30 12 30H36V26H12.84C12.7074 26 12.5802 25.9473 12.4864 25.8536C12.3927 25.7598 12.34 25.6326 12.34 25.5C12.34 25.4 12.36 25.32 12.4 25.26L14.2 22H29.1C30.6 22 31.92 21.16 32.6 19.94L39.76 7C39.9 6.68 40 6.34 40 6C40 5.46957 39.7893 4.96086 39.4142 4.58579C39.0391 4.21071 38.5304 4 38 4H8.42L6.54 0M12 32C9.78 32 8 33.78 8 36C8 37.0609 8.42143 38.0783 9.17157 38.8284C9.92172 39.5786 10.9391 40 12 40C13.0609 40 14.0783 39.5786 14.8284 38.8284C15.5786 38.0783 16 37.0609 16 36C16 34.9391 15.5786 33.9217 14.8284 33.1716C14.0783 32.4214 13.0609 32 12 32Z"
/>
</svg>
<h4>Add To Cart</h4>
</button>
</section>
</main>
<footer class="social">
<a
href="https://www.linkedin.com/in/alexchipre/"
aria-label="Developer's Linkedin"
target="_blank"
><svg
width="100%"
height="100%"
viewBox="0 0 32 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M31.3333 18.5525V29.8858H24.8V19.2858C24.8 16.308 23.6888 14.8192 21.4666 14.8192C19.8222 14.8192 18.6888 15.6192 18.0666 17.2192C17.9333 17.5303 17.8666 18.0636 17.8666 18.8192V29.8858H11.2666C11.3111 17.9303 11.3111 11.3303 11.2666 10.0858H17.8666V12.8858L17.8 12.9525H17.8666V12.8858C19.2888 10.708 21.2666 9.61916 23.8 9.61916C26.0666 9.61916 27.8888 10.3747 29.2666 11.8858C30.6444 13.3969 31.3333 15.6192 31.3333 18.5525ZM4.39996 0.55249C3.28885 0.55249 2.38885 0.874712 1.69996 1.51916C1.01107 2.1636 0.666626 2.97471 0.666626 3.95249C0.666626 4.93027 0.999959 5.75249 1.66663 6.41916C2.33329 7.08582 3.19996 7.41916 4.26663 7.41916H4.33329C5.4444 7.41916 6.3444 7.08582 7.03329 6.41916C7.72218 5.75249 8.06663 4.93027 8.06663 3.95249C8.02218 2.97471 7.66663 2.1636 6.99996 1.51916C6.33329 0.874712 5.46663 0.55249 4.39996 0.55249ZM0.999959 29.8858H7.59996V10.0858H0.999959V29.8858Z"
fill="#A75D5D"
/></svg
></a>
<a
href="https://github.com/achipre"
aria-label="Developer's Github"
target="_blank"
><svg
width="100%"
height="100%"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 0.395989C7.161 0.395989 0 7.56299 0 16.396C0 23.469 4.584 29.464 10.937 31.579C11.74 31.73 12.03 31.235 12.03 30.807C12.03 30.427 12.021 29.422 12.015 28.088C7.562 29.052 6.624 25.937 6.624 25.937C5.895 24.093 4.843 23.598 4.843 23.598C3.395 22.609 4.958 22.63 4.958 22.63C6.562 22.739 7.406 24.275 7.406 24.275C8.833 26.723 11.15 26.015 12.067 25.603C12.207 24.572 12.624 23.863 13.078 23.468C9.526 23.067 5.791 21.692 5.791 15.561C5.791 13.81 6.411 12.384 7.436 11.264C7.259 10.863 6.717 9.23299 7.577 7.02899C7.577 7.02899 8.916 6.60199 11.977 8.66999C13.2809 8.31535 14.6257 8.13346 15.977 8.12899C17.337 8.13799 18.696 8.31599 19.977 8.66999C23.02 6.60199 24.358 7.02899 24.358 7.02899C25.217 9.23299 24.675 10.862 24.519 11.264C25.534 12.384 26.154 13.811 26.154 15.561C26.154 21.706 22.414 23.061 18.858 23.452C19.414 23.931 19.935 24.916 19.935 26.411C19.935 28.551 19.915 30.275 19.915 30.796C19.915 31.212 20.195 31.712 21.019 31.551C27.419 29.458 31.998 23.458 31.998 16.395C31.998 7.56199 24.837 0.394989 15.998 0.394989L16 0.395989Z"
fill="#A75D5D"
/></svg
></a>
<a
href="https://twitter.com/chipredev"
aria-label="Twitter's Linkedin"
target="_blank"
><svg
width="100%"
height="100%"
viewBox="0 0 33 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M29.1791 6.76802C29.1994 7.05227 29.1994 7.33658 29.1994 7.62083C29.1994 16.2908 22.6005 26.2807 10.5396 26.2807C6.82382 26.2807 3.37207 25.2045 0.468506 23.3366C0.996443 23.3975 1.50401 23.4178 2.05226 23.4178C5.11819 23.4178 7.94057 22.3823 10.1944 20.6158C7.31113 20.5548 4.89488 18.6665 4.06238 16.0675C4.46851 16.1284 4.87457 16.169 5.30101 16.169C5.88982 16.169 6.47869 16.0878 7.02688 15.9457C4.02182 15.3365 1.76794 12.697 1.76794 9.50914V9.42796C2.64101 9.91527 3.65632 10.2198 4.73238 10.2604C2.96588 9.08271 1.80857 7.07258 1.80857 4.79846C1.80857 3.58021 2.13338 2.46346 2.70194 1.48883C5.93038 5.46852 10.7832 8.06746 16.2248 8.35177C16.1233 7.86446 16.0623 7.35689 16.0623 6.84927C16.0623 3.23502 18.9862 0.290894 22.6207 0.290894C24.509 0.290894 26.2146 1.08277 27.4126 2.36196C28.8948 2.07771 30.3161 1.52946 31.575 0.778206C31.0876 2.30108 30.0521 3.58027 28.6918 4.39239C30.0116 4.25033 31.2908 3.88477 32.4684 3.37721C31.5751 4.67664 30.4583 5.83396 29.1791 6.76802Z"
fill="#A75D5D"
/></svg
></a>
</footer>
</body>
</html>