More fonts - Learn HTML & CSS Part |


#1

I have the same problem... I cannot pass this excersise. I tried blank Roboto, tried it with " and ' and still nothing... Any help?


Learn HTML & CSS Part I
#2

Please paste in your code and error msg


#3

h2 {
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%;
font-family:Roboto, sans-serif;
}

p {
color: AliceBlue;
line-height: 1em;
text-align: left;
width: 100%;
font-family: Roboto, sans-serif;
}
Did you set the font family of the subheading to Roboto?


#4

I don't see any quotes


#5

I tried with " and ' but still nothing... Can you send me the right code as it is?


#6

font-family: 'Roboto', sans-serif;

Put it like this press run, if you get an error refresh the page and try again, or try another browser


#7

Still nothing..

h2 {
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%;
font-family: 'Roboto', sans-serif;
}

p {
color: AliceBlue;
line-height: 1em;
text-align: left;
width: 100%;
font-family: 'Roboto', sans-serif;
}
Did you set the font family of the subheading to Roboto?


#8

Paste in your full HTML and CSS

Did you refresh the page ? Try another browser ?


#9

<!DOCTYPE html>
<html>
<head>
    <title>The Rise of Soccer in The US</title>
    
    <link href="https://fonts.googleapis.com/css?family=Roboto:100" 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 {
  color: #FFF;
  font-size: 32px;
  padding-top: 100px;
  text-align: left;
  width: 60%;
  font-family:Georgia, serif;
}

h2 {
  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%;
  font-family: 'Roboto', sans-serif;
}

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

.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;
}

#10

In your HTML you are missing the link to your CSS, thus it doesn't work..

You need to link in main.css


#11

I'm sorry but i'm not following.. Can you please give some specific directions?


#12

Have a look at this lesson to refresh your memory:
https://www.codecademy.com/courses/learn-html-css/lessons/css-setup/exercises/html-link-css?action=lesson_resume

As you may read in the above lesson, you use the link tag to link your external CSS stylesheet to your CSS, you are missing it in your case thus your CSS doesn't work as its not linked, so you need to link it in order for it to work


#13

Great, thank you very much!


#15

Hello,
I've been strugling with this problem since mornign. I tried and changed every possible thing and still cannot find the way to finish this excersise. I looked at previous stages, reed all of them and still cannot find the solution. Can you please send me the right code to compare where did I go wrong?


#16

Hey, I was stuck on the same part of the exercise and I think I found the solution to your problem.

Going back to Index.html , you probably just replaced your href="style.css" with the google Roboto href.

TL;DR: You are suppose to have TWO links, not replacing your original style.css with Roboto

Hope this helps.


#17

Please paste in your updated (full) HTML & CSS code..


#18

After a whole day trying to fix it, I saw your solution : It works perfectly ! Thank you !!!


#19

Can someone help me please? Whats wrong?

> <!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'>
> </head>

#21

I also had the same problem but I figure it out.. if you still need help let me know


#22

only put in an additional link to the css file : href ="/style.css"
only this line on a new line