-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
146 lines (143 loc) · 4.87 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta
property="og:title"
content="Product Card Responsive | Nike Zoom KD 12"
/>
<meta
property="og:description"
content="Responsive and animated product card using HTML, CSS and JavaScript"
/>
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://fariasmateuss.github.io/product/"
/>
<meta
name="description"
content="Responsive Product Card Nike Zoom KD 12"
/>
<meta
name="keywords"
content="Product, Shoe, Card, Responsive, HTML, CSS, JavaScript, Nike Zoom KD 12"
/>
<meta name="author" content="Mateus V. Farias" />
<link rel="stylesheet" href="./src/styles/index.css" />
<link
href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap"
rel="stylesheet"
/>
<title>Nike Zoom KD 12</title>
</head>
<body>
<main>
<section>
<div class="container">
<div class="card">
<div class="shoeBackground">
<div class="gradients">
<div class="gradient second" color="blue"></div>
<div class="gradient" color="red"></div>
<div class="gradient" color="green"></div>
<div class="gradient" color="orange"></div>
<div class="gradient" color="black"></div>
</div>
<h1 class="nike">nike</h1>
<img src="./src/assets/logo.png" alt="Logo" class="logo" />
<a href="#" class="share"><i class="fas fa-share-alt"></i></a>
<img
src="./src/assets/blue.png"
alt="Shoe Blue"
class="shoe show"
color="blue"
/>
<img
src="./src/assets/red.png"
alt="Shoe Red"
class="shoe"
color="red"
/>
<img
src="./src/assets/green.png"
alt="Shoe Green"
class="shoe"
color="green"
/>
<img
src="./src/assets/orange.png"
alt="Shoe Orange"
class="shoe"
color="orange"
/>
<img
src="./src/assets/black.png"
alt="Shoe Black"
class="shoe"
color="black"
/>
</div>
<div class="info">
<div class="shoeName">
<div>
<h1 class="big">Nike Zoom KD 12</h1>
<span class="new">new</span>
</div>
<h3 class="small">Men's running shoes</h3>
</div>
<div class="description">
<h3 class="title">Product Info</h3>
<p class="text">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's.
</p>
</div>
<div class="color-container">
<h3 class="title">Color</h3>
<div class="colors">
<span
class="color active"
primary="#2175f5"
color="blue"
></span>
<span class="color" primary="#f84848" color="red"></span>
<span class="color" primary="#29b864" color="green"></span>
<span class="color" primary="#ff5521" color="orange"></span>
<span class="color" primary="#444" color="black"></span>
</div>
</div>
<div class="size-container">
<h3 class="title">size</h3>
<div class="sizes">
<span class="size">7</span>
<span class="size">8</span>
<span class="size active">9</span>
<span class="size">10</span>
<span class="size">11</span>
</div>
</div>
<div class="buy-price">
<a href="#" class="buy">
<span class="priceBtn">1</span>
<i class="fas fa-shopping-cart"></i>
Add to card
</a>
<div class="price">
<h1>
<i class="fas fa-dollar-sign"></i>
208,90
</h1>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<script src="./src/index.js"></script>
</body>
</html>