Cara menggunakan contoh coding html bucin.

.button-wrapper {
  display: block;
  text-align: center;
}

.button {
  border: none;
  border-radius: 3em;
  box-shadow: 2px 2px 2px rgba[0,0,0,0.2];
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  width: auto;
}

.cta-button {
  background-color: #000;
  color: #fff !important;
}

.cta-button:hover {
  background-color: #777;

Source Code: drivencreativelymad.com

CSS Markup:

*{
    margin: 0;
    padding: 0;
    outline: 0;
}
.container{
    width: 80%;
    position: relative;
    left: 50%;
    transform: translateX[-50%];
    overflow: auto;
}
.contact-nav{
    background-color: #424242;
    padding: 5px 10px;
    color: #fafafa;
}

.nav img{
    height: 100px;
}
.nav ul{
    float: right;
    padding-top: 45px;
}
.nav ul li{
    display: inline-block;
    margin-right: 15px;
}
.nav ul li a{
    font-size: 1.2rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #212121;
    transition: .4;
}
.nav ul li a:hover{
    color: #3e7a7e;
}

.header{
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url["shorturl.at/inqZ6"];
    background-size: cover;
    background-position: center;
}
.header .search{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate[-50%,-50%];
    background-color: #fff;
   
    border-radius: 4px;
}
.header .search input{
    padding: 15px 10px;
    border: none;
    width: 500px;
    font-size: 1.1rem;
}
.header .search button{
    padding: 17px 6px;
    border: none;
  width: 100px;
    border-radius: 0 4px 4px 0;
    background-color: #8ed1d5;
    color: #fafafa;
    font-size: 1.2rem;
    transition: .4s;
}
.header .search button:hover{
    background-color: #3e7a7e;
}

.footer{
    padding: 15px;
    background-color: #3e7a7e;
}
.footer p{
    text-align: center;
   
}

Output:

Baca Juga: Membuat Website Travel dalam 8 Cara Mudah

26. Contoh Desain Web HTML Kartu Ucapan

Coding HTML

    
        
    

   
    
        

        
        
Send a message for the bride and the groom
        

            
                TO :


                Message :

                

                SEND
               
            
        
   
    

CSS Markup:

@import url['shorturl.at/qrKYZ'];
body{
    padding: 0;
    margin: 0;
    outline: 0;
    height: 100vh;
    background: url[shorturl.at/nqGV0];
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.filter{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color:
    opacity: .6;
    z-index: 1;
}
h2{
    position: absolute;
    width: 100%;
    z-index: 2;
    font-size: 4em;
    text-align: center;
    color: #fff;
    font-family: 'Courgette', cursive;
}
.valentine_card{
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate[-50%,-50%];
    background: #fff;
    width: 40%;
    padding: 25px;
    font-family: 'Courgette', cursive;
}
.valentine_card label{
    font-size: 1.3rem;
}
.valentine_card input{
    width: 100%;
    font-size:1.3rem;
    font-family: 'Courgette', cursive;
    border: none;
    border-bottom: 1px solid black;
    margin: 10px 0;
}
*:focus{
    outline: none;
}
.valentine_card textarea{
    width: 100%;
    height: 150px;
    resize: none;
    font-size:1.3rem;
    font-family: 'Courgette', cursive;
    border: none;
    border-bottom: 1px solid black;
    margin: 10px 0;
}
.valentine_card button{
    border: none;
    background: transparent ;
    font-size: 1.5rem;
    float: right;
    font-family: 'Courgette', cursive;
    transition: .4s;
   
}
.valentine_card button:hover{
    color: #f44336;
}

Output:

Baca Juga: 10 Coding HTML Dasar yang Blogger Wajib Tahu

Coding HTML Nggak Mau Jalan? Kenapa ya?

Ada berbagai penyebab browser tidak bisa merespon coding HTML, yaitu:

1. File HTML dan CSS Belum Terhubung

Anda membangun halaman web dengan HTML dan menata style-nya menggunakan CSS, tapi desain tidak mau tampil?

Bisa jadi, Anda belum menyambungkan file HTML dengan file CSS. Nah, cara menghubungkannya adalah dengan menyematkan tag berikut dalam file HTML

Style.css di sana adalah nama file CSS Anda. Oh ya, jangan lupa juga pastikan file HTML dan CSS berada dalam satu folder yang sama.

2. Link Source Tidak Valid

Ada kalanya Anda bingung karena browser tidak menampilkan gambar atau media apapun. Padahal, Anda sudah menggunakan tag HTML yang tepat.

Eits, jangan panik dulu. Coba cek URL yang Anda gunakan. Apakah link-nya sudah valid? Bisa diakses?

Kalau tidak, itu artinya Anda harus menggantinya dengan alternatif link yang lain.

3. Ada Kesalahan pada Coding HTML

Penyebab HTML tidak mau jalan berikutnya, yaitu ada kesalahan pada codingnya. Cek kembali apakah Anda sudah menulis semua tag dengan benar.

Proses checking ini mungkin memang menyita waktu. Namun, Anda bisa meminimalisirnya dengan menggunakan Editor HTML terbaik.

Adanya fitur seperti highlight syntax, auto-complete, hingga find-and-replace tentunya akan meringankan pekerjaan Anda. Sebab, editor HTML terbaik mampu menunjukkan syntax yang error. 

Oh ya, setelah memodifikasi code, jangan lupa refresh browser terlebih dahulu untuk melihat hasil perubahannya ya. Hehe..

4. Halaman Web Belum Di-Online’kan

Sudah bikin coding HTML susah-susah, tapi kok halaman web nggak bisa ditemukan orang lain di internet?

Jelas saja, kemungkinan besar itu gara-gara Anda belum mengonlinekan project tersebut. Sehingga, halaman web hanya mau tampil di komputer pribadi Anda saja.

Cara mengatasinya, upload website ke hosting. Namun, pastikan pilih hosting terbaik dan menjamin hal-hal berikut:

• Loading website cepat;
• Uptime website lebih dari 99%;
• Fitur pengelolaan website sesuai kebutuhan;
• Keamanan ketat;
• Dukungan customer support 24 jam.

Lho, kok banyak ya kriterianya? Nah jangan khawatir, sekarang Anda bisa sewa hosting terbaik dan termurah di Niagahoster.

Bahkan, Anda juga akan mendapatkan domain dan SSL gratis lho! Cocok banget bagi Anda yang ingin membuat website terbaik dengan budget terjangkau, kan?

Sudah Paham Coding HTML Pemula? Cus Buat Website Sendiri!

Sekarang, Anda sudah jauh memahami contoh HTML dan melihat berbagai contoh desain web HTML keren. Ternyata, belajar HTML tidak sesulit itu, bukan?

Untuk menyegarkan ingatan Anda, kami sudah merangkum beberapa contoh coding HTML di atas.