Last active
October 7, 2019 08:32
-
-
Save cahyowhy/ffb2a561b149cc87d93324a815e32af0 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Layouting web sederhana dengan html dan css</title> | |
<style> | |
/* css reset */ | |
html, | |
body, | |
div { | |
padding: 0; | |
margin: 0; | |
font-family: sans-serif; | |
} | |
/* header */ | |
#header { | |
background-color: black; | |
padding: 18px; | |
margin: auto; | |
} | |
#header p { | |
color: white; | |
margin: 16px 0; | |
font-size: 45px; | |
font-weight: bold; | |
} | |
/* navigation */ | |
#nav { | |
background-color: grey; | |
} | |
#nav ul { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
#nav ul li { | |
padding: 15px 20px; | |
display: inline-block; | |
border-right: 1px solid black; | |
} | |
#nav ul li a { | |
color: white; | |
text-decoration: none; | |
} | |
/* content */ | |
#content-wrapper { | |
display: block; | |
overflow: auto; | |
} | |
/* main-content (kiri) */ | |
#content-wrapper #main-content { | |
width: 70%; | |
float: left; | |
box-sizing: border-box; | |
padding: 16px; | |
} | |
/* main-content (kiri) post-item */ | |
#content-wrapper #main-content .post-item { | |
} | |
/* sidebar (kanan) */ | |
#content-wrapper #sidebar { | |
width: 30%; | |
float: left; | |
background-color: gainsboro; | |
box-sizing: border-box; | |
padding: 16px; | |
} | |
#content-wrapper #sidebar p { | |
margin-top: 0; | |
border-bottom: 1px solid black; | |
} | |
#content-wrapper #sidebar-links ul { | |
list-style: none; | |
padding-left: 0; | |
} | |
#content-wrapper #sidebar-links ul li { | |
margin-bottom: 15px; | |
} | |
#content-wrapper #sidebar-links ul li a { | |
color: orange; | |
text-decoration: none; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- header --> | |
<div id="header"> | |
<p>HTML 5</p> | |
</div> | |
<!-- nav --> | |
<div id="nav"> | |
<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> | |
<li><a href="#">Link 5</a></li> | |
</ul> | |
</div> | |
<!-- konten --> | |
<div id="content-wrapper"> | |
<!-- konten kiri --> | |
<div id="main-content"> | |
<div class="post-item"> | |
<div class="post-image"> | |
<img src="download.jpg" alt="Gambar"> | |
</div> | |
<div class="post-content"> | |
<h4>Lorem ipsum</h4> | |
<p> | |
Dolor incididunt aute nisi deserunt sunt ad laborum aute et aliquip consequat magna. Lorem | |
excepteur magna occaecat aute excepteur cillum quis ut. | |
</p> | |
<a href="#">Read more</a> | |
</div> | |
</div> | |
</div> | |
<!-- sidebar kanan --> | |
<div id="sidebar"> | |
<p><b>Sidebar Links</b></p> | |
<div id="sidebar-links"> | |
<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> | |
<p><b>Other widgets</b></p> | |
<div id="sidebar-description"> | |
Aliqua aute minim sint veniam esse cillum dolore dolor elit. | |
</div> | |
</div> | |
</div> | |
<!-- footer --> | |
<div id="footer"> | |
<p>Copyright your site. All right reserved</p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment