Project layout sederhana – html&css

Simpan dengan nama : style.css

body{
background:#f3f3f3;
color:#333;
width:100%;
font-family:sans-serif;
margin:0 auto;
}

.header{
width:90%;
margin:auto;
height:120px;
line-height:120px;
background:yellow;
color:red;
}

.menu{
background-color:#417aa8;
height:50px;
line-height:50px;
position:relative;
width:90%;
margin:1px auto;
padding:0 auto;
}

.jarak{
padding:0 2pc;
}
 Project layout sederhana – html&css

.menu ul {
list-style:none;
}

.menu ul li a {
float:left;
width:70px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
}

.menu ul li a:hover {
background-color:#4b88bb;
display:block;
}

.content{
width:90%;
margin:auto;
height:420px;
padding:0px;
background:#fff;
color:#333;
}

.border{
border:2px solid #4887b9;
margin-top:1pc;
padding-bottom:1pc;
padding-left:2pc;
 Project layout sederhana – html&css

padding-right:2pc;
}

.kiri{
width:70%;
float:left;
margin:auto;
background:#fff;
height:420px;
}

.kanan{
width:30%;
float:left;
margin:auto;
background:#fff;
height:420px;
}

.undecor{
text-decoration:none;
}

.footer{
width:90%;
margin:auto;
height:40px;
line-height:40px;
background:#cc8a10;
color:#fff;
margin-bottom: 1pc;
}
Project layout sederhana – html&css