Script CSS: csstyle.css
body{
margin : 10px auto;
width : 900px;
}
header, logo, te, nav, search, box, section, image, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(header.jpg);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(um-warna.png);
}
te{
padding: 30px;
font-family : Arial Rounded MT Bold;
font-size : 32px;
color : white;
}
nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}
newaqua {
width: 75px;
float: right;
height: 25px;
background: #cde;
border: 2px solid #ccc;
font-family: arial;
font-size: 10px;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px;
box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
-moz-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
-webkit-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
}
newaqua:hover {
text-shadow: rgb(255, 255, 255) 0px 0px 5px;
}
section{
width : 900px;
height : 450px;
background-color : #bbdefb;
}
picture{
float: left;
width: 300px;
height: 450px;
background-image : url(adekroisa.jpg);
}
article{
margin-left: 303px;
width: 595px;
height: 325px;
background-color : #ffffff;
}
event{
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 300px;
width: 590px;
height: 125px;
background-color : #bbdefb;
}
footer{
text-decoration: none;
clear : both;
height : 30px;
background-image : url(footer.jpg);
text-align : center;
font-weight: bold;
font-family: arial;
color: white;
font-size: 12px;
}
Script HTML: desaincss.html
<!--
Roisatul Azizah
109533414524
Desain Web dengan CSS dan HTML
-->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="roisa-binner.ico" rel="icon" type="image/vnd.microsoft.icon">
<title>Desain WEB dengan CSS dan HTML</title>
<link rel="stylesheet" href="csstyle.css" type="text/css" />
</head>
<body>
<!-- header here -->
<header>
<logo></logo>
<te>TEKNIK ELEKTRO FT UM</te>
</header>
<nav><search>Search</search>
<box>
<input type="text" size="21" />
</box>
<newaqua>
Login
</newaqua>
<newaqua>
Download
</newaqua>
<newaqua>
Indonesia
</newaqua>
<newaqua>
Pendtoffa
</newaqua>
<newaqua>
Home
</newaqua>
</nav>
<section>
<picture></picture>
<article>
<b>Buletin Electical Engineering</b>
<p align="justify">Dewasa ini perkembangan <font face="AsgardianWars" size="5px">informasi</font> semakin pesat. Banyak berita dan karya muncul dan kesemuannya tercipta karena daya imajinasi, kreatifitas dan intelejen. Hal itu menyebabkan hanya mahasiswa tertentu yang dapat memperoleh informasi. Mahasiswa biasa seharusnya juga dapat memperoleh informasi sebagaimana harapan dan sesuai bidang yang ditekuni. Oleh karena itu, perlu adanya media informasi yang mudah didapat dan diperoleh oleh civitas akademika. Bulletin Electrical Engineering (BINNER) hadir untuk memberikan informasi tidak hanya seputar jurusan, kampus, tetapi juga tips-trik, saran kritik tentang penyelenggaraan kehidupan di lingkup Jurusan Teknik Elektro Fakultas Teknik Universitas Negeri Malang yang diharapkan oleh civitas akademika. </p>
<p>Read more..</p>
</article>
<event>
<b>   Click This Link to Update :</b>
<ul>
<li><a href="http://binnerrs.co.cc">Blog Adek_Roisa | AS3</a></li>
<li><a text-decoration="none" href="http://elektro.um.ac.id">Official Site Jurusan Teknik ELektro FT UM</a></li>
<li><a href="http://dikti.go.id">Info PKM Karya Ilmiah (GT-AI)</a></li>
<li><a href="http://hmj.elektro.um.ac.id">HMJ ELektro FT UM site's</a></li>
<li><a href="http://pendtoffa.blogspot.com">Blog PendtoffA 2009</a></li>
</ul>
</event>
</section>
<footer>
<a href="http://binnerrs.co.cc">Home</a> |
<a href="http://pendtoffa.blogspot.com">Pendtoffa</a> |
<a href="http://indonesia.com">Indonesia</a> |
<a href="http://softpedia.com">Download</a> |
<a href="http://um.ac.id">Login</a>
</footer>
</body>
</html>
1 comment:
wokee
Posting Komentar
Informasi Pilihan Identitas:
Google/Blogger : Account special blogger
Another : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan). salam hangat, Roisa :)