Scribd
Unggah
32 tayangan7 halaman

HTML Latihan

Diunggah oleh

ayubmokoagow2023
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
32 tayangan7 halaman

HTML Latihan

Diunggah oleh

ayubmokoagow2023
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

<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;

Anda mungkin juga menyukai