PWEB C - TUGAS CSS


Source Code untuk index.html nya :

 <html>  
  <head>  
  <title>Tugas PWEB C</title>  
  <link rel="stylesheet" href ="custom.css"/>  
  </head>  
  <body>  
  <div class="header">  
   <div class="jarak">  
   <h2>Tugas PWEB C</h2>  
   </div>  
  </div>  
  <div class="menu">  
  <ul>  
   <li><a href="#">Home</a></li>  
   <li><a href="#">About</a></li>  
   <li><a href="#">Blog</a></li>  
   <li><a href="#">Contact</a></li>  
  </ul>  
  </div>  
  <div class="content">  
  <div class="jarak">  
   <!-- kiri -->  
   <div class="kiri">  
    <!-- blog -->  
    <div class="border">  
    <div class="jarak">  
     <h3>Hallo guys</h3>  
     <p>My name is Nandha Himawan[..] </p>  
     <button class ="btn"> read more..</button>  
    </div>  
    </div>  
    <!-- end blog -->  
    <!-- blog -->  
    <div class="border">  
    <div class="jarak">  
     <h3>Woi rek</h3>  
     <p>Jenengku Nandha Himawan[..] </p>  
     <button class="btn">read more ..</button>  
    </div>  
    </div>  
    <!-- end blog -->  
   </div>  
   <!-- kiri -->  
   <!-- kanan -->  
   <div class="kanan">  
    <div class="jarak">  
    <h3>CATEGORY</h3>  
    <hr/>  
    <p><a href="#" class="undecor">HTML</a></p>  
    <p><a href="#" class="undecor">CSS</a></p>  
    <p><a href="#" class="undecor">BOOTSTRAP</a></p>  
    <p><a href="#" class="undecor">PHP</a></p>  
    <p><a href="#" class="undecor">MYSQL</a></p>  
    <p><a href="#" class="undecor">Jquery</a></p>  
    <p><a href="#" class="undecor">Ajax</a></p>  
    </div>  
   </div>  
   <!-- kanan -->  
   </div>  
  </div>  
  <div class="footer">  
   <div class="jarak">  
   <p>Nandha Himawan</p>  
   </div>  
  </div>  
  </body>  
 </html>

Lalu, Source Code untuk custom.css nya :

 body{  
 background:#f3f3f3;  
 color:#333;  
 width:100%  
 font-family:sans-serif;  
 margin:0 auto;  
 }  
 .header {  
 width:90%;  
 margin:auto;  
 height:120px;  
 line-height:120px;  
 background:#41A85F;  
 color:#fff;  
 }  
 .content{  
 width:90%;  
 margin:auto;  
 height:420px;  
 padding:0.1px;  
 background:#fff;  
 color:#333;  
 }  
 .kiri{  
 width:70%;  
 float:left;  
 margin:auto;  
 background:#fff;  
 height:420px;  
 }  
 .kanan{  
 width:30%  
 float:left;  
 margin:auto;  
 background:#fff;  
 height:420px;  
 }  
 .border {  
 border:2px solid #74C599;  
 margin-top:1pc;  
 padding-bottom:1pc;  
 padding-left:2pc;  
 padding-right:2pc;  
 }  
 .undecor{  
 text-decoration:none;  
 }  
 .footer{  
 width:90%  
 margin:auto;  
 height:40px;  
 line-height:40px;  
 background:#41A8SF;  
 color:#fff;  
 }  
 .menu{  
 background-color : #53bd84;  
 height:50px;  
 line-height:50px;  
 position:relative;  
 width:90%;  
 margin:0 auto;  
 padding:0 auto;  
 }  
 .jarak{  
 padding:0 2pc;  
 }  
 .menu ul{  
 list-style:none;  
 }  
 .menu ul li a{  
 float:left;  
 width:70px;  
 display:block;  
 text-align:center;  
 color:#FFF;  
 text-decoration:none;  
 }  
 .menu ul li a:hover {  
 background-color:#74C599;  
 display:block;  
 }

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Form Registrasi menggunakan JavaScript

Gambar
Setelah kemarin membuat webpage berita, sekarang saya menambahkan fitur "Daftar" didalam webpage tersebut. Bisa dilihat : Lalu jika kita klik pada menu daftar, form pendaftaran nya akan muncul : Lalu jika ada kesalahan dalam pengisian akan muncul alert seperti contoh dibawah : Source code untuk form registrasi : <!DOCTYPE html> <html> <head> <title>Registrasi</title> <meta charset="utf-8"> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <style type="text/css"> body { background :#F87217 } font-family: sans-serif; } h2 { color: #fff; } .login { padding: 1em; margin: 2em auto; width: 20em; background:
Baca selengkapnya

membuat form pendaftaran menggunakan php & mysql - PWEB C

Gambar
1. tampilan index 2. form pendaftaran 3. pendaftaran berhasil 4. list siswa yang terdaftar 5. menghapus data 6. mengedit  7. edit berhasil Source code : 1. config.php <?php $server = "localhost"; $user = "root"; $password = ""; $nama_database = "pendaftaran_siswa"; $db = mysqli_connect($server, $user, $password, $nama_database); if( !$db ){ die("Gagal terhubung dengan database: " . mysqli_connect_error()); } ?> 2. index.php <!DOCTYPE html> <html> <head> <title>Pendaftaran Siswa Baru | SMK Coding</title> </head> <body> <header> <h3>Pendaftaran Siswa Baru</h3> <h1>SMK Coding</h1> </header> <h4>Menu</h4> <nav> <ul> <li><a href="form-da
Baca selengkapnya

PBO - A TUGAS MEMBUAT PROGRAM REMOTE AC

Gambar
Disini saya hanya menggunakan 4 menu Utama, yaitu : 1. Power  = untuk menghidupkan dan mematikan AC 2. Temp+ = untuk menaikkan suhu AC 3. Temp-  = untuk menurunkan suhu AC 4. Mode   = untuk mengganti mode dari sebuah AC, ada 3 buah mode disini, yaitu AUTO, COOL,                        dan DRY Lalu saya memberikan 1 menu tambahan, yaitu menu "Cabut baterai" menu ini untuk mengakhiri program yang saya buat. Berikut tampilan remote AC : lalu setelah kita pilih menu power : Remot AC jadi "NYALA" kita coba naikkan suhu : suhu awal 23° lalu menjadi 24 ° menurunkan suhu : suhu awal 23° lalu menjadi 22 ° lalu kita coba ganti mode AC nya : mode awal adalah AUTO, lalu dirubah menjadi COOL kita ubah lagi modenya : lalu dari mode COOL, kita ubah menjadi DRY setelah itu coba kita pilih menu terakhir, yaitu Cabut baterai. Yap, selayaknya remot AC pada umumnya, jika kita cabut baterainya maka remot tersebut akan ma
Baca selengkapnya