forked from kevin-powell/dynamic-grid-layout
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (84 loc) · 3.48 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dynamic grid layout</title>
<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=Bungee&family=Bungee+Shade&family=Heebo:[email protected]&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="demo.css">
</head>
<body>
<main>
<div class="container">
<!-- <h1 class="main-title">Our Products</h1> -->
<!-- <p class="min-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores corporis ipsa tempora,
blanditiis nam
perferendis deleniti iure error velit alias omnis facere, illum numquam molestiae eveniet nisi in molestias
laborum rerum! Omnis assumenda sunt excepturi facere. At rem maiores accusamus.</p> -->
<div class="product-grid">
<div class="card stacked featured">
<img src="img/hat-1.jpg" alt="a grey baseball hat with a small palm tree on the front" class="card__img">
<div class="card__content">
<h2 class="card__title">Lorem, ipsum dolor.</h2>
<p class="card__price">$325</p>
<p class="card__description">Lorem, ipsum dolor.</p>
</div>
</div>
<div class="card stacked">
<img src="img/hat-2.jpg" alt="" class="card__img">
<div class="card__content">
<h2 class="card__title">Ullam, cum ut.</h2>
<p class="card__price">$315</p>
<p class="card__description">Iure, voluptate corrupti.</p>
</div>
</div>
<div class="card stacked">
<img src="img/hat-3.jpg" alt="" class="card__img">
<div class="card__content">
<h2 class="card__title">Libero, ab dolorem?</h2>
<p class="card__price">$225</p>
<p class="card__description">Eveniet, necessitatibus id.</p>
</div>
</div>
<div class="card stacked">
<img src="img/hat-4.jpg" alt="" class="card__img">
<div class="card__content">
<h2 class="card__title">Minima, earum ipsam.</h2>
<p class="card__price">$500</p>
<p class="card__description">Illo, dolorem magnam?</p>
</div>
</div>
<div class="card stacked">
<img src="img/hat-5.jpg" alt="" class="card__img">
<div class="card__content">
<h2 class="card__title">Odio, nam consequatur.</h2>
<p class="card__price">$255</p>
<p class="card__description">Quos, facere alias.</p>
</div>
</div>
<div class="card stacked">
<img src="img/hat-6.jpg" alt="" class="card__img">
<div class="card__content">
<h2 class="card__title">Quidem, aut numquam!</h2>
<p class="card__price">$345</p>
<p class="card__description">Aliquid, enim ea.</p>
</div>
</div>
<div class="card stacked">
<img src="img/hat-7.jpg" alt="" class="card__img">
<div class="card__content">
<h2 class="card__title">Accusantium, placeat dolores?</h2>
<p class="card__price">$105</p>
<p class="card__description">Corporis, commodi facilis!</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>