html - How can I style my blockquotes to look like this? -
i'm having trouble finding way add yellow blockquotes quote without indenting/adding unwanted line height.
here's i'm trying achieve:
here's i've tried:
.contentquote { font-family: 'roboto slab', serif; font-size: 20px; } .quote { line-height: color: #003b49; font-size: 2.9em; } <h1 class="contentquote"><span class="quote">“</span>in circles, when talk people firm best thinker in (value-based care) area , firm couples actual execution, talk premier...<span class="quote">”</span></h1> here's keep getting:
any appreciated!
you have 3 problems code.
first, have accidentally combined line-height , color line-height: color:. don't specify line-height in sample code, i'm guessing line-height typo. if you're using line-height, you'll need separate these out, using semicolon.
second, forgot include font reference in addition assigning .contentquote. roboto slab font can found @ google, , linked <link href="https://fonts.googleapis.com/css?family=roboto+slab" rel="stylesheet">.
third, #003b49 doesn't correlate yellowish orange; correlates bluish green. you'll need substitute appropriate colour. exact colour used in example #fdb527.
for actual positioning of quotes, you're looking apply position: absolute .quote. set negative margin-top on bring down, inline text. use pseudo-selector :first-of-type shift quote left of text negative margin-left on .quote:first-of-type. finally, offset negative margin, set padding-left on .contentquote.
here's working example:
.contentquote { font-family: 'roboto slab', serif; font-size: 20px; padding-left: 22px; } .quote { color: #fdb527; font-size: 2.9em; position: absolute; margin-top: -16px; } .quote:first-of-type { margin-left: -22px; } <link href="https://fonts.googleapis.com/css?family=roboto+slab" rel="stylesheet"> <h1 class="contentquote"><span class="quote">“</span>in circles, when talk people firm best thinker in (value-based care) area , firm couples actual execution, talk premier...<span class="quote">”</span></h1> hope helps! :)


Comments
Post a Comment