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 Web Berita

Di tugas kali ini saya mendapat tugas untuk membuat sebuah web berita, kami diberi contoh yaitu web www.techinasia.com berikut hasil dari apa yang telah saya buat kemudian 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="#">Companies</a></li> <li><a href="#">Events</a></li> </ul> <div class = "co...
Post a Comment
Read more

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