Your code has three issues that need to be addressed.
To begin with, you have mistakenly combined the properties line-height
and color
, resulting in line-height: color:
. It seems like the inclusion of line-height
is a typo since you haven't specified it in your code snippet. Make sure to separate these properties using a semicolon if you are actually using line-height
.
Secondly, you need to remember to include the font reference along with assigning it to .contentquote
. The Roboto Slab font can be accessed on Google Fonts and linked using
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
.
The third issue is related to the color value #003b49
, which actually represents a bluish green rather than a yellowish orange. Replace this with the correct color value, which in this case is #fdb527
.
In terms of positioning the quotes correctly, make use of position: absolute
on .quote
, set a negative margin-top
to adjust its position relative to the text, and use the pseudo-selector :first-of-type
to shift the first quote to the left with a negative margin-left
on .quote:first-of-type
. To counteract the negative margin, apply a padding-left
on .contentquote
.
Below is an example of how to implement these corrections:
.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>
I hope this resolves the issues for you! :)