Post Detail

Selamat siang dan sehat - sehat buat kita semuanya

Pada kesempatan kali ini saya akan membagikan sebuah tulisan mengenai cara membuat card yang menarik menggunakan html & CSS

Yuk ah kita langsung saja, praktekin.

Pertama kita buat sebuah file .html

<div class="main center">
    <div class="card center">
        <p class="heading">
            Selamat Datang
        </p>
        <p class="text">
            www.asepit.com
        </p>
        <button class="btn">
            Read More
        </button>
    </div>
</div>

Kedua, Untuk CSS nya seperti berikut :

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        background: black;
    }
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main {
        width: 100%;
        height: 100vh;
    }
    .card {
        width: 350px;
        height: 480px;
        color: white;
        position: relative;
        flex-direction: column;
    }
    .card .heading {
        font-size: 3rem;
        transform: translateY(80px);
        transition: all .4s;
    }
    .card:hover .heading {
        transform: translateY(15px);
    }
    .card .text {
        font-size: 1.1rem;
        color: rgb(211, 211, 211);
        margin: 10px 30px;
        transform: translateY(50px);
        opacity: 0;
        transition: all .4s;
    }
    .card .btn {
        width: 150px;
        height: 40px;
        background: #240b36;
        border: none;
        margin: 10px;
        font-size: 1.1rem;
        color: rgb(219, 219, 219);
        cursor: pointer;
        transition: all .5s;
        transform: translateY(50px);
        outline: none;
        opacity: 0;
    }
    .btn:hover {
        background: #240b36c5;
    }
    .card:hover .text,.card:hover .btn {
        transform: translateY(20px);
        opacity: 1;
    }
    .card::after, 
    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .card::before{
        background: linear-gradient(to right, #240b36, #c31432);
    }
    .card::after {
        background: rgba(255, 255, 255, 0.082);
        filter: blur(10px);
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        transition: all .5s;
    }
    .card:hover::after {
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }

</style>

Dan untuk hasilnya kurang lebih seperti dibawah ini