TEMPLATE GRATIS

 Membuat Template Web Dengan HTML dan CSS .

Pada tutorial ini saya akan membuat sebuah template web sederhana dengan menggunakan bahasa HTML dan CSS. karena banyak yang mencari - cari  & meminta untuk di buatkan tutorial  Membuat Template Web Dengan bahasa HTML dan CSS ini.
untuk menyelesaikan tugas pemrograman web dari sekolah.  Saya akan mencoba membantu dengan menjelaskan cara pembuatan template website  sederhana. dan tentunya  Membuat Template Web Dengan bahasa HTML dan CSS  Baiklah, gak usah banyak basa basi kita  langsung saja mulai untuk membuat template web sederhana dengan bahasa HTML dan CSS ini. semoga bermanfaat bagi kalian yang membutuhkan.

 okey gak usah repot silahkan kalian copy script di bawah ini.

index.html

<link rel="stylesheet" type="text/css" href="style.css"> <div class="container"> <div class="grid header"> Header</div> <div class="grid sidebar"> Sidebar</div> <div class="grid content"> Main Content</div> <div class="grid extra"> Extra Content</div> <div class="grid footer"> Footer</div> </div>

style.css

 

.container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; }

Nah silahkan kalian coba dan silahkan untuk di otak atik lagi agar terlihat cantik dan bagus.
Dan semoga apa yang saya telah bagikan dapat bermanfaat bagi kalian.

  Untuk tampilan jadinya seperti gambar di bawah ini :