-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (99 loc) · 4.03 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/cupcake.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Gradient Cards Concept</title>
</head>
<body>
<header class="header">
<h1 class="header__title">Gradient Cards Concept</h1>
<div class="header__btns">
<a
href="https://github.com/nat-davydova/gradient-cards-concept"
class="header__btn"
target="_blank"
title="Check On Github"
>Check On Github</a >
</div>
</header>
<div class="content">
<div class="container">
<div class="card">
<div class="card__content">
<div class="card__icon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 350 300">
<path id="<Path>" class="s0" d="m282.9 41.6c-34.5-17.7-68.7-54.3-113-36-44.2 18.3-62 36.8-94.1 40.5-32 3.6-82.2 21-74.9 86.8 5.6 50.2 45 75.5 76.2 84.4 31.3 8.8 48.1 44.7 90.7 40.1 35.5-3.8 64.4-35.2 82.3-52.3 32.9-31.6 78.7-34.4 91.1-68.2 11.6-31.7-23.8-77.7-58.3-95.3z"/>
</svg>
<img src="./assets/cupcake.svg" alt="Cupcake Icon" />
</div>
<div class="card__title">
<h3>Cupcake</h3>
</div>
<div class="card__descr">
<p>Fluffy chocolate cupcake with creamy frosting</p>
</div>
<div class="card__price">
<span>$6</span>
</div>
<div class="card__btn-wrapper">
<button class="card__btn" type="button">Buy</button>
</div>
</div>
</div>
<div class="card">
<div class="card__content">
<div class="card__icon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 340 300">
<path id="<Path>" class="s0" d="m149.2 17.4c-64-5.4-102.7-35.7-134.7 0-32 35.7-17 153.4 112.1 183.6 129.5 30.3 194.9-58.1 198.4-108.7 3.5-50.6-19.8-89.3-68-89.8-50.6-0.5-78.3 17.4-107.8 14.9z"/>
</svg>
<img src="./assets/ice-cream.svg" alt="Ice Cream Icon" />
</div>
<div class="card__title">
<h3>Ice Cream</h3>
</div>
<div class="card__descr">
<p>Refreshing ice cream bursting with fresh, juicy berries</p>
</div>
<div class="card__price">
<span>$7</span>
</div>
<div class="card__btn-wrapper">
<button class="card__btn" type="button">Buy</button>
</div>
</div>
</div>
<div class="card">
<div class="card__content">
<div class="card__icon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 361 246">
<path id="<Path>" class="s0" d="m157.6 0.8c-85.9 0-145.2 46.6-155.9 122.2-10.8 75.6 49.2 137.5 113.2 119.5 63.9-18.1 87.2-34.1 127-21.5 70.7 22.3 125.1-8 117.9-70.3-9.4-82.5-81.1-150-202.2-149.9z"/>
</svg>
<img src="./assets/lollipop.svg" alt="Candy Icon" />
</div>
<div class="card__title">
<h3>Candy Swirl</h3>
</div>
<div class="card__descr">
<p>Colorful candy swirls with a delightful burst of sweetness</p>
</div>
<div class="card__price">
<span>$3</span>
</div>
<div class="card__btn-wrapper">
<button class="card__btn" type="button">Buy</button>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer__content">
<p>Inspired by <a href="https://dribbble.com/shots/4722516-Gradient-Cards" title="Dribbble Shot" target="_blank">Dribbble Shot</a></p>
</div>
</footer>
<script type="module" src="/main.js"></script>
</body>
</html>