<!DOCTYPE html>
<html>
<head>
<title>Website TKJ</title>
</head>
<body>
<div id="wrap">
<div id="content-wrap">
<div id="header-wrapper">
<h1>Teknik Komputer dan jaringan</h1>
<p>Deskripsi website kalian disini!</p>
</div>
<div id="nav-wrapper">
<p>Navbar</p>
</div>
<div id="wrapper">
<div id="content-wrapper">
<p>Content</p>
</div>
<div id="sidebar-wrapper">
<p>Sidebar</p>
</div>
</div>
<div id="footer-wrapper">
<p>Footer</p>
</div>
</div>
</div>
</body>
</html>
<style>
* {
margin:0;
padding:0;
}
#wrap {
width: 1024px;
margin: 0 auto;
position: relative;
display: block;
overflow: hidden;
}
#content-wrap {
padding: 5px 0 10px;
margin: 0 20px;
background: #fff;
border: 1px solid #7df6af;
}
#header-wrapper, #nav-wrapper, #content-wrapper, #sidebar-wrapper, #footer-wrapper{
position: relative;
}
#header-wrapper{
width: 950px;
height:80px;
padding: 10px 5px 5px;
margin: 0 auto;
background: #DEB887;
}
#header-wrapper h1{
text-align:center;
font-size:25px;
}
#header-wrapper p{
text-align:center;
font-size:17px;
}
#nav-wrapper {
width: 950px;
padding: 10px 5px 5px;
margin: 10px auto 0;
background: #DC143C;
}
#wrapper{
padding: 0px 5px 0;
margin: 0 7px 0;
overflow: hidden;
}
#content-wrapper {
width: 200px;
height:350px;
padding: 10px 5px 5px;
margin: 10px auto 0;
background: #DEB887;
display: block;
float: left;
}
#sidebar-wrapper {
width: 730px;
height:350px;
padding: 10px 5px 5px;
margin: 10px auto 0;
background: #DEB887 ;
display: block;
float: right;
}
#footer-wrapper {
width: 950px;
padding: 10px 5px 5px;
margin: 10px auto 0;
background: #000!important;
color: #fff!important;
}
Tidak ada komentar:
Posting Komentar