Contoh website budaya atau tari dengan html , css dan javascript

Contoh website budaya atau tari dengan html , cssdan javascript Halo sobat kak dolop, jumpa lagi nih kita hehe, oke pada kesempatan kali ini saya akan share sedikit hasil buatan saya yaitu Contoh website budaya atau tari dengan html , css dan javascript .
Dimana pada website ini saya menggunakan html, css, lalu library font awesome(untuk iconnya), kemudian library owl.carousel(untuk slidenya). Project ini sebenarnya saya buat waktu ikut lomba OLDC(one day live coding), kurang lebih 4 jam sih saya buatnya dan mata mulai ngantuk karena saya membuatnya pada pukul 01.00 WIB sampai dengan 05.00 gak tidur ceritanya hehe(sory curhat sedikit :D). Oke lah gak perlu lama-lama mungkin teman-teman yang membacanya juga bosen wkwkwkkw.
Oke sedikit beberapa gambar dari tampilan web ini:
Website Budaya

Fitur navigasi dan slide yang keren


Fitur konten yang hanya menampilkan gambar dan judul tarian tersebut dan jika gambar tersebut di klik maka akan menuju ke halaman tarian tersebut beserta deskripsi mengenai sejarah tarian tersebut.

Nah bagaimana menurut teman-teman lumayan keren kan, yah walaupun gak bagus-bagus banget sih karena waktu pembuatannya cukup singkat dan membuatnya juga sambil ngantuk hahaha. Jadi gak sempat buat menambah animasi-animasi yang keren dan menarik tentunya :D.

Untuk source kodenya silahkan download [disini]
Silahkan teman-teman pelajari dan teman-teman modifikasi source kodenya sesuai dengan kebutuhan teman-teman, semoga bisa bermanfaat deh buah teman-teman :).

Related Posts:

Form login keren dengan hmtl dan css

Form login keren dengan hmtl dan css

Form login keren dengan hmtl dan css , kebetulan nih saya lagi ada waktu maka saya akan membagikan sedikit tutorial bagaimana cara membuat Form login keren dengan hmtl dan css , sebenarnya sih cukup mudah jika teman-teman sudah mengerti apa itu html dan css, tinggal kita memainkan sedikit imajinasi, apa yang mau kia buat, kemudian kita tuangkan imajinasi tersebut ke dalam script kita hehe.

Berikut script nya:

See the Pen WwBZzW by dolop (@dolop) on CodePen.

formlogin

Nah bagaimana keren bukan hehe, untuk penjelasan dari scripnya sendiri sudah saya sertakan didalam source kode diatas.
Ataubisa juga download source kode nya [klik disini]

Related Posts:

Cara cepat mengatasi Your connection is not secure

Cara cepat mengatasi Your connection is not secure

Cara mengatasi Your connection is not secure pada mozilla dan google chrome , Your connection is not secure pasti teman-teman pernah ada yang mengalami hal ini dimana website yang ingin kita buka tidak bisa diakses dimana hanya muncul tulisan Your connection is not secure . Hal ini biasanya terjadi pada website yang mempunyai SSL (Secured Socket Layer) yang bentuknya seperti gembok yang ada pada link website tersebut dan berawrna hijau biasanya. Nah cara untuk mengatasi Your connection is not secure sebenarnya sangat mudah sekali.:
Silahkan lihat tutorial lengkapnya di video ini:

Berikut cara mudah mengatasi Your connection is not secure:

1. Pertama teman-teman silahkan klik pilihan advanced yang ada pada tampilan "Your connection is not secure tersebut, seperti gambar dibawah ini:

Cara cepat mengatasi Your connection is not secure

2. Setelah itu maka akan muncul tulisan seperti gambar dibawah ini.
Secured Socket Layer
Dimana pada gambar tersebut menjelaskan bahwa SSS(Secured Socket Layer) atau sertifikat pada website tersebut sudah habis pada hari jumat, 06-mei-2016, dan kita mengakses website tersebut pada tanggal 09-mei-2016, itulah kenapa kita tidak bisa masuk ke dalam web tersebut dan digantikan dengan tulisan "Your connection is not secure".
3. Untuk mengatasinya kita cukup mengganti tanggal ataupun hari pada kalendar yang ada di OS kita, yaitu seperti gambar dibawah ini:
Your connection is not secure

klik menu kalendar yang ada sudut kanan bawah pada layar pc atau laptop sobat seperti gambar diatas.
4. Setelah di klik lalu pilih menu change date and time , seperti gambar dibawah ini.
Your connection is not secure

5. Setelah di klik, lalu sobat ubah tanggalnya, kalau saya kan website yang saya akses sertifikat ssl habis tanggal 06-mei-2016, dan tanggal saya mengakses website itu kan tanggal 09-mei-2016, jadi kita hanya cukup mengubah tanggal kita yang awalnya 09 menjadi 06 ataupaun 05 pokoknya harus dibawah dari tanggal habisnya sertifikat ssl pada website tersebut, jika sudah silahkan klik ok.
Your connection is not secure

6. Lalu jika sudah silahkan refresh website yang tersebut, kalau saya mengakses website ipaymu.com , dan jika berhasil maka website akan kembali normal dan bisa diakses kembali.

Itulah tutorial singkat cara mengatasi Your connection is not secure pada browser mozilla ataupun google chrome

.

Related Posts:

Cara membuat tombol cantik dengan html dan css

Cara membuat tombol cantik dengan html dan css

Halo soba kak dolop, jumpa lagi nih kita hehe, pada kesempatan kali ini saya akan memberikan tutorial Cara membuat tombol cantik dengan html dan css . Sebenarnya sih sudah banyak juga yang share tutorial yang seperti ini, tapi mungkin dengan tutorial yang saya buat ini bisa bermanfaat dan bisa teman-teman kembangkan lagi nantinya hehe.

Oke langsung saja pertama silahkan buat file beri nama index.html :
Lalu copykan script dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat tombol cantik dengan html dan css</title>
<!-- Memanggil file style.css -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- class button sebagai induk(main class) untuk mengatur antar class tutunannya -->
<div class="button">
<!-- class turunan jadi di css nya nanti tinggal panggil turunanny saja contoh: btn-success-->
<a href="" class="button btn-success"> Sukses </a>
<a href="" class="button btn-primary"> Berhasil </a>
<a href="" class="button btn-warning"> Hati-hati </a>
<a href="" class="button btn-danger"> Bahaya </a>
</div>
</body>
</html>

Kemudian save dan lihat hasilnya di browser, pasti tampilannya masih biasa saja, karena kita belum memberikan style ataupun hiasan pada tombol button tersebut:
Buat satu file lagi dan beri nama style.css file ini nantinya akan kita panggil ke dalam file index.html "
copykan script dibawah ini ke dalam style.css
body{
/* Mengatur posisi yg ada pada body dan ukuran text */
margin: 45px 45px;
font-family: lucida calligraphy;
}
.button {
/*
Sebagai main class
menghilangkan garis bawah pada text a ,
dan memberi jarak ke kenan antar tombol */
text-decoration: none;
margin-right: 20px;
color: white;
font-weight: bold;
}
/* Turunan class */
.btn-success{
background-color: #45F75A;
padding: 10px 20px;
}
.btn-primary{
background-color: #56C1E9;
padding: 10px 20px;
}
.btn-warning{
background-color: #FCAE49;
padding: 10px 20px;
}
.btn-danger{
background-color: #EF4E4E;
padding: 10px 20px;
}

Kemudian save dan buka lagi file index.html di browser sobat dan jika berhasil maka akan tampil seperti dibawah ini:

Cara membuat tombol cantik dengan html dan css

Untuk penjelasan script nya sendiri sudah saya sertakan di dalam source kode tersebut
Download source kode nya [klik disini]

Related Posts: