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

PWEB CURRICULUM VITAE

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <style type="text/css"> body, html{ height: 100%; margin: 0; } .profil{ border-radius: 50%; } table{ border-spacing: 0; } p{ font-family: TW Cen MT; } img.a{ vertical-align: text-bottom; } img.b{ vertical-align: text-top; } .judul{ font-size: 20px; color: white; } .tulis{ font-size: 15px; color: white; } </style> <title>My Personal Blog</title> </head> <body background="img/Picture1.jpg" style="background-size:cover;"> <br><br><br><br><br> <table width="55%" align="center" style="vertical-align: middle"> <tr> <td
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

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