Untuk membuat wave, kita bisa menggunakan bantuan situs getwaves.io. Disini kita bisa memilih 3 tipe waves, bisa berbentuk kurva, kotak, ataupun garis lurus. Pada design kita lebih cocok menggunakan kurva, apabila teman-teman sedang merancang situs lain, mungkin saja bisa lebih cocok menggunakan tipe lainnya.

Kemudian kita bisa memilih apakah wave kita berada di bagian atas, atau berada di bagian bawah. Bagian lawan dari wave kita menggunakan warna transparant, yang artinya akan mengikuti warna latar belakang yang sedang digunakan pada situs kita.

Selanjutnya kita bisa memasukkan warna dari wave kita dan nilai transparansinya. Apabila nilai transparansinya lebih kecil dari 100%, maka warna dari wave kita akan dipadukan dengan warna latar belakang yang sedang digunakan.

Dan yang terakhir kita bisa memilih berapa jumlah wave pada gambar kita. Semakin kita geser ke kanan, maka jumlah wavenya akan semakin banyak. Jumlah wave yang banyak lebih cocok untuk wave jenis kotak dan garis. Untuk design kita yang menggunakan kurva, lebih cocok jumlah wave sedikit. Kita bisa menekan tombol di akhir kanan untuk menciptakan wave baru, hingga mendapatkan hasil seperti yang kita inginkan.

Setelah kita mendapatkan wave yang kita inginkan, kita tinggal menekan tombol pada bagian tengah atas wave. Kita diberikan tag SVG yang bisa kita copy ke kode HTML kita. Kita kembali ke Atom dan kita paste tag SVG ke bagian akhir container. Kita simpan dan refresh browser.

Nah, sekarang kita sudah memiliki wave, namun hasilnya belum seperti yang kita inginkan ya. Karena wave berada di dalam container, sehingga bagian kiri dan kanannya terdapat margin. Namun disini kita bisa melihat bahwa wave kita adalah perpaduan warna dari warna awal yang kita tentukan dari situs getwaves.io, dengan warna latar belakang yang sedang digunakan pada situs kita.

Sekarang tag SVG ini kita pindahkan ke setelah tag penutup section. Nah sekarang barulah wave berbentuk seperti yang kita inginkan ya. Karena wave menggunakan keseluruhan lebar browser, dari ujung kiri hingga ujung kanan.

Kita mesti melakukan beberapa penyesuaian untuk situs kita. Pertama kita lihat kembali kode yang diberikan. Sebenarnya kode ini terdiri dari 2 buah tag, yaitu tag SVG dan tag PATH. Kita rapikan dahulu kodenya.

Kemudian kita ingin mengubah warna wave agar sama dengan warna latar belakang Hero kita. Kita lihat kembali ke tag path, disini ada attribute fill yang berisikan warna dari wave. Kita ubah nilainya menjadi #88FFF7. Kita simpan dan refresh browser. Nah sekarang design kita sudah selaras ya.

Sampai disini sebenarnya coding kita sudah benar. Namun agar kode SVG ini lebih gampang untuk dibaca, maka kita perlu menambahkan tag section baru, yang kita beri attribute ID=”wave”. Jadi programmer yang membaca source code HTML ini lebih gampang mengerti ya, ini adalah kode untuk bagian wave.

Dan kemudian, berhubung Bootstrap menyarankan agar semua konten ditaruh di dalam container, maka kita tambahkan lagi div dengan kelas container-fluid. Lalu kita pindahkan kode SVG ke dalam div. Kita simpan dan refresh browser.

Nah, perhatikan pada bagian ujung kiri dan kanan wave masih terdapat sedikit padding ya. Kita mesti menghilangkan padding tersebut. Jadi di dalam div, kita tambahkan lagi kelas ps-0 dan pe-0. Kita simpan dan refresh browser. Dan sekarang wave kita sudah bisa ditampilkan dengan benar.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.