Auf Thema antworten

Beitrag

[QUOTE="janis2000, post: 12953, member: 4383"]
Hallo Zusammen

Ich bin gerade dabei, einen Footer zu erstellen. Jedoch kriege ich es nicht gebacken, dass die NEBENEINANDER dargestellt werden. Ich bin Anfänger und habe bereits Google um Hilfe gebeten, aber daraus wurde ich auch nicht schlau. 
Hier der HTML part:
 <div class="footer-container">
        <div class="footer">
            <div class="footer-heading footer 1">
                <h2>Über uns</h2>
                <a href="#">Wer sind wir?</a>
                <a href="#">Team</a>
                <a href="#">Angebote</a>
                <a href="#">Blog</a>
            </div>
            <div class="footer-heading footer 2">
                <h2>Hilfe und Service</h2>
                <a href="#">Kontaktformular</a>
                <a href="#">Broschüre</a>
                <a href="#">Sponsoren</a>
            </div>
            <div class="footer-heading footer 3">
                <h2>Rechtliche Hinweise</h2>
                <a href="#">Nutzungsbedingungen</a>
                <a href="#">AGB</a>
                <a href="#">Datenschutz</a>
                <a href="#">Impressum</a>
            </div>
            <div class="footer-email-form"></div>
                <h2>Tritt unserem Newsletter bei!</h2>
                <input type="email" placeholder="Geben Sie Ihre Emailadresse ein" id="footer-email">
                <input type="submit" value="Sign Up" id="footer-email-btn">
            </div>
        </div>
     </div>

Und hier der CSS part:

*{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
                font-family: "montserrat", sans-serif;
            }
            
            .footer-container{
                background-color: #2e004d;
                padding-bottom: 4rem 0 4rem 0;
                
            }

.footer{
                width: 80%;
                height: 40vh;
                background-color: #2e004d;
                color: white;
                display: inline-block;
                justify-content: center;
                flex-wrap: wrap;
                margin: 0 auto;
            }

.footer-heading{
                display: flex;
                flex-direction: column;
                margin-right: 4rem;
            }

.footer-heading h2{
                margin-bottom: 2rem;
            }

.footer-heading a{
                color: white;
                text-decoration: none;
                margin-bottom: 0.5rem;
            }

.footer-heading a:hover{
                color:red;
                transition: 0.3s ease-out;
            }

.footer-email-form h2{
                margin-bottom: 2rem;
            }

#footer-email{
                width: 250px;
                height: 40px;
                border-radius: 4px;
                outline: none;
                border: none;
                padding-left: 0.5rem;
                font-size: 1rem;
                margin-bottom: 1rem;
            }

#footer-email::placeholder{
                color: #b1b1b1
            }

#footer-email-btn{
                width: 100px;
                height: 40px;
                border-radius: 4px;
                background-color: #f9423d;
                outline: none;
                border: none;
                color: white;
                font-size: 1rem;
            }

#footer-email-btn:hover{
                cursor: pointer;
                background-color: skyblue;
                transition: all 0.4s ease-out;
            }

@media screen and (max-width: 1150px){
                .footer{
                    height: 50vh;
                }
                .footer-email-form{
                    margin-top: 4rem;
                }
            }

@media screen and (max-width: 820px){
                .footer-2{
                    padding-top: 2rem;
                }           
            }

@media screen and (max-width: 720px){
                .footer-3{
                    display: none;
                }
                .footer-email-form{
                    margin-top: 2rem;
                }
            }
[/QUOTE]

Authentifizierung