Berita(Tugas 4.1 PWEB)

pada tanggal
Layout menggunakan HTML dan CSS

Nama : Ersad Ahmad Ishlahuddin
NRP   : 05111740000016
Kelas  : PWEB C

Sebuah contoh Web Berita sederhana, dengan konten yang didapatkan dari Duniaku.net

Link Website : LINK
 
Source Code
HTML
<html>
<head>
  <title>menit.com | Update Berita Setiap Menit</title>
  <link rel="stylesheet" href="index_sty.css"/>
</head>

<body>

  <div class="header">
    <div class="jarak">
      <h2>menit.com</h2>
    </div>
  </div>

  <div class="menu">
    <ul>
      <div class="kime">
      <li><a href="#">Beranda</a></li>
      <li><a href="#">Game</a></li>
      <li><a href="#" style="width: 150px">Anime & Manga</a></li>
      <li><a href="#">TV & Film</a></li>
      <li><a href="#">Geek</a></li>  
      </div>
      <div class="kame">
        <li><a href="#">Masuk</a></li>
        <li><a href="form.html">Daftar</a></li>
      </div>      
    </ul>
  </div>
  <div class="content">
    <div class="jarak">

      <!-- kiri -->
      <div class="kiri">
       <!-- blog -->
       <div class="border">
        <div class="jarak">
          <img src="1.jpg">
          <h3>Dari Venom hingga Bohemian Rhapsody, Inilah 7 Film Asing Bulan Oktober 2018 yang Wajib Ditonton</h3>
          <p>Mulai dari film superhero keluaran Marvel, drama romantis, hingga film-film horor yang bertepatan dengan hari Hallowen akan meramaikan film asing bulan Oktober 2018. Nah, apa saja ya film-film seru di bulan ini?</p>
          <button class="btn">Read More ..</button>
        </div>
      </div>
      <!-- end blog -->
      <!-- blog -->
      <div class="border">
        <div class="jarak">
          <img src="2.jpg">
          <h3>Menyaksikan Langsung Kedahsyatan NVIDIA RTX 2080 Ti di Bangkok!</h3>
          <p>NVIDIA RTX 2080 Ti adalah kartu grafis terbaru dari NVIDIA. Pada tanggal 25 September, sejumlah media diundang menghadiri meeting spesial dari NVIDIA di Bangkok. Adapun hal utama yang dipamerkan dan dipresentasikan di sana sudah tentu adalah RTX 2080 Ti ini[...]</p>
          <button class="btn">Read More ..</button>
        </div>
      </div>
      <!-- end blog -->
      <!-- blog -->
      <div class="border">
        <div class="jarak">
          <img src="3.jpg">
          <h3>Netflix Konfirmasi Hadirkan 3 Film Baru Terinspirasi dari Komik dan Manga</h3>
          <p>Sekarang ini, Netflix merupakan salah satu layanan streaming film yang sangat digandrungi banyak orang. Ya, di sini tersedia banyak film bagus yang sangat berkualitas untuk ditonton. Di samping itu, tak hanya film yang sekali habis, di Netflix banyak film seri berkualitas yang mampu membuat penonton terpukau[...]</p>
          <button class="btn">Read More ..</button>
        </div>
      </div>
      <!-- end blog -->
      <!-- blog -->
      <div class="border">
        <div class="jarak">
          <img src="4.jpg">
          <h3>Realme Melenggang di Indonesia, Merek Lain Kudu Waspada?</h3>
          <p>Realme memperluas target pasar anak muda di Asia dengan resmi masuk ke Indonesia sebagai salah satu negara di Asia Tenggara yang memiliki tren positif di industri smartphone.Sebagai merek smartphone yang sukses memecahkan rekor penjualan sebanyak 200.000 unit hanya dengan waktu 5 menit di India, Realme percaya diri bisa menjadi "game changer" di industri smartphone Indonesia.[...]</p>
          <button class="btn">Read More ..</button>
        </div>
      </div>
      <!-- end blog -->
    </div>
    <!-- kiri -->

    <!-- kanan -->
    <div class="kanan">
      <div class="jarak">
        <center><h3>TRENDING</h3></center>
        <hr/>
        <img src="5.jpg">
        <p><a href="#" class="undecor">Lenovo Perkenalkan Legion Y530, Laptop Gaming Premium</a></p>
        <br>
        <img src="6.jpg">
        <p><a href="#" class="undecor">Beautiful Yet Powerful! Ini Dia Predator Helios 300 Special Edition</a></p>
        <br>
      </div>
      <div class="jarak">
        <center><h3>ABOUT US</h3></center>
        <hr/>
        <center><p>menit.com adalah media yang bersumber dari Duniaku.net.</p></center>
      </div>
    </div>
    <!-- kanan -->
  </div>
</div>

<div class="footer">
  <div class="jarak">
    <p>Copyright menit.com 2018.  All Rights Reserved.</p>
  </div>
</div>

</body>
</html>

CSS
body{
 background:#e3dac9;
 color:#333;
 width:100%;
 font-family:sans-serif;
 margin:0 auto;
}

img{  
 float: left;  
 width: 270px;
 padding-right: 20px;  
}  

.header{
 width:90%;
 margin:0 auto;
 height:100px;
 line-height:100px;
 font-size:200%;
 background:#836446;
 color:#fff;
}

.content{
 width:90%;
 margin:auto;
 height:920px;
 padding:0.1px;
 background:#fff;
 color:#333;
}

.kiri{
 text-align: justify;
 width:80%;
 float:left;
 margin:auto;
 background:#fff;
 height:920px;
}

.kanan{
 width:20%;
 float:left;
 margin:auto;
 background:#fff;
 height:840px;
 /*border: 5px solid #d9c3ab;*/
}

.kanan img{
 width: 150px;
 float: center;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

.border{
 border:7px solid #e3dac9;
 margin-top:1pc;
 padding-bottom:1pc;
 padding-left:1pc;
 padding-right:1pc;
 background-color: #e3dac9;
}

.undecor{
 text-decoration:none;
}

.footer{
 width:90%;
 margin:auto;
 height:30px;
 line-height:30px;
 background:#836446;
 color:#fff;
}
.menu{
 background-color:#836446; 
 height:50px; 
 line-height:50px; 
 position:relative;
 width:90%;
 margin:0 auto;
 padding:0 auto;
}

.jarak{
 padding:0 2pc;
}

.menu ul {
 list-style:none;
}
 
.menu ul li a {
 float:left; 
 width:100px; 
 display:block; 
 text-align:center; 
 color:#FFF; 
 text-decoration:none; 
}
 
.menu ul li a:hover {
 background-color:#e3dac9; 
 display:block;
}

.kime {
  width: 80%;
  float: left;
}
.kame {
  width: 20%;
  clear: right;
  float: right;
}

Screenshot







Komentar

Posting Komentar