-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-subgrid-example.html
137 lines (125 loc) · 7.61 KB
/
css-subgrid-example.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
<!doctype html>
<!--
Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
https://www.ditdot.hr/en
https://github.com/ditdot-dev/css-subgrid-example
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Subgrid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="ditdot.hr">
<link rel="stylesheet" href="css-subgrid-example.css">
</head>
<body>
<div class="cards-container">
<!-- FIRST CARD -->
<div class="card card-first">
<div class="card-header-wrapper">
<h2 class="card-title">The cosmos awaits</h2>
<h4 class="card-subtitle">Great turbulent clouds</h4>
<div class="card-avatar-wrapper">
<img class="card-avatar"
src="https://images.unsplash.com/photo-1476814607969-0dfe98b9be5c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
alt="">
</div>
</div>
<div class="card-photo-wrapper">
<img class="card-photo"
src="https://images.unsplash.com/photo-1512547770769-0eb554dbaa73?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
alt="">
</div>
<p class="card-text">With pretty stories for which there's little good evidence star stuff harvesting star light
circumnavigated invent the universe billions upon billions of brilliant syntheses.</p>
<svg class="card-like" height="32" width="32" style="enable-background:new 0 0 32 32;" version="1.1"
viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path
d="M340.8 98.4c50.7 0 91.9 41.3 91.9 92.3 0 26.2-10.9 49.8-28.3 66.6L256 407.1 105 254.6c-15.8-16.6-25.6-39.1-25.6-63.9 0-51 41.1-92.3 91.9-92.3 38.2 0 70.9 23.4 84.8 56.8 13.7-33.3 46.5-56.8 84.7-56.8m0-15.4C307 83 276 98.8 256 124.8c-20-26-51-41.8-84.8-41.8C112.1 83 64 131.3 64 190.7c0 27.9 10.6 54.4 29.9 74.6L245.1 418l10.9 11 10.9-11 148.3-149.8c21-20.3 32.8-47.9 32.8-77.5C448 131.3 399.9 83 340.8 83z" />
</svg>
<button class="card-button">More</button>
</div>
<!-- SECOND CARD -->
<div class="card card-second">
<div class="card-header-wrapper">
<h2 class="card-title">Harvesting star light</h2>
<h4 class="card-subtitle">Realm of the galaxies</h4>
<div class="card-avatar-wrapper">
<img class="card-avatar"
src="https://images.unsplash.com/photo-1583994009906-c00c0bd8acb2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
alt="">
</div>
</div>
<div class="card-photo-wrapper">
<img class="card-photo"
src="https://images.unsplash.com/photo-1503389152951-9f343605f61e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
alt=""></div>
<p class="card-text">Descended from astronomers encyclopaedia galactica Sea of Tranquility encyclopaedia galactica
vanquish the impossible courage of our questions. Great turbulent clouds emerged into consciousness inconspicuous
motes of rock and gas gathered by gravity. </p>
<svg class="card-like" height="32" width="32" style="enable-background:new 0 0 32 32;" version="1.1"
viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path
d="M340.8 98.4c50.7 0 91.9 41.3 91.9 92.3 0 26.2-10.9 49.8-28.3 66.6L256 407.1 105 254.6c-15.8-16.6-25.6-39.1-25.6-63.9 0-51 41.1-92.3 91.9-92.3 38.2 0 70.9 23.4 84.8 56.8 13.7-33.3 46.5-56.8 84.7-56.8m0-15.4C307 83 276 98.8 256 124.8c-20-26-51-41.8-84.8-41.8C112.1 83 64 131.3 64 190.7c0 27.9 10.6 54.4 29.9 74.6L245.1 418l10.9 11 10.9-11 148.3-149.8c21-20.3 32.8-47.9 32.8-77.5C448 131.3 399.9 83 340.8 83z" />
</svg>
<button class="card-button">More</button>
</div>
<!-- THIRD CARD -->
<div class="card card-third">
<div class="card-header-wrapper">
<h2 class="card-title">Impossible courage of our questions</h2>
<h4 class="card-subtitle">The ash of stellar alchemy</h4>
<div class="card-avatar-wrapper">
<img class="card-avatar"
src="https://images.unsplash.com/photo-1511546395756-590dffdcdbd1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
alt="">
</div>
</div>
<div class="card-photo-wrapper"><img class="card-photo"
src="https://images.unsplash.com/photo-1485846753954-dff2171ddb2b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
alt=""></div>
<p class="card-text">Brain is the seed of intelligence from which we spring not a sunrise but a galaxyrise
consciousness take root and flourish Cambrian explosion. Stirred by starlight billions upon billions vanquish the
impossible the sky calls to us with pretty stories?
</p>
<svg class="card-like" height="32" width="32" style="enable-background:new 0 0 32 32;" version="1.1"
viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path
d="M340.8 98.4c50.7 0 91.9 41.3 91.9 92.3 0 26.2-10.9 49.8-28.3 66.6L256 407.1 105 254.6c-15.8-16.6-25.6-39.1-25.6-63.9 0-51 41.1-92.3 91.9-92.3 38.2 0 70.9 23.4 84.8 56.8 13.7-33.3 46.5-56.8 84.7-56.8m0-15.4C307 83 276 98.8 256 124.8c-20-26-51-41.8-84.8-41.8C112.1 83 64 131.3 64 190.7c0 27.9 10.6 54.4 29.9 74.6L245.1 418l10.9 11 10.9-11 148.3-149.8c21-20.3 32.8-47.9 32.8-77.5C448 131.3 399.9 83 340.8 83z" />
</svg>
<button class="card-button">More</button>
</div>
<!-- FOURTH CARD -->
<div class="card card-fourth">
<div class="card-header-wrapper">
<h2 class="card-title">A mote of dust suspended in a sunbeam</h2>
<h4 class="card-subtitle">Interiors of collapsing stars</h4>
<div class="card-avatar-wrapper">
<img class="card-avatar"
src="https://images.unsplash.com/photo-1553669006-0b3882afea8d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
alt="">
</div>
</div>
<div class="card-photo-wrapper">
<img class="card-photo"
src="https://images.unsplash.com/photo-1498452572341-c087c3ee25fc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
alt="">
</div>
<p class="card-text">Orion's sword venture take root and flourish inconspicuous motes of rock and gas vanquish the
impossible muse about. A very small stage in a vast cosmic arena two ghostly white figures in coveralls and
helmets. </p>
<svg class="card-like" height="32" width="32" style="enable-background:new 0 0 32 32;" version="1.1"
viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path
d="M340.8 98.4c50.7 0 91.9 41.3 91.9 92.3 0 26.2-10.9 49.8-28.3 66.6L256 407.1 105 254.6c-15.8-16.6-25.6-39.1-25.6-63.9 0-51 41.1-92.3 91.9-92.3 38.2 0 70.9 23.4 84.8 56.8 13.7-33.3 46.5-56.8 84.7-56.8m0-15.4C307 83 276 98.8 256 124.8c-20-26-51-41.8-84.8-41.8C112.1 83 64 131.3 64 190.7c0 27.9 10.6 54.4 29.9 74.6L245.1 418l10.9 11 10.9-11 148.3-149.8c21-20.3 32.8-47.9 32.8-77.5C448 131.3 399.9 83 340.8 83z" />
</svg>
<button class="card-button">More</button>
</div>
</div>
<div>
<p class="caption">
<a href="https://www.ditdot.hr/en/css-subgrid-how-to-build-complex-layouts-in-a-simple-way" title="ditdot.hr">Visit how-to article on our blog</a>
</p>
</div>
</body>
</html>