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

ANALISA USE CASE

Nama : Reza Adipatria Maranatha NRP : 05111740000186 Analisa use case adalah teknik yang digunakan untuk mengidentifikasi kebutuhan sistem perangkat lunak dengan menggambarkan aktor atau user yang akan menggunakan perangkat lunak dan ruang lingkup fitur kegunaan perangkat lunak. Dalam sistem penggajian penerbitan Kanisius, menurut saya ada 5 aktor didalamnya. Pegawai Pegawai bertugas untuk bekerja dan sebagai penerima gaji Pencatat Absen Pencatat Absen bertugas untuk mencatat daftar hadir dari pegawai dan merekap daftar hadir  Penggajian Bagian Penggajian bertugas untuk memberikan gaji kepada karyawan dan merekap gaji pegawai Kasir Bagian Kasir bertugas untuk mencairkan cek dan menggaji pegawai Keuangan Bagian Keuangan bertugas sebagai pencatat seluruh pengeluaran  Diagram Use Case 
Post a Comment
Read more

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