Auf Thema antworten

Beitrag

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

Ich bin Anfänger in der Welt des Webdesigns und kriege es nicht hin 3 Textfelder (Footer) nebeneinander zu platzieren. Habe ich etwas falsch gemacht oder vergessen`?

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;
                }
            }

Vielen Dank schonmal im Voraus!
[/QUOTE]

Authentifizierung