Membuat Halaman Web Berita

 Tugas Minggu ini adalah membuat halaman web berita sesuai dengan contoh. Berikut adalah implementasinya


Kode HTML:

Copy 
<!DOCTYPE html>
<html>
 
<head>
    <title>
        Fodlan Times
    </title>
    <link rel="stylesheet" href="style.css">
 
</head>
 
<body>
<div class="website">
<header>
    <div class="MainLogo">
        <h1>Fodlan Times</h1>
    </div>
   
        <nav>    
      
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">News</a>    
</nav>
</header>
 
<div class="mainBody">
<section class="news">
    <div class="articles">
        <article>
            <div class="ar-img"><img src="img/arvis.jpg"></div>
            <div class="ar-info">
                <h3 class="ar-title">Arvis: "I did not kill Sigurd and steal his wife, but even if i did, he deserved it"</h3>
            <p class="ar-subtitle">After years of being silent on the matter, Emperor Arvis of Grannvale finally broke the ice on the famous Massacre of Belhalla</p>
 
            </div>
            
        </article>
 
        <article>
            <div class="ar-img"><img src="img/edelgard.jpg"></div>
            <div class="ar-info">
                <h3 class="ar-title">Edelgard: "We are gonna build a wall, and Faerghus is gonna pay for it</h3>
                <p class="ar-subtitle">Emperor Edelgard I of the Adrestian Emperor reportedly gave the approval to build the Great Wall of Arianrhod. "It's gonna be really special"</p>
 
            </div>
           
        </article>
 
        <article>
            <div class="ar-img"><img src="img/seliph.jpg"></div>
            <div class="ar-info">
                <h3 class="ar-title">The Leader of the Liberation Army is Reportedly 90 Percent Sure that Julia isn't His Sister.</h3>
                <p class="ar-subtitle">The relationship of Seliph of Grannvale with his Chief Tactician, Julia, the Princess of Grannvale, has always been a controversial one</p>
 
            </div>
           
        </article>
 
    </div>
</section>
<section class="categories">
    <ul>
        <li><a href="#">Archanea</a></li>
        <li><a href="#">Valentia</a></li>
        <li><a href="#">Jugdral</a></li>
        <li><a href="#">Elibe</a></li>
        <li><a href="#">Fodlan</a></li>
    </ul>
</section>
 
</div>
 
</div>
<p>Copyright: Gumilang Silalahi @2022</p>
</body>
 
 
</html>
view raw Tugas2/index.html delivered with ❤ by emgithub



Kode CSS:

Copy 
.website
{
    background-color: salmon;
 
}
 
header
{
    position: fixed;
    width: 100%;
    height: 4rem;
    background-color: tomato;
    padding-top: 4px;
    padding-left: 4px;
    padding-bottom: 4px;
    padding-right: 4px;
    display: flex;
    margin: auto;
}
 
body
{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    list-style: none;
}
 
.MainLogo
{
    width: 25%;
    align-items: center;
    color: white;
    display: flex;
    background-color: salmon;
}
 
*{
    margin: 0;
    text-decoration-line: none;
    text-decoration-color: currentColor;
    
}
 
.link
{
    text-decoration: none;
    text-decoration-color: currentColor;
 
}
 
nav{
    display: flex;
    flex: auto;
    width: 75%;
    justify-content: space-around;
    font-size: large;
    text-align: center;
    align-items: center;
    font-size: larger;
 
}
 
.mainBody
{
    width: 100%;
    display: flex;
    margin: auto;
    padding-left: 5rem;
    padding-top: 5rem;
    align-self: center;
}
.news
{
    width: 70%;
    display: flex;
    flex-direction: column;
}
.categories
{
    width: 30%;
    align-self: right;
    display: flex;
    flex-direction: column;
    font-size: xx-large;
}
 
article{
    display: flex;
}
 
li
{
    list-style: none;
}
 
.ar-img
{
    min-width: 350px;
    height: 200px ;
}
 
article
{
    padding-top: 10px;
    padding-bottom: 10px;
}
view raw Tugas2/style.css delivered with ❤ by emgithub


Screenshot Halaman:



Comments

Post a Comment

Popular posts from this blog

PBKK UWP

Image
Nama: Ferdinand Putra Gumilang Silalahi NRP: 5025201176       Tugas Minggu ini adalah membuat aplikasi photolap yang menggunakan UWP. Link Github: https://github.com/DrunkDemoman/PhotoLab Screenshot Program:
Read more

ETS Pemrograman Web

Image
Nama Kelompok: GRG Inc. Nama Aplikasi: GRGJobs Anggota Kelompok Nama: Ferdinand Putra Gumilang Silalahi NRP : 5025201176 Nama: Gery Febrian Setyara NRP: 5025201151 Nama: Rafael Asi Kristanto Tambunan NRP: 5025201168   Deskripsi Aplikasi Website ini adalah website yang berjalan di bidang job seeking dengan mengedepankan keamanan dan validitas dari data pengguna dan lowongan kerja. Website ini memiliki fitur yang dibuat untuk pengguna yang mencari pekerjaan dan perusahaan aplikan. Pengguna dapat memfilter pekerjaan berdasarkan berbagai kategori dan juga mengajukan aplikasi mereka pada lowongan yang tersedia. Perusahaan dapat mengajukan lowongan pekerjaan dengan memspesifikasikan berbagai jenis kebutuhan, tanggung jawab, dan kualifikasi yang diharapkan dari aplikan. Poster  Link PPT: https://docs.google.com/presentation/d/14C5X5UPKz176WeGCMLgFQZDMSiwmtO9u/edit#slide=id.p7 Repo Github: https://github.com/RafaelTbn/ETS-PWEB Website Hosting:  grgjobs.online   Prev...
Read more

Final Project PBKK

Image
Ferdinand Putra Gumilang Silalahi 5025201176 Paper yang dijadikan referensi: Designing and Implementing of An Online Library Managment System ( https://sjuoz.uoz.edu.krd/index.php/sjuoz/article/view/427 ) Studi Kasus MVC: Aplikasi yang dibuat adalah aplikasi manajemen library. Model, yang berisi database untuk penyimpanan data, adalah berisi database buku yang berfungsi untuk menyimpan informasi buku. View berfungsi untuk menampilkan buku, dan juga memberi visualisasi frontend untuk CRUD (Create, Read, Update, dan Delete) untuk buku. Controller adalah bagian yang berfungsi untuk menghandle backend CRUD  Rancangan Aplikasi: Fitur utama aplikasi adalah: Dapat melihat daftar semua buku Dapat menambah buku baru Dapat menunjukkan informasi buku yang secara detail Dapat melakukan update informasi buku dan menghapus buku   Desain Front End    Design Database Logika Back End Add and Update Books: Controller yang akan menghandle penambahan dan update buku Book Details: C...
Read more