Auf Thema antworten

Beitrag

[QUOTE="pingu, post: 14702, member: 5166"]
Es ist irgendwie etwas ganz komisch...
Der Footer der vom code her eigentlich sticky am ende der website seien sollte, ist es nicht.
Ich habe bei .footer auch mal provisorisch background: red; reingemacht, aber da passiert irgendwie auch nicht so viel..

kann mir da jemand helfen, ich und Chat GPT checken es nicht   xD (bin noch anfänger)

hier der HTML code vom footer:

[CODE=html]<section class="footer">
  <div class="footer-row">
    <div class="footer-col">
      <h4>Info</h4>
      <ul class="links">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Compressions</a></li>
        <li><a href="#">Customers</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Collection</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Explore</h4>
      <ul class="links">
        <li><a href="#">Free Designs</a></li>
        <li><a href="#">Latest Designs</a></li>
        <li><a href="#">Themes</a></li>
        <li><a href="#">Popular Designs</a></li>
        <li><a href="#">Art Skills</a></li>
        <li><a href="#">New Uploads</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Legal</h4>
      <ul class="links">
        <li><a href="#">Customer Agreement</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">GDPR</a></li>
        <li><a href="#">Security</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Media Kit</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Newsletter</h4>
      <p>
        Subscribe to our newsletter for a weekly dose
        of news, updates, helpful tips, and
        exclusive offers.
      </p>
      <form action="#">
        <input type="text" placeholder="Your email" required>
        <button type="submit">SUBSCRIBE</button>
      </form>
      <div class="icons">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-linkedin"></i>
        <i class="fa-brands fa-github"></i>
      </div>
    </div>
  </div>
</section>[/CODE]

CSS Code vom footer:

[CODE=css].footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1280px;
  width: 95%;
  background: red;
  border-radius: 6px;
}
.footer .footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3.5rem;
  padding: 60px;
  background-color: darkslategrey;
}
.footer-row .footer-col h4 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
}
.footer-col .links {
  margin-top: 20px;
}
.footer-col .links li {
  list-style: none;
  margin-bottom: 10px;
}
.footer-col .links li a {
  text-decoration: none;
  color: #bfbfbf;
}
.footer-col .links li a:hover {
  color: #fff;
}
.footer-col p {
  margin: 20px 0;
  color: #bfbfbf;
  max-width: 300px;
}
.footer-col form {
  display: flex;
  gap: 5px;
}
.footer-col input {
  height: 40px;
  border-radius: 6px;
  background: none;
  width: 100%;
  outline: none;
  border: 1px solid #7489C6 ;
  caret-color: #fff;
  color: #fff;
  padding-left: 10px;
}
.footer-col input:laceholder {
  color: #ccc;
}
 .footer-col form button {
  background: #fff;
  outline: none;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s ease;
}
.footer-col form button:hover {
  background: #cecccc;
}
.footer-col .icons {
  display: flex;
  margin-top: 30px;
  gap: 30px;
  cursor: pointer;
}
.footer-col .icons i {
  color: #afb6c7;
}
.footer-col .icons i:hover  {
  color: #fff;
}
@media (max-width: 768px) {
  .footer {
    position: relative;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 0;
  }
  .footer .footer-row {
    padding: 20px;
    gap: 1rem;
  }
  .footer-col form {
    display: block;
  }
  .footer-col form :where(input, button) {
    width: 100%;
  }
  .footer-col form button {
    margin: 10px 0 0 0;
  }
}[/CODE]
[/QUOTE]

Authentifizierung