FEED Validator

Sorry

This feed does not validate.

• line 3, column 0: Undefined root element: style [help]

  <style>
  

• line 5, column 80: XML parsing error: <unknown>:5:80: not well-formed (invalid token) [help]

  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&dis ...
                                                                                  ^

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendation.

• Feeds should not be served with the "text/html" media type [help]

Source: https://yari21.xyz

1.  
2.  
3. <style>
4.  
5. @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
6. body {
7. min-height: 100vh;
8. display: flex;
9. font-size: 16px;
10. align-items: center;
11. justify-content: center;
12. font-family: Inter;
13. padding: 1rem;
14. color: #585757;
15. background: #e8e8e8;
16. }
17. p , h2, h3, h4, h5 , h6 { margin : 0px; }
18. .block {
19. background: #fff;
20. width: 504px;
21. padding: 1rem;
22. background: #ffffff;
23. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.06),
24. 0px 1px 1px rgba(0, 0, 0, 0.08);
25. border-radius: 8px;
26. display: block;
27. &-header {
28. display: flex;
29. align-items: center;
30. justify-content: space-between;
31. margin-bottom: 16px;
32. .title {
33. display: flex;
34. align-items: flex-start;
35. .tag {
36. display: flex;
37. align-items: center;
38. justify-content: center;
39. margin-left: 4px;
40. background: #f7f7f7;
41. color: #1c1c1c;
42. text-align: center;
43. padding: 0 4px;
44. letter-spacing: 0.04em;
45. text-transform: uppercase;
46. font-weight: 500;
47. font-size: 10px;
48. line-height: 16px;
49. border: 1px solid #e8e8e8;
50. border-radius: 96px;
51. }
52. }
53. }
54. }
55. .writing {
56. background: #ffffff;
57. border: 1px solid #e8e8e8;
58. border-radius: 8px;
59. overflow: hidden;
60. margin-bottom: 24px;
61. padding: 12px;
62. .textarea {
63. width: 100%;
64. font-family: "Inter";
65. color: #585757;
66. height: 50px;
67. overflow-y: auto;
68. appearance: none;
69. border: 0;
70. outline: 0;
71. resize: none;
72. font-size: 16px;
73. line-height: 24px;
74. }
75. &:focus-within {
76. border: 1px solid #0085ff;
77. box-shadow: 0px 0px 2px 2px rgba(0, 133, 255, 0.15);
78. }
79. .footer {
80. margin-top: 12px;
81. padding-top: 12px;
82. display: flex;
83. align-items: center;
84. justify-content: space-between;
85. border-top: 1px solid #e8e8e8;
86. .text-format {
87. display: flex;
88. align-items: center;
89. gap: 12px;
90. }
91. }
92. }
93. .comment {
94. display: grid;
95. gap: 14px;
96. .user-banner {
97. display: flex;
98. justify-content: space-between;
99. align-items: center;
100. .user {
101. gap: 8px;
102. align-items: center;
103. display: flex;
104. .avatar {
105. height: 32px;
106. width: 32px;
107. display: flex;
108. align-items: center;
109. justify-content: center;
110. border: 1px solid transparent;
111. position: relative;
112. border-radius: 100px;
113. font-weight: 500;
114. font-size: 13px;
115. line-height: 20px;
116. img {
117. max-width: 100%;
118. border-radius: 50%;
119. }
120. .stat {
121. display: flex;
122. position: absolute;
123. right: -2px;
124. bottom: -2px;
125. display: block;
126. width: 12px;
127. height: 12px;
128. z-index: 9;
129. border: 2px solid #ffffff;
130. border-radius: 100px;
131. &.green {
132. background: #00ba34;
133. }
134. &.grey {
135. background: #969696;
136. }
137. }
138. }
139. }
140. }
141. .footer {
142. gap: 12px;
143. display: flex;
144. align-items: center;
145. .reactions {
146. display: flex;
147. align-items: center;
148. gap: 8px;
149. }
150. .divider {
151. height: 12px;
152. width: 1px;
153. background: #e8e8e8;
154. }
155. }
156. &:not(.comment:first-child) {
157. padding-bottom: 12px;
158. margin-bottom: 12px;
159. border-bottom: 1px solid #e8e8e8;
160. }
161. & + & {
162. padding-top: 12px;
163. }
164. &.reply {
165. .user-banner,
166. .content,
167. .footer {
168. margin-left: 32px;
169. }
170. }
171. }
172. .group-radio {
173. position: relative;
174. display: flex;
175. user-select: none;
176. align-items: stretch;
177. .button-radio {
178. box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.06);
179. label {
180. cursor: pointer;
181. padding: 4px 8px;
182. font-weight: 500;
183. font-size: 14px;
184. display: flex;
185. height: 28px;
186. align-items: center;
187. line-height: 28px;
188. transition: 0.2s ease;
189. }
190. &:first-child {
191. border-top-left-radius: 8px;
192. border-bottom-left-radius: 8px;
193. border-left: 1px solid #e8e8e8;
194. border-top: 1px solid #e8e8e8;
195. border-bottom: 1px solid #e8e8e8;
196. }
197. &:last-child {
198. border-top-right-radius: 8px;
199. border-right: 1px solid #e8e8e8;
200. border-top: 1px solid #e8e8e8;
201. border-bottom: 1px solid #e8e8e8;
202. border-bottom-right-radius: 8px;
203. }
204. input[type="radio"] {
205. display: none;
206. &:checked + label {
207. background: #f7f7f7;
208. }
209. }
210. }
211. .divider {
212. width: 1px;
213. background: #e8e8e8;
214. }
215. }
216. h5 {
217. font-size: 16px;
218. font-weight: 500;
219. line-height: 24px;
220. color: #1c1c1c;
221. letter-spacing: 0em;
222. text-align: left;
223. }
224. .btn {
225. appearance: none;
226. background: transparent;
227. border: 0;
228. padding: 0;
229. display: flex;
230. font: inherit;
231. align-items: center;
232. justify-content: center;
233. cursor: pointer;
234. color: #1c1c1c;
235. transition: 0.2s ease;
236. i {
237. color: #969696;
238. font-size: 18px;
239. transition: 0.15s ease-in-out;
240. }
241. &.primary {
242. min-width: 64px;
243. padding: 8px 12px;
244. height: 40px;
245. color: #fff;
246. display: inline-flex;
247. background: #0085ff;
248. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.06),
249. 0px 1px 1px rgba(0, 0, 0, 0.08);
250. border-radius: 8px;
251. &:hover {
252. background: lighten(#0085ff, 10%);
253. }
254. }
255. &:hover {
256. i {
257. opacity: 0.7;
258. }
259. }
260. outline: none;
261. img {
262. max-width: 18px;
263. height: auto;
264. }
265. &.react {
266. padding: 4px 8px 4px 4px;
267. background: #f7f7f7;
268. border: 1px solid #e8e8e8;
269. border-radius: 8px;
270. gap: 4px;
271. &:hover {
272. background-color: #eee;
273. }
274. }
275. &.dropdown {
276. display: flex;
277. cursor: pointer;
278. border-radius: 50%;
279. align-items: center;
280. justify-content: center;
281. padding: 0;
282. width: 26px;
283. height: 26px;
284. &:hover {
285. background-color: #eee;
286. }
287. }
288. }
289. p {
290. line-height: 24px;
291. a.tagged-user {
292. display: inline-flex;
293. padding: 2px 8px;
294. background: #e5f3ff;
295. border-radius: 256px;
296. color: #0085ff;
297. }
298. }
299. .is-mute {
300. font-weight: 400;
301. font-size: 13px;
302. line-height: 20px;
303. color: #969696;
304. }
305. a {
306. font-weight: 500;
307. font-size: 13px;
308. line-height: 20px;
309. color: #1c1c1c;
310. text-decoration: none;
311. transition: opacity 0.15s ease-in-out;
312. &:hover {
313. opacity: 0.7;
314. }
315. }
316. h2 {
317. font-weight: 500;
318. font-size: 20px;
319. line-height: 28px;
320. color: #1c1c1c;
321. }
322. * {
323. box-sizing: border-box;
324. }
325. .load {
326. display: flex;
327. align-items: center;
328. justify-content: center;
329. span {
330. display: flex;
331. align-items: center;
332. font-weight: 400;
333. font-size: 13px;
334. line-height: 20px;
335. color: #969696;
336. i {
337. margin-right: 6px;
338. }
339. }
340. }
341. .group-button {
342. display: flex;
343. gap: 16px;
344. }
345.  
346.  
347. </style>
348.  
349.  
350. <div class="block">
351. <div class="block-header">
352. <div class="title" style="margin-bottom:20px;">
353. <h2>Comments</h2>
354. </div>
355. <div class="group-radio" style="margin-bottom:20px">
356. <span class="button-radio">
357. <input id="latest" name="latest" type="radio" checked>
358. <label for="latest">Latest</label>
359. </span>
360. <div class="divider"></div>
361. <span class="button-radio">
362. <input id="popular" name="latest" type="radio">
363. <label for="popular">Popular</label>
364. </span>
365. </div>
366. </div>
367. <div class="writing">
368. <div contenteditable="true" class="textarea" autofocus spellcheck="false">
369. <p>Hi <a class="tagged-user">@YI</a></p>
370. </div>
371. <div class="footer">
372. <div class="text-format">
373. <button class="btn"><i class="ri-bold"></i></button>
374. <button class="btn"><i class="ri-italic"></i></button>
375. <button class="btn"><i class="ri-underline"></i></button>
376. <button class="btn"><i class="ri-list-unordered"></i></button>
377. </div>
378. <div class="group-button">
379. <button class="btn"><i class="ri-at-line"></i></button>
380. <button class="btn primary">Send</button>
381. </div>
382. </div>
383. </div>
384. <div>
385. <div class="comment">
386. <div class="user-banner">
387. <div class="user">
388. <div class="avatar" style="background-color:#fff5e9;border-color:#ffe0bd; color:#F98600">
389. YI
390. <span class="stat green"></span>
391. </div>
392. <h5>Yari</h5>
393. </div>
394. <button class="btn dropdown"><i class="ri-more-line"></i></button>
395. </div>
396. <div class="content">
397. <p>Thank you for sharing the <a href="https://yari12.xyz/">post</a>.</p>
398. </div>
399. <div class="footer">
400. <button class="btn"><i class="ri-emotion-line"></i></button>
401. <div class="divider"></div>
402. <a href="#">Reply</a>
403. <div class="divider"></div>
404. <span class="is-mute">09-02-2025</span>
405. </div>
406. </div>
407.  
408. </div>
409. <div class="load">
410. <span><i class="ri-refresh-line"></i>Loading</span>
411. </div>
412. </div><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"5f32066f2cd2441b8df6bd5f66b7df54","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
413.  

Home · About · News · Docs · Terms