Desain Web berbasis CSS3 dan HTML5 ~ Roisa

Desain Web berbasis CSS3 dan HTML5

3:21 PM Unknown


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> &nbsp 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>

Artikel Lainnya

Collegians - Campus
desain css

    1 comment:

    AzZukhruf mengatakan...

    wokee

    29 April 2013 pukul 02.20

    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 :)

    Pages 371234 »
     
    Wedoo Indonesia