Cara Membuat Love dari HTML CSS

 

Pengertian

HTML adalah kepanjangan dari Hypertext Markup Language, pengertian html yaitu bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. 

CSS adalah kepanjangan dari Cascading Style Sheet, pengertian dari CSS yaitu aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. 

Bahan dan Alat :

1. Leptop/komputer/hp

2. Teks editor. Leptop (vscode), Handphone (TrebEdit)

Langkah Pengerjaan :

1. Siapkan device kalian

2. Buka teks editor

3. Buat file love.html

4. Buat struktur html

5. Masukan ini dalam tag body:

    <style>

        .center{

            display: flex;

            justify-content: center;

        }

        .word{

            padding: 70px 50px 0 0;

            text-align: center;

        }

        .love{

            position: relative;

            height: 160px;

            width: 100px;

            background-color: #d16ba5;

            border-radius: 200px 200px 0 0;

            transform: rotate(45deg);

            animation: animationLove 3s ease infinite;

        }

        .love::before{

            content: '';

            position: absolute;

            background-color: #d16ba5;

            height: 160px;

            width: 100px;

            transform: rotate(-90deg);

            border-radius: 200px 200px 0 0;

            left: -30px;

            top: 30px;

            animation: animationLove 3s ease infinite;

        }

    </style>

    <h3 class="word">Hai, ini untuk mu</h3>

    <div class="center">

        <div class="love"></div>

    </div>

6. Maka output yang akan keluar seperti ini:

7. Jika kalian ingin ada animasi tambah kan sintak ini di dalam tag style :

@keyframes animationLove {

            0%{

                width: 152px;

                height: 210px;

            }

            100%{

                width: 100px;

            }

        }

8. Maka output yang dihasilkan seperti ini :

Ya, seperti itulah cara membuat Love menggunkan HTML dan CSS. Selamat mencoba!