More Fonts


#1

https://www.codecademy.com/courses/learn-html-css/lessons/css-fonts/exercises/more-fonts?action=lesson_resume


Not sure what I am doing wrong getting the following error:
expected div.content > h1 to have its font-family style equal to "Playfair Display", serif but got 'Playfair Display', serif

<!DOCTYPE html>
<html>
<head>
    <title>The Rise of Soccer in The US</title>

    <link href="style.css" type="text/css" rel="stylesheet">
  
      <link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
  
 		 <link href="https://fonts.googleapis.com/css?family=Playfair+Display" type="text/css" rel="stylesheet"> 
  
</head>
<body>
    
 <div class="content">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_writer-avatar.jpg" class="writer-img">
    <h3 class="byline">Article By: Jane Dover</h3>
    <h1>How the Rise of Soccer in the US Is Changing the Face of Youth Sports</h1>
    <h2>The focus on soccer in youth sports programs is exploding nation-wide</h2>
    <p>When the first World Cup arrived in the US in the 90's everyone officially declared that soccer was it. Well it's taken it's time but we can definitely see the influence of soccer, especially women's soccer, across the US. This year, 3 million kids played in youth soccer leagues with 2/3 of those leagues for girls. In fact, in the 12-17 age range the MLS has surpassed the MLB and NFL in popularity.</p>
    <p>Part of this meteoric rise can be attributed to the impressively soaring ad dollars being pumped into the Women's World Cup games in 2014. The women's games generated $40 million for Fox, that's definitely not chump change. And those advertisers, like ATT, Coca Cola, Verizon, Nike, Visa, and other heavy hitters, are working to make sure they see those numbers grow year after year by investing in youth soccer facilities and promoting programs across the country. </p>
    <p>Now that big business is involved you can be assured you'll see a continued rise in popularity in soccer across the country for years to come. </p>
  </div>

  <div class="image">
    <p class="caption">The local semi- pro soccer team in Seattle, WA plays an international friendly</p>
  </div>

</body>
</html>

body {
  /* Old browsers */
  background: #141E30;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(-45deg, #35577D, #141E30);
  margin: 0;
  padding: 0;
}

h1 {
  font-family: Playfair Display, serif;
  
  color: #FFF;
  font-size: 32px;
  padding-top: 100px;
  text-align: left;
  width: 60%;
}

h2 {
  font-family: Roboto, sans-serif;

  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 100;
  font-size: 22px;
  line-height: 24px;
  padding-bottom: 30px;
  text-align: left;
  width: 70%;
}

p {
  font-family: Roboto, sans-serif;
  
  color: AliceBlue;
  line-height: 1em;
  text-align: left;
  width: 100%;
}

.byline {
  color: rgba(255, 255, 255, 0.5);
  float: left;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 14px;
  padding-left: 10px;
  text-transform: uppercase;
}

.caption {
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.65);
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 14px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 60%;
}

.content {
  padding: 40px;
}

.image {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_soccer.jpeg");
  background-size: cover;
  background-position: center;
  height: 300px;
}

.writer-img {
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  float: left;
  width: 50px;
}


#2

that would be a mean error, you use apostrophes (') where the exercises validation seem to use quotation marks ("), see what happens when you use quotation marks


#3

A post was split to a new topic: More fonts


#4

Where did I use apostrophes in the CSS or HTML file?


#5

i thought around 'Playfair Display' in your h1? seems i saw that wrong, but with a font-family name which is multiply words, i would use quotation marks


#6

There error does not appear to be valid. I am using quotes and the error says it is expecting quotes, but found apostrophes


#7

Sam issue by the way


#8

if you have a question, make a new topic. A topic creation contains a template for a good reason, so you include code and error message.


#9

That does not seem to work in the CSS file. It might be a bug, because the previous instructions says to do the exact same thing 'for the subheading and the paragraph' no quotation mark and it works perfect. Strange to say the least!


#10

very strange, the new course has some bugs to work out


#11

Sp, one cannot move forward without this fixed.


#12

change "https://fonts.googleapis.com/css?family=Playfair+Display" on index.html to "style.css"


#13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.