Sorry

This feed does not validate.

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

Source: http://erichenderson.shop

  1.  
  2. <style>
  3.  
  4. @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
  5. body {
  6. min-height: 100vh;
  7. display: flex;
  8. font-size: 16px;
  9. align-items: center;
  10. justify-content: center;
  11. font-family: Inter;
  12. padding: 1rem;
  13. color: #585757;
  14. background: #e8e8e8;
  15. }
  16. p , h2, h3, h4, h5 , h6 { margin : 0px; }
  17. .block {
  18. background: #fff;
  19. width: 504px;
  20. padding: 1rem;
  21. background: #ffffff;
  22. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.06),
  23. 0px 1px 1px rgba(0, 0, 0, 0.08);
  24. border-radius: 8px;
  25. display: block;
  26. &-header {
  27. display: flex;
  28. align-items: center;
  29. justify-content: space-between;
  30. margin-bottom: 16px;
  31. .title {
  32. display: flex;
  33. align-items: flex-start;
  34. .tag {
  35. display: flex;
  36. align-items: center;
  37. justify-content: center;
  38. margin-left: 4px;
  39. background: #f7f7f7;
  40. color: #1c1c1c;
  41. text-align: center;
  42. padding: 0 4px;
  43. letter-spacing: 0.04em;
  44. text-transform: uppercase;
  45. font-weight: 500;
  46. font-size: 10px;
  47. line-height: 16px;
  48. border: 1px solid #e8e8e8;
  49. border-radius: 96px;
  50. }
  51. }
  52. }
  53. }
  54. .writing {
  55. background: #ffffff;
  56. border: 1px solid #e8e8e8;
  57. border-radius: 8px;
  58. overflow: hidden;
  59. margin-bottom: 24px;
  60. padding: 12px;
  61. .textarea {
  62. width: 100%;
  63. font-family: "Inter";
  64. color: #585757;
  65. height: 50px;
  66. overflow-y: auto;
  67. appearance: none;
  68. border: 0;
  69. outline: 0;
  70. resize: none;
  71. font-size: 16px;
  72. line-height: 24px;
  73. }
  74. &:focus-within {
  75. border: 1px solid #0085ff;
  76. box-shadow: 0px 0px 2px 2px rgba(0, 133, 255, 0.15);
  77. }
  78. .footer {
  79. margin-top: 12px;
  80. padding-top: 12px;
  81. display: flex;
  82. align-items: center;
  83. justify-content: space-between;
  84. border-top: 1px solid #e8e8e8;
  85. .text-format {
  86. display: flex;
  87. align-items: center;
  88. gap: 12px;
  89. }
  90. }
  91. }
  92. .comment {
  93. display: grid;
  94. gap: 14px;
  95. .user-banner {
  96. display: flex;
  97. justify-content: space-between;
  98. align-items: center;
  99. .user {
  100. gap: 8px;
  101. align-items: center;
  102. display: flex;
  103. .avatar {
  104. height: 32px;
  105. width: 32px;
  106. display: flex;
  107. align-items: center;
  108. justify-content: center;
  109. border: 1px solid transparent;
  110. position: relative;
  111. border-radius: 100px;
  112. font-weight: 500;
  113. font-size: 13px;
  114. line-height: 20px;
  115. img {
  116. max-width: 100%;
  117. border-radius: 50%;
  118. }
  119. .stat {
  120. display: flex;
  121. position: absolute;
  122. right: -2px;
  123. bottom: -2px;
  124. display: block;
  125. width: 12px;
  126. height: 12px;
  127. z-index: 9;
  128. border: 2px solid #ffffff;
  129. border-radius: 100px;
  130. &.green {
  131. background: #00ba34;
  132. }
  133. &.grey {
  134. background: #969696;
  135. }
  136. }
  137. }
  138. }
  139. }
  140. .footer {
  141. gap: 12px;
  142. display: flex;
  143. align-items: center;
  144. .reactions {
  145. display: flex;
  146. align-items: center;
  147. gap: 8px;
  148. }
  149. .divider {
  150. height: 12px;
  151. width: 1px;
  152. background: #e8e8e8;
  153. }
  154. }
  155. &:not(.comment:first-child) {
  156. padding-bottom: 12px;
  157. margin-bottom: 12px;
  158. border-bottom: 1px solid #e8e8e8;
  159. }
  160. & + & {
  161. padding-top: 12px;
  162. }
  163. &.reply {
  164. .user-banner,
  165. .content,
  166. .footer {
  167. margin-left: 32px;
  168. }
  169. }
  170. }
  171. .group-radio {
  172. position: relative;
  173. display: flex;
  174. user-select: none;
  175. align-items: stretch;
  176. .button-radio {
  177. box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.06);
  178. label {
  179. cursor: pointer;
  180. padding: 4px 8px;
  181. font-weight: 500;
  182. font-size: 14px;
  183. display: flex;
  184. height: 28px;
  185. align-items: center;
  186. line-height: 28px;
  187. transition: 0.2s ease;
  188. }
  189. &:first-child {
  190. border-top-left-radius: 8px;
  191. border-bottom-left-radius: 8px;
  192. border-left: 1px solid #e8e8e8;
  193. border-top: 1px solid #e8e8e8;
  194. border-bottom: 1px solid #e8e8e8;
  195. }
  196. &:last-child {
  197. border-top-right-radius: 8px;
  198. border-right: 1px solid #e8e8e8;
  199. border-top: 1px solid #e8e8e8;
  200. border-bottom: 1px solid #e8e8e8;
  201. border-bottom-right-radius: 8px;
  202. }
  203. input[type="radio"] {
  204. display: none;
  205. &:checked + label {
  206. background: #f7f7f7;
  207. }
  208. }
  209. }
  210. .divider {
  211. width: 1px;
  212. background: #e8e8e8;
  213. }
  214. }
  215. h5 {
  216. font-size: 16px;
  217. font-weight: 500;
  218. line-height: 24px;
  219. color: #1c1c1c;
  220. letter-spacing: 0em;
  221. text-align: left;
  222. }
  223. .btn {
  224. appearance: none;
  225. background: transparent;
  226. border: 0;
  227. padding: 0;
  228. display: flex;
  229. font: inherit;
  230. align-items: center;
  231. justify-content: center;
  232. cursor: pointer;
  233. color: #1c1c1c;
  234. transition: 0.2s ease;
  235. i {
  236. color: #969696;
  237. font-size: 18px;
  238. transition: 0.15s ease-in-out;
  239. }
  240. &.primary {
  241. min-width: 64px;
  242. padding: 8px 12px;
  243. height: 40px;
  244. color: #fff;
  245. display: inline-flex;
  246. background: #0085ff;
  247. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.06),
  248. 0px 1px 1px rgba(0, 0, 0, 0.08);
  249. border-radius: 8px;
  250. &:hover {
  251. background: lighten(#0085ff, 10%);
  252. }
  253. }
  254. &:hover {
  255. i {
  256. opacity: 0.7;
  257. }
  258. }
  259. outline: none;
  260. img {
  261. max-width: 18px;
  262. height: auto;
  263. }
  264. &.react {
  265. padding: 4px 8px 4px 4px;
  266. background: #f7f7f7;
  267. border: 1px solid #e8e8e8;
  268. border-radius: 8px;
  269. gap: 4px;
  270. &:hover {
  271. background-color: #eee;
  272. }
  273. }
  274. &.dropdown {
  275. display: flex;
  276. cursor: pointer;
  277. border-radius: 50%;
  278. align-items: center;
  279. justify-content: center;
  280. padding: 0;
  281. width: 26px;
  282. height: 26px;
  283. &:hover {
  284. background-color: #eee;
  285. }
  286. }
  287. }
  288. p {
  289. line-height: 24px;
  290. a.tagged-user {
  291. display: inline-flex;
  292. padding: 2px 8px;
  293. background: #e5f3ff;
  294. border-radius: 256px;
  295. color: #0085ff;
  296. }
  297. }
  298. .is-mute {
  299. font-weight: 400;
  300. font-size: 13px;
  301. line-height: 20px;
  302. color: #969696;
  303. }
  304. a {
  305. font-weight: 500;
  306. font-size: 13px;
  307. line-height: 20px;
  308. color: #1c1c1c;
  309. text-decoration: none;
  310. transition: opacity 0.15s ease-in-out;
  311. &:hover {
  312. opacity: 0.7;
  313. }
  314. }
  315. h2 {
  316. font-weight: 500;
  317. font-size: 20px;
  318. line-height: 28px;
  319. color: #1c1c1c;
  320. }
  321. * {
  322. box-sizing: border-box;
  323. }
  324. .load {
  325. display: flex;
  326. align-items: center;
  327. justify-content: center;
  328. span {
  329. display: flex;
  330. align-items: center;
  331. font-weight: 400;
  332. font-size: 13px;
  333. line-height: 20px;
  334. color: #969696;
  335. i {
  336. margin-right: 6px;
  337. }
  338. }
  339. }
  340. .group-button {
  341. display: flex;
  342. gap: 16px;
  343. }
  344.  
  345.  
  346. </style>
  347.  
  348. <script src="https://analytics.ahrefs.com/analytics.js" data-key="qEyf2+MYGIbTJ7YjDC9S7A" async></script>
  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">@Jo</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. AF
  390. <span class="stat green"></span>
  391. </div>
  392. <h5>Albert Flores</h5>
  393. </div>
  394. <button class="btn dropdown"><i class="ri-more-line"></i></button>
  395. </div>
  396. <div class="content">
  397. <p>Before installing this plugin please put back again your wordpress and site url back to http.</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. <div class="reply comment">
  408. <div class="user-banner">
  409. <div class="user">
  410. <div class="avatar" style="background-color:#fff5e9;border-color:#ffe0bd; color:#F98600">
  411. GP
  412. <span class="stat green"></span>
  413. </div>
  414. <h5>Grooming Products</h5>
  415. </div>
  416. <button class="btn dropdown"><i class="ri-more-line"></i></button>
  417. </div>
  418. <div class="content">
  419. <p>Hi <a href="#" class="tagged-user">@Albert Flores</a>.Thanks for your reply. Find the best winston <a href="https://winstonindia.com/collections/trimmer-for-men">trimmer for men</a> catering to all your grooming needs. </p>
  420. </div>
  421. <div class="footer">
  422. <button class="btn"><i class="ri-emotion-line"></i></button>
  423. <div class="reactions">
  424. <button class="btn react"><img src="https://cdn-0.emojis.wiki/emoji-pics/apple/smiling-face-with-heart-eyes-apple.png" alt="">2</button>
  425. </div>
  426. <div class="divider"></div>
  427. <a href="#">Reply</a>
  428. <div class="divider"></div>
  429. <span class="is-mute">10-05-2025</span>
  430. </div>
  431. </div>
  432. </div>
  433. <div class="load">
  434. <span><i class="ri-refresh-line"></i>Loading</span>
  435. </div>
  436. </div>

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda