Berbagai kode warna JAVA

Klik salah satu warna pada lingkaran di bawah ini dan dapatkan kode warnanya

Semoga Bermanfaat

Berbagai kode warna JAVA

COLOR CODES JAVA Black 1 Text Bebas #7C7C7C 2 Text Bebas #B9B9B9 3 Text Bebas #DFDFDF 4 Text Bebas #F8F8F8 5 Text Bebas White 6 Text Bebas #CCECFF 7 Text Bebas #99CCFF 8 Text Bebas #6699FF 9 Text Bebas #3366FF 10 Text Bebas #3333FF 11 Text Bebas #3333CC 12 Text Bebas #333399 13 Text Bebas #CCCCFF 14 Text Bebas #9999FF 15 Text Bebas #6666FF 16 Text Bebas #9966FF 17 Text Bebas #9933FF 18 Text Bebas #CC00FF 19 Text Bebas #9900CC 20 Text Bebas #FFCCCC 21 Text Bebas Pink 22 Text Bebas #FF99FF 23 Text Bebas #FF66CC 24 Text Bebas #FF33CC 25 Text Bebas #CC0099 26 Text Bebas purple 27 Text Bebas #660066 28 Text Bebas #FFCCCC 29 Text Bebas #FF99CC 30 Text Bebas #FFCC99 31 Text Bebas #FFFFCC 32 Text Bebas #FF9966 33 Text Bebas #FFCC66 34 Text Bebas #FF3300 35 Text Bebas #CC6600 36 Text Bebas #993300 37 Text Bebas #CC3300 38 Text Bebas #663300 39 Text Bebas #996633 40 Text Bebas #CC9900 41 Text Bebas Yellow 42 Text Bebas #FFFF66 43 Text Bebas #FFFF99 44 Text Bebas #CCFFCC 45 Text Bebas #CCFF99 46 Text Bebas #CCFF66 47 Text Bebas #CCFF33 48 Text Bebas #99FF99 49 Text Bebas #99FF66 50 Text Bebas #99FF33 51 Text Bebas Olive 52 Text Bebas #666633 53 Text Bebas #669900 54 Text Bebas #66FF33 55 Text Bebas #66FF66 56 Text Bebas #66FF99 57 Text Bebas #99FFCC 58 Text Bebas #33CC33 59 Text Bebas #336600 60 Text Bebas #00CC00 61 Text Bebas #00CC66 62 Text Bebas #00CC99 63 Text Bebas #006699 64 Text Bebas #336699 65 Text Bebas #3366CC 66 Text Bebas #0099CC 67 Text Bebas #33CCCC 68 Text Bebas #00FFCC 69 Text Bebas #00CCFF 70 Text Bebas Aqua 71 Text Bebas #CCFFFF 72 Text Bebas Langsung pakai nama warna juga bisa. Silakan mencoba dan jangan pernah berhenti untuk belajar!

	Nama Warna	HEX	RGB
.	Alice Blue	#F0F8FF	rgb(240, 248, 254)
.	Antique White	#FAEBD7	rgb(251, 235, 217)
.	Aqua	#00FFFF	rgb(0, 255, 254)
.	Aquamarine	#7FFFD4	rgb(115, 255, 216)
.	Azure	#F0FFFF	rgb(239, 255, 255)
.	Beige	#F5F5DC	rgb(245, 245, 223)
.	Bisque	#FFE4C4	rgb(255, 227, 200)
.	Black	#000000	rgb(0, 0, 0)
.	Blanched Almond	#FFEBCD	rgb(255, 234, 208)
.	Blue	#0000FF	rgb(0, 0, 255)
.	Blue Violet	#8A2BE2	rgb(138, 43, 226)
.	Brown	#A52A2A	rgb(165, 42, 42)
.	Burly Wood	#DEB887	rgb(222, 184, 135)
.	Cadet Blue	#5F9EA0	rgb(95, 158, 160)
.	Chartreuse	#7FFF00	rgb(127, 255, 1)
.	Chocolate	#D2691E	rgb(210, 105, 30)
.	Coral	#FF7F50	rgb(251, 127, 80)
.	Cornflower Blue	#6495ED	rgb(100, 149, 237)
.	Cornsilk	#FFF8DC	rgb(225, 248, 220)
.	Crimson	#DC143C	rgb(220, 20, 60)
.	Cyan	#00FFFF	rgb(62, 254, 255)
.	Dark Blue	#00008B	rgb(0, 0, 139)
.	Dark Cyan	#008B8B	rgb(29, 139, 139)
.	Dark Golden Rod	#B8860B	rgb(184, 134, 11)
.	Dark Gray	#A9A9A9	rgb(169, 169, 169)
.	Dark Green	#006400	rgb(19, 100, 0)
.	Dark Khaki	#BDB76B	rgb(189, 183, 107)
.	Dark Magenta	#8B008B	rgb(139, 0, 140)
.	Dark Olive Green	#556B2F	rgb(85, 107, 47)
.	Dark Orange	#FF8C00	rgb(251, 140, 1)
.	Dark Orchid	#9932CC	rgb(153, 50, 204)
.	Dark Red	#8B0000	rgb(139, 5, 0)
.	Dark Salmon	#E9967A	rgb(233, 150, 122)
.	Dark Sea Green	#8FBC8F	rgb(143, 188, 144)
.	Dark Slate Blue	#483D8B	rgb(72, 61, 139)
.	Dark Slate Gray	#2F4F4F	rgb(47, 79, 79)
.	Dark Turquoise	#00CED1	rgb(48, 206, 209)
.	Dark Violet	#9400D3	rgb(148, 0, 211)
.	Deep Pink	#FF1493	rgb(249, 19, 147)
.	Deep Sky Blue	#00BFFF	rgb(43, 191, 254)
.	Dim Gray	#696969	rgb(105, 105, 105)
.	Dodger Blue	#1E90FF	rgb(30, 144, 255)
.	Fire Brick	#B22222	rgb(178, 34, 33)
.	Floral White	#FFFAF0	rgb(255, 250, 240)
.	Forest Green	#228B22	rgb(34, 139, 35)
.	Fuchsia	#FF00FF	rgb(249, 0, 255)
.	Gainsboro	#DCDCDC	rgb(220, 220, 220)
.	Ghost White	#F8F8FF	rgb(248, 248, 255)
.	Gold	#FFD700	rgb(253, 215, 3)
.	Golden Rod	#DAA520	rgb(218, 165, 32)
.	Gray	#808080	rgb(128, 128, 128)
.	Green	#008000	rgb(27, 128, 1)
.	Green Yellow	#ADFF2F	rgb(173, 255, 48)
.	Honey Dew	#F0FFF0	rgb(240, 255, 240)
.	Hot Pink	#FF69B4	rgb(240, 255, 240)
.	Indian Red	#CD5C5C	rgb(205, 92, 92)
.	Indigo	#4B0082	rgb(75, 0, 130)
.	Ivory	#FFFFF0	rgb(255, 255, 239)
.	Khaki	#F0E68C	rgb(240, 230, 140)
.	Lavender	#E6E6FA	rgb(230, 230, 250)
.	Lavender Blush	#FFF0F5	rgb(254, 240, 245)
.	Lawn Green	#7CFC00	rgb(124, 252, 2)
.	Lemon Chiffon	#FFFACD	rgb(255, 250, 205)
.	Light Blue	#ADD8E6	rgb(173, 216, 230)
.	Light Coral	#F08080	rgb(240, 128, 128)
.	Light Cyan	#E0FFFF	rgb(224, 255, 255)
.	Light Golden Rod Yellow	#FAFAD2	rgb(250, 250, 210)
.	Light Gray	#D3D3D3	rgb(211, 211, 211)
.	Light Green	#90EE90	rgb(144, 238, 144)
.	Light Pink	#FFB6C1	rgb(252, 182, 193)
.	Light Salmon	#FFA07A	rgb(251, 160, 122)
.	Light Sea Green	#20B2AA	rgb(40, 178, 170)
.	Light Sky Blue	#87CEFA	rgb(135, 206, 250)
.	Light Slate Gray	#778899	rgb(119, 136, 153)
.	Light Steel Blue	#B0C4DE	rgb(176, 196, 222)
.	Light Yellow	#FFFFE0	rgb(255, 255, 224)
.	Lime	#00FF00	rgb(63, 255, 0)
.	Lime Green	#32CD32	rgb(50, 205, 50)
.	Linen	#FAF0E6	rgb(250, 240, 230)
.	Magenta	#FF00FF	rgb(249, 0, 255)
.	Maroon	#800000	rgb(128, 4, 0)
.	Medium Aqua Marine	#66CDAA	rgb(102, 205, 170)
.	Medium Blue	#0000CD	rgb(0, 0, 205)
.	Medium Orchid	#BA55D3	rgb(186, 85, 211)
.	Medium Purple	#9370DB	rgb(147, 112, 219)
.	Medium Sea Green	#3CB371	rgb(60, 179, 113)
.	Medium Slate Blue	#7B68EE	rgb(123, 103, 238)
.	Medium Spring Green	#00FA9A	rgb(62, 250, 153)
.	Medium Turquoise	#48D1CC	rgb(72, 209, 204)
.	Medium Violet Red	#C71585	rgb(199, 21, 133)
.	Midnight Blue	#191970	rgb(25, 25, 112)
.	Mint Cream	#F5FFFA	rgb(245, 255, 250)
.	Misty Rose	#FFE4E1	rgb(254, 228, 225)
.	Moccasin	#FFE4B5	rgb(254, 228, 181)
.	Navajo White	#FFDEAD	rgb(254, 222, 173)
.	Navy	#000080	rgb(0, 0, 128)
.	Old Lace	#FDF5E6	rgb(253, 245, 230)
.	Olive	#808000	rgb(128, 128, 1)
.	Olive Drab	#6B8E23	rgb(107, 142, 35)
.	Orange	#FFA500	rgb(252, 165, 3)
.	Orange Red	#FF4500	rgb(250, 69, 1)
.	Orchid	#DA70D6	rgb(218, 112, 214)
.	Pale Golden Rod	#EEE8AA	rgb(238, 232, 170)
.	Pale Green	#98FB98	rgb(152, 251, 153)
.	Pale Turquoise	#AFEEEE	rgb(175, 238, 239)
.	Pale Violet Red	#DB7093	rgb(219, 112, 147)
.	Papaya Whip	#FFEFD5	rgb(254, 239, 213)
.	Peach Puff	#FFDAB9	rgb(253, 218, 185)
.	Peru	#CD853F	rgb(205, 133, 63)
.	Pink	#FFC0CB	rgb(252, 192, 203)
.	Plum	#DDA0DD	rgb(221, 160, 221)
.	Powder Blue	#B0E0E6	rgb(176, 224, 230)
.	Purple	#800080	rgb(128, 0, 128)
.	Rebecca Purple	#663399	rgb(102, 51, 153)
.	Red	#FF0000	rgb(255, 0, 0)
.	Rosy Brown	#BC8F8F	rgb(188, 143, 142)
.	Royal Blue	#4169E1	rgb(65, 105, 225)
.	Saddle Brown	#8B4513	rgb(139, 69, 19)
.	Salmon	#FA8072	rgb(250, 128, 114)
.	Sandy Brown	#F4A460	rgb(244, 164, 95)
.	Sea Green	#2E8B57	rgb(46, 139, 87)
.	Sea Shell	#FFF5EE	rgb(255, 245, 238)
.	Sienna	#A0522D	rgb(160, 82, 45)
.	Silver	#C0C0C0	rgb(192, 192, 192)
.	Sky Blue	#87CEEB	rgb(135, 206, 235)
.	Slate Blue	#6A5ACD	rgb(106, 90, 205)
.	Slate Gray	#708090	rgb(112, 128, 145)
.	Snow	#FFFAFA	rgb(255, 250, 250)
.	Spring Green	#00FF7F	rgb(63, 255, 128)
.	Steel Blue	#4682B4	rgb(70, 130, 180)
.	Tan	#D2B48C	rgb(210, 180, 140)
.	Teal	#008080	rgb(26, 128, 127)
.	Thistle	#D8BFD8	rgb(216, 191, 216)
.	Tomato	#FF6347	rgb(250, 99, 71)
.	Turquoise	#40E0D0	rgb(64, 224, 208)
.	Violet	#EE82EE	rgb(238, 130, 238)
.	Wheat	#F5DEB3	rgb(245, 222, 179)
.	White	#FFFFFF	rgb(255, 255, 255)
.	White Smoke	#F5F5F5	rgb(245, 245, 245)
.	Yellow	#FFFF00	rgb(255, 255, 0)
.	Yellow Green	#9ACD32	rgb(154, 205, 49)

Anda dapat melihat perbedaan mengenai hexadecimal dan RGB.

Color	HTML / CSS Color Name	Hex Code #RRGGBB	Decimal Code (R,G,B)
	lightsalmon	#FFA07A	rgb(255,160,122)
	salmon	#FA8072	rgb(250,128,114)
	darksalmon	#E9967A	rgb(233,150,122)
	lightcoral	#F08080	rgb(240,128,128)
	indianred	#CD5C5C	rgb(205,92,92)
	crimson	#DC143C	rgb(220,20,60)
	firebrick	#B22222	rgb(178,34,34)
	red	#FF0000	rgb(255,0,0)
	darkred	#8B0000	rgb(139,0,0)

Selain menggunakan kode warna, Anda juga dapat menggunakan generator untuk menentukan kode warna apa saja yang bisa digunakan. Anda dapat menggunakan generator warna yang disediakan oleh beberapa website di bawah ini.

• W3School HTML Color Picker
  Situs ini dapat Anda gunakan untuk memilih warna berdasarkan warna dasar. Anda dapat memilih tingkat saturasi dan melihat langsung (preview) hasilnya. Selain itu, terdapat juga pilihan untuk memasukkan warna berdasarkan kode dan juga memunculkan jendela HTML 5 untuk pemilihan warna.
• Colors & SkillshareColors merupakan situs yang digunakan sebagai alat schema generator. Jika Anda seorang desainer, situs ini dapat memberikan saran schema yang sesuai dengan kebutuhan dan juga tersedia kode hexadecimal yang bisa digunakan ke dalam website.
• HTML Color Code
  HTML Color Code merupakan situs web sederhana yang menyediakan tampilan pemilihan warna. Anda tinggal mengarahkan kursor ke dalam tabel warna atau menggeser slider untuk mendapatkan warna yang sesuai dengan kode warna dalam bentuk hexadecimal.

Download 20 Template Website HTML Gratis Di Sini!

Cara Menggunakan Kode Warna HTML & CSS

Penggunaan kode warna pada HTML & CSS ketika diterapkan ke dalam website. Kode warna dapat Anda gunakan hampir di semua bagian, seperti karakter, background, dan border.
Berikut beberapa cara menggunakan kode warna HTML dan CSS:

• Cara Menggunakan Kode Warna HTML di Karakter

<!DOCTYPE html> <html> <body>   <p><font size=”3″ color=”#ff0000″>Daftar Kode Warna Pada HTML & CSS</font></p>   <p><font size=”2″ color=”#00ff00″>Daftar Kode Warna Pada HTML & CSS</font></p>   <p><font face=”verdana” color=”#0000ff”>Daftar Kode Warna Pada HTML & CSS</font></p>   <p><strong>Catatan:</strong> Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti</p> </body> </html>

Skrip di atas akan menghasilkan tampilan seperti di bawah ini:

Daftar Kode Warna Pada HTML & CSS

Daftar Kode Warna Pada HTML & CSS

Daftar Kode Warna Pada HTML & CSS

Catatan: Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti

• Cara Menggunakan Kode Warna HTML di Background

<!DOCTYPE html> <html> <head> <style>   #p1 {background-color:#ff0000;}   #p2 {background-color:#00ff00;}   #p3 {background-color:#0000ff;}   #p4 {background-color:#ffff00;}   #p5 {background-color:#ff00ff;} </style> </head> <body>   <p>HEX colors:</p>   <p id=”p1″>Red</p>   <p id=”p2″>Green</p>   <p id=”p3″>Blue</p>   <p id=”p4″>Yellow</p>   <p id=”p5″>Cerise</p> </body> </html>

Kode di atas menghasilkan tampilan seperti ini:
HEX colors:

Red

Green

Blue

Yellow

Cerise

• Cara Menggunakan Kode Warna HTML di Border

<!DOCTYPE html> <html> <head> <style> h2 {    border-style: solid;    border-color: #92a8d1; } div {    border-style: solid;    border-color: #92a8d1; } </style> </head> <body>   <h2>Daftar Kode Warna Pada HTML & CSS</h2>   <div>Nilai dari border-color dapat diatur menggunakan angka kode hexadecimal.</div>   <p><strong>Catatan:</strong> border-color tidak dapat bekerja jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur border.      </p> </body> </html>

Skrip di atas akan menampilkan tampilan seperti di bawah ini:

Daftar Kode Warna Pada HTML & CSS

Nilai dari border-color dapat diatur menggunakan angka kode hexadecimal.

Catatan: border-color tidak dapat bekerja jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur border.

Kesimpulan

Penting untuk mengetahui daftar kode warna pada HTML dan CSS. Penggunaan kode warna hampir digunakan di berbagai bagian di pengembangan website. Warna juga dapat mempengaruhi sisi psikologis dari seseorang. Sehingga pemilihan warna yang tepat dan menarik mampu mempengaruhi bagaimana user experience pengunjung.
Website yang menarik tentunya dapat membuat pengunjung betah dan tertarik untuk berkunjung kembali. Salah satunya adalah dengan mengombinasikan beberapa warna di dalam satu halaman website.
Daftar kode warna pada HTML dan CSS di atas setidaknya dapat sedikit membantu Anda untuk memahami bagaimana cara mewarnai website dan menerapkannya supaya pengunjung lebih betah dan tertarik untuk mengunjunginya lagi.
Di bawah ini ada beberapa artikel terkait dengan pengembangan website yang dapat Anda kunjungi untuk mendapatkan informasi lain:

20 Rekomendasi Template Website Gratis dan Responsive 

Inilah dia daftar rekomendasi download template web gratis dan responsive. Kami sengaja kurasi berbagai genre template web gratis HTML untuk memenuhi setiap kebutuhan Anda.

1. Ideal

Ideal merupakan template web didesain khusus untuk usaha desain interior. Untuk menonjolkan konten berupa ilustrasi interior design, template ini sengaja mengusung kesan bersih, minimalis, sekaligus kreatif.
Di halaman depan, Anda langsung disuguhi tampilan full-width slider yang elegan. Pada bagian itulah, Anda bisa memasang sejumlah konten unggulan. Kalau ingin memaksimalkan conversion rate, Anda juga dapat memakai salah satu slide untuk memuat link menuju landing page.
Ketika di scroll, Anda akan menyadari detail tampilan yang apik. Background web disusun dari sekumpulan titik abu-abu (polkadot) yang simetris. Ilustrasi gambar di web dibuat dalam format kotak. Begitu pun dengan judul post yang dibingkai dalam kotak juga.
Untuk jenis post tertentu, seperti project, Anda bisa memakai tampilan yang lebih eksklusif. Di atas judul post, Anda bisa memasang slider berisi gambar-gambar menarik. Dengan begitu, dijamin konten Anda akan mencuri perhatian pengunjung. Plus, mendulang banyak klik.
Fitur unggulan:

• Full-width slider ─ preview konten dari resolusi gambar HD;
• Testimonials ─ tampilkan review pelanggan;
• Social media icons ─ memudahkan pengunjung membagikan konten ke sosial media;
• Hover effects ─ mempercantik tampilan web sekaligus memudahkan link agar dikenali;
• Sticky texts ─ tonjolkan pesan penting di web.

Cocok untuk: usaha desain interior, perabot dalam rumah, jasa arsitek, dan majalah renovasi rumah.

2. Unapp

Kalau Anda punya usaha yang basisnya data (data-driven), Unapp punya tampilan web menawan yang bisa Anda coba. Desain halaman mirip landing page pasti membuat Anda jatuh hati. Sebab, semua fitur dan kelebihan produk Anda bisa tampil dengan begitu apik.
Template web gratis ini memanfaatkan header dengan sebaik mungkin. Di dalamnya terdapat headline dan subheadline yang diikuti dengan tombol call to action (CTA). Tata letak macam ini tentunya memudahkan pengunjung untuk tahu tentang apa sebenarnya website. Untuk menambah kesan dinamis dan tak membosankan, terdapat animasi bergerak yang jadi latar belakang.
Baru di bawahnya, terdapat fitur gallery dalam bentuk slider. Bentuk slider yang tidak full-width justru memberi kesan bersih dan profesional. Pada bagian slider inilah, Anda bisa taruh beberapa cuplikan layar aplikasi atau produk unggulan.
Untuk membuat informasi soal produk lebih jelas, ada beberapa desain tampilan konten yang siap digunakan. Misalnya, konten tiga kolom beserta ikon. Di mana Anda bisa menyebutkan fitur unik atau fakta menarik soal produk yang dibuat.
Kalau butuh menjelaskan fitur dengan lebih leluasa, terdapat settingan konten dua kolom. Lewat settingan ini, Anda bisa tampilkan cuplikan layar dari app atau produk. Baru di kolom sampingnya, Anda beri keterangan penting dalam bentuk poin-poin.
Di samping semua visual yang menarik, Unapp juga dilengkapi dengan fitur video player, blog, dan juga toko online.
Cocok untuk: app developer, software developer, startup, lembaga riset, dan marketing agency.

3. Etrain

Etrain spesial diciptakan untuk kebutuhan edukasi lewat platform online. Tak cuma desain keseluruhannya saja yang atraktif. Template web gratis ini juga sudah dilengkapi tampilan khusus untuk kursus-kursus yang ditawarkan ke pengunjung.
Ketika membuka website, Anda langsung mendapati halaman depan berisi headline dan ilustrasi menarik. Anda bisa gunakan tampilan ini untuk menaruh visi-misi berkaitan usaha edu-tech. Kemudian, gunakan CTA untuk sambungkan pengunjung ke halaman konten yang lebih lengkap. Contohnya, kursus yang tersedia dan halaman daftar.
Di samping itu, seperti yang sudah dibilang di awal, Etrain punya tampilan preview untuk tiap kursus yang ditawarkan. Terdapat gambar, topic tag, biaya kursus, judul kursus, beserta deskripsi singkat seputar kursus. Untuk membuatnya tambah meyakinkan, ada juga nama pengampu kursus beserta star review-nya.
Seolah belum cukup, Etrain juga melengkapi dirinya dengan berbagai elemen desain. Anda bisa temukan berbagai elemen konten dari teks, variasi tombol, layout tiga kolom, block quote, tabel, grafik persentase, variasi header, switches, variasi list and numberings, form, dan checklist. Kesemua elemen ini pastinya memudahkan Anda dalam mendesain konten web.
Fitur unggulan:

• Mobile ready layout ─ tampilan web menyesuaikan berbagai dimensi layar secara otomatis;
• Retina screens ─ tampilan web dilengkapi gambar resolusi tinggi;
• Sticky navigation ─ navigasi web selalu mengikuti gerak user, memudahkan user untuk menelusuri halaman web;
• Animated statistics ─ tampilkan statistik penting dengan cara menarik;
• Blog pages ─ dedikasikan satu bagian untuk konten-konten panjang.

Cocok untuk: kursus online, bimbingan belajar online, kelas sertifikasi online, dan portal kuliah online.

4. Trainer

Untuk bisa stand out di era digital, personal branding tak boleh Anda lewatkan. Karenanya, kami memasukkan rekomendasi template website responsive untuk Anda yang peduli pada digital presence. Terutama, Anda yang bergelut di bidang olahraga.
Trainer punya tampilan yang bersih, simpel, dan lugas. Suatu kesan yang pasti dimiliki oleh atlet dan pelatih olahraga. Kesan yang sama, secara strategis boleh ditafsirkan sebagai perintah agar tak berlama-lama membuka website. Sebagai gantinya, pengunjung diminta untuk segera menghubungi trainer, melakukan reservasi, dan berolahraga.
Desain bagian header dipenuhi oleh foto, nama trainer, beserta gelarnya. Masih jadi bagian dari header, di ujung bawah terdapat perintah untuk scroll down. Di bawahnya, terdapat profil singkat trainer. Menyusul kemudian visi, misi, dan informasi event terbaru yang ditaruh dalam satu kolom. Tak lupa, ada juga informasi berbagai program yang ditawarkan. Info tersebut ditaruh masih dalam satu kolom.
Bagian footer website merangkum semua info penting terkait training olahraga. Mulai dari deskripsi website, jam operasional, menu navigasi web, lokasi, hingga kontak pelatih.  Sisanya, ialah halaman-halaman hasil modifikasi sederhana dari elemen yang ditampilkan di halaman depan.
Fitur unggulan:

• jQuery carousel ─ sejenis galeri untuk menampilkan beberapa gambar sekaligus dengan efek 3D;
• Parallax effect ─ efek gambar yang muncul pada background website, menambah pengalaman visual pengunjung web;
• Image pop-up ─ bentuk lain untuk menonjolkan gambar pada website.

Cocok untuk: trainer fitness, instruktur gym, instruktur yoga, instruktur zumba, instruktur muay thai, terapis olahraga, dan sejenisnya.

5. Realtors

Bisnis properti memang tak ada matinya. Peluangnya kian bertambah seiring waktu. Peluang itu pun semakin besar dengan adanya website untuk berpromosi. Itu mengapa kami tak bisa mengabaikan template web gratis macam Realtors dari daftar rekomendasi ini.
Realtors terdiri dari tujuh elemen konten. Akan tetapi, lima di antaranya betul-betul spesifik dibuat untuk tujuan website properti. Pertama, header berupa preview properti. Berlatar belakang foto properti, terdapat keterangan soal harga, judul rumah, alamat, info fasilitas, dan tak lupa CTA learn more.
Kedua, kolom pencarian properti untuk dijual atau disewakan. Terdiri dari tujuh kolom pencarian. Mulai dari tipe rumah, jumlah kamar tidur, nama rumah, jumlah kamar mandi, alamat, dan rentang harga minimum sampai maksimum.
Ketiga, daftar properti yang ditampilkan dalam slider. Keempat, profil pemilik properti lengkap dengan foto, keterangan jumlah properti yang dipunyai, dan link ke media sosialnya. Kelima, bagian testimoni dan star review berbentuk slider.
Di samping kelima elemen tersebut, Realtors juga memiliki bagian dua kolom untuk menaruh info fitur secara singkat. Kemudian, ada juga halaman blog untuk menaruh konten yang lebih panjang.
Fitur unggulan:

• Cross-browser compatible ─ tampilan web yang seragam dari berbagai browsers;
• Advanced properties search ─ fitur pencarian super lengkap dengan tujuh kolom isian; 
• Testimonials slider ─ pamerkan banyak testimoni pelanggan yang puas dalam bentuk slider.

Cocok untuk: pemilik jaringan properti, pemilik properti, usaha persewaan properti, dan sejenisnya.

6. Strategy

Ingin dikenal karena apa yang Anda lakukan? Template web gratis macam Strategy ini sangat cocok untuk Anda. Tampilannya benar-benar bersih dan simpel. Pas untuk menampilkan portofolio dan produk sebagai pusat perhatian.
Halaman depan template hanya terdiri atas lima elemen utama. Di bagian header, terdapat headline dengan ukuran font yang besar. Bagian ini dapat Anda pakai untuk memperkenalkan diri tanpa ba-bi-bu.
Langsung di bawahnya, terdapat kumpulan foto portofolio. Masing-masing foto terhubung ke halaman konten study case yang lebih detail. Tata letak konten seperti ini betul-betul mengesankan bahwa Anda percaya diri dengan portofolio atau produk yang Anda buat.
Persis di bawahnya, terdapat bagian What we do. Anda dapat manfaatkan bagian ini untuk memamerkan profil usaha atau fitur layanan yang ditawarkan ke pengunjung. Desainnya terdiri atas tiga kolom dengan nuansa minimalis. Ada ikon-ikon bertemakan teknologi supaya listings deskripsi tak tampak membosankan.
Dua elemen terakhir merupakan blog dan tautan menuju halaman kontak. Benar-benar simpel tapi fungsional, kan?
Fitur unggulan:

• Hover effects ─  efek visual yang muncul ketika menunjuk suatu elemen web, menambah efek dinamis sebuah website;
• On scroll content reveal ─ dapatkan lebih banyak konten tanpa klik, cukup gulirkan mouse ke bawah;
• Working contact form ─ berikan kemudahan bagi pengunjung untuk menghubungi Anda;
• Google Maps ─ tambahkan lokasi bisnis di web agar nampak lebih kredibel.

Cocok untuk: creative agency, ads agency, usaha percetakan, dan pembuatan merchandise.

7. Meranda

Berbeda dengan template web responsive yang sudah dibahas sebelumnya, template satu ini khusus didesain untuk memajang konten teks. Anda bisa lihat, elemen kombinasi antara teks dan gambar mengisi seluruh bagian website.
Di posisi teratas halaman depan, Anda bisa temui slider konten artikel. Di dalamnya terdapat elemen gambar, kategori konten, judul, cuplikan artikel, nama penulis, waktu terbit, beserta estimasi waktu baca. Tersedia juga elemen web yang sama persis tanpa slider.
Sisanya, website diisi dengan elemen web yang isinya serupa. Ya itu gambar, judul, cuplikan tulisan, nama penulis, dan sebagainya. Hal yang membedakan antara satu elemen dan yang lain hanya letak dan layout-nya saja.
Beberapa elemen menaruh gambar dalam posisi persegi panjang di atas judul. Lainnya, menaruh gambar berformat kotak di bagian kiri judul. Pun, ada pula yang tidak memiliki gambar dan hanya berbentuk listings judul dan penulis.
Meski tampaknya terlalu simpel dan polos, template macam ini justru sangat fleksibel untuk dipakai. Dengan dominasi warna putih, Anda lebih mudah membentuk branding dari ilustrasi yang nantinya mengisi web. Misalnya, ilustrasi hand-drawn memberi kesan fun sedangkan motif geometri menyiratkan kesan minimalis sekaligus modern.
Fitur unggulan:

• Slider ─ tampilkan beberapa konten unggulan dalam bentuk slide;
• Sticky menu ─ permudah navigasi pengunjung dengan menu yang mudah diakses;
• Newsletter subscription widget ─ sediakan opsi langganan konten ke pengunjung;
• Social icons ─ bagikan konten ke sosial media dalam sekali klik;
• Contact form ─ memudahkan kontak user dengan pengelola web.

Cocok untuk: perusahaan media, blog, majalah, dan website berbasis konten lainnya.

8. Instylr

Mewah dan megah. Kedua kesan ini otomatis muncul ketika melihat desain Instylr. Slider di bagian header betul-betul menjadi daya pikat desain website. Terdiri atas tampilan slide layar penuh, lengkap dengan headline dan tombol CTA. Tak cukup sampai di situ saja. Agar tak membosankan, terdapat social icons diletakkan di samping kiri. Berikut preview konten slider di bagian kanan.
Untuk menebus kesan megah di bagian slider, elemen lainnya dibuat agak lebih tenang. Kalau Anda scroll ke bawah, terdapat preview satu konten blog/page. Bagian seperti ini lebih cocok dipakai untuk memuat quote atau about us.
Selanjutnya, terdapat kumpulan foto yang tersusun secara acak. Kalau diklik salah satunya, Anda akan dihubungkan dengan satu halaman galeri foto. Ada beberapa tab kategori foto. Di tiap tab, terdapat tampilan utama foto berikut dengan deretan preview ukuran mini.
Tentu saja template macam ini dilengkapi dengan blog. Tata letaknya tak kalah dengan majalah fashion online kaliber internasional.
Terakhir, meski terdapat menu Shop di bagian navigasi, sayangnya fitur toko online belum termasuk ke dalam template website ini. Kalau memang Anda ingin membangun toko online dari template ini, kami sarankan untuk menginstall WooCommerce untuk dapatkan fitur tersebut.
Fitur unggulan:

• Back to top button ─ memudahkan pengunjung mencapai bagian halaman teratas dengan sekali klik;
• Social media icons ─ bagikan konten ke sosial media jadi lebih gampang;
• A large slider with a thumbnail preview ─ tampilan slider konten yang cantik, disertai preview konten lain dalam bentuk thumbnail.

Cocok untuk: majalah fashion, model agency, portofolio desainer, portofolio fotografer fashion, dan sejenisnya.

9. Tourbi

Tourbi bukan sembarang template web untuk travel agent. Untuk sebuah template web responsive yang gratisan, desainnya betul-betul user-friendly. Ada dua alasan kenapa kami menyebutnya begitu.
Pertama, karena terdapat CTA berupa hotline di bagian paling kanan menu navigasi. Anda tentu bisa mengubah CTA itu dengan tombol chat atau sambungan ke Whatsapp. Tapi poin pentingnya, CTA itu memudahkan pengunjung web untuk mengontak Anda.
Kedua, kolom pencarian lengkap tepat di bawah header.  Kolom pencarian sengaja di desain untuk menampilkan dua kolom yaitu country dan city. Masing-masing kolom menunjukkan opsi drop-down ketika diklik. Fitur yang begini tentu jadi penyelamat pengunjung dari kebingungan karena banyaknya opsi.
Ketika di area atas, Tourbi menonjolkan orientasi pada pengunjung website. Giliran di bawah, Tourbi unjuk gigi dengan variasi layout konten yang ia punya. Mulai dari layout untuk konten fitur, deskripsi layanan beserta jumlah objek wisata yang ditawarkan, pilihan objek wisata terpopuler, serta paket tour beserta star ratingnya.
Fitur unggulan:

• Sticky navigation bar ─ akses navigasi mengikuti gerak user, memudahkan mereka untuk menyusuri web;
• Drop-down menu ─ submenu langsung nampak ketika di-hover, mengurangi jumlah klik ke halaman;
• Search function ─ fitur kolom pencarian dengan opsi drop-down;
• Newsletter subscription box ─ kolom langganan newsletter dari website.

Cocok untuk: travel agent, usaha tour and travel, jasa pembelian tiket wisata, dan sebagainya.

10. Boxe

Bisnis ekspedisi juga butuh website yang meyakinkan. Maka, di sinilah Boxe hadir memenuhi kebutuhan Anda.
Tak seperti kebanyakan website di kategori bisnis serupa, Boxe memiliki desain yang cukup efisien dan atraktif. Bagian header didesain dengan amat elegan. Foto truk kontainer didominasi warna gelap berpadu dengan elemen headline, subheadline, dan form berwarna terang.
Anda bisa saja mengganti foto latar pada header dengan gambar apapun. Namun, kami sarankan, untuk tetap menggunakan gambar dengan warna-warna gelap. Dengan begitu, headline dan komponen lainnya nampak jelas.
Belum beranjak dari header, jenis form yang muncul sebetulnya juga menarik. Alih-alih pengecekan resi lewat input manual, form hanya berupa kolom isian nomor telepon. Form seperti ini tentu memberikan opsi lain untuk sistem pengecekan barang. Hanya saja, sayangnya, template ini hanya memberikan desain saja. Anda tetap perlu membangun sistemnya sendiri.
Fitur unggulan:

• Drop down menu ─ kurangi jumlah klik ke halaman submenu, memudahkan pengunjung untuk akses halaman tertentu.
• Call-to-actions ─ variasi tombol aksi yang beragam.
• Get a quote form ─ semacam kolom permintaan informasi harga/biaya yang dikirim pengunjung web kepada pemilik usaha;
• Blog pages ─ tersedia supaya Anda bisa menerapkan strategi content marketing.

Cocok untuk: jasa ekspedisi dan pengiriman paket.

11. Consulotion

Tak semua agensi punya branding yang fun dan creative. Apalagi kalau agensi yang dimaksud berupa agensi bisnis, konsultan, pusat studi, dan sejenisnya. Kesan formal dan profesional harus nampak bahkan sedari profil online atau websitenya. Di titik itulah, Anda membutuhkan template website macam Consulotion.
Terima kasih pada kombinasi warna putih, hitam, dan biru. Perpaduan ketiga warna ini otomatis membuat website nampak formal. Apalagi ditambah elemen-elemen dekoratif, seperti layout foto dan teks yang berbentuk kotak dan berukuran besar. Lewat sudut-sudut tajam itulah, kesan kaku dan formal muncul.
Selain itu, susunan konten lah yang membuat template web gratis ini nampak profesional. Alih-alih menampilkan menu navigasi di bagian teratas, Consulotion memilih untuk menyertakan info kontak email dan nomor telepon. Tak lupa, terdapat tombol CTA berupa Free Consultation yang mendorong pengunjung untuk menghubungi bisnis Anda.
Supaya tak lelah membaca fitur atau konten-konten panjang, Consulotion juga menyediakan elemen “pembatas” berupa animated statistics dan CTA berbentuk banner. Terkadang, komponen detail macam inilah yang dibutuhkan website agar nampak lebih memukau dan profesional.
Fitur unggulan:

• Animated statistics ─ tampilkan data penting dengan cara memukau;
• Hover effects ─ beri efek visual yang atraktif sekaligus tonjolkan komponen website;
• On scroll content load ─ muat lebih banyak konten tanpa klik, tinggal scroll saja;
• Online request a quote form ─ beri opsi kontak dengan tujuan dan kolom isian yang lebih profesional.

Cocok untuk: jasa konsultasi, agensi bisnis, pusat studi, agensi iklan, pembuatan merchandise, dan website bisnis lainnya.

12. Industries

Tak bisa dipungkiri, daya pikat dari template Industries terletak pada slideshow layar penuhnya. Maka, kalau Anda punya konten video. Terutama yang berupa profil perusahaan. Kesan pertama yang muncul di benak pengunjung tentu saja positif.
Bagian lain yang membawa asosiasi positif adalah gambar-gambar berukuran besar. Entah mengapa, mungkin sengaja,  template ini menempatkan gambar sebagai “penggaris” konten. Artinya, gambar sengaja dipasang untuk menyeimbangkan konten teks. Jadi, bukan kebetulan jika dimensi gambar simetris dengan teks yang ditampilkan.
Sebagai kompensasi dari dekorasi visual yang grande, bagian testimoni dibuat lebih elegan. Bagian ini hanya terdiri atas slide, kotak persegi panjang untuk layout, foto user beserta nama juga jabatan, dan tentunya saja kalimat testimoni.
Dari template web gratis ini, pasti Anda sadar. Bahwa desain yang hebat tak melulu berisi komponen yang besar dan mewah. Terkadang, yang dibutuhkan adalah kombinasi tepat dari elemen berukuran besar dengan detail yang lebih elegan.
Fitur unggulan:

• A full-screen slideshow ─ slide ukuran penuh yang kompatibel untuk memutar video;
• Loads content on scroll ─ kurangi jumlah klik untuk muat lebih banyak konten;
• Testimonials slider ─ tampilkan banyak testimoni sekaligus buat masing-masing testimoni nampak lebih spesial;
• Blog section ─ sediakan konten panjang untuk pengunjung yang haus informasi;
• Social media icons ─ perkenalkan website ke audiens lebih luas lewat media sosial.

Cocok untuk: company profile dan bisnis yang membutuhkan static website.

13. Jobpply

Membuat portal pencarian kerja itu sedikit rumit. Kalau salah memilih desain web, bisa-bisa tampilan website nampak penuh dan ruwet. Apalagi, website sejenis ini selalu punya konten seabrek untuk ditampilkan. Maka dari itu, Jobpply ialah template web gratis yang tepat untuk Anda pilih.
Alih-alih menampilkan seabrek konten di depan, Jobpply memudahkan pengalaman user untuk mencari konten yang tepat. Hal ini ia lakukan dengan menyediakan opsi Post a job dan Want a job. Kedua opsi ini diletakkan sebagai CTA di deretan menu utama web. Ketika diklik, CTA Post a job membawa user ke form pengisian data. Di sisi lain, CTA Want a job membawa user ke kolom pencarian lebih lengkap.
Di samping CTA di bagian menu, fitur user-friendly template ini ditunjukkan dengan opsi pencarian di halaman depan. Sebetulnya fitur pencarian inilah yang akan ditemukan user ketika mengklik tombol Want a job. Namun, tetap saja, peletakannya di halaman depan merupakan langkah yang strategis.
Lewat fitur di atas, user bisa mencari info lowongan kerja dari posisi, status kerja, hingga lokasinya. Pun dengan sekali klik di tab berbeda, penyedia kerja bisa mencari informasi soal kandidat yang diincarnya.
Fitur unggulan:

• Animations ─ sedikit elemen dekoratif untuk membuat website lebih menarik;
• Advanced search function ─ kolom pencarian dengan opsi lengkap;
• A full-blown contact page with Google Maps ─ permudah user untuk menjalin kontak, tampilkan kredibilitas website dengan tampilkan lokasi kantor lewat Google Maps.

Cocok untuk: portal pencarian kerja dan website pengembangan karir.

14. Primelaw

Ini mungkin terdengar remeh. Hanya saja, kombinasi warna hitam, putih, dan emas betul-betul memberi kesan terpercaya, profesional, loyal, dan eksklusif. Kalau semua itu kesan yang ingin Anda tampilkan untuk bisnis Anda, maka tak ada salahnya untuk memakai template Primelaw ini.
Sekilas, tak ada yang spesial dengan slider di bagian halaman depan web. Seperti cuplikan gambar di atas, terdapat slider dengan latar foto agak redup. Di atasnya, ada headline, cuplikan deskripsi, serta tombol CTA untuk membuat janji pertemuan. Ini semua nampak biasa sampai Anda scroll ke bawah.
Tepat di bawah header, layout terbagi atas tiga kolom. Paling kiri merupakan form kontak untuk dapatkan rate harga. Lalu, sisanya berisi fitur layanan yang disediakan usaha Anda. Terus ke bawah, Anda bisa memasang profil perusahaan lengkap dengan video profil di samping tulisan.
Semakin ke bawah, Anda bisa temukan layout untuk semua konten yang Anda perlukan. Katakanlah dari statistik, visi dan misi perusahaan, testimoni klien, workflow, profil anggota tim, konten studi kasus, sampai dengan halaman kontak.
Fitur unggulan:

• Loads content on scroll ─ lihat lebih banyak konten hanya dengan gulirkan mouse;
• Rocks animated statistics ─ tonjolkan data penting lewat animasi menarik;
• Testimonials slider ─ tampilkan testimoni klien atas bisnis Anda;
• Case studies ─ berikan informasi lengkap seputar layanan yang Anda berikan dengan konten berupa studi kasus.

Cocok untuk: firma hukum, lembaga bantuan hukum, lembaga swadaya masyarakat, dan badan sejenisnya.

15. Gaas

Untuk bisnis dengan satu jenis layanan/produk, slider bukanlah tempat yang bagus untuk memajang dagangan. Sebaliknya, Anda butuh sebuah etalase kokoh untuk memamerkan layanan/produk. Untungnya, “etalase” macam itulah yang bisa Anda dapatkan di Gaas.
Berbeda dari desain halaman depan pada umumnya, Gaas punya cara tersendiri untuk menampilkan sisi elegan. Hanya dengan berbekal background warna bertekstur dan ilustrasi laptop berisi tangkapan layar.
Kalau bicara soal bisnis produk digital, jelas tampilan visual seperti ini saja sudah sangat meyakinkan. Apalagi jika ditambah copy yang menghidupkan produk dan meyakinkan calon pembeli. Semua itu akan jadi semakin lengkap dengan tombol CTA dan link menuju konten video.
Namun, bukan hanya area atas saja yang boleh Anda jadikan etalase. Keseluruhan website pada dasarnya dibangun sebagai etalase produk Anda. Segala informasi soal produk, termasuk fitur dan harga bisa dimasukkan ke website. Tak usah khawatir dengan aspek visualnya. Sebab, template website responsive ini didesain dengan tampilan estetik dan padu.
Fitur unggulan:

• Pricing tables ─ tampilkan harga produk/layanan beserta fiturnya dengan lebih elegan;
• Hover effects ─ efek visual yang muncul dalam hitungan detik ketika pointer menunjuk elemen tertentu pada web;
• Functional contact form ─ formulir kontak yang fungsional, memudahkan hubungan user dengan Anda; 
• A trendy blog section ─ halaman blog yang secara visual dibuat semenarik mungkin.

Cocok untuk: developer website, developer software, developer aplikasi, dan layanan berbasis digital lainnya.

16. Sneaky

Konon sebelum bisa mencicip dan menilai rasa makanan, Anda mengandalkan mata untuk membuat impresi pertama. Dengan kata lain, visual speaks first. Makanan yang nampak cantik, tentu akan terasa lebih enak. Jadi, tak heran kalau banyak juru masak amat memperhatikan presentasi makanannya.
Dari konsep inilah, Sneaky lahir. Template web gratis yang didedikasikan untuk kuliner ini, betul-betul memaksimalkan ruang untuk elemen visual. Sebaliknya, template ini justru irit dalam menggunakan kata-kata.
Kalau tak percaya, coba perhatikan saja bagian headernya. Area ini dibagi atas dua kolom. Sebelah kiri berisi headline, dua tombol CTA, beserta keterangan fitur berbentuk ikon. Bagian ini statis dan tidak berubah.
Berbeda dengan kolom sebelah kanan yang dinamis. Area ini berisi slider yang mungkin tak akan Anda sangka bentuknya. Akan tetapi, justru di bagian inilah Anda bisa tampilkan beberapa foto panganan andalan milik resto.
Fitur unggulan:

• A cool split-screen slider ─ display foto makanan dalam slide berukuran separuh halaman;
• Call-to-action buttons ─ variasi ikon dan tombol untuk pancing pengunjung mengklik link tertentu;
• Daily deal module ─ bagian khusus untuk memasang promo terbaru;
• Food menu ─ display menu makanan ala resto;
• A full-blown booking ─ formulir reservasi untuk makan langsung di restoran.

Cocok untuk: blog kuliner, restoran, jasa katering, dan sebagainya.

17. Winter

Ketika membahas template website responsive, rasanya kurang lengkap kalau tak sekalian bahas template toko online. Makanya, kami sediakan satu slot khusus untuk mengulas Winter.
Terlepas dari desain headernya yang amat familiar (baca: pasaran), Winter sebetulnya punya user interface yang cukup ramah dan efisien. Sekali lihat dari fotonya saja, Anda tahu jenis produk apa yang dijual, bagaimana tampilannya, dan bagaimana cara melihat spesifikasi produk dari websitenya.
Tampilan ini jadi makin oke, ketika di bawah header, terdapat pembagian kategori produk yang cukup jelas. Sebab, kategori tersebut terbagi atas tiga kolom dengan gambar yang cukup besar. Plus, sebuah CTA yang terpampang jelas.
Lalu, ketika di-scroll, Anda akan menemui kumpulkan produk new arrivals dalam foto ukuran besar. Terdapat menu berupa tab kecil untuk mengurutkan produk macam apa yang perlu ditampilkan.
Namun, Anda tahu apa yang paling keren dari template ini?
Winter menyediakan desain halaman untuk tiap tahapan transaksi online. Dari login, shopping, preview produk, halaman spesifikasi produk, product checkout, shopping cart, confirmation, hingga tracking. Kalau begini, Anda tak perlu lagi pusing memikirkan perintilan desain web toko online.
Fitur unggulan:

• Instagram-ready feed ─ sambungkan website dengan akun instagram, jadikan konten Instagram sebagai elemen dekoratif di web;
• Social media icons ─ permudah bagikan produk dan konten lain ke sosial media;
• Newsletter subscription ─ sediakan kolom berlangganan konten untuk user;
• A full-blown blog section ─ dedikasikan satu bagian halaman untuk jalankan strategi inbound marketing, muat info produk terbaru, promo, serta tips dan trik. 

Cocok untuk: website toko online, toko baju dan accesories, toko furniture dan dekorasi, serta toko-toko dengan produk berupa barang (goods).

18. Evento

Setiap event besar membutuhkan website. Entah itu event konferensi, seminar, workshop, konser, sampai dengan undangan pernikahan. Untuk memenuhi kebutuhan desain web yang apik, Anda boleh jadikan Evento sebagai pilihan.
Sebetulnya, template web gratis ini punya desain yang fokus untuk satu jenis event. Halaman depan Evento memuat layout untuk informasi seputar satu event. Mulai dari slider di bagian atas halaman, keterangan soal penyelenggaraan acara, fitur hitung mundur menuju acara, deskripsi acara, profil pengisi acara, sampai dengan harga tiket untuk mengikuti acara. Kalau semua informasi itu yang Anda butuh untuk tampilkan, sudah pasti Evento akan jadi pilihan template yang tepat.
Akan tetapi, Anda juga bisa menjadikan template ini sebagai website event organizer ataupun website tour band musik atau tokoh ternama lainnya. Sebab, Evento juga memiliki tabel yang memuat info seputar acara-acara selanjutnya. Lengkap dengan keterangan lebih lanjut dan tombol pembelian tiket.
Cocok untuk: konferensi, seminar, workshop, konser, profil band, website motivator, dan event organizer.

19. Bato

Super simple. Kesan demikian yang akan muncul seketika Anda melihat Bato. Halaman depannya dibuat dari slider yang pas ukuran layar. Hingga Anda tak perlu scroll untuk memuat konten-konten lain. Sebagai gantinya, Anda cukup klik tanda panah kecil di bagian bawah halaman.
Kesan bersih ini turut muncul sebab menu navigasi yang “tersembunyi”. Untuk bisa mengakses menu utama, Anda perlu klik tanda di ujung kanan halaman. Seketika, Anda akan mendapati kolom pencarian, daftar menu utama, dan galeri berisi portofolio.
Bato memiliki tiga macam desain halaman. Pertama, untuk menampilkan portofolio. Halaman ini didominasi dengan preview dalam ukuran layar penuh. Bentuk layoutnya menyerupai kotak-kotak yang saling tumpang tindih. Tak seperti halaman utama yang tak bisa di-scroll, halaman ini justru mengandalkan scrolling untuk memuat lebih banyak konten.
Kedua, halaman khusus blog. Terdiri dari preview konten blog dalam bentuk tiga kolom. Masing-masing kolomnya berisi ilustrasi gambar dalam format persegi yang memanjang vertikal. Lalu diikuti dengan tanggal posting, judul, serta deskripsi singkat mengenai konten.
Terakhir, halaman about me yang jadi favorit kami. Halaman ini hanya seluas resolusi layar, tidak bisa di-scroll. Lalu, terbagi atas dua kolom sama besar. Kolom sebelah kiri berisi foto statis pemilik web. Di sebelah kanan berisi keterangan soal pemilik web. Menariknya, kolom sebelah kanan dibuat dalam format slider.
Dengan demikian, informasi teks tidak memenuhi halaman web. Sebuah cara cerdas untuk mempertahankan kesan sumper simpel yang dibangun di awal.
Cocok untuk: portofolio desain produk dan portofolio fotografi.

20. Louie

Louie merupakan template website responsive yang terakhir di rekomendasi ini. Dibandingkan dengan semua template web gratis yang sudah dibahas, Louie punya kesan lebih personal dan dekat. Maka dari itu, template ini lebih cocok untuk digunakan individu atau freelancer.
Sebelah kiri halaman, seperti yang Anda lihat, adalah sidebar menu. Menu ini muncul secara statis di semua halaman website. Selain memuat navigasi menuju halaman lainnya, sidebar menu ini juga memuat foto profil dan kolom berlangganan newsletter.
Di sebelahnya, kurang lebih ¾ halaman diisi dengan konten utama. Terdapat profil pemilik web yang jadi fokus perhatian. Lengkap dengan sedikit deskripsi dan social button. Tepat di bawahnya, ada dekorasi berupa foto-foto dari Instagram dalam bentuk mini.
Halaman portofolio sengaja hanya menampilkan deretan gambar. Ketika diklik, gambar tersebut akan muncul dalam ukuran full-screen. Fitur ini tentunya memudahkan pengunjung untuk melihat detail karya.
Tak lupa, terdapat halaman services yang bisa diisi dengan layanan yang ditawarkan ke calon pelanggan. Terdapat ikon-ikon seputar fotografi yang bisa dipakai untuk melengkapi deskripsi layanan.
Cocok untuk: portofolio fotografi, portfolio desain grafis, dan portofolio freelance.

Kang Asep

Tidak ada seorang muslim pun yang mendo’akan kebaikan bagi saudaranya (sesama muslim) tanpa sepengetahuannya, melainkan malaikat akan berkata, “Dan bagimu juga kebaikan yang sama”.

Facebook

WhatsApp

Instagram

Share :