Icon List Animation

Icon List Animation is based on pure Html5, Css3, and Js. This snippet does not have any framework. This snippet is used to add showcase your featured services in this fancy and modern Ui snippet.
Use the below code to make the website more interactive, it’s kind of but not fully user-friendly.

HTML Code:

<div class="snl_container">
    <div class="snl_box" style="--clr:#fc5f9b;">
        <div class="snl_content">
            <div class="snl_icon">
                <ion-icon name="color-palette-outline"></ion-icon>
            </div>
            <div class="snl_text">
                <h3>Logo Designing</h3>
                <p>5 Projects</p>
            </div>
        </div>
    </div>
    <div class="snl_box" style="--clr:#a362ea;">
        <div class="snl_content">
            <div class="snl_icon">
                <ion-icon name="code-slash-outline"></ion-icon>
            </div>
            <div class="snl_text">
                <h3>Web Development</h3>
                <p>5 Projects</p>
            </div>
        </div>
    </div>
    <div class="snl_box" style="--clr:#0ed095;">
        <div class="snl_content">
            <div class="snl_icon">
                <ion-icon name="flame-outline"></ion-icon>
            </div>
            <div class="snl_text">
                <h3>SEO </h3>
                <p>1 Projects</p>
            </div>
        </div>
    </div>
</div>

CSS Code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins';
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #e0e0e0;
}

.snl_container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.snl_container .snl_box {
    position: relative;
    width: 400px;
    height: 100px;
    background: #e0e0e0;
    cursor: pointer;
    /* box-shadow: 10px 10px 15px rgba(0, 0, 0,0.025); */
    transition: 0.6s ease-in-out;
    border-radius: 4px;
    box-shadow: -20px -20px 60px #bebebe, 20px 20px 60px #ffffff;
}

.snl_container .snl_box:nth-child(1) {
    transform: translateX(-70px);
}

.snl_container .snl_box:nth-child(3) {
    transform: translateX(70px);
}

.snl_container:hover .snl_box:nth-child(1) {
    transform: translateX(0px);
}

.snl_container:hover .snl_box:nth-child(3) {
    transform: translateX(0px);
}

.snl_container .snl_box::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 100%;
    background: var(--clr);
    transition: 0.5s ease-in-out;
}

.snl_container .snl_box:hover::before {
    width: 100%;
}

.snl_container .snl_box .snl_content {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.snl_container .snl_box .snl_content .snl_icon {
    position: relative;
    min-width: 100px;
    display: flex;
    justify-content: center;
}

.snl_container .snl_box .snl_content .snl_icon ion-icon {
    font-size: 2.5em;
    color: var(--clr);
    transition: 0.6s ease-in-out;
}

.snl_container .snl_box:hover .snl_content .snl_icon ion-icon {
    color: #fff;
}

.snl_container .snl_box .snl_content .snl_text h3 {
    font-weight: 600;
    transition: 0.5s ease-in-out;
    color: var(--clr);
}

.snl_container .snl_box .snl_content .snl_text p {
    font-size: 0.9em;
    transition: 0.5s ease-in-out;
    color: #999;
}

.snl_container .snl_box:hover .snl_content .snl_text h3,
.snl_container .snl_box:hover .snl_content .snl_text p {
    color: #fff;
}

#BeingCodeStuffer