There are a social media icon.



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>social icon</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: #e3edf7
        }
        
        h1 {
            font-family: sans-serif;
            font-weight: normal;
            font-size: 25px;
            letter-spacing: 4px;
            padding: 200px 0 100px;
            color: #555;
            text-align: center;
        }
        
        .social-media {
            display: flex;
            justify-content: center;
        }
        
        a {
            display: flex;
            background: #e3edf7;
            height: 75px;
            width: 75px;
            margin: 0 15px;
            border-radius: 8px;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(0, 0, 0, 0);
            transition: transform 0.5s;
        }
        
        a i {
            font-size: 35px;
            color: #777;
            transition: transform 0.5s;
        }
        
        a:hover {
            box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px rgba(255, 255, 255, 0.1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(0, 0, 0, 0.01);
            transform: translate(2px);
        }
        
        a:hover i {
            transform: scale(0.90);
        }
        
        a:hover .fa-facebook {
            color: #3b5998;
        }
        
        a:hover .fa-instagram {
            color: #f14843;
        }
        
        a:hover .fa-twitter {
            color: #00acee;
        }
        
        a:hover .fa-whatsapp {
            color: #4fce5d;
        }
        
        a:hover .fa-youtube {
            color: #f00;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>

<body>
    <h1>FOLLOW US ON SOCIAL MEDIA</h1>


    <div class="social-media">
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-whatsapp"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>

</body>

</html>