LAYOUT BERITA
BERIKUT MERUPAKAN SCRIPT HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500&family=Roboto:ital,wght@0,700;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>KeyNews</title>
</head>
<body>
<header class="header">
<img src="Img/foto(1).png" alt="">
<nav class="nav-bar">
<a href="" class="op">Home</a>
<a href="" class="op">Menu</a>
<a href="" class="op">About</a>
<a href="" class="op">News</a>
</nav>
</header>
<div class="sb">
<p>NEW NEWS</p>
<nav class="sb-op">
<a href="">REYHAN VIRAL</a>
<a href="">REYHAN TERKENAL</a>
<a href="">HOT NEWS</a>
<a href="">VIRAL!</a>
<a href="">REYHAN VIDIO</a>
<a href="">REYHAN MASUK TV</a>
<a href="">WANITA INI VIRAL!</a>
<a href="">NYANYIAN REHAN BAIK</a>
</nav>
</div>
<div class="isi">
<h1>REYHAN KAMU BAIK</h1>
<img src="https://thumb.suara.com/8bYNhW36k2nBhuxGXylT9wU0i2s=/653x366/https://media.suara.com/pictures/653x366/2022/09/28/14352-video-intan-untuk-rehan-terpampang-di-pinggir-jalan-tiktokattiqtuq.webp" alt="REYHAN" class="rey">
<div class="info">
<p>
Belum lama ini, nama Intan Lembata mencuat ke publik usai dirinya mengunggah sebuah video nyanyian untuk pria dalam mimpinya yang bernama Rehan. “Begitu syulit, lupakan Rehan apalagi Rehan baik”, itulah potongan suara Intan dalam video viral tersebut.
Kali ini, netizen kembali dibuat heboh dengan adanya baliho di pinggir jalan yang menampilkan video viral Intan untuk Rehan itu. Pada baliho tersebut, terpampang nyata wajah Intan yang sedang menyanyikan lagu ‘Begitu syulit lupakan Rehan'.
Seorang warga mengabadikan baliho tersebut lalu mengunggahnya ke TikTok sehingga hal ini menjadi bahan yang hangat diperbincangkan kembali oleh netizen. “Terpampang di tengah kemacetan” demikian keterangan yang tertulis dalam video yang diunggah oleh akun TikTok @tiqtuq.
Terlihat kendaraan yang begitu padat dan berlalu–lalang melewati baliho itu. Hal ini membuat salah seorang netizen berkomentar “Makin pening yang kena macet,” tulis @ik*am_a**o.
Bukan tanpa alasan video milik Intan terpampang di pinggir jalan. Video tersebut ternyata sengaja diputar sebagai sarana iklan atau trik marketing sebuah cafe yang berada di dekat papan iklan itu.
“Reyhan, kamu baik. Ada liwetan terenak di Bogor. Romantic dinner disini saja” demikian tulisan yang terdapat pada iklan yang terpampang di pinggir jalan.
Sabtu sore kemarin tetiba ada yang menelpon. Nomornya saya tak kenal. Berbaik sangka lalu saya angkat. Takutnya dari wali murid yang nomornya belum saya simpan. Pas saya angkat eh…tiba-tiba suara bapak-bapak merepet bilang begini,”Ibuk dimana ibuk ha…. “ Kaget dong sayanya. Diulang lagi bertanya dimana saya. Saya bilang,”Maaf bapak salah sambung.” Lalu saya tutup percakapan itu dan samar-samar saya dengar orang itu masih melanjutkan repetannya dengan pertanyaan yang sama. Seperti direkam begitu. Saya bilang ke suami kalau saya ditelpon orang tak dikenal dan menanyakan posisi saya dimana. Suami bilang kenapa tak balik bertanya posisi si Bapak dimana. Mana sempat saya bertanya. Hiks… <br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi at iure dicta velit non maxime minima voluptatem incidunt consequatur. Numquam quis dignissimos nostrum laborum temporibus laudantium explicabo necessitatibus illo consequuntur praesentium, odit corrupti. Accusamus beatae numquam, ipsa ipsum harum labore tempora quos dolorem, officia ullam ab rerum aliquid deleniti similique id mollitia eum dignissimos veniam laudantium molestias eius blanditiis dolores. Quos vel explicabo eum consequuntur a placeat illum rem reiciendis possimus enim autem, deleniti incidunt praesentium hic modi. Maiores repudiandae quidem explicabo error numquam beatae voluptas amet molestiae rerum quas. Quo aliquam, voluptatibus tempora eveniet nemo ad necessitatibus, fugiat explicabo officia vitae maiores aspernatur consectetur, sequi odit ipsam neque minima iste? Quae ex a voluptatem sint voluptatum veniam vero recusandae dolorem aperiam temporibus esse modi ipsum qui rerum, id, explicabo suscipit assumenda harum cupiditate. At ducimus minima beatae dolores numquam necessitatibus eius ipsam officiis modi autem eaque quisquam, sapiente rem repellat eveniet. Expedita maiores vitae earum exercitationem? Tenetur atque voluptatum laudantium, quod quos inventore explicabo tempora, minus saepe corrupti consequatur illum, voluptatem obcaecati vel dolorum ipsum voluptas quaerat ut ipsam? Deserunt sed laborum velit tenetur temporibus et possimus corporis. Est, sequi? Molestias laborum non omnis, voluptate dolorem repellat facere nobis.
</p>
</div>
</div>
<div class="sbl">
<p>NEW NEWS</p>
<nav class="sbl-op">
<a href="">
REYHAN VIRAL</>
<a href="">REYHAN TERKENAL</a>
<a href="">HOT NEWS</a>
<a href="">VIRAL!</a>
<a href="">REYHAN VIDIO</a>
<a href="">REYHAN MASUK TV</a>
<a href="">WANITA INI VIRAL!</a>
<a href="">NYANYIAN REHAN BAIK</a>
</nav>
</div>
<footer class="cs">
<p>@Keyyyyy</p>
</footer>
</body>
DAN INI SCRIPT CSS NYA
*, httml {
padding: 0%;
margin: 0%;
font-family: 'Bebas Neue', cursive;
}
.header {
height: 70px;
background-color: black;
}
.header img {
height: 200px;
width: 200px;
padding-left: 50px;
margin-top: -70px;
}
.nav-bar {
float: right;
margin-top: 20px;
}
.op {
text-align: top;
padding-right: 40px;
text-decoration: none;
font-size: 20px;
color: white;
opacity: 0.8;
}
.op:hover {
opacity: 1;
transition: 0.7s;
}
.sb {
height: 500px;
width: 200px;
float: right;
border: 1px solid black;
margin-right: 20px;
margin-top: 20px;
}
.sb p {
font-size: 20px;
background-color: gainsboro;
text-align: center;
margin: 2px;
}
.sb-op a {
text-decoration: none;
text-align: center;
display: block;
padding: 13px;
border-bottom: 1px solid black;
margin-bottom: 12px;
color: black;
margin-left: 5px;
margin-right: 5px;
opacity: 0.8;
}
.sb-op a:hover {
opacity: 1;
color: darkslategray;
border: 1px double darkslategray;
}
.isi {
height: 1500px;
background-color: whitesmoke;
}
.isi h1 {
font-size: 50px;
margin-left: 550px;
}
.rey {
width: 700px;
margin-left: 320px;
}
.info {
width: 750px;
margin-left: 320px;
}
.info p {
font-size: 20px;
}
.sbl {
height: 500px;
width: 200px;
float: left;
border: 1px solid black;
margin-left: 20px;
margin-top: -1480px;
}
.sbl p {
font-size: 20px;
background-color: gainsboro;
text-align: center;
margin: 2px;
}
.sbl-op a {
text-decoration: none;
text-align: center;
display: block;
padding: 13px;
border-bottom: 1px solid black;
margin-bottom: 12px;
color: black;
margin-left: 5px;
margin-right: 5px;
opacity: 0.8;
}
.sbl-op a:hover {
opacity: 1;
color: darkslategray;
border: 1px double darkslategray;
}
.cs {
background-color: black;
color: white;
text-align: center;
font-size: 30px;
height: 40px;
padding: 5px;
}
DAN INI HASILNYA
Komentar
Posting Komentar