Script PROGRAM .
margin:10px auto;
width:850px;
}
header{
display:block;
height:80px;
border:5px dashed purple;
}
kanan{
float: right;
margin-right: 15px;
}
nav{
float:left;
height:30px;
width:803px;
border:5px solid blue;
padding:20px 20px 20px 20px;
}
section{
float:left;
display:block;
height:470px;
border:10px solid red;
padding:20px 20px 20px 20px;
}
article{
float:right;
display:block;
width:570px;
height:450px;
border:1px dashed red;
padding:10px 10px 10px 10px;
background-color:pink;
}
aside{
float:left;
display:block;
width:170px;
height:450px;
border:1px dashed green;
padding:10px 10px 10px 10px;
background-color:yellow;
}
button {
font-family:comic sans ms;
width:55px;
height:25px;
border:1px solid red;
}
footer{
display:block;
clear:both;
height:20px;
border:5px solid green;
padding : 10px 10px 10px 10px
}
simpan dengan nama studikasuscss.css
Script kedua
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>studikasus modul 4</title>
<link rel="stylesheet" href="studikasusmod4css.css" type="text/css"/>
</head>
<body>
<header>header
</header>
<nav>
nav
<kanan>
<button>
Profile
</button>
<button>
Beranda
</button>
</kanan>
</nav>
<section>
<article>article
</article>
<aside>
<button>menu</button>
aside
</aside>
section
</section>
<footer>footer
</footer>
</body>
</html>
Simpn dengan nama studikasus.html
Screenshoot hasilnya :
Tidak ada komentar:
Posting Komentar