Tutorial kali ini kita akan membuat Garis Horizontal di Website dengan Banyak Warna , atau warna warni garis horizontal dengan CSS , Style ini merupakan kreasi para web designer , dimana menciptakan tampilan website yang elegen... Berikut ini contoh dari garis horizontal denga warna lebih dari satu :

Garis Horizontal tersebut dapat kita aplikasikan di bagian tertentu seperti header , footer , dan lainnya, untuk contoh footer bisa dilihat disini :

Untuk membuat Garis Horizontal diatas , berikut source code nya :

CSS CODE :

<style>
.site-footer-colors i.teal {
    background-color: #009888;
}
.site-footer-colors i.red {
    background-color: #D53540;
}
.site-footer-colors i.green {
    background-color: #679047;
}
.site-footer-colors i.yellow {
    background-color: #EC8A22;
}
.site-footer-colors i {
    float: right;
    width: 25%;
    height: 8px;
}
* {
    margin: 0px;
    padding: 0px;
}
</style>

 HTML CODE :

<div class="site-footer-colors"><i class="teal"></i><i class="red"></i><i class="green"></i><i class="yellow"></i></div>

CODE LENGKAP :

<style>
.site-footer-colors i.teal {
    background-color: #009888;
}
.site-footer-colors i.red {
    background-color: #D53540;
}
.site-footer-colors i.green {
    background-color: #679047;
}
.site-footer-colors i.yellow {
    background-color: #EC8A22;
}
.site-footer-colors i {
    float: right;
    width: 25%;
    height: 8px;
}
* {
    margin: 0px;
    padding: 0px;
}
</style>
<div class="site-footer-colors"><i class="teal"></i><i class="red"></i><i class="green"></i><i class="yellow"></i></div>

Silahkan Copy paste Code diatas, dan simpan dengan garis.html , silahkan jalankan .