{"id":903,"date":"2019-05-23T06:01:08","date_gmt":"2019-05-23T06:01:08","guid":{"rendered":"http:\/\/csshint.com\/?p=903"},"modified":"2023-02-19T15:35:44","modified_gmt":"2023-02-19T15:35:44","slug":"css-blockquotes","status":"publish","type":"post","link":"https:\/\/csshint.com\/css-blockquotes\/","title":{"rendered":"18 CSS Blockquotes"},"content":{"rendered":"<p>Take a look at some of our favorite Collection of hand-picked <strong>HTML and CSS blockquote<\/strong> code  examples : animated , hover effects, typography styles, etc.<\/p>\n<article class=\"inn-article\">\n<a href=\"https:\/\/www.youtube.com\/watch?v=7dflq-IizqU&#038;ab_channel=csshint.com\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/Quotes-design.jpg\" alt=\"Quotes-design\" width=\"700\" height=\"393\" class=\"aligncenter size-full wp-image-8134\" srcset=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/Quotes-design.jpg 700w, https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/Quotes-design-300x168.jpg 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><br \/>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>1.<\/span>Quotes animation<\/h4>\n<p><iframe height=\"438\" style=\"width: 100%;\" scrolling=\"no\" title=\"Quotes animation\" src=\"\/\/codepen.io\/_Sabine\/embed\/preview\/EryxNr\/?height=438&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/_Sabine\/pen\/EryxNr\/'>Quotes animation<\/a> by Sabine Robart<br \/>\n  (<a href='https:\/\/codepen.io\/_Sabine'>@_Sabine<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Sabine Robart  <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/_Sabine\/pen\/EryxNr\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n\n<article class=\"inn-article\">\n<h4><span>2.<\/span>Quote: Steven Pressfield<\/h4>\n<p><iframe height=\"416\" style=\"width: 100%;\" scrolling=\"no\" title=\"Quote:  Steven Pressfield \u2022 Start before you are ready\" src=\"\/\/codepen.io\/jupago\/embed\/dwZKbM\/?height=416&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/jupago\/pen\/dwZKbM\/'>Quote:  Steven Pressfield \u2022 Start before you are ready<\/a> by Juan Pablo<br \/>\n  (<a href='https:\/\/codepen.io\/jupago'>@jupago<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Juan Pablo <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/jupago\/pen\/dwZKbM\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n\n<article class=\"inn-article\">\n<h4><span>3.<\/span>Coffee Quote<\/h4>\n<p><iframe height=\"430\" style=\"width: 100%;\" scrolling=\"no\" title=\"Coffee Quote - blockquote, flexbox, rgba, before content\" src=\"\/\/codepen.io\/JacobLett\/embed\/preview\/jZYENy\/?height=430&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/JacobLett\/pen\/jZYENy\/'>Coffee Quote &#8211; blockquote, flexbox, rgba, before content<\/a> by Jacob Lett<br \/>\n  (<a href='https:\/\/codepen.io\/JacobLett'>@JacobLett<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Jacob Lett <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/JacobLett\/pen\/jZYENy\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n\n<article class=\"inn-article\">\n<h4><span>4.<\/span>Quotes with Font Awesome<\/h4>\n<p><iframe height=\"433\" style=\"width: 100%;\" scrolling=\"no\" title=\"Quotes with Font Awesome and pseudo elements\" src=\"\/\/codepen.io\/jimmycow\/embed\/preview\/LmjVaz\/?height=433&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/jimmycow\/pen\/LmjVaz\/'>Quotes with Font Awesome and pseudo elements<\/a> by Jaime<br \/>\n  (<a href='https:\/\/codepen.io\/jimmycow'>@jimmycow<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Jaime <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/jimmycow\/pen\/LmjVaz\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>5.<\/span>Blockquote Styles<\/h4>\n<p><iframe height=\"461\" style=\"width: 100%;\" scrolling=\"no\" title=\"Blockquote Styles\" src=\"\/\/codepen.io\/chris22smith\/embed\/preview\/oQWavL\/?height=461&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/chris22smith\/pen\/oQWavL\/'>Blockquote Styles<\/a> by Chris Smith<br \/>\n  (<a href='https:\/\/codepen.io\/chris22smith'>@chris22smith<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>   Chris Smith  <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/chris22smith\/pen\/oQWavL\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>6.<\/span>Quote: Jared Spool <\/h4>\n<p><iframe height=\"496\" style=\"width: 100%;\" scrolling=\"no\" title=\"Quote:  Jared Spool \u2022 Web Site Usability: A Designer's Guide\" src=\"\/\/codepen.io\/jupago\/embed\/preview\/GPxqLX\/?height=496&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/jupago\/pen\/GPxqLX\/'>Quote:  Jared Spool \u2022 Web Site Usability: A Designer&#8217;s Guide<\/a> by Juan Pablo<br \/>\n  (<a href='https:\/\/codepen.io\/jupago'>@jupago<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>    Juan Pablo  <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/jupago\/pen\/GPxqLX\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><br \/>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>7.<\/span>CSS Quote Box Hover Effects<\/h4>\n<p><a href=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/Blockquotes.gif\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/Blockquotes.gif\" alt=\"CSS Quote style\" width=\"671\" height=\"400\" class=\"aligncenter size-full wp-image-907\" \/><\/a><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> abdel Rhman  <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Pug) \/ CSS(SCSS)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/abdelRhman345\/pen\/oJOPdq\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>8.<\/span>Author Quote<\/h4>\n<p><iframe height=\"433\" style=\"width: 100%;\" scrolling=\"no\" title=\"Day 007 Author Quote\" src=\"\/\/codepen.io\/khadkamhn\/embed\/preview\/eNKKwN\/?height=433&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/khadkamhn\/pen\/eNKKwN\/'>Day 007 Author Quote<\/a> by Mohan Khadka<br \/>\n  (<a href='https:\/\/codepen.io\/khadkamhn'>@khadkamhn<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Mohan Khadka <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/khadkamhn\/pen\/eNKKwN\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><br \/>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>9.<\/span>Quotes<\/h4>\n<p><iframe height=\"392\" style=\"width: 100%;\" scrolling=\"no\" title=\"Quotes\" src=\"\/\/codepen.io\/Iulius90\/embed\/preview\/VYyNBY\/?height=392&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/Iulius90\/pen\/VYyNBY\/'>Quotes<\/a> by Iulian Savin<br \/>\n  (<a href='https:\/\/codepen.io\/Iulius90'>@Iulius90<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Iulian Savin <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/Iulius90\/pen\/VYyNBY\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>10.<\/span>quote card<\/h4>\n<p><iframe height=\"457\" style=\"width: 100%;\" scrolling=\"no\" title=\"Shiienurm quote card\" src=\"\/\/codepen.io\/governorfancypants\/embed\/preview\/elsDc\/?height=457&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/governorfancypants\/pen\/elsDc\/'>Shiienurm quote card<\/a> by Tobias Johansson<br \/>\n  (<a href='https:\/\/codepen.io\/governorfancypants'>@governorfancypants<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Tobias Johansson <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) \/ JS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/governorfancypants\/pen\/elsDc\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>11.<\/span>quote Test<\/h4>\n<p><iframe height=\"442\" style=\"width: 100%;\" scrolling=\"no\" title=\"Quote Test\" src=\"\/\/codepen.io\/chepe\/embed\/preview\/VLZoMK\/?height=442&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/chepe\/pen\/VLZoMK\/'>Quote Test<\/a> by Jose Manuel Gulias Lugo<br \/>\n  (<a href='https:\/\/codepen.io\/chepe'>@chepe<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Jose Manuel Gulias Lugo <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/chepe\/pen\/VLZoMK\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>12.<\/span>Pure CSS Blockquote<\/h4>\n<p><iframe height=\"407\" style=\"width: 100%;\" scrolling=\"no\" title=\"Pure CSS Blockquote\" src=\"\/\/codepen.io\/SkyHyzer\/embed\/preview\/gRvEGq\/?height=407&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/SkyHyzer\/pen\/gRvEGq\/'>Pure CSS Blockquote<\/a> by John Fink<br \/>\n  (<a href='https:\/\/codepen.io\/SkyHyzer'>@SkyHyzer<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> John Fink <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML (Pug) \/ CSS(Sass)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/SkyHyzer\/pen\/gRvEGq\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>13.<\/span>BlockQuote css<\/h4>\n<p><a href=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/BlockQuote.gif\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/BlockQuote.gif\" alt=\"HTML and CSS blockquote\" width=\"840\" height=\"437\" class=\"aligncenter size-full wp-image-906\" \/><\/a><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Csshint <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/bootsnipp.com\/snippets\/3Al5m\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>14.<\/span>Clean and simple blockquote style<\/h4>\n<p><iframe height=\"456\" style=\"width: 100%;\" scrolling=\"no\" title=\"Clean and simple blockquote style\" src=\"\/\/codepen.io\/cliftwalker\/embed\/preview\/XJaEXY\/?height=456&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/cliftwalker\/pen\/XJaEXY\/'>Clean and simple blockquote style<\/a> by Jonathan Clift<br \/>\n  (<a href='https:\/\/codepen.io\/cliftwalker'>@cliftwalker<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Jonathan Clift <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/cliftwalker\/pen\/XJaEXY\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>15.<\/span>blockquote styl\u00e9<\/h4>\n<p><iframe height=\"397\" style=\"width: 100%;\" scrolling=\"no\" title=\"blockquote styl\u00e9e litt\u00e9raire\" src=\"\/\/codepen.io\/kami441\/embed\/preview\/xardn\/?height=397&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/kami441\/pen\/xardn\/'>blockquote styl\u00e9e litt\u00e9raire<\/a> by Vero<br \/>\n  (<a href='https:\/\/codepen.io\/kami441'>@kami441<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Vero <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/kami441\/pen\/xardn\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><br \/>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>16.<\/span>Quote cards<\/h4>\n<p><iframe height=\"438\" style=\"width: 100%;\" scrolling=\"no\" title=\"Quote cards\" src=\"\/\/codepen.io\/_Sabine\/embed\/preview\/daNzdP\/?height=438&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/_Sabine\/pen\/daNzdP\/'>Quote cards<\/a> by Sabine Robart<br \/>\n  (<a href='https:\/\/codepen.io\/_Sabine'>@_Sabine<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Sabine Robart <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Scss)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/_Sabine\/pen\/daNzdP\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>17.<\/span>Modern Block Quote Styles<\/h4>\n<p><a href=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/Modern-Block-Quote-Styles.gif\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/Modern-Block-Quote-Styles.gif\" alt=\"Modern Block Quote Styles\" width=\"762\" height=\"449\" class=\"aligncenter size-full wp-image-905\" \/><\/a><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Mary Lou <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/tympanus.net\/codrops\/2012\/07\/25\/modern-block-quote-styles\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>18.<\/span>Quote styling<\/h4>\n<p><iframe height=\"397\" style=\"width: 100%;\" scrolling=\"no\" title=\"Quote styling\" src=\"\/\/codepen.io\/JoeHastings\/embed\/preview\/MOdRVm\/?height=397&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/JoeHastings\/pen\/MOdRVm\/'>Quote styling<\/a> by Joe Hastings<br \/>\n  (<a href='https:\/\/codepen.io\/JoeHastings'>@JoeHastings<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Joe Hastings <\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Less)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/JoeHastings\/pen\/MOdRVm\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Take a look at some of our favorite Collection of hand-picked HTML and CSS blockquote code examples : animated , hover effects, typography styles, etc. 1.Quotes animation See the Pen Quotes animation by Sabine Robart (@_Sabine) on CodePen. Author Sabine Robart Made with HTML \/ CSS(SCSS) demo and code Get Hosting 2.Quote: Steven Pressfield See [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,3,2],"tags":[123,121,122],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>18 CSS Blockquotes - csshint - A designer hub<\/title>\n<meta name=\"description\" content=\"Collection of hand-picked HTML and CSS blockquote code examples, Simple and Nice Blockquote Styling, Simple CSS Snippets for Creating Beautiful Blockquotes\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/csshint.com\/css-blockquotes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"18 CSS Blockquotes - csshint - A designer hub\" \/>\n<meta property=\"og:description\" content=\"Collection of hand-picked HTML and CSS blockquote code examples, Simple and Nice Blockquote Styling, Simple CSS Snippets for Creating Beautiful Blockquotes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csshint.com\/css-blockquotes\/\" \/>\n<meta property=\"og:site_name\" content=\"csshint - A designer hub\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-23T06:01:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-19T15:35:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/Blockquotes.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"671\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csshint.com\/css-blockquotes\/\",\"url\":\"https:\/\/csshint.com\/css-blockquotes\/\",\"name\":\"18 CSS Blockquotes - csshint - A designer hub\",\"isPartOf\":{\"@id\":\"https:\/\/csshint.com\/#website\"},\"datePublished\":\"2019-05-23T06:01:08+00:00\",\"dateModified\":\"2023-02-19T15:35:44+00:00\",\"author\":{\"@id\":\"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed\"},\"description\":\"Collection of hand-picked HTML and CSS blockquote code examples, Simple and Nice Blockquote Styling, Simple CSS Snippets for Creating Beautiful Blockquotes\",\"breadcrumb\":{\"@id\":\"https:\/\/csshint.com\/css-blockquotes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csshint.com\/css-blockquotes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csshint.com\/css-blockquotes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csshint.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"18 CSS Blockquotes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/csshint.com\/#website\",\"url\":\"https:\/\/csshint.com\/\",\"name\":\"csshint - A designer hub\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/csshint.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csshint.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/csshint.com\/author\/21232f297a57a5a743894a0e4a801fc3\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"18 CSS Blockquotes - csshint - A designer hub","description":"Collection of hand-picked HTML and CSS blockquote code examples, Simple and Nice Blockquote Styling, Simple CSS Snippets for Creating Beautiful Blockquotes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/csshint.com\/css-blockquotes\/","og_locale":"en_US","og_type":"article","og_title":"18 CSS Blockquotes - csshint - A designer hub","og_description":"Collection of hand-picked HTML and CSS blockquote code examples, Simple and Nice Blockquote Styling, Simple CSS Snippets for Creating Beautiful Blockquotes","og_url":"https:\/\/csshint.com\/css-blockquotes\/","og_site_name":"csshint - A designer hub","article_published_time":"2019-05-23T06:01:08+00:00","article_modified_time":"2023-02-19T15:35:44+00:00","og_image":[{"width":671,"height":400,"url":"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/Blockquotes.gif","type":"image\/gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/csshint.com\/css-blockquotes\/","url":"https:\/\/csshint.com\/css-blockquotes\/","name":"18 CSS Blockquotes - csshint - A designer hub","isPartOf":{"@id":"https:\/\/csshint.com\/#website"},"datePublished":"2019-05-23T06:01:08+00:00","dateModified":"2023-02-19T15:35:44+00:00","author":{"@id":"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed"},"description":"Collection of hand-picked HTML and CSS blockquote code examples, Simple and Nice Blockquote Styling, Simple CSS Snippets for Creating Beautiful Blockquotes","breadcrumb":{"@id":"https:\/\/csshint.com\/css-blockquotes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csshint.com\/css-blockquotes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/csshint.com\/css-blockquotes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csshint.com\/"},{"@type":"ListItem","position":2,"name":"18 CSS Blockquotes"}]},{"@type":"WebSite","@id":"https:\/\/csshint.com\/#website","url":"https:\/\/csshint.com\/","name":"csshint - A designer hub","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/csshint.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csshint.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/csshint.com\/author\/21232f297a57a5a743894a0e4a801fc3\/"}]}},"_links":{"self":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts\/903"}],"collection":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/comments?post=903"}],"version-history":[{"count":5,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts\/903\/revisions"}],"predecessor-version":[{"id":8135,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts\/903\/revisions\/8135"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/media\/907"}],"wp:attachment":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/media?parent=903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/categories?post=903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/tags?post=903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}