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

Tugas Membuat Forms

Tugas kali ini saya membuat sebuah Form Registrasi untuk web berita saya untuk form yang saya buat, saya membuat nya dalam bentuk Modal, yaitu adalah pop-up jika tombol register di klik Berikut adalah hasil dari apa yang saya buat Ini adalah website berita saya Kemudian jika tombol register di klik akan muncul form pop-up Berikut adalah source code nya : HTML: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="inicss.css"/> </head> <body> <div class="header"> <h1>PIAL ROSE NEWS</h1> </div> <ul> <li><a class="active" href="#">News</a></li> <li><a href="#">Jobs</a></li> <li><a href="#">...
Post a Comment
Read more

Form Tagihan Air PHP

Nama : Reza Adipatria Maranatha NRP : 05111740000186 Kelas : PWEB C Tugas kali ini saya membuat sebuah form tagihan air yang datanya kita olah dan tampilkan menggunakan PHP atau Hypertext Preprocessor. Berikut hasil dari web saya : Ini adalah tampilan depan form nya Ini merupakan Invoice apabila pelanggan telah melakukan submit form tersebut Source Code Index.php : <!DOCTYPE html> <html> <head> <title>Perusahaan Daerah Air Mandi</title> <link rel="stylesheet" href="test.css"/> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="leftcontainer"> ...
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