[PWEB-3.1] Layout Portal Berita

Pada pertemuan ketiga mata kuliah Pemrograman Web, kami mendapat tugas untuk membuat layout portal berita menggunakan HTML dan CSS. Sebelumnya saya telah memeberikan sedikit penjelasan mengenai apa itu HTML. Sehingga sekarang saya akan menjelaskan apa itu CSS. CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengendalikan tampilan dan format halaman web. Dengan CSS, kita dapat mengubah tampilan elemen HTML, seperti teks, gambar, latar belakang, dan tata letak, sehingga kita dapat membuat halaman web yang lebih menarik dan mudah dibaca. Sesuai namanya, CSS bersifat cascading atau berjenjang, yang artinya kita dapat memiliki beberapa aturan gaya yang berlapis-lapis. Aturan yang diterapkan secara lebih spesifik akan menggantikan aturan yang lebih umum. Ini memungkinkan kita untuk mengontrol dengan detail tampilan halaman web.

Repository: GitHub

Output:



Berikut code yang saya gunakan dalam membuat layout diatas:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Belajar Membuat Layout dengan HTML dan CSS</title>
  7.     <link rel="stylesheet" href="custom.css"/>
  8. </head>
  9. <body>
  10.     <div class="header">
  11.         <div class=jarak>
  12.             <h2>Belajar Membuat Layout dengan HTML dan CSS</h2>
  13.         </div>
  14.     </div>
  15.     <div class="menu">
  16.         <ul>
  17.             <li><a href="#">Home</a></li>
  18.             <li><a href="#">About</a></li>
  19.             <li><a href="#">Blog</a></li>
  20.             <li><a href="#">Contact</a></li>
  21.         </ul>
  22.     </div>
  23.     <div class="content">
  24.         <div class="jarak">
  25.             <div class="kiri">
  26.                 <div class="border">
  27.                     <div class="jarak">
  28.                         <h3>Lorem Ipsum</h3>
  29.                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  30.                         <button class="btn">Read more ..</button>
  31.                     </div>
  32.                 </div>
  33.                 <div class="border">
  34.                     <div class="jarak">
  35.                         <h3>Lorem Ipsum</h3>
  36.                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  37.                     </div>
  38.                 </div>
  39.             </div>
  40.             <div class="kanan">
  41.                 <div class="jarak">
  42.                     <h3>CATEGORY</h3>
  43.                     <hr/>
  44.                     <p><a href="#" class="undecor">HTML</a></p>
  45.                     <p><a href="#" class="undecor">CSS</a></p>
  46.                     <p><a href="#" class="undecor">BOOTSTRAP</a></p>
  47.                     <p><a href="#" class="undecor">PHP</a></p>
  48.                     <p><a href="#" class="undecor">MySQL</a></p>
  49.                     <p><a href="#" class="undecor">JQuery</a></p>
  50.                     <p><a href="#" class="undecor">Ajax</a></p>
  51.                 </div>
  52.             </div>
  53.         </div>
  54.     </div>
  55.     <div class="footer">
  56.         <div class="jarak">
  57.             <p>copyright 2023 codebareng all reserved</p>
  58.         </div>
  59.     </div>
  60. </body>
  61. </html>

  1. body{
  2.     background: #f3f3f3;
  3.     color: #333;
  4.     width: 100%;
  5.     font-family: sans-serif;
  6.     margin: 0 auto;
  7. }
  8.  
  9. .header{
  10.     width: 90%;
  11.     margin: auto;
  12.     height: 120px;
  13.     line-height: 120px;
  14.     background: #4171a8;
  15.     color: #fff;
  16. }
  17.  
  18. .content{
  19.     width: 90%;
  20.     margin: auto;
  21.     height: 420px;
  22.     padding: 0.1px;
  23.     background: #fff;
  24.     color: #333;
  25. }
  26.  
  27. .kiri{
  28.     width: 70%;
  29.     float: left;
  30.     margin: auto;
  31.     background: #fff;
  32.     height: 420px;
  33. }
  34.  
  35. .kanan{
  36.     width: 30%;
  37.     float: left;
  38.     margin: auto;
  39.     background: #fff;
  40.     height: 420px;
  41. }
  42.  
  43. .border{
  44.     border: 2px solid #7990aa;
  45.     margin-top: 1pc;
  46.     padding-bottom: 1pc;
  47.     padding-left: 2pc;
  48.     padding-right: 2pc;
  49. }
  50.  
  51. .undecor{
  52.     text-decoration: none;
  53. }
  54.  
  55. .footer{
  56.     width: 90%;
  57.     margin: auto;
  58.     height: 40px;
  59.     line-height: 40px;
  60.     background: #4171a8;
  61.     color: #fff;
  62. }
  63.  
  64. .menu{
  65.     background-color: 353bd84;
  66.     height: 50px;
  67.     line-height: 50px;
  68.     position: relative;
  69.     width: 90%;
  70.     margin: auto;
  71.     padding: 0 auto;
  72. }
  73.  
  74. .jarak{
  75.     padding: 0 2pc;
  76. }
  77.  
  78. .menu ul {
  79.     list-style: none;
  80. }
  81.  
  82. .menu ul li a {
  83.     float: left;
  84.     width: 70px;
  85.     display: block;
  86.     text-align: center;
  87.     color: #fff;
  88.     text-decoration: none;
  89. }
  90.  
  91. .menu ul li a:hover {
  92.     background-color: #7990aa;
  93.     display: block;
  94. }


Komentar

Posting Komentar

Postingan Populer