Footer

HTML

  
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="anker">
  <div class="text">Lorem ipsum </div>
  <footer>
    <div class="beam">
      <a href="#anker">Zum Anfang</a>
    </div>
    <div class="footerfolgeuns">Folge uns</div>
    <div class="footersocialbutton">
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-youtube"></a>
      <a href="#" class="fa fa-instagram"></a>
    </div>
    <hr>  
    <div class="flexfooter">
    <!-- Bei src deine Quelle einfügen -->
      <img  class="logofooter" src="#">
      <ul class="ulinformationen">
        <input type="checkbox" id="openinformationen">
        <li>
          <label for="openinformationen">Informationen
            <span class="arrowinformationen">&#129095</span>
          </label>
          <ul class="subinformationen">
            <li><a href="#">AGB</a></li>
            <li><a href="#">Datenschutz</a></li>
            <li><a href="#">Impressum</a></li>
            <li><a href="#">Über uns </a></li>
            <li><a href="#">FAQ</a></li>
          </ul>
        </li>
      </ul>
      <ul class="ulzahlung">
        <input type="checkbox" id="openzahlung">
        <li>
          <label for="openzahlung">Zahlung&Versand
            <span class="arrowzahlung">&#129095</span>
          </label>
          <ul class="subzahlung">
            <li><a href="#">Zahlungsarten</a></li>
            <li><a href="#">Versand</a></li>
            <li><a href="#">Rückgabe</a></li>
          </ul>
        </li>
      </ul>
      <div class="newsletter">
        <div>Zum Newsletter anmelden</div>  
        <input type="email" placeholder="E-Mail-Adresse">
        <div class="submit"><input type="submit"></div>
      </div>
    </div>
    <hr>
    <div class="copyright">copyright 2021</div> 
  </footer>
</body>

CSS

  
body {
    margin: 0;
    font-family: sans-serif;
}

.text {
    color: white;
    margin: 20px;
    font-size: 2em;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: white;
}

footer ul a {
    text-decoration: none;
    color: white;
}

footer {
    background: black;
    position: relative;
}

@media (max-width:800px) {
    .logofooter {
        width: 20%;
        border: 1px solid white;
    }

    .ulinformationen>li, .ulzahlung>li {
        font-size: 20px;
    }
}

.ulinformationen>li, .ulzahlung>li {
    color: rgb(206, 106, 107);
    margin-top: 15px;
    font-weight: 700;
}

.subinformationen>li, .subzahlung>li {
    font-size: 0.7em;
    font-weight: initial;
}

.subinformationen, .subzahlung {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width:800px) {
    .flexfooter {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .subinformationen, .subzahlung {
        display: none;
    }

    #openinformationen:checked+li .subinformationen {
        display: flex;
    }

    #openzahlung:checked+li .subzahlung {
        display: flex;
    }

    #openinformationen:checked+li .arrowinformationen {
        display: inline-block;
        transform: rotate(180deg);
        transition: transform 0.5s;
    }

    #openzahlung:checked+li .arrowzahlung {
        display: inline-block;
        transform: rotate(180deg);
        transition: transform 0.5s;
    }
}

[type="checkbox"] {
    display: none;
}

.newsletter {
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

[type="email"] {
    height: 20px;
    width: 90%;
    background: black;
    border: none;
    border-bottom: 1px solid white;
    margin: 5px 0;
}

[type="submit"] {
    height: 30px;
    width: auto;
    background: black;
    border: 1px solid white;
    color: white;
}

hr {
    width: 90%;
}

.copyright {
    display: flex;
    justify-content: center;
    color: white;
    font-size: 12px;
    padding-bottom: 0.5em;
}

.fa {
    font-size: 1.8em;
    text-decoration: none;
    margin: 5px 10px;
    color: white;
}

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

.footerfolgeuns {
    display: flex;
    justify-content: center;
    color: white;
    font-size: 20px;
    padding: 5px;
}

.beam {
    z-index: 1000;
    width: 50px;
    height: 50px;
    background: rgb(206, 106, 107);
    border-radius: 25px;
    position: absolute;
    top: -25px;
    right: 5%;
    font-size: 12px;
    display: flex;
    text-align: center;
    align-items: center;
}

.beam a {
    text-decoration: none;
    color: white;
}

@media (min-width:800px) {
    .flexfooter {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 10px 0;
    }

    .logofooter {
        border: 1px solid white;
    }

    .logofooter, .newsletter {
        width: 15%;
    }

    .ulinformationen, .ulzahlung {
        width: 20%;
        font-size: 1.5vw;
    }

    .ulinformationen, .ulzahlung {
        display: flex;
        justify-content: center;
    }

    .newsletter {
        font-size: 1vw;
    }

    .arrowinformationen, .arrowzahlung {
        display: none;
    }

    [type="submit"]:hover {
        background: white;
        color: black;
    }

    .fa:hover {
        opacity: 0.7;
    }
}

::placeholder {
    color: white;
}

academy.of.webdesign

academy.of.webdesign

Footer

HTML

CSS