CSS - im stuck at (Your h2 element should use the font Lobster. )

HTML-CSS
1

Tell us what’s happening:
So, Ive done what my coach said. To use font-family: ‘lobster’, monospace;
but for some reason it still doesnt work. He told me to add the font from Google Font. Which I did. But still , it doesnt work.

Btw, i have alrdy did font-family: lobster, monospace; without ‘…’
and im still stuck

Am I doing something wrong? Please help me…

Challenge that Im stuck with
“Your h2 element should use the font Lobster”

Your code so far

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

<style>
.red-text {
  color: red;
}
<!-- Font -->
h2 {
  font-family: 'lobster', monospace;
}

p {
  font-size: 16px;
  font-family: monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Specify How Fonts Should Degrade

Link to the challenge:

2

There were two instructions:

…apply the monospace font to the h2 element, so that it now has two fonts - Lobster and monospace

You did that.

The other instruction was:

Now comment out that import of the Lobster font (using the HTML comments you learned before) from Google Fonts so that it isn’t available anymore.

You didn’t do that.

The original code for that was:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

and somehow you ended up with

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

Revert to the original link and follow the instructions and comment it out.

When I do that, your code passes for me.

3

Hola, por lo que veo solo te falta hacer del link de la fuente Lobster un comentario (), recuerda que la idea es que veas como funciona la segunda fuente (monospace).

Éxito

4

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