forked from alexanderkatz/grid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
product.html
339 lines (315 loc) · 20.9 KB
/
product.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IBM Product Example</title>
</head>
<body>
<div class="ibm">
<nav class="ibm-col-group">
<div class="ibm-col-sm-2 ibm-col-lg-4 flex">
<h1 class="ibm-type-d">IBM Product</h1>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="320—64—2c—examples" transform="translate(-126.000000, -16.000000)" fill="#B4B4B4">
<g id="Menu-Copy" transform="translate(126.000000, 16.000000)">
<rect id="Rectangle-7" x="0" y="0" width="14" height="1.54385965"></rect>
<rect id="Rectangle-7-Copy-2" x="0" y="5.89473684" width="14" height="1.54385965"></rect>
<rect id="Rectangle-7-Copy-3" x="0" y="11.7894737" width="14" height="1.54385965"></rect>
</g>
</g>
</g>
</svg>
</div>
<div class="ibm-col-sm-2 ibm-col-md-0 flex flex-end-sm-md">
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="640—64—4c—examples" transform="translate(-606.000000, -20.000000)" fill="#D8D8D8">
<g id="Group" transform="translate(606.000000, 20.000000)">
<rect id="Rectangle" x="0" y="0" width="2.33333333" height="2.33333333"></rect>
<rect id="Rectangle-Copy-3" x="5.83333333" y="0" width="2.33333333" height="2.33333333"></rect>
<rect id="Rectangle-Copy" x="0" y="5.83333333" width="2.33333333" height="2.33333333"></rect>
<rect id="Rectangle-Copy-4" x="5.83333333" y="5.83333333" width="2.33333333" height="2.33333333"></rect>
<rect id="Rectangle-Copy-2" x="0" y="11.6666667" width="2.33333333" height="2.33333333"></rect>
<rect id="Rectangle-Copy-5" x="5.83333333" y="11.6666667" width="2.33333333" height="2.33333333"></rect>
<rect id="Rectangle-Copy-8" x="11.6666667" y="0" width="2.33333333" height="2.33333333"></rect>
<rect id="Rectangle-Copy-7" x="11.6666667" y="5.83333333" width="2.33333333" height="2.33333333"></rect>
<rect id="Rectangle-Copy-6" x="11.6666667" y="11.6666667" width="2.33333333" height="2.33333333"></rect>
</g>
</g>
</g>
</svg>
</div>
<div class="ibm-col-sm-0 ibm-col-lg-4"></div>
<div class="ibm-col-sm-0 ibm-col-lg-2 border-left">
Catalog
</div>
<div class="ibm-col-sm-0 ibm-col-lg-2 border-left">
Support
</div>
<div class="ibm-col-sm-0 ibm-col-lg-2 border-left">
Docs
</div>
<div class="ibm-col-sm-0 ibm-col-lg-1 border-left">
<div class="flex flex-center">
<svg width="21px" height="22px" viewBox="0 0 21 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1320—66—8c—examples" transform="translate(-1170.000000, -20.000000)" fill="#B4B4B4">
<path d="M1178.79844,36.8471866 C1174.78292,36.8471866 1171.51586,33.4245498 1171.51586,29.217418 C1171.51586,25.0110802 1174.78292,21.5880463 1178.79844,21.5880463 C1182.81434,21.5880463 1186.08141,25.0110802 1186.08141,29.217418 C1186.08141,33.4245498 1182.81434,36.8471866 1178.79844,36.8471866 L1178.79844,36.8471866 Z M1185.52774,35.1444039 C1186.81698,33.5404771 1187.59727,31.4736348 1187.59727,29.217418 C1187.59727,24.1348757 1183.65034,20 1178.79844,20 C1173.94693,20 1170,24.1348757 1170,29.217418 C1170,34.3003573 1173.94693,38.435233 1178.79844,38.435233 C1180.95211,38.435233 1182.925,37.6173891 1184.45602,36.2671527 L1189.92829,42 L1191,40.8772512 L1185.52774,35.1444039 Z" id="Page-1-Copy"></path>
</g>
</g>
</svg>
</div>
</div>
<div class="ibm-col-sm-0 ibm-col-lg-1 border-left">
<div class="flex flex-center">
<img height="22px" src="./images/user.png">
</div>
</div>
</nav>
<main class="ibm-col-group light">
<div class="ibm-col-md-2 ibm-col-lg-2 ibm-height-md-8 ibm-height-lg-8 border-bottom-md border-right-md">
<h2 class="ibm-type-d">Boxes</h2>
</div>
<div class="ibm-col-md-6 ibm-col-lg-14 ibm-height-md-8 ibm-height-lg-8 border-bottom-md flex flex-top">
<div>
<h3 class="ibm-type-f">Albino Rainbow 218381</h3>
<p class="ibm-type-c">
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="320—64—2c—examples" transform="translate(-21.000000, -255.000000)" fill="#8CD211">
<circle id="Oval-3-Copy-3" cx="27" cy="261" r="6"></circle>
</g>
</g>
</svg>
Provisioning
</p>
</div>
<svg width="4px" height="22px" viewBox="0 0 4 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1320—66—8c—examples" transform="translate(-1279.000000, -158.000000)" fill="#272727">
<g id="Group-4" transform="translate(1279.000000, 158.000000)">
<circle id="Oval-5" cx="2" cy="2" r="2"></circle>
<circle id="Oval-5-Copy" cx="2" cy="11" r="2"></circle>
<circle id="Oval-5-Copy-2" cx="2" cy="20" r="2"></circle>
</g>
</g>
</g>
</svg>
</div>
<div class="ibm-col-md-0 flex flex-sm white">
<h2 class="ibm-type-c">Getting Started</h2>
<svg width="16px" height="10px" viewBox="0 0 16 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g id="320—64—2c—examples" transform="translate(-288.000000, -339.000000)" stroke-width="2" stroke="#4E4E4E">
<polyline id="Path-4-Copy-5" points="290 341 296.247469 347.238281 302.476562 341.018348"></polyline>
</g>
</g>
</svg>
</div>
<div class="ibm-col-sm-0 ibm-col-md-2 ibm-col-lg-2 ibm-col-group border-right inline-md">
<div class="ibm-height-md-8 ibm-height-lg-8 ibm-height-strict flex flex-column white">
<p class="ibm-type-c">Getting started</p>
<svg class="carrot" width="8px" height="10px" viewBox="0 0 8 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="640—64—4c—examples" transform="translate(-132.000000, -300.000000)" fill="#272727">
<polygon id="Triangle-Copy-3" points="139.682627 304.998953 132 309.997907 132 300"></polygon>
</g>
</g>
</svg>
</div>
<div>
<p class="ibm-type-c">Overview</p>
<p class="ibm-type-c">Worker</p>
<p class="ibm-type-c">Nodes</p>
<p class="ibm-type-c">Services</p>
</div>
</div>
<div class="ibm-col-md-6 ibm-col-lg-14 ibm-col-group">
<div class="ibm-col-md-6 ibm-col-lg-6 border-bottom-sm-md">
<p class="ibm-type-g">Your collection is being provisioned. This will take more than 10 minutes. While you wait, learn how to work with your group.</p>
</div>
<div class="ibm-col-md-6 ibm-col-lg-4 ibm-col-group">
<div class="ibm-col-md-4 ibm-col-lg-4 ibm-height-sm-8 ibm-height-md-16 ibm-height-lg-16 border-bottom border-left-lg flex flex-column">
<svg width="30px" height="31px" viewBox="0 0 30 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="320—64—2c—examples" transform="translate(-21.000000, -709.000000)" stroke="#000000" stroke-width="1.80645161">
<g id="Page-1-Copy" transform="translate(22.000000, 710.000000)">
<path d="M3.11111111,0 L24.8888889,0 C26.6077778,0 28,1.44194444 28,3.22222222 L28,25.7777778 C28,27.5580556 26.6077778,29 24.8888889,29 L3.11111111,29 C1.39222222,29 0,27.5580556 0,25.7777778 L0,3.22222222 C0,1.44194444 1.39222222,0 3.11111111,0 Z" id="Stroke-1"></path>
<path d="M0,9.0625 L28,9.0625" id="Stroke-3"></path>
<path d="M8.12903226,29 L8.12903226,9.66666667" id="Stroke-5"></path>
</g>
</g>
</g>
</svg>
<p class="ibm-type-c">Install the CLI</p>
</div>
<div class="ibm-col-md-2 ibm-col-lg-4 ibm-col-group">
<div class="ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-4 ibm-height-sm-8 ibm-height-md-8 ibm-height-lg-8 border-bottom border-left-md flex flex-column">
<svg width="30px" height="31px" viewBox="0 0 30 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="320—64—2c—examples" transform="translate(-21.000000, -867.000000)" stroke="#272727" stroke-width="1.80645161">
<g id="Page-1-Copy-5" transform="translate(22.000000, 868.000000)">
<path d="M14,0 C21.7322,0 28,6.49165 28,14.5 C28,22.50835 21.7322,29 14,29 C6.2678,29 0,22.50835 0,14.5 C0,6.49165 6.2678,0 14,0 Z" id="Stroke-1"></path>
<polygon id="Stroke-3" points="12.0909091 10.262987 18.4545455 14.5 12.0909091 18.737013"></polygon>
</g>
</g>
</g>
</svg>
<p class="ibm-type-c">Observe your group</p>
</div>
<div class="ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-4 ibm-height-sm-8 ibm-height-md-8 ibm-height-lg-8 border-bottom-sm-md border-left flex flex-column">
<svg width="30px" height="31px" viewBox="0 0 30 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="320—64—2c—examples" transform="translate(-20.000000, -1192.000000)" stroke="#272727">
<g id="Page-1-Copy-5" transform="translate(21.000000, 1193.000000)">
<path d="M14,10.5454545 C16.1089091,10.5454545 17.8181818,12.3157727 17.8181818,14.5 C17.8181818,16.6842273 16.1089091,18.4545455 14,18.4545455 C11.8910909,18.4545455 10.1818182,16.6842273 10.1818182,14.5 C10.1818182,12.3157727 11.8910909,10.5454545 14,10.5454545 Z" id="Stroke-1" stroke-width="2.16774194" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M23.4181818,18.4545455 C23.072,19.2678636 23.2374545,20.2182727 23.8381818,20.8536364 L23.9145455,20.9327273 C24.9085455,21.9622273 24.9098182,23.6310455 23.9170909,24.6605455 L23.9145455,24.6631818 C22.9205455,25.6926818 21.3092727,25.694 20.3152727,24.6658182 L20.3127273,24.6631818 L20.2363636,24.5840909 C19.6229091,23.9619091 18.7052727,23.7905455 17.92,24.1490909 C17.1512727,24.4905 16.6510909,25.2721818 16.6472727,26.1395455 L16.6472727,26.3636364 C16.6472727,27.8202273 15.5081818,29 14.1018182,29 C12.6954545,29 11.5563636,27.8202273 11.5563636,26.3636364 L11.5563636,26.245 C11.536,25.3525909 10.9912727,24.563 10.1818182,24.2545455 C9.39654545,23.896 8.47890909,24.0673636 7.86545455,24.6895455 L7.78909091,24.7686364 C6.79509091,25.7981364 5.18381818,25.7994545 4.18981818,24.7712727 C4.18854545,24.7699545 4.18854545,24.7699545 4.18727273,24.7686364 C3.19327273,23.7391364 3.192,22.0703182 4.18472727,21.0408182 C4.186,21.0395 4.186,21.0395 4.18727273,21.0381818 L4.26363636,20.9590909 C4.86436364,20.3237273 5.02981818,19.3733182 4.68363636,18.56 C4.354,17.7638182 3.59927273,17.2457727 2.76181818,17.2418182 L2.54545455,17.2418182 C1.13909091,17.2418182 0,16.0620455 0,14.6054545 C0,13.1488636 1.13909091,11.9690909 2.54545455,11.9690909 L2.66,11.9690909 C3.52163636,11.948 4.284,11.3838182 4.58181818,10.5454545 C4.928,9.73213636 4.76254545,8.78172727 4.16181818,8.14636364 L4.08545455,8.06727273 C3.09145455,7.03777273 3.09018182,5.36895455 4.08290909,4.33945455 C4.08418182,4.33813636 4.08418182,4.33813636 4.08545455,4.33681818 C5.07945455,3.30731818 6.69072727,3.306 7.68472727,4.33418182 C7.686,4.3355 7.686,4.3355 7.68727273,4.33681818 L7.76363636,4.41590909 C8.37709091,5.03809091 9.29472727,5.20945455 10.08,4.85090909 L10.1818182,4.85090909 C10.9505455,4.5095 11.4507273,3.72781818 11.4545455,2.86045455 L11.4545455,2.63636364 C11.4545455,1.17977273 12.5936364,0 14,0 C15.4063636,0 16.5454545,1.17977273 16.5454545,2.63636364 L16.5454545,2.755 C16.5492727,3.62236364 17.0494545,4.40404545 17.8181818,4.74545455 C18.6034545,5.104 19.5210909,4.93263636 20.1345455,4.31045455 L20.2109091,4.23136364 C21.2049091,3.20186364 22.8161818,3.20054545 23.8101818,4.22872727 C23.8114545,4.23004545 23.8114545,4.23004545 23.8127273,4.23136364 C24.8067273,5.26086364 24.808,6.92968182 23.8152727,7.95918182 L23.8127273,7.96181818 L23.7363636,8.04090909 C23.1356364,8.67627273 22.9701818,9.62668182 23.3163636,10.44 L23.3163636,10.5454545 C23.646,11.3416364 24.4007273,11.8596818 25.2381818,11.8636364 L25.4545455,11.8636364 C26.8609091,11.8636364 28,13.0434091 28,14.5 C28,15.9565909 26.8609091,17.1363636 25.4545455,17.1363636 L25.34,17.1363636 C24.5025455,17.1403182 23.7478182,17.6583636 23.4181818,18.4545455 Z" id="Stroke-3" stroke-width="1.80645161"></path>
</g>
</g>
</g>
</svg>
<p class="ibm-type-c">Add IP address</p>
</div>
</div>
</div>
<div class="ibm-col-md-6 ibm-col-lg-4 ibm-col-group">
<div class="ibm-col-md-4 ibm-col-lg-4 ibm-height-sm-8 ibm-height-md-16 ibm-height-lg-16 border-left-lg border-bottom-sm-lg flex flex-column">
<svg width="30px" height="31px" viewBox="0 0 30 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="320—64—2c—examples" transform="translate(-21.000000, -867.000000)" stroke="#272727" stroke-width="1.80645161">
<g id="Page-1-Copy-5" transform="translate(22.000000, 868.000000)">
<path d="M14,0 C21.7322,0 28,6.49165 28,14.5 C28,22.50835 21.7322,29 14,29 C6.2678,29 0,22.50835 0,14.5 C0,6.49165 6.2678,0 14,0 Z" id="Stroke-1"></path>
<polygon id="Stroke-3" points="12.0909091 10.262987 18.4545455 14.5 12.0909091 18.737013"></polygon>
</g>
</g>
</g>
</svg>
<p class="ibm-type-c">Display WordPress</p>
</div>
<div class="ibm-col-md-2 ibm-col-lg-4 ibm-col-group">
<div class="ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-4 ibm-height-sm-8 ibm-height-md-8 ibm-height-lg-8 border-bottom-md border-left-md flex flex-column">
<svg width="30px" height="31px" viewBox="0 0 30 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="320—64—2c—examples" transform="translate(-180.000000, -1027.000000)" stroke="#272727" stroke-width="1.80645161">
<g id="Page-1-Copy-5" transform="translate(181.000000, 1028.000000)">
<path d="M14,0 C21.7322,0 28,6.49165 28,14.5 C28,22.50835 21.7322,29 14,29 C6.2678,29 0,22.50835 0,14.5 C0,6.49165 6.2678,0 14,0 Z" id="Stroke-1"></path>
<path d="M13.5483871,8.7 L13.5483871,20.3" id="Stroke-3"></path>
<path d="M8.4,14.5 L19.6,14.5" id="Stroke-5"></path>
</g>
</g>
</g>
</svg>
<p class="ibm-type-c">Add a service</p>
</div>
<div class="ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-4 ibm-height-sm-8 ibm-height-md-8 ibm-height-lg-8 border-left flex flex-column">
<svg width="30px" height="31px" viewBox="0 0 30 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Grid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="320—64—2c—examples" transform="translate(-181.000000, -1192.000000)">
<g id="Page-1-Copy-5" transform="translate(182.000000, 1193.000000)">
<path d="M2.8,0 L25.2,0 C26.747,0 28,1.29775 28,2.9 L28,8.7 C28,10.30225 26.747,11.6 25.2,11.6 L2.8,11.6 C1.253,11.6 0,10.30225 0,8.7 L0,2.9 C0,1.29775 1.253,0 2.8,0 Z" id="Stroke-1" stroke="#272727" stroke-width="1.80645161" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2.8,17.4 L25.2,17.4 C26.747,17.4 28,18.69775 28,20.3 L28,26.1 C28,27.70225 26.747,29 25.2,29 L2.8,29 C1.253,29 0,27.70225 0,26.1 L0,20.3 C0,18.69775 1.253,17.4 2.8,17.4 Z" id="Stroke-3" stroke="#272727" stroke-width="1.80645161" stroke-linecap="round" stroke-linejoin="round"></path>
<ellipse id="Oval-9" fill="#272727" cx="4.8125" cy="24.015625" rx="1.3125" ry="1.359375"></ellipse>
<ellipse id="Oval-9" fill="#272727" cx="4.8125" cy="5.890625" rx="1.3125" ry="1.359375"></ellipse>
</g>
</g>
</g>
</svg>
<p class="ibm-type-c">Create persistant storage</p>
</div>
</div>
</div>
</div>
</main>
</div>
<link rel="stylesheet" type="text/css" href="./css/ibm-grid.min.css">
<link rel="stylesheet" type="text/css" href="./css/@ibm/type/css/ibm-type.min.css">
<style>
body {
background: #272727;
color: white;
}
.border-bottom {
border-bottom: 1px solid #4e4e4e;
}
.border-bottom-sm-md {
border-bottom: 1px solid #4e4e4e;
}
.border-bottom-sm-lg {
border-bottom: 1px solid #4e4e4e;
}
.border-left {
border-left: 1px solid #4e4e4e;
}
.border-right {
border-right: 1px solid #4e4e4e;
}
.carrot {
align-self: flex-end;
}
.flex {
align-items: center;
display: flex;
justify-content: space-between;
}
.flex * {
margin-bottom: 0;
}
.flex-center {
justify-content: center;
}
.flex-column {
align-items: flex-start;
flex-direction: column;
}
.flex-end,
.flex-end-sm-md {
justify-content: flex-end;
}
.flex-top {
align-items: flex-start;
}
.light {
background: #eaeaea;
color: #272727;
}
.white {
background: #fff;
}
@media (min-width: 640px) {
.border-bottom-md {
border-bottom: 1px solid #4e4e4e;
}
.border-bottom-sm-lg {
border-bottom: none;
}
.border-left-md {
border-left: 1px solid #4e4e4e;
}
.border-right-md {
border-right: 1px solid #4e4e4e;
}
.flex-sm {
display: none;
}
.inline-md {
display: inline !important;
}
}
@media (min-width: 1056px) {
.border-bottom-sm-md {
border-bottom: none;
}
.border-bottom-sm-lg {
border-bottom: 1px solid #4e4e4e;
}
.border-left-lg {
border-left: 1px solid #4e4e4e;
}
.flex-end-sm-md {
display: none;
}
}
</style>
</body>
</html>