Créer des cartes de citation responsive - HTML CSS

Salut les lecteurs pour ce nouveau tutoriels nous allons creer des cartes de citation responsive en HTML CSS

Code Source

Code Html

 <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<div class="wrapper">
            <div class="box">
                <div class="description">
                    <h2>Box 1</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?</p>
                    <ul class="list">
                        <li><a href="https://twitter.com/sudo_Jayasree" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="https://github.com/Jayasree77"><i class="fab fa-github"></i></a></li>
                        <li><a href="https://www.linkedin.com/in/jayasree0708/"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="box">
                <div class="description">
                    <h2>Box 2</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?</p>
                    <ul class="list">
                        <li><a href="https://twitter.com/sudo_Jayasree" target="_blank"  rel="noopener noreferrer"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="https://github.com/Jayasree77"><i class="fab fa-github"></i></a></li>
                        <li><a href="https://www.linkedin.com/in/jayasree0708/"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="box">
                <div class="description">
                    <h2>Box 3</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?</p>
                    <ul class="list">
                        <li><a href="https://twitter.com/sudo_Jayasree" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="https://github.com/Jayasree77"><i class="fab fa-github"></i></a></li>
                        <li><a href="https://www.linkedin.com/in/jayasree0708/"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
 <script src="https://kit.fontawesome.com/bad7f7f5d4.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>

Code CSS

*{
    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://images.pexels.com/photos/3503629/pexels-photo-3503629.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    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;
}

Code Javascript

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

Démo

See the Pen Glassmorphism by Jayasree (@Jayasree_0708) on CodePen.