Where to add <!---lobster--->?

Tell us what’s happening:

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
  color: red;
}

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="/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; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36.

Challenge: Specify How Fonts Should Degrade

Link to the challenge:

Hello there @ninaadvl2405,

The challenge asked you to comment out the link to call the custom font. In HTML as you recall, comment tags are <!-- (open) and --> (close). So commenting the link is as simple as typing in the opening and closing tag into the front and the end of the <link> tag respectively. Here’s an example:

<!-- <p> This is a commented Paragraph </p> -->

Hope this helps,
Remember to Stay Safe and Happy Coding!! :)

Catalactics

1 Like

no if i add <!— and—> then the h2 element gets unavailable

Yeah, but the point of the challenge is to show you that if the Lobster font is not available, it will fallback to monospace. So the challenge asks you to comment out the <link> tag that links the font, that will make it not use the Lobster font instead use the monospace

am over the challenge thanks .

1 Like

Glad you figured it out. Now you can continue on your journey into the Front-End Development. Good Luck!!

Stay safe and Happy Coding!! :slight_smile: