Not sure what I'm missing?

HTML-CSS
1

I’ve added a class and container-fluid to the div tag but not sure how to nest it all together
Your code so far


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

<div class="container-fluid">
<style>

.red-text {
  color: red;
 

h2 {
  font-family: Lobster, Monospace;
}

p {
  font-size: 16px;
  font-family: Monospace;
}

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}

.smaller-image {
  width: 100px;
}
</style>
</div>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

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

<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>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

  **Your browser information:**

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

Challenge: Use Responsive Design with Bootstrap Fluid Containers

Link to the challenge:

2

Hi @HannahQuix !

Edit: I misread the instructions earlier and the style link should not be included in the div even though it will let you pass.

All of these tags (except for the link and style tags) need to be inside the div tags with the class name of container-fluid


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

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}

.smaller-image {
  width: 100px;
}
</style>
<div class="container-fluid">

<!--Move the rest of the html tags in here-->
</div>
3

You are surrounding the css style script with a HTML div element.
Try surrounding only the html elements with <div class="container-fluid">

4

You surrounded your style tag with the class container fluid but you should only wrap the other html elements other than the style element and the font link.

5

Good catch!

The test still lets you pass with the style tags in the div so I’ll bring up an issue on github.

1 Like
6

The < style > element must be included inside the < head> of the document. <style>: The Style Information element - HTML: HyperText Markup Language | MDN

7

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