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, ...
Baca selengkapnya