layout web dengan pengambilan konten di website online
Berikut adalah script 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">
<title>jessica</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
<div class="header">
<img src="https://www.idntimes.com/assets/img/idntimes.png"width:"100px" >
</div>
<div class="menu">
<center>
<b>
<ul>
<li><a href=""> QUIZ </a></li>
<li><a href=""> NEWS</a></li>
<li><a href="">BUSSINESS</a></li>
<li><a href="">SPORT</a></li>
<li><a href=""> TECH</a></li>
<li><a href=""> HYPE</a></li>
<li><a href=""> KOREA</a></li>
<li><a href=""> LIFE</a></li>
<li><a href=""> HEALTH </a></li>
<li><a href=""> COMMUNITY</a></li>
<li><a href=""> REGIONAL</a></li>
</a></li>
</ul>
</b>
</center>
</div>
<div class="sidebar-left">
<b> NEW NEWS</b>
<nav class="sbl-op">
<a href=""> Ketika Anies Ucapkan Selamat ke AHY di Depan Ribuan Kader Demokrat</a>
<a href=""> 7 Alasan Suka Baca Komik Justru Bikin Kamu Makin Cerdas!</a>
<a href=""> 5 Fakta Drakor The Villainess is a Marionette, Bertabur Visual!</a>
<a href="">10 Artis yang Mendadak Terkenal, Rizky Billar Kini Kehilangan Job!</a>
<a href=""> Parpol Sibuk Deklarasi Capres, Gelora: Memicu Masyarakat Terbelah!</a>
<a href="">5 Anak Artis yang Jadi Brand Ambassador, Ameena Baru Berusia 7 Bulan</a>
<a href=""> Pengamat: Jakarta Pusat Wilayah dengan Transportasi Paling Mudah</a>
<a href="">Airlangga Sebut Golkar Sudah Temui NasDem, Demokrat, dan PKS</a>
<a href="">10 Momen Hari Pertama Muntaz Halilintar Sekolah Formal, Tetap Nge-vlog</a>
</nav>
</div>
<div class="konten">
<h2> 9 Ide Outfit Kasual Jungwoo NCT, Gak Bikin Bosan!</h2>
<i>Buat penampilanmu makin kece!</i>
<img src="https://cdn.idntimes.com/content-images/community/2021/08/page-3a2c45a5e6c0870d54f79516592c0b15-7bfbd379535137bd78d7653a187ac1db_600x400.jpg" width="400px";>
<p>Khusus buat kamu para cowok yang ingin tampil lebih stylish saat hangout santai atau ingin nge-date bersama pacar, artikel ini menyediakan beberapa inspirasi outfit trendi yang bisa kamu sontek. Apalagi buat kamu yang suka dengan style ala Korean boys, tidak hanya trendi namun penamilanmu juga bakal karismatik abis!
Berikut ini beberapa inspirasi padu padan outfit kasual ala Jungwoo NCT 127 dengan kaus hingga kemeja, buat penampilanmu makin kece! Simak yuk!</p><br>
<u><i>1. Buat penampilanmu edgy dan stylish, gunakan kaus bergambar dengan sweater bermotif stripe, wide leg pants motif patern serta oxford shoes</u></i><br><br>
<u><i>2. Cocok buat dipakai ke acara semi formal, gunakan turtlencek t-shirt berwarna dusty purple, padukan dengan kemeja warna senada serta capri pants abu-abu, karismatik abis!</i></u>
</body>
</div>
<div class="sidebar-right">
<img src="https://s0.2mdn.net/simgad/6439978531512778146" width="320px";>
<img src="https://tpc.googlesyndication.com/simgad/329000591172552855" width="395px";>
</div>
<div class="footer">
<div class="sosmed">
<ul>
<li><a href=""> <i class="fa-brands fa-instagram"></i> </a></li>
<li><a href=""><i class="fa-brands fa-blogger" ></i></a></li>
</ul>
</div>
</div>
</body>
</html>
berikut script css
body{
margin:0px;
font-family: Arial, Helvetica, sans-serif;
}
.header{
background-color: white;
height: 50px;
padding:10px;
padding-top: 10px;
margin:auto;
}
h1 {
text-align: center;
}
.menu{
background-color:white;
height: 30px;
padding:1px 1px 10px 1px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.sidebar-left{
width:280px;
padding:auto;
padding-top: 40px;
float: left;
text-align: center;
margin-bottom: 13px;
}
.sbl-op
{
list-style-type: none;
}
.sbl-op a
{
text-decoration: none;
display: block;
padding: 13px;
border-bottom: 1px solid gainsboro;
margin-bottom: 12px;
color: black;
}
.sbl-op a:hover
{
color: darkorange;
border-bottom: 5px double chocolate;
transition-duration: 2s;
}
.konten{
float: left;
width: 500px;
padding-left: 45px;
padding-top:auto;
padding-right: 180px;
}
.sidebar-right{
width:65px;
margin-top:15px;
margin-left:5px;
height:400px;
float:left;
}
.footer{
height:30px;
padding:15px;
background-color: rgb(197, 201, 219);
clear :both;
}
.menu ul li {
display: inline-block;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin: 0px 25px;
text-decoration: none;
}
a{
text-decoration:none ;
text-shadow: 2px;
text-decoration-color: black;
}
.footer ul li{
display: inline-block;
margin: 0px auto;
width: 20px;
}
hasil dari script :
Komentar
Posting Komentar