›

Membuat Layout Website Sederhana (Part 5)

Ditulis oleh 2024/04/30 Tambah Komentar

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 Membuat Layout Website Sederhana:

  • Membuat Layout Website 1 Kolom Artikel
  • Membuat Layout Website 2 Kolom (1 Artikel & 1 Sidebar Kiri)
  • Membuat Layout Website 3 Kolom (2 Artikel & 1 Sidebar Kanan)
  • Membuat Layout Website 4 Kolom (2 Artikel & 2 Sidebar) & Header Image

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>

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

#2 Style pada element 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;
}

#3.1 Style judul pada element header:

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

#4 Style pada element 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;
}

#4.2 Style anchor text pada element menu:

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

#5 Style pada element 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;
}

#5.2 Style menu pada element content:

  • margin-bottom: 20px (jarak antara menu dengan element di bawahnya)
.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;
}

#5.4 Style achor text pada element content:

  • text-decoration: none
  • font 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;
}

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

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

#5.8 Style meta data pada kolom artikel:

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

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

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

#5.12 Hapus style float:

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

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

#6.2 Style anchor text pada element footer:

  • text-decoration: none
  • font 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;
}

#6.4 Style footer kiri (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;
}

#6.6 Style footer kanan (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;
}

#7 Kode CSS lengkap:

/* 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: 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;
}

Layout website setelah ditambahkan kode CSS

Belum ada Komentar untuk "Membuat Layout Website Sederhana (Part 5)"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel