Membuat Quote dengan HTML dan CSS

Ditulis oleh Zen, dipublikasi pada 07 Dec 2016 dalam kategori Tutorial
Membuat Quote dengan HTML dan CSS - CodePolitan.com

Kali ini kita akan membuat quote, yaitu tulisan yang berada di tengah layar dan diberi simbol di akhir, seperti gambar di bawah ini:

screenshot quote di muhammadzaini.com

Oke, mari kita buat...

Yang pertama, buat file html lalu isi dengan kode berikut: (dasar kerangka html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Quote</title>
</head>
<body>

</body>
</html>

Penjelasan:

  • <!DOCTYPE html> menandakan bahwa kita menggunakan HTML 5
  • <meta charset="utf-8"> kita gunakan supaya file HTML ini dapat menampung semua jenis huruf dari berbagai bahasa
  • <meta content="width=device-width, initial-scale=1" name="viewport"> digunakan supaya bisa responsive di tampilan mobile (mobile first)

Kemudian, kita tulis kontennya sehingga menjadi:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Quote</title>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="isi">
                <p>I hate when people ask me, "Why are you so quiet?"</p>
                <p>Because I am. That's how I function.</p>
                <p>I don't ask others, "Why are you so noisy? Why do you talk so much?"</p>
                <p>It's rude.</p>
                <p>Ψ</p>
            </div>
        </div>
    </div>
</body>
</html>

Di sini kita menggunakan div bertingkat yaitu kalau dituliskan dalam syntax Zen Coding: body > .outer > .inner > .isi. Nah, di masing-masing bagian ini akan kita beri style tertentu sehingga membentuk seperti quote.

Setelah membuat kerangka, maka kita sekarang akan membuat stylenya:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Quote</title>
    <style>
    body {
       margin: 0;
    }
    .outer {
       display: table;
       position: absolute;
       width: 100%;
       height: 100%;
    }
    .inner {
       display: table-cell;
       vertical-align: middle;
       text-align: center;
    }
    .isi {
       display: inline-block;
       width: 80%;
       margin: auto;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="isi">
                <p>I hate when people ask me, "Why are you so quiet?"</p>
                <p>Because I am. That's how I function.</p>
                <p>I don't ask others, "Why are you so noisy? Why do you talk so much?"</p>
                <p>It's rude.</p>
                <p>Ψ</p>
            </div>
        </div>
    </div>
</body>
</html>

Penjelasan Script

body {
    margin: 0;
}

Digunakan untuk menghilangkan margin yang ada di bagian atas dan kiri body

.outer {
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
}

.outer adalah class yang berada di dalam body. Nah, tugas dari class ini adalah mendefinisikan dirinya sebagai table lalu memberi lebar dan tinggi sepanjang 100%.

.inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Maksud dari class .inner ini adalah dia mendefinisikan dirinya sebagai selnya tabel lalu rata tengah secara vertikal.

.isi {
    display: inline-block;
    width: 80%;
    margin: auto;
}

Dan sampailah kita kepada class yang terakhir yaitu class .isi. Kalau class ini nggak dicantumkan, maka nggak akan jadi yang namanya elemen di tengah halaman.

Kemudian, supaya enak dipandang, kita pun memerlukan sedikit permainan tipografi di sini. Berikut adalah kode final setelah ditambahkan font dari Google Fonts:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Quote</title>
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
    <style>
    * {
       font-family: 'Dancing Script', cursive;
       font-size: 35px;
    }
    body {
       margin: 0;
    }
    .outer {
       display: table;
       position: absolute;
       width: 100%;
       height: 100%;
    }
    .inner {
       display: table-cell;
       vertical-align: middle;
       text-align: center;
    }
    .isi {
       display: inline-block;
       width: 80%;
       margin: auto;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="isi">
                <p>I hate when people ask me, "Why are you so quiet?"</p>
                <p>Because I am. That's how I function.</p>
                <p>I don't ask others, "Why are you so noisy? Why do you talk so much?"</p>
                <p>It's rude.</p>
                <p>Ψ</p>
            </div>
        </div>
    </div>
</body>
</html>

Untuk melihat hasil jadinya, kamu bisa membuka muhammadzaini.com/quote-css




Berlangganan Informasi CodePolitan Melalui Email

Jangan sampai kamu melewatkan informasi penting tentang pemrograman dan teknologi! Kamu bisa berlangganan Newsletter CodePolitan dengan cara mengisi formulir di samping.

Ingin belajar coding lebih terstruktur? Gabung kelas online CodePolitan sekarang!