Membuat Layout Website Sederhana (Part 5)

abugaza_ | November 24, 2021 | CSS, HTML, TKJ | 2 Comments

Rate this post

Terakhir dari seri belajar membuat layout website sederhana, kita akan coba buat layout dengan 2 kolom siderbar yang terletak di kiri dan kanan kolom artikel, dan empat kolom footer, seperti gambar berikut ini.

Seri Belajar HTML:

Seri Belajar Membuat Layout Website Sederhana:

Kode HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Belajar HTML</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="header">
			<h1>Membuat Website</h1>
			<p>Membuat Layout HTML 3 Kolom Konten & Footer</p>
		</div>
		<div class="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</div>
		<div class="content">
			<div class="kiri">
				<h2>Arsip Blog</h2>
				<ul>
					<li><a href="#">November 2021</a></li>
					<li><a href="#">Oktober 2021</a></li>
					<li><a href="#">September 2021</a></li>
					<li><a href="#">Agustus 2021</a></li>
				</ul>
				<h2>Kategori Blog</h2>
				<ul class="label">
					<li><a href="#">HTML</a></li>
					<li><a href="#">CSS</a></li>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">SQL</a></li>
					<li><a href="#">Phyton</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">C++</a></li>
					<li><a href="#">C#</a></li>
				</ul>
			</div>
			<div class="article">
				<h2>Judul Artikel 1</h2>
				<p class="author">Dipostkan oleh <a href="#">Rino Safrizal</a> pada tanggal 20 November 2021</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur doloremque dicta maiores quia quod nesciunt sit quasi natus esse vitae minus iste vel cum cupiditate et nam, in corporis iusto id itaque debitis repellat delectus assumenda sint! Laboriosam totam quod obcaecati, porro, magnam ex vero aspernatur quibusdam officia cumque dolore?</p>
				<p class="readmore"><a href="#">Pelajari Selengkapnya...</a></p>
				<h2>Judul Artikel 2</h2>
				<p class="author">Dipostkan oleh <a href="#">Rino Safrizal</a> pada tanggal 19 November 2021</p>
				<p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Repellendus vel modi sed amet odio eveniet, qui, at minus ut dolor aut perspiciatis quia aliquid laboriosam? Ullam sit officia, blanditiis hic porro impedit maiores quos, iusto quisquam adipisci iste delectus. Enim asperiores sunt repudiandae quos quia nostrum fuga, molestiae sed.</p>
				<p class="readmore"><a href="#">Pelajari Selengkapnya...</a></p>
				<h2>Judul Artikel 3</h2>
				<p class="author">Dipostkan oleh <a href="#">Rino Safrizal</a> pada tanggal 18 November 2021</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas reprehenderit obcaecati, fugit, adipisci nisi architecto deleniti minus repellat ad quisquam consectetur, placeat quis ab facilis natus doloribus exercitationem similique iure consequuntur molestiae eligendi dolore consequatur ducimus. Ab odit, sapiente possimus voluptatum a ducimus soluta, non, dolorum illo perspiciatis itaque numquam neque!</p>
				<p class="readmore"><a href="#">Pelajari Selengkapnya...</a></p>
			</div>
			<div class="kanan">
				<h2>Postingan Terbaru</h2>
				<ul>
					<li><a href="#">Artikel 1</a></li>
					<li><a href="#">Artikel 2</a></li>
					<li><a href="#">Artikel 3</a></li>
					<li><a href="#">Artikel 4</a></li>
				</ul>
				<h2>Postingan Populer</h2>
				<ul>
					<li><a href="#">Artikel 1</a></li>
					<li><a href="#">Artikel 2</a></li>
					<li><a href="#">Artikel 3</a></li>
					<li><a href="#">Artikel 4</a></li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>

		<div class="footer">
			<div class="footer1">
				<h2>Hubungi Kami</h2>
			    <address>
			        <a href="mailto:admin@rinosafrizal.com">admin@rinosafrizal</a>.<br>
			        <a href="tel:+62811234567">+62 811 234 567</a><br>
			        Pontianak, Kalimantan Barat<br>
			        Indonesia
			    </address>
			</div>
			<div class="footer2">
				<h2>Link Terkait</h2>
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
				</ul>	
			</div>
			<div class="footer3">
				<h2>Follow Sosial Media</h2>
				<ul>
					<li><a href="#">Facebook</a></li>
					<li><a href="#">Instagram</a></li>
					<li><a href="#">Youtube</a></li>
					<li><a href="#">LinkedIn</a></li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div class="footer4">
			<p>&copy; 2021 - Abu Gaza</p>
		</div>
	</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<!DOCTYPE html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<h1>Membuat Website</h1>

<p>Membuat Layout HTML 3 Kolom Konten & Footer</p>

</div>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

<h2>Arsip Blog</h2>

<ul>

<li><a href="#">November 2021</a></li>

<li><a href="#">Oktober 2021</a></li>

<li><a href="#">September 2021</a></li>

<li><a href="#">Agustus 2021</a></li>

</ul>

<h2>Kategori Blog</h2>

<li><a href="#">Javascript</a></li>

<li><a href="#">Phyton</a></li>

</ul>

</div>

<h2>Judul Artikel 1</h2>

<p class="author">Dipostkan oleh <a href="#">Rino Safrizal</a> pada tanggal 20 November 2021</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur doloremque dicta maiores quia quod nesciunt sit quasi natus esse vitae minus iste vel cum cupiditate et nam, in corporis iusto id itaque debitis repellat delectus assumenda sint! Laboriosam totam quod obcaecati, porro, magnam ex vero aspernatur quibusdam officia cumque dolore?</p>

<p class="readmore"><a href="#">Pelajari Selengkapnya...</a></p>

<h2>Judul Artikel 2</h2>

<p class="author">Dipostkan oleh <a href="#">Rino Safrizal</a> pada tanggal 19 November 2021</p>

<p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Repellendus vel modi sed amet odio eveniet, qui, at minus ut dolor aut perspiciatis quia aliquid laboriosam? Ullam sit officia, blanditiis hic porro impedit maiores quos, iusto quisquam adipisci iste delectus. Enim asperiores sunt repudiandae quos quia nostrum fuga, molestiae sed.</p>

<p class="readmore"><a href="#">Pelajari Selengkapnya...</a></p>

<h2>Judul Artikel 3</h2>

<p class="author">Dipostkan oleh <a href="#">Rino Safrizal</a> pada tanggal 18 November 2021</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas reprehenderit obcaecati, fugit, adipisci nisi architecto deleniti minus repellat ad quisquam consectetur, placeat quis ab facilis natus doloribus exercitationem similique iure consequuntur molestiae eligendi dolore consequatur ducimus. Ab odit, sapiente possimus voluptatum a ducimus soluta, non, dolorum illo perspiciatis itaque numquam neque!</p>

<p class="readmore"><a href="#">Pelajari Selengkapnya...</a></p>

</div>

<h2>Postingan Terbaru</h2>

<ul>

<li><a href="#">Artikel 1</a></li>

<li><a href="#">Artikel 2</a></li>

<li><a href="#">Artikel 3</a></li>

<li><a href="#">Artikel 4</a></li>

</ul>

<h2>Postingan Populer</h2>

<ul>

<li><a href="#">Artikel 1</a></li>

<li><a href="#">Artikel 2</a></li>

<li><a href="#">Artikel 3</a></li>

<li><a href="#">Artikel 4</a></li>

</ul>

</div>

</div>

<h2>Hubungi Kami</h2>

<a href="mailto:admin@rinosafrizal.com">admin@rinosafrizal</a>.<br>

Pontianak, Kalimantan Barat<br>

Indonesia

</address>

</div>

<h2>Link Terkait</h2>

<ul>

</ul>

</div>

<h2>Follow Sosial Media</h2>

<ul>

<li><a href="#">Facebook</a></li>

<li><a href="#">Instagram</a></li>

<li><a href="#">Youtube</a></li>

<li><a href="#">LinkedIn</a></li>

</ul>

</div>

</div>

</div>

</body>

</html>

Kode CSS

#1 Style pada element body:

fyleont-family: serif
background-color: #dcdcdcd
font color: #111

body {
	font-family: serif;
	background-color: #dcdcdc;
	color: #111;
}

body {

font-family: serif;

background-color: #dcdcdc;

color: #111;

}

#2 Style pada element container:

width: 1200px
margin: auto

.container {
	width: 1200px;
	margin: auto;
}

.container {

width: 1200px;

margin: auto;

}

#3 Style pada element header:

background-color: #4682b4
padding: 40px 30px
color: #f5fffa

.header {
	background-color: #4682b4;
	padding: 40px 30px;
	color: #f5fffa;
}

.header {

background-color: #4682b4;

padding: 40px 30px;

color: #f5fffa;

}

#3.1 Style judul pada element header:

font: bold 40px monospace
margin-bottom: 10px

.header h1 {
	font: bold 40px monospace;
	margin-bottom: 10px;
}

.header h1 {

font: bold 40px monospace;

margin-bottom: 10px;

}

#3.2 Style tagline pada element header:

font: italic 15px serif

.header p {
	font: italic 15px serif;
}

.header p {

font: italic 15px serif;

}

#4 Style pada element menu:

background-color: #483d8b

.menu {
	background-color: #483d8b;
}

.menu {

background-color: #483d8b;

}

#4.1 Style list pada element menu:

display: inline-block
padding 10px 0px 10px 30px

.menu ul li {
	display: inline-block;
	padding: 10px 0px 10px 30px;
}

.menu ul li {

display: inline-block;

padding: 10px 0px 10px 30px;

}

#4.2 Style anchor text pada element menu:

text-decoration: none
font color: #fff

.menu a {
	text-decoration: none;
	color: #fff;
}

.menu a {

text-decoration: none;

color: #fff;

}

#5 Style pada element content:

background-color: #f0fff0

.content {
	background-color: #f0fff0;
}

.content {

background-color: #f0fff0;

}

#5.1 Style heading 2 pada element content:

font: bold 20px monospace
margin-bottom: 10px
text-transform: uppercase

.content h2 {
	font: bold 20px monospace;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.content h2 {

font: bold 20px monospace;

margin-bottom: 10px;

text-transform: uppercase;

}

#5.2 Style menu pada element content:

margin-bottom: 20px (jarak antara menu dengan element di bawahnya)

.content ul {
	margin-bottom: 20px;
}

.content ul {

margin-bottom: 20px;

}

#5.3 Style list menu pada element content:

margin-bottom: 10px (jarak antar list pada menu)

.content li {
	margin-bottom: 10px;
}

.content li {

margin-bottom: 10px;

}

#5.4 Style achor text pada element content:

text-decoration: none
font color: #111

.content a {
	text-decoration: none;
	color: #111;
}

.content a {

text-decoration: none;

color: #111;

}

#5.5 Style kolom sidebar kiri:

width: 220px
float: left
padding: 30px 20px 10px 30px

.kiri {
	width: 220px;
	float: left;
	padding: 30px 20px 10px 30px;
}

.kiri {

width: 220px;

float: left;

padding: 30px 20px 10px 30px;

}

#5.6 Style tombol kategori (label) pada sidebar kiri:

display: inline-block
padding: 7px
margin-right: 5px
background-color: #7fffda
font color: #000

.label li {
	display: inline-block;
	padding: 7px;
	margin-right: 5px;
	background-color: #7FFFD4;
	color: #000;
}

.label li {

display: inline-block;

padding: 7px;

margin-right: 5px;

background-color: #7FFFD4;

color: #000;

}

#5.7 Style kolom artikel:

width: 600px
float: left
padding: 30px 20px 10px 20px
background-color: #fffff0

.article {
	width: 600px;
	float: left;
	background-color: #fffff0;
	padding: 30px 20px 10px 20px;
}

.article {

width: 600px;

float: left;

background-color: #fffff0;

padding: 30px 20px 10px 20px;

}

#5.8 Style meta data pada kolom artikel:

font-size: 12px

.article .author {
	font-size: 12px;
}

.article .author {

font-size: 12px;

}

#5.9 Style paragraf pada kolom artikel:

font: normal 15px/22px serif
margin-bottom: 15px

.article p {
	font: normal 15px/22px serif;
	margin-bottom: 15px;
}

.article p {

font: normal 15px/22px serif;

margin-bottom: 15px;

}

#5.10 Style tombol readmore pada kolom artikel:

Posisi tombol (text-align): right
Style anchor text:
- font: bold 12px sans-serif
- background-color: #008080
- font color: #fff
- padding: 7px

.readmore {
	text-align: right;
}
.readmore a {
	font: bold 12px sans-serif;
	background-color: #008080;
	color:  #fff;
	padding: 7px;
}

.readmore {

text-align: right;

}

.readmore a {

font: bold 12px sans-serif;

background-color: #008080;

color: #fff;

padding: 7px;

}

#5.11 Style kolom sidebar kanan:

width: 220px
float: left
padding: 30px 20px 10px 30px

.kanan {
	width: 220px;
	float: left;
	padding: 30px 20px 10px 30px;
}

.kanan {

width: 220px;

float: left;

padding: 30px 20px 10px 30px;

}

#5.12 Hapus style float:

clear: both

.clear {
	clear: both;
}

.clear {

clear: both;

}

#6 Style pada element footer:

background-color: #696969
font color: #fff
padding 30px

.footer {
	background-color: #696969;
	color: #fff;
	padding: 30px;
}

.footer {

background-color: #696969;

color: #fff;

padding: 30px;

}

#6.1 Style heading 2 pada element footer:

font: bold 20px monospace
color: #dcdcdc
margin-bottom: 10px

.footer h2 {
	font: bold 20px monospace;
	color: #dcdcdc;
	margin-bottom: 10px;
}

.footer h2 {

font: bold 20px monospace;

color: #dcdcdc;

margin-bottom: 10px;

}

#6.2 Style anchor text pada element footer:

text-decoration: none
font color: #fff

.footer a {
	text-decoration: none;
	color: #fff;
}

.footer a {

text-decoration: none;

color: #fff;

}

#6.3 Style menu dan list menu:

margin-bottom: 20px (jarak antara menu dengan element di bawahnya)
margin-bottom: 10px (jarak antar list pada menu)

.footer ul {
	margin-bottom: 20px;
}
.footer li {
	margin-bottom: 10px;
}

.footer ul {

margin-bottom: 20px;

}

.footer li {

margin-bottom: 10px;

}

#6.4 Style footer kiri (footer1):

width: 360px
float: left
padding-right: 15px

.footer1 {
	width: 360px;
	float: left;
	padding-right: 15px;
}

.footer1 {

width: 360px;

float: left;

padding-right: 15px;

}

#6.5 Style footer tengah (footer2):

width: 360px
float: left
padding: 0px 15px

.footer2 {
	width: 360px;
	float: left;
	padding: 0px 15px;
}

.footer2 {

width: 360px;

float: left;

padding: 0px 15px;

}

#6.6 Style footer kanan (footer3):

width: 360px
float: left
padding-left: 15px

.footer3 {
	width: 360px;
	float: left;
	padding-left: 15px;
}

.footer3 {

width: 360px;

float: left;

padding-left: 15px;

}

#6.7 Style footer bawah (footer4):

background-color: #111
font color: #fff
text-align: center
padding: 10px 30px

.footer4 {
	background-color: #111;
	color: #fff;
	text-align: center;
	padding: 10px 30px;
}

.footer4 {

background-color: #111;

color: #fff;

text-align: center;

padding: 10px 30px;

}

#7 Kode CSS lengkap:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://rinosafrizal.com/metode-instalasi-sistem-operasi/" target="_blank" rel="nofollow" class="ueda8f571111481389819d469c6938c4d"><!-- INLINE RELATED POSTS 3/3 //--><style> .ueda8f571111481389819d469c6938c4d , .ueda8f571111481389819d469c6938c4d .postImageUrl , .ueda8f571111481389819d469c6938c4d .centered-text-area { min-height: 80px; position: relative; } .ueda8f571111481389819d469c6938c4d , .ueda8f571111481389819d469c6938c4d:hover , .ueda8f571111481389819d469c6938c4d:visited , .ueda8f571111481389819d469c6938c4d:active { border:0!important; } .ueda8f571111481389819d469c6938c4d .clearfix:after { content: ""; display: table; clear: both; } .ueda8f571111481389819d469c6938c4d { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #E67E22; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .ueda8f571111481389819d469c6938c4d:active , .ueda8f571111481389819d469c6938c4d:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #D35400; } .ueda8f571111481389819d469c6938c4d .centered-text-area { width: 100%; position: relative; } .ueda8f571111481389819d469c6938c4d .ctaText { border-bottom: 0 solid #fff; color: #ECF0F1; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .ueda8f571111481389819d469c6938c4d .postTitle { color: #2C3E50; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .ueda8f571111481389819d469c6938c4d .ctaButton { background-color: #D35400!important; color: #ECF0F1; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://rinosafrizal.com/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .ueda8f571111481389819d469c6938c4d:hover .ctaButton { background-color: #E67E22!important; } .ueda8f571111481389819d469c6938c4d .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .ueda8f571111481389819d469c6938c4d .ueda8f571111481389819d469c6938c4d-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .ueda8f571111481389819d469c6938c4d:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="ueda8f571111481389819d469c6938c4d-content"><span class="ctaText">Baca Juga:</span>  <span class="postTitle">Mengenal Jenis Lisensi dan Metode Instalasi Sistem Operasi Komputer</span></div></div></div><div class="ctaButton"></div></a></div>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Style */

body {
	font-family: serif;
	background-color: #dcdcdc;
	color: #111;
}
.container {
	width: 1200px;
	margin: auto;
}
.header {
	background-color: #4682b4;
	padding: 40px 30px;
	color: #f5fffa;
}
.header h1 {
	font: bold 40px monospace;
	margin-bottom: 10px;
}
.header p {
	font: italic 15px serif;
}
.menu {
	background-color: #483d8b;
}
.menu ul li {
	display: inline-block;
	padding: 10px 0px 10px 30px;
}
.menu a {
	text-decoration: none;
	color: #fff;
}
.content {
	background-color: #f0fff0;
}
.content h2 {
	font: bold 20px monospace;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.content ul {
	margin-bottom: 20px;
}
.content li {
	margin-bottom: 10px;
}
.content a {
	text-decoration: none;
	color: #111;
}
.kiri {
	width: 220px;
	float: left;
	padding: 30px 20px 10px 30px;
}
.label li {
	display: inline-block;
	padding: 7px;
	margin-right: 5px;
	background-color: #7FFFD4;
	color: #000;
}
.article {
	width: 600px;
	float: left;
	padding: 0px 30px;
	background-color: #fffff0;
	padding: 30px 20px 10px 20px;
}
.article .author {
	font-size: 12px;
}
.article p {
	font: normal 15px/22px serif;
	margin-bottom: 15px;
}
.readmore {
	text-align: right;
}
.readmore a {
	font: bold 12px sans-serif;
	background-color: #008080;
	color:  #fff;
	padding: 7px;
}
.kanan {
	width: 220px;
	float: left;
	padding: 30px 20px 10px 30px;
}
.clear {
	clear: both;
}
.footer {
	background-color: #696969;
	color: #fff;
	padding: 30px;
}
.footer h2 {
	font: bold 20px monospace;
	color: #dcdcdc;
	margin-bottom: 10px;
	text-transform: uppercase;
} 
.footer a {
	text-decoration: none;
	color: #fff;
}
.footer ul {
	margin-bottom: 20px;
}
.footer li {
	margin-bottom: 10px;
}
.footer1 {
	width: 360px;
	float: left;
	padding-right: 15px;
}
.footer2 {
	width: 360px;
	float: left;
	padding: 0px 15px;
}
.footer3 {
	width: 360px;
	float: left;
	padding-left: 15px;
}
.footer4 {
	background-color: #111;
	color: #fff;
	text-align: center;
}
.footer4 p {
	padding: 15px 0px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: ;

padding: ;

border: ;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: ;

}

/* Style */

body {

font-family: serif;

background-color: #dcdcdc;

color: #111;

}

.container {

width: 1200px;

margin: auto;

}

.header {

background-color: #4682b4;

padding: 40px 30px;

color: #f5fffa;

}

.header h1 {

font: bold 40px monospace;

margin-bottom: 10px;

}

.header p {

font: italic 15px serif;

}

.menu {

background-color: #483d8b;

}

.menu ul li {

display: inline-block;

padding: 10px 0px 10px 30px;

}

.menu a {

text-decoration: none;

color: #fff;

}

.content {

background-color: #f0fff0;

}

.content h2 {

font: bold 20px monospace;

margin-bottom: 10px;

text-transform: uppercase;

}

.content ul {

margin-bottom: 20px;

}

.content li {

margin-bottom: 10px;

}

.content a {

text-decoration: none;

color: #111;

}

.kiri {

width: 220px;

float: left;

padding: 30px 20px 10px 30px;

}

.label li {

display: inline-block;

padding: 7px;

margin-right: 5px;

background-color: #7FFFD4;

color: #000;

}

.article {

width: 600px;

float: left;

padding: 0px 30px;

background-color: #fffff0;

padding: 30px 20px 10px 20px;

}

.article .author {

font-size: 12px;

}

.article p {

font: normal 15px/22px serif;

margin-bottom: 15px;

}

.readmore {

text-align: right;

}

.readmore a {

font: bold 12px sans-serif;

background-color: #008080;

color: #fff;

padding: 7px;

}

.kanan {

width: 220px;

float: left;

padding: 30px 20px 10px 30px;

}

.clear {

clear: both;

}

.footer {

background-color: #696969;

color: #fff;

padding: 30px;

}

.footer h2 {

font: bold 20px monospace;

color: #dcdcdc;

margin-bottom: 10px;

text-transform: uppercase;

}

.footer a {

text-decoration: none;

color: #fff;

}

.footer ul {

margin-bottom: 20px;

}

.footer li {

margin-bottom: 10px;

}

.footer1 {

width: 360px;

float: left;

padding-right: 15px;

}

.footer2 {

width: 360px;

float: left;

padding: 0px 15px;

}

.footer3 {

width: 360px;

float: left;

padding-left: 15px;

}

.footer4 {

background-color: #111;

color: #fff;

text-align: center;

}

.footer4 p {

padding: 15px 0px;

}

Layout website setelah ditambahkan kode CSS

Tags:layout html, layout website sederhana, membuat layout html, membuat layout website

0 0 votes

Article Rating

2 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Membuat Layout Website Sederhana (Part 4) - rinosafrizal.com

2 years ago

[…] Membuat Layout Website 3 Kolom Konten (1 Artikel & 2 Sidebar) & 4 Kolom Footer […]

Membuat Layout Website Sederhana (Part 3) - rinosafrizal.com

2 years ago

[…] Membuat Layout Website 3 Kolom Konten (1 Artikel & 2 Sidebar) & 4 Kolom Footer […]

Bagikan halaman ini:

Related