<html>
<head>
<title>latihan 3</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="kotak">
<nav class="menu">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">TUTORIAL</a></li>
<li><a href="">KONTAK</a></li>
<li><a href="">DESIGN</a></li>
<li><a href="">PROFIL</a></li>
</ul>
</nav>
<!-- bagian sidebar website -->
<aside class="sidebar">
<div class="widget">
<h2>Belajar Web design</h2>
<p>selamat datang di kelas web design.</p>
</div>
<div class="widget">
<h2>Mendesain Sebuah Tampilan web</h2>
<p>Langkah-Langkah Mendesain Sebuah web <a href="#">kelas belajar design</a></p>
</div>
<div class="widget">
<h2>Belajar Web design</h2>
<p>selamat datang di kelas web design.</p>
</div>
<div class="widget">
<h2>Belajar Web design</h2>
<p>selamat datang di kelas web design.<a href="#">kelas belajar design</a></p>
</div>
<div class="widget">
<h2>Belajar Web design</h2>
<p>selamat datang di kelas web design.</p>
</div>
<div class="widget">
<h2>Belajar Web design</h2>
<p>selamat datang di kelas web design.<a href="#">kelas belajar design</a></p>
</div>
</aside>
<!-- akhir bagian sidebar website -->
<!-- bagian konten Blog -->
<div class="blog">
<div class="conteudo">
<div class="post-info">di posting oleh <b>Admin</b></div>
<img src="cewek.png" height="407" />
<h1>template sederhana HTML & CSS</h1>
<hr />
<p>
lorem ipsum dolor sit amet, consectetur adipisicing elit consequat.Duis aute irure dolor
in reprehenderit in vol
</p>
<a href="#" class="continue-lendo">selengkapnya </a>
</div>
<div class="conteudo">
<div class="post-info">di posting oleh <b>Admin</b></div>
<img src="sasuke.png" height="350" />
<h1>Belajar HTML Lengkap</h1>
<hr />
<p>
lorem ipsum dolor sit amet, consectetur adipisicing elit consequat.Duis aute irure dolor
in reprehenderit in vol
</p>
<a href="#" class="contune-lenda">Selengkapnya -></a>
</div>
<div>
<!-- akhir bagian konten Blog -->
</div>
</body>
</html>
body{
background-color: green;
margin: 0;
font-family: sans-serif;
.kotak {
width: 950px;
margin: 25px auto;
nav.menu ul{
overflow: hidden;
color: red;
list-style: none;
float: left;
padding: 0;
width: 650px;
background-color: yellow;
margin: 0 0 0;
nav.menu ul li {
margin: 0;
float: left;
}
nav.menu ul a{
padding: 25px;
display: block;
font-weight: 600;
font-size: 16px;
color: blue;
text-transform: uppercase;
text-decoration: none;
transition: all 0.5s ease;
nav.menu ul a:hover{
text-decoration: underline;
background: red;
.sidebar {
float: right;
width: 275px;
.sidebar .widget {
padding: 25px;
margin: 0 0 25px;
background: #FFF;
border-bottom: 2px solid #FFF ;
transition: all 0.5s ease;
.sidebar .widget:hover{
border-bottom:2px solid #3498db;
.sidebar .widget h2{
padding: 0;
margin: 0 0 15px;
color: #3498db;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
