Tugas Pemrograman Web - Membuat Website Berita
Baca Juga
Pada pertemuan kali ini, Bapak Fajar Baskoro memberikan tugas untuk membuat website bertema portal berita.
Tampilan:
Source Code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="main.css"> | |
| <!-- google fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Raleway:wght@300;400;500;700;900&display=swap" rel="stylesheet"> | |
| <!-- fontawesome --> | |
| <script src="https://kit.fontawesome.com/dbed6b6114.js" crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <!-- header --> | |
| <header> | |
| <div class = "navigation-container"> | |
| <div class = "top-head"> | |
| <div class = "web-name"> | |
| <h1>TECHNEWS</h1> | |
| </div> | |
| <div class = "ham-btn"> | |
| <span> | |
| <i class = "fas fa-bars"></i> | |
| </span> | |
| </div> | |
| <div class = "times-btn"> | |
| <span> | |
| <i class = "fas fa-times"></i> | |
| </span> | |
| </div> | |
| </div> | |
| <!-- nav bar --> | |
| <div class = "nav-bar" id = "nav-bar"> | |
| <nav> | |
| <ul> | |
| <li><a href = "#">home</a></li> | |
| <li><a href = "#">current affairs</a></li> | |
| <li><a href = "#">archive</a></li> | |
| <li><a href = "#">featured</a></li> | |
| <li><a href = "#">broadcast</a></li> | |
| <li><a href = "#">category</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <!--social icons --> | |
| <div class = "social-icons"> | |
| <ul> | |
| <li> | |
| <a href= "#"><i class = "fab fa-facebook"></i></a> | |
| </li> | |
| <li> | |
| <a href= "#"><i class = "fab fa-twitter"></i></a> | |
| </li> | |
| <li> | |
| <a href= "#"><i class = "fab fa-instagram"></i></a> | |
| </li> | |
| <li> | |
| <a href= "#"><i class = "fab fa-youtube"></i></a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </header> | |
| <section class = "banner"> | |
| <div class = "banner-main-content"> | |
| <h2>GET THE WORLD'S LATEST TECH NEWS</h2> | |
| <h3>World's Leading Tech News Portal</h3> | |
| <button> | |
| <a href = "#">Know More</a> | |
| </button> | |
| <div class = "current-news-head"> | |
| <h3>Pakar Bongkar Sosok Hacker Bjorka, Siapa?</h3> | |
| <h3>Bjorka Bocorkan Data Luhut Belum Booster, Jubir Menko Ungkap Faktanya</h3> | |
| <h3>6 Spesifikasi Penting vivo V25 5G, Layak Beli Banget!</h3> | |
| </div> | |
| </div> | |
| <div class = "banner-sub-content"> | |
| <div class = "hot-topic"> | |
| <img src = "https://cdn.idntimes.com/content-images/post/20220913/img-2712-01-9d055b0fc59aaf6d0a620ed050029518_600x400.jpeg" alt = ""> | |
| <div class = "hot-topic-content"> | |
| <h2>Acer Perkenalkan 3 Laptop Gaming di Pembukaan Predator Store Surabaya</h2> | |
| <p>Setelah meresmikan Predator Store di Maspion Square IT Mall sehari sebelumnya, Acer memperkenalkan tiga laptop gaming andalannya, yaitu Predator Triton 300 SE, Predator Helios 300 (PH315-55), dan Nitro 5 (AN515-58) pada Sabtu (10/9/2022).</p> | |
| <a href = "#">Read More</a> | |
| </div> | |
| </div> | |
| <div class = "hot-topic"> | |
| <img src = "https://ahrefs.com/blog/wp-content/uploads/2020/05/fb-what-is-https.png" alt = ""> | |
| <div class = "hot-topic-content"> | |
| <h2>5 Fakta Menarik HTTPS, Bikin Situs Lebih Terjamin?</h2> | |
| <p>Sebagai pengguna internet browser, kamu pasti pernah melihat situs dengan awalan HTTP dan HTTPS. Secara singkat, kebanyakan orang percaya bahwa menggunakan HTTPS jauh lebih aman ketimbang HTTP biasa.</p> | |
| <a href = "#">Read More</a> | |
| </div> | |
| </div> | |
| <div class = "hot-topic"> | |
| <img src = "https://thumb.viva.co.id/media/frontend/thumbs3/2022/08/08/62f0ee4d9fbca-bocoran-iphone-14-pro_665_374.jpeg" alt = ""> | |
| <div class = "hot-topic-content"> | |
| <h2>Cek Harga Terbaru iPhone 13 Series di Indonesia, Langsung Anjlok!</h2> | |
| <p>Rilisnya iPhone 14 series di pasaran ternyata langsung berdampak pada harga seri iPhone sebelum, yaitu iPhone 13 series. Hal ini terlihat dari perubahan harga yang langsung terjadi.</p> | |
| <a href = "#">Read More</a> | |
| </div> | |
| </div> | |
| <div class = "hot-topic"> | |
| <img src = "https://cdn.idntimes.com/content-images/community/2022/09/a-cover-9b3ad9f379c33a673cb97fe2c1b99836-763f52336d801af642cadd5d36159009_600x400.jpg" alt = ""> | |
| <div class = "hot-topic-content"> | |
| <h2>[REVIEW] F1 Manager 2022—Bukan Simulasi dengan Implementasi yang Rumit</h2> | |
| <p>Game berbasis simulasi menjadi salah satu jenis permainan yang paling digandrungi oleh gamer PC di seluruh dunia.</p> | |
| <a href = "#">Read More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr> | |
| <footer> | |
| <p>Copyright © 2022 All rights reserved | Abd. Wahid</p> | |
| </footer> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| font-family: 'Montserrat', sans-serif; | |
| font-family: 'Raleway', sans-serif; | |
| */ | |
| *{ | |
| box-sizing: border-box; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| :root{ | |
| --heading: 'Montserrat', sans-serif; | |
| } | |
| body{ | |
| font-family: 'Raleway', sans-serif; | |
| background: #fff; | |
| } | |
| /* global styling */ | |
| img{ | |
| width: 100%; | |
| } | |
| ul{ | |
| list-style: none; | |
| } | |
| a{ | |
| text-decoration: none; | |
| color: #000; | |
| } | |
| hr{ | |
| width: 95vw; | |
| margin: 0 auto; | |
| } | |
| /* header */ | |
| .top-head{ | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin: 0 auto; | |
| background: #252525; | |
| color: #fff; | |
| padding: 20px 30px; | |
| } | |
| .top-head .fas{ | |
| font-size: 2rem; | |
| cursor: pointer; | |
| } | |
| /******* js related styling *****/ | |
| .times-btn{ | |
| display: none; | |
| } | |
| .nav-bar{ | |
| background: #333; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .show-nav{ | |
| height: auto; | |
| } | |
| /********************/ | |
| .nav-bar ul li{ | |
| text-align: center; | |
| display: block; | |
| padding: 15px 0; | |
| transition: all 1s ease-in-out; | |
| } | |
| .nav-bar ul li:hover{ | |
| background: #0e0e0e; | |
| } | |
| .nav-bar ul li a{ | |
| color: #fff; | |
| text-transform: uppercase; | |
| } | |
| .nav-bar ul li a:hover{ | |
| text-decoration: underline; | |
| } | |
| /* social -icons */ | |
| .social-icons{ | |
| display: none; | |
| } | |
| /* banner */ | |
| .banner{ | |
| min-height: auto; | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| align-items: center; | |
| padding: 30px 0; | |
| margin-top: 8px; | |
| } | |
| .banner-main-content{ | |
| padding: 0 2rem; | |
| line-height: 1.7; | |
| } | |
| .banner-main-content h2{ | |
| font-size: 2rem; | |
| font-family: var(--heading); | |
| } | |
| .banner-main-content h3{ | |
| padding: 1rem 0; | |
| } | |
| .banner-main-content button{ | |
| border: none; | |
| background: #252525; | |
| padding: 14px 18px; | |
| font-size: 1.2rem; | |
| font-family: 'Montserrat', sans-serif; | |
| transition: background 1s ease; | |
| } | |
| .banner-main-content button a{ | |
| color: #f3f3f3f3; | |
| transition: color 1s ease; | |
| } | |
| .banner-main-content button:hover{ | |
| background: #fff; | |
| } | |
| .banner-main-content button:hover a{ | |
| color: #0d0a0b; | |
| } | |
| .current-news-head{ | |
| background: #fff; | |
| padding: 20px; | |
| font-size: 12px; | |
| margin: 20px 0; | |
| } | |
| /* .current-news-head h3{ | |
| padding: 6px; | |
| cursor: pointer; | |
| position: relative; | |
| } */ | |
| /* .current-news-head h3:hover::before{ | |
| content: ">> "; | |
| position: absolute; | |
| left: -12px; | |
| } */ | |
| /* .current-news-head span{ | |
| display: block; | |
| font-family: var(--heading); | |
| font-weight: 300; | |
| text-transform: uppercase; | |
| } */ | |
| .hot-topic{ | |
| overflow: hidden; | |
| position: relative; | |
| width: 100%; | |
| padding: 12px; | |
| height: 300px; | |
| } | |
| .hot-topic img{ | |
| display: block; | |
| } | |
| .hot-topic-content{ | |
| position: absolute; | |
| bottom: 0; | |
| left: 20px; | |
| right: 20px; | |
| padding: 10px 20px; | |
| line-height: 1.3; | |
| color: #f3f3f3; | |
| } | |
| .hot-topic h2{ | |
| padding: 10px 0; | |
| font-size: 18px; | |
| text-shadow: 0 0 2px #000; | |
| } | |
| .hot-topic h3{ | |
| padding: 10px 0; | |
| font-size: 16px; | |
| text-shadow: 0 0 2px #000; | |
| } | |
| .hot-topic p{ | |
| padding: 10px 0; | |
| font-size: 15px; | |
| text-shadow: 0 0 2px #000; | |
| padding: 12px 10px; | |
| } | |
| .hot-topic-content a{ | |
| display: block; | |
| background: #f3f3f3; | |
| border: none; | |
| width: 95px; | |
| border-radius: 2px; | |
| text-align: center; | |
| padding: 7px 10px; | |
| font-size: 14px; | |
| margin: 10px 0 10px 10px; | |
| } | |
| .hot-topic-content a:hover{ | |
| text-decoration: underline; | |
| } | |
| /****** footer *****/ | |
| footer{ | |
| background: #252525; | |
| color: #f3f3f3; | |
| padding: 30px; | |
| } | |
| footer h2{ | |
| padding: 10px 0; | |
| } | |
| footer p{ | |
| padding: 10px 0; | |
| line-height: 1.3; | |
| } | |
| .footer-left, | |
| .footer-right{ | |
| margin: 0 20px; | |
| } | |
| footer > p{ | |
| text-align: center; | |
| opacity: 0.8; | |
| margin-top: 20px; | |
| } | |
| @media(min-width: 768px){ | |
| .banner-sub-content{ | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .container-bottom-left{ | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media(min-width: 800px){ | |
| /* nav */ | |
| .ham-btn, .times-btn{ | |
| display: none!important; | |
| } | |
| .navigation-container{ | |
| display: flex; | |
| background: #252525; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .top-head{ | |
| flex: 0 0 15%; | |
| } | |
| .nav-bar{ | |
| flex: 1 0 auto; | |
| height: 100%; | |
| background: transparent; | |
| } | |
| .nav-bar nav ul{ | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .nav-bar nav ul li{ | |
| padding-right: 30px; | |
| } | |
| .nav-bar nav ul li:hover{ | |
| background: none; | |
| } | |
| /* social icons */ | |
| .social-icons{ | |
| flex: 0 1 30%; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .social-icons .fab{ | |
| color: #fff; | |
| font-size: 2rem; | |
| } | |
| .social-icons ul{ | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0 20px; | |
| } | |
| .social-icons ul li{ | |
| padding: 20px; | |
| } | |
| .footer-container{ | |
| display: flex; | |
| } | |
| .footer-right, | |
| .footer-left{ | |
| flex: 1; | |
| } | |
| } | |
| @media(min-width: 992px){ | |
| main{ | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media(min-width: 1080px){ | |
| .banner{ | |
| grid-template-columns: 1fr 2fr; | |
| } | |
| } | |
Belum ada Komentar untuk "Tugas Pemrograman Web - Membuat Website Berita"
Posting Komentar