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://michaeldawson.shop

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

Home · About · News · Docs · Terms

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