Animated-Product-Card/index.html at main · viktor-rumiievskyi/Animated-Product-Card · GitHub

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
<!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="stylesheet" href="css/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=Roboto:ital,wght@1,300&display=swap" rel="stylesheet">
	<title>Animated Product Card</title>
	<link rel="shortcut icon" type="image" href="img/shop.svg">
</head>
<body>

	<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="img/logo.png" alt="" class="logo">
				<a href="#" class="share"><i class="fas fa-share-alt"></i></a>

				<img src="img/blue.png" alt="" class="shoe show" color="blue">
				<img src="img/red.png" alt="" class="shoe" color="red">
				<img src="img/green.png" alt="" class="shoe" color="green">
				<img src="img/orange.png" alt="" class="shoe" color="orange">
				<img src="img/black.png" alt="" class="shoe" color="black">
			</div>

			<div class="info">
				<div class="shoeName">
					<div>
						<h1 class="big">Nike Zoom RD 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 dolor sit amet consectetur adipisicing elit. Aut accusantium quis non, dolore neque commodi aperiam, nesciunt libero assumenda optio corrupti suscipit repudiandae dolores quo. Cum, mollitia rem. Repellat, nemo!</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">40</span>
						<span class="size active">41</span>
						<span class="size">42</span>
						<span class="size">43</span>
						<span class="size">44</span>
					</div>
				</div>

				<div class="buy-price">
					<a href="#" class="buy"><i class="fas fa-shopping-cart"></i>Add to card</a>
					<div class="price">
						<i class="fas fa-dollar-sign"></i>
						<h1>3000</h1>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script
	src="https://kit.fontawesome.com/f6a1fd1cff.js"
	crossorigin="anonymous"
></script>
<script src="js/app.js"></script>
</body>
</html>