Tugas 2 - Membuat Situs Berita dengan CSS
13 September 2022
Pada tugas 2 ini kita dimina membuat situs berita dengan menggunakan vanilla css untuk memperindah tampilan halaman website yang kita punya. Berikut adalah tampilan dari situsnya:
Screenshoot
Source code
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<title>TechNews | Berita tentang dunia teknologi</title>
</head>
<body>
<div class="container">
<header>
<h1>TechNews</h1>
<h2>berita tentang dunia teknologi</h2>
</header>
<section class="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</section>
<section class="hero">
<img src="/images/technology.webp" alt="" width="100%" />
</section>
<section class="news">
<article>
<h3>News</h3>
<hr />
<div class="news-1">
<p class="date">Selasa, 13 September 2022 15:30 WIB</p>
<img src="/Tugas 2 - Membuat situs berita dengan CSS/images/news-2.jpg" alt="news-2" />
<div class="content">
<a href="" class="red">Teknologi Informasi</a>
<h4>3 Akunnya Tumbang, Bjorka Tuding Twitter Cuma Pikirkan Bisnis</h4>
<p>Bjorka menuding Twitter hanya mementingkan bisnis setelah tiga akun miliknya tumbang</p>
<a href="" class="red">Read more</a>
</div>
</div>
<div class="news-1">
<p class="date">Jum'at, 19 Agustus 2022 15:00 WIB</p>
<img src="/Tugas 2 - Membuat situs berita dengan CSS/images/news-1.jpg" alt="news-1" />
<div class="content">
<a href="" class="red">Teknologi Informasi</a>
<h4>Pertama di Indonesia, ITB dan Schlumberger Resmikan Program AI Academy</h4>
<p>ITB bekerja sama dengan Schlumberger untuk meresmikan program AI Academy untuk mahasiswa. Apa tujuannya?</p>
<a href="" class="red">Read more</a>
</div>
</div>
<div class="news-1">
<p class="date">Selasa, 31 Mei 2022 11:20 WIB</p>
<img src="/Tugas 2 - Membuat situs berita dengan CSS/images/news-3.jpg" alt="news-3" />
<div class="content">
<a href="" class="red">Robot</a>
<h4>Ilmuwan AS Kembangkan Robot Kepiting Sebesar Kutu</h4>
<p>Tim ilmuwan dari Northwestern University, AS, telah mengembangkan robot terkecil berbentuk kepiting yang bisa dikendalikan dari jarak jauh.</p>
<a href="" class="red">Read more</a>
</div>
</div>
</article>
<div class="advertisement">
<p>Advertisement</p>
<img src="images/adv-1.jpg" alt="adv-1" />
<img src="images/adv-2.jpg" alt="adv-2" />
<img src="images/adv-3.jpg" alt="adv-3" />
<img src="images/adv-4.jpg" alt="adv-4" />
</div>
<aside>
<h3>Category</h3>
<hr />
<ul>
<li><a href="">Komputer</a></li>
<li><a href="">Robot</a></li>
<li><a href="">Internet Of Things</a></li>
<li><a href="">Enterprise System</a></li>
<li><a href="">Teknologi Informasi</a></li>
<li><a href="">Sains</a></li>
<li><a href="">Telekomunikasi</a></li>
</ul>
</aside>
</section>
<footer>
<p>Copyright 2022, <span style="color: red">Arief Badrus Sholeh</span>. All rights reserved</p>
</footer>
</div>
</body>
</html> - CSS
/* Import Font */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
/*Color Pallete*/
--primary-color: #cc0000;
--secondary-color: #000000;
--ternary-color: #282828;
--light-color: #cbcbcb;
--light2-color: #f2f4f5;
--white-color: #ffffff;
}
/* CSS Reset */
* {
margin: 0;
padding: 0;
font-family: "Playfair Display", serif;
}
/* Default tag */
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: var(--primary-color);
}
a.red {
color: red;
}
a.red:hover {
text-decoration: underline;
}
h1 {
font-weight: 800;
font-size: 3em;
}
h3 {
font-size: 2em;
font-family: 800;
margin-bottom: 0.5em;
}
h4 {
margin-bottom: 0.5em;
font-size: 1.5em;
}
h4:hover {
color: var(--primary-color);
cursor: pointer;
}
input {
padding: 0.5em;
}
hr {
margin-bottom: 2em;
border: 1px solid red;
}
body {
width: 80%;
margin: auto;
}
/* Header Section */
header {
background-color: var(--secondary-color);
color: white;
padding: 1em;
margin-bottom: 0.8em;
}
header h1 {
text-shadow: 4px 3px 0px var(--primary-color), 9px 8px 0px var(--ternary-color);
}
header h2 {
font-style: italic;
}
/* Menu Section */
section.menu {
padding: 0.8em 1em;
background-color: var(--light-color);
display: flex;
}
section.menu ul li {
display: inline-block;
margin-right: 2em;
}
/* Hero Section */
section.hero {
margin-bottom: 1.2em;
box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}
/* News Section */
section.news {
padding: 1em;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "article article advertisement aside";
}
article {
grid-area: article;
padding: 1em 1em 1em 0;
}
.news-1 {
width: 100%;
padding: 1em;
background-color: var(--light2-color);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
margin-bottom: 2em;
}
.news-1 img {
width: 100%;
margin-bottom: 0.5em;
border-radius: 12px;
}
.news-1 p.date {
text-align: end;
color: grey;
}
.news-1 p {
margin-bottom: 0.5em;
}
.advertisement {
padding-top: 0.3em;
background-color: #e8e7ec;
margin: 0 2em 0 2em;
text-align: end;
}
.advertisement img {
width: 100%;
margin-bottom: 1em;
}
.advertisement p {
margin-bottom: 1em;
color: grey;
font-size: 0.8em;
}
aside {
grid-area: aside;
padding: 1em;
background-color: var(--light2-color);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
aside ul li {
margin-bottom: 0.5em;
}
/* Footer Section */
footer {
background-color: var(--ternary-color);
padding: 0.8em;
color: white;
text-align: center;
}
footer p {
font-size: 0.7em;
} Nama : Arief Badrus Sholeh
NRP : 5025201228
Kelas : Pemrograman Web A
Tahun : 2022/2023
Komentar
Posting Komentar