Build a Reusable Footer - Build a Reusable Footer

JavaScript
1

Tell us what’s happening:

Hello! I just can’t seem to satisfy both test 9 and 10.

  1. Your footer should have at least three links with the href value set to #.
  2. None of your links should be empty.

When I fix one I don’t pass the other.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Reusable Footer Component</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { Footer } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<Footer />);
    </script>
  </body>
</html>

/* file: index.jsx */
export const Footer = () => {
  return (
    <footer>
      <div className="rows">
        <ul className="first-row">
          <li><a href="/dashboard">Dashboard</a></li>
          <li><a href="/services">Services</a></li>
        </ul>
        <ul className="second-row">
          <li><a href="/contact">Contact</a></li>
          <li><a href="https://discord.com">Discord</a></li>
        </ul>
        <ul className="third-row">
          <li><a href="/terms">Terms & Conditions</a></li>
          <li><a href="/privacy">Privacy Policy</a></li>
        </ul>
      </div>
      <p className="copyright">© 2025 All Rights Reserved.</p>
      <div className="icons">
       <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/3916/3916579.png" alt="heart" /></a>
        <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/3916/3916611.png" alt="email" /></a>
        <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/5070/5070407.png" alt="phone number" /></a>
      
    </div>
    </footer>
  )
};


/* file: styles.css */
footer {
  background-color: rgb(251, 227, 231);
  width: 100vw;
  padding-bottom: 20px;
}

.rows li {
  list-style: none;
}

a {
  color: rgb(108, 23, 37);
}

a:hover {
  color: rgb(29, 2, 6);
}

.rows {
  display: flex;
}

body {
  display: flex;
  justify-content: center;
}

img {
  max-width: 6vw;
  padding: 0 10px;
}

.icons {
  display: flex;
  justify-content: center;
}

.copyright {
  display: flex;
  justify-content: center;
}

Your browser information:

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

Challenge Information:

Build a Reusable Footer - Build a Reusable Footer

2

Welcome to the forum @grimalkin96

Try using text instead of img elements for the anchor elements.

Happy coding