Hallo,
ich habe hier ein ganz einfachen Footer mit HTML und CSS. Das Problem ist, dass sich die Hintergrundfarbe des Footers einfach nicht ändert und ich keine Ahnung hab, woran das liegt. Habe schon alles versucht, was mir so bekannt ist.
Ich zweifle gerade ziemlich an mir selbst.
HTML:
<footer>
<section class="section_footer">
<div class="social">
<a href="https://facebook.com" target=”_blank”><i class="fab fa-facebook"></i></a>
<a href="https://instagram.com" target=”_blank”><i class="fab fa-instagram"></i></a>
</div>
<ul class="list">
<li><a href="Impressum.html">Impressum</a></li>
<li><a href="datenschutz.html">Datenschutz</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="credits.html">Credits</a></li>
</ul>
<p class="footer_text">
Lorem Ipsum
</p>
<p> <a href="#top"><i class="fas fa-arrow-up"></i></a></p>
</section>
</footer>
CSS:
footer {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
font-weight: 400;
background-color: whitesmoke;
}
.section_footer {
padding: 40px 0px;
}
.social {
text-align: center;
padding-bottom: 25px;
color:gray;
display: flex;
justify-content: space-between;
padding: 0 850px;
font-size: 50px;
}
.social a {
font-size: 25px;
color: inherit;
width: 40px;
height: 40px;
line-height: 48px;
display: inline-block;
text-align: center;
margin: 0 8px;
opacity: 0.75;
}
.social a:hover {
opacity: 0.9;
}
footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
footer ul li a {
color: inherit;
text-decoration: none;
opacity: 0.8;
}
footer ul li {
display: inline-block;
padding: 0 15px;
}
footer ul li a:hover {
opacity: 1;
}
footer section p {
margin-top: 15px;
text-align: center;
font-size: 30px;
color: #aaa;
}
footer a i {
display: flex;
justify-content: center;
align-items: center;
}
Danke im Vorraus!
