Stuck animal trading card

HTML-CSS
#1

guys can you explain to me
The trading card page with styling has a border around the entire card

The border should be solid: expected ‘none’ to equal 'solid’Stacktrace

The trading card page with styling has a border around the animal’s info section

The trading card page with styling has spacing between the border and card elements

There must be some padding around the outside border: expected 0 to be above 0Stacktrace

#2

Hi @zozo20 !

Welcome to the forum!

It would help to see your code so we know what you have tried so far.

#3 
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet">
<head>
  <meta charset="utf-8">
  <title>Building the Prototype</title>
</head>

<body>
  <div id="container">
    <h1>Eagle</h1>
    <!-- photo credit: wikipedia.org, image taken by Ritik -->
    <img src="https://cdn.britannica.com/92/152292-050-EAF28A45/Bald-eagle.jpg" alt="Eagle Photo">
    <div id="card"class="animal-info">
      <p id="interesting-fact">Golden eagles have been known to hunt foxes, wild cats and even young deer and goats.</p>
      <ul id="facts">
        <li>
          <span class"lab">Scientific Name</span>: haliaeetus leucocephalus
        </li>
        <li>
          <span class"lab">Average  Height</span>:  70–102 centimeters
        </li>
        <li>
          <span class"lab">Average Lifespan</span>: 20 years
        </li>
        <li>
          <span class"lab">Habitat</span>: Near Water
        </li>
      </ul>
      <p id="summary">Eagle is the common name for many large birds of prey of the family Accipitridae. Eagles belong to several groups of genera, some of which are closely related. Most of the 60 species of eagle are from Eurasia and Africa. Outside this area, just 14 species can be found—2 in North America, 9 in Central and South America, and 3 in Australia.
      </p>
    </div>
  </div>
</body>

</html>
#4 
img{
  width: 300px;
  border-style: solid;
}

#interesting-fact {
  font-style: italic;
}

span {
  font-weight: bold;
}

li{
  list-style-type: none;
}

#contairer{
  border-style: solid;
  padding:5px;
  background: white;
  box-shadow: 5px 3px #C0C0;
}

 .animal-info {
  border-style: solid;
  padding: 5px;
}

.title {
  text-align: center;
}

body {
  background: gray;
}
#5

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

#6

You have a few errors in your html which can affect the styling.

Run your code through the html validator to find and fix those errors.

Once you fix those errors, you have a spelling error here.
In your html you wrote this

but in your css you wrote this

Also, you have a border style but you don’t really specify the thickness or color of the border.

You could try something like this

border: 1px solid grey;

1px would be the thickness
solid would be the style
grey would be the color.

You can change the thickness or color to whatever you like.

Hope that helps!

#8

thank you so much it works

#9

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