Skip to main content

HTML and CSS

Hari ini saya belajar menggunakan HTML dan CSS untuk membuat sebuah website static

berikut hasil nya



HTML :

 <html>  
  <head>  
  <title>Belajar Membuat Layout dengan HTML dan CSS</title>  
  <link rel="stylesheet" href="custom.css"/>  
  </head>  
  <body>  
  <div class="header">  
   <div class="jarak">  
   <h2>Belajar Membuat Layout dengan HTML dan CSS</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>Lorem Ipsum</h3>  
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <button class="btn">Read More..</button>  
     </p>  
    </div>  
    </div>  
    <!-- end blog -->  
    <!-- blog -->  
    <div class="border">  
    <div class="jarak">  
     <h3>Lorem Ipsum</h3>  
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <button class="btn">Read More..</button>  
    </p>  
    </div>  
    <!-- end blog -->  
   </div>  
  </div>  
   <!-- kiri -->  
   <!-- kanan -->  
   <div class="kanan">  
    <div class="jarak">  
    <h3>CATEGORY</h3>  
    <hr/>  
    <p><a href="#" class="undercor">HTML</a></p>  
    <p><a href="#" class="undercor">CSS</a></p>  
    <p><a href="#" class="undercor">BOOTSTRAP</a></p>  
    <p><a href="#" class="undercor">PHP</a></p>  
    <p><a href="#" class="undercor">MYSQL</a></p>  
    <p><a href="#" class="undercor">JQuery</a></p>  
    <p><a href="#" class="undercor">Ajax</a></p>  
    </div>  
   </div>  
   <!--kanan -->  
  </div>  
 </div>  
  <div class="footer">  
   <div class="jarak">  
   <p>Copyright 2018</p>  
   </div>  
  </div>  
  </div>  
 </body>  
 </html>

CSS :

 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: #41A85F;  
  color: #fff;  
 }  
 .menu{  
  background-color: #53bd84;  
  height: 50px;  
  line-height: 50px;  
  position: relative;  
  width: 90%;  
  margin: 0 auto;  
  padding0 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;  
 }

Comments

Post a Comment

Popular posts from this blog

AJAX ft Bootstrap

Tugas kali ini kami menambahkan Bootstrap pada tugas kami yang sebelumnya, yaitu membuat website dengan ajax. Tujuan menggunakan Bootstrap adalah agar website yang dibuat memiliki tampilan yang lebih bagus dan variatif Berikut hasil dari web yang saya buat Tampilan List Siswa Tampilan Pendaftaran Siswa Tampilan setelah melukan daftar Tampilan sesudah record dihapus Tampilan Form Edit Tampilan setelah melakukan Edit Source Code config.php <?php $db = mysqli_connect('localhost', 'root', '','pendaftaran_siswa'); if(!$db ){ die("Gagal terhubung dengan database: " . mysqli_connect_error()); } ?> index.php <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"...
Post a Comment
Read more
Untuk Tugas kali ini, kami menambah fitur CRUD untuk website CodeIgniter Tokobuah yang terdapat di tutorial www.petanikode.com Untuk menambahkan fitur CRUD terlebih dahulu membuat database, dapat dibuat konfigurasi di config/database.php, kemudian ubah menjadi seperti ini $db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'tokobuah', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'en...
Post a Comment
Read more

SISTEM PENGGAJIAN

-- 1 -- Penerbitan adalah industri yang berkonsentrasi memproduksi dan memperbanyak sebuah literatur dan informasi atau sebuah aktivitas membuat informasi yang dapat dinikmati publik. Percetakan adalah sebuah proses industri untuk memproduksi secara massal tulisan dan gambar, terutama dengan tinta di atas kertas menggunakan sebuah mesin cetak. -- 2 -- Pada Sistem pegajian dan pengupahan yang ada masalah-masalah yang dapat terjadi adalah karyawan yang melakukan kecurangan pada sistem yang ada. kecurangan ini dapat dilakukan dengan masukan nama-nama karyawan fiktif dalam daftar gaji dan upah atau membayar lebih kepada karyawan yang ada dalam daftar gaji dan upah -- 3 -- Yang bisa ditingkatkan dari sistem penggajian yang ada ialah : memperketat sistem sehingga dapat mengurangi kecurangan-kecurangan yang dapat dilakukan karyawan, seperti sistem mengecek data yang ada di sistem dengan data pada kondisi sesungguhnya serta membuat seluruh dokumen ke dalam bentuk digital, sehingga ...
Post a Comment
Read more