<div class="wrapper">
            <div class="box">
                <div class="description">
                    <h2>Box 1</h2>
                    <p>Aellentesque facilisis non metus in blandit. Phasellus pharetra ac orci sit amet varius. Nullam libero nunc, vestibulum id lorem at.</p>
                    <ul class="list">
                        <li><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a></li>
                        <li><a href=""><i class="fab fa-github"></i></a></li>
                        <li><a href=""><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="box">
                <div class="description">
                    <h2>Box 2</h2>
                    <p>Pellentesque facilisis non metus in blandit. Phasellus pharetra ac orci sit amet varius. Nullam libero nunc, vestibulum id lorem at.</p>
                    <ul class="list">
                        <li><a href="" target="_blank"  rel="noopener noreferrer"><i class="fab fa-twitter"></i></a></li>
                        <li><a href=""><i class="fab fa-github"></i></a></li>
                        <li><a href=""><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="box">
                <div class="description">
                    <h2>Box 3</h2>
                    <p>Qellentesque facilisis non metus in blandit. Phasellus pharetra ac orci sit amet varius. Nullam libero nunc, vestibulum id lorem at.</p>
                    <ul class="list">
                        <li><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a></li>
                        <li><a href=""><i class="fab fa-github"></i></a></li>
                        <li><a href=""><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    min-height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper{
    width:100%;
    height:100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-image: url(https://wallpapercave.com/wp/wp3278861.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
}
.wrapper .box{
    position: relative;
    width:280px;
    height:400px;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    border-radius:15px;
    margin:30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);
    transform-style: preserve-3d;
    transform: perspective(800px) 
}
h2{
    color:#f5f5f5;
    font-size:2.5rem;
    text-align: center;
    font-family: 'Acme', sans-serif;
}
p{
    color:#ccc;
    margin:20px 10px;
    font-family: 'Fira Code', monospace;
}
ul{
    list-style: none;
    width:100%;
    display: flex;
    justify-content: space-evenly;
    margin:30px 0;
    padding:10px;
}

li{
    cursor: pointer;
    width:30px;
    height:30px;
}
i{
    color:#ccc;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}
li:hover .fa-twitter{
    transform:translate3d(0,-10px,20px);
    color:#00acee;
}
li:hover .fa-github{
    transform:translate3d(0,-10px,20px);
    color:gray;
}
li:hover .fa-linkedin-in{
    transform:translate3d(0,-10px,20px);
    color:#077099;
}

 VanillaTilt.init(document.querySelectorAll(".box"), {
		max: 25,
        speed: 400,
        easing:"cubic-bezier(.03,.98,.52,.99)",
        perspective:500,
        transition:true
    });