Footer simple | Notion

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- icons import -->
    <script src="<https://kit.fontawesome.com/2c36e9b7b1.js>" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>">
<!-- font import -->
    <link rel="preconnect" href="<https://fonts.gstatic.com>">
    <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap>" rel="stylesheet">

    <title>Footer</title>

</head>
<body>

    <style>

        *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
main{
    height: 80vh;
    background: rgb(92,92,92);
    background: radial-gradient(circle, rgba(92,92,92,1) 0%, rgba(52,52,52,1) 100%);
}

a{
    text-decoration: none;
}

footer{
    height: 10vh;
    text-align: center;
    text-transform: uppercase;
    padding-top: 30px;   
}

footer li{
    list-style: none;
    display: inline-block;
}

.icons a{
    width: 2em;
    height: 2em;
    font-size: 30px;
    border-radius: 100%;
    display: flex;
    margin-bottom: 1em;
    justify-content: center;
}

.menu-footer a{
    color: rgb(47, 47, 47);
    font-size: 1em;
    width: 150px;
    padding: 5px 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    margin: 0 15px;
}
.menu-footer a:hover{
    border-radius: 5px;
    color: #5c5c5c;
}

.footer-copyright{
    padding: 15px;
    margin-top: 30px;
    text-transform: capitalize;
}
@media (max-width: 450px){
   .nav-link{
    display: flex;
    flex-direction: column;
   
  }
}

    </style>

  <main>
</main>

  <footer>

    <!-- social media links -->
        <ul class="icons">
           <li>
                <a href="<https://www.facebook.com/>" target="_blank"><i class="fab fa-facebook-f"></i></a>
           </li>
            <li>
                <a href="<https://www.instagram.com/>" target="_blank"><i class="fab fa-instagram"></i></a>
            </li>
        </ul>

        <!-- footer menu -->
        <ul class="menu-footer">
                        <li>
                            <a href="index.php">Accueil</a>
                        </li>
                        <li >
                            <a href="tuto.php">Blog</a>
                        </li>
                        <li>
                            <a href="contact.php">Contact</a>
                        </li>
        </ul>

    <!-- footer copyright -->
                       <div class="footer-copyright">
                           <p>Copyright @ 2022 All Rights (Not) Reserved.</p>
                
                       </div>
            
  </footer>
</body>
</html>