Tugas Pemrograman Web : Halaman Berita

             


      Pada tugas kali ini kami ditugaskan untuk membuat halaman berita sederhana menggunakan HTML dan CSS.

      Langsung saja, berikut code untuk HTMLnya :
<!DOCTYPE html>

<html>

<head>
    <title>Tugas halaman berita</title>
    
    <link rel="stylesheet" href="tugas halaman berita css.css">
</head>

<body>

    <h2 class="header">LIPUTAN7  </h2>
    
        

<div class="menu">
<ul>
    <li>Home</li>
    <li>News</li>
    <li>Terkini</li>
    <li>Sports</li>
    <li>Bisnis</li>
    <li>Lainnya</li>

</ul>
</div>

<div class="kiri">
<div class="border">
        <div class="jarak">
          <img src="1.jpg">
          <h3>Jokowi-Ma'ruf Amin Nomor Urut Satu, Prabowo-Sandiaga Nomor Urut Dua</h3>
          <p>Pasangan Joko Widodo-Ma'ruf Amin mendapat nomor urut
          satu dan pasangan Prabowo Subianto-Sandiaga Uno mendapat nomor urut dua sebagai peserta Pemilu Presiden 2019[..]</p>
          <button class="btn">Read More ..</button>
        </div>
      </div>
      
</div>

<div class="kiri">
<div class="border">
        <div class="jarak">
          <img src="2.jpg">
          <h3>Tinggalkan Pelita Jaya, Daniel Wenas Punya 2 Opsi Tim Baru</h3>
          <p>Butuh tantangan baru menjadi alasan utama Daniel Wenas berani meninggalkan klub basket profesional pertamanya tersebut.
        Sebenarnya, kata Daniel, manajemen Pelita Jaya (PJ) sudah menyodorkan tawaran perpanjangan kontrak kepadanya.[..]</p>
          <button class="btn">Read More ..</button>
        </div>
      </div>
      
</div>
      
</body>


</html>


       Dan berikut code untuk CSSnya :
.header {

background: #3377ff;
 width: 90%;
 line-height:120px; 
 font-family:calibri; 
 margin:auto;
 height: 120px;
 padding:0 2pc 
 
}
.jarak{
 padding:0 2pc;
}

img{  
 float: left;  
 width: 250px;
 padding-right: 15px; 
 height: 130px; 
}  

.kiri{
 text-align: justify;
 width:95%;
 
 margin:auto;
 background:#fff;
 height:170px;
}
.border{
 border:7px solid #ffbf80;
 margin-top:2pc;
 padding-bottom:2pc;
 padding-left:0pc;
 padding-right:1pc;
 background-color: #ffbf80;
}

.menu {
     background-color: #003cb3;   
    height: 50px;   
    line-height:50px;   
    position: relative;   
    width: 90%;   
    margin: auto;   
    padding: 0 2pc;       
    
}
.menu ul {   
    list-style: none;   
  }   
  .menu ul li  {   
    float: left;   
    width: 70px;   
    display: block;   
    text-align: center;   
    color: #fff;   
    text-decoration: none;   
    font-family: calibri;   
    font-style: italic;   
  }   
    .menu ul li a:hover {   
    background-color: red;   
    display: block;   
  }


     Hasil akhirnya :



Komentar

Posting Komentar

Postingan Populer