How can I style my blockquotes to look like this? - html

Question

I'm having trouble finding a way to add yellow blockquotes to my quote without it indenting/adding unwanted line height.
Here's what I'm trying to achieve:
Here's what 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 my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">”</span></h1>
Here's what I keep getting:
Any help would be greatly appreciated!

Answer 1

You have three problems with your code.
First, you have accidentally combined line-height and color as line-height: color:. You don't specify a line-height in your sample code, so I'm guessing the line-height is simply a typo. If you're actually using a line-height, you'll need to separate these out, using a semicolon.
Second, you forgot to include the font reference in addition to assigning it to .contentquote. The Roboto Slab font can be found at Google, and linked with <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">.
Third, #003b49 doesn't correlate to a yellowish orange; it correlates to a bluish green. You'll need to substitute this for the appropriate colour. The exact colour used in the example is #fdb527.
For the actual positioning of the quotes, you're looking to apply position: absolute to .quote. Set a negative margin-top on it to bring it down, inline with the text. Then use the pseudo-selector :first-of-type to shift the quote to the left of the text with a negative margin-left on .quote:first-of-type. Finally, to offset the negative margin, set a padding-left on .contentquote.
Here's a 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 my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">”</span></h1>
Hope this helps! :)

Answer 2

To solve your actual problem...
I'm having trouble finding a way to add yellow blockquotes to my quote without it indenting/adding unwanted line height.
You can use position: absolute on the quotation marks to prevent them from interfering with the flow of the paragraph. I also indented the paragraph to create a gutter for the starting quotation mark.
.contentquote {
font-family: 'Roboto Slab', serif;
font-size: 20px;
padding: 0 0 0 20px;
}
.quote {
color: #fdb527;
font-size: 2.9em;
position: absolute;
margin-top: -16px;
}
.quote:first-child {
left: 0;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<h1 class="contentquote"><span class="quote quote--start">“</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">”</span></h1>

Answer 3

Try the code below. :)
In my part, I used CSS pseudo elements :before and :after to the quotes.
*{ box-sizing: border-box; -webkit-box-sizing: border-box; }
.contentquote {
font-family: 'Roboto Slab', serif;
font-size: 20px;
max-width: 350px;
width: 100%;
padding: 15px 25px 56px 40px;
background: #e4e4e4;
color: #575757;
position:relative;
}
.contentquote p{ position: relative; display: inline-block; margin: 0; }
.contentquote p:before, .contentquote p:after{ color: #fdb527; font-size: 2.9em; position: absolute; }
.contentquote p:before{ left: -28px; top: -13px; content: "“"; }
.contentquote p:after{ bottom: -35px; content: "”"; }
.contentquote h2{ position: absolute; font-size: .7em; right: 28px; bottom: 18px; font-weight: normal; }
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<div class="contentquote"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor do eiusmod tempor.</p><h2>Temporary Name</h2></div>