Website buatan gue ini idenya berasal dari Unit Kegiatan Mahasiswa yang gue gelutin sekarang, yaps Jurnalistik atau lebih akrab didengar dengan sebutan JAMPINK, nah begini loh desain rancangannya, sangat sederhana sekali untuk para pemula..
Let's cekidot...
Style.css
@charset
"utf-8";
/* CSS
Document */
body {
font-family: Verdana, Arial,
Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background-image:url(images/jjj.jpg);
background-repeat:repeat;
}
p {
text-align:justify;
}
h1 {
text-align:center;
color:#900;
}
h2 {
text-align:left;
color:#900;
}
h3 {
text-align:left;
color:#900;
}
#header {
background-image: url(images/bn4.jpg);
background-size:cover;
width: 870px;
height: 250px;
margin:5px;
}
/*---------->
Menu tab <-----------*/
ul.menu_tabbed
{
list-style:none;
border-bottom:1px #900 solid;
padding-bottom:10px;
margin:5px;
}
ul.menu_tabbed
li {
display:inline;
margin-right:5px;
}
ul.menu_tabbed
li a {
color:#F90;
text-decoration:none;
background:#f7f7f7;
border:1px #900 solid;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom:none;
padding:10px 14px;
}
ul.menu_tabbed
li a:hover {
padding:14px 14px 10px 14px;
/*atas kanan bawah kiri*/
background-color:#FFC;
}
ul.menu_tabbed
li a.selected {
color:#933;
background:#FFF;
border:1px #999999 solid;
border-bottom:1px #FFF solid;
padding:14px 14px 10px 14px;
}
/*-----------------><----------------*/
#wrapper {
width:880px;
display: block;
border: medium dotted #900;
position: absolute;
left: 200px;
right:200px;
top:50px;
}
/*------------>
Content <--------------*/
#content {
width:880px;
float:left;
margin:0px auto;
}
#isi {
width:670px;
margin-bottom:10px;
margin-top:10px;
padding:20px;
border:1px solid #900;
border-radius:10px;
font-family:"Comic Sans
MS", cursive;
float:left;
background-color:#FFC;
}
#isi img{
padding-right:10px;
padding-bottom:10px;
padding: 10px;
}
/*-------------->
Menu <-------------*/
#navigation
{
width:135px;
font-size:12px;
float:left;
margin:10px;
}
#navigation
ul {
margin:0px;
padding:0px;
}
#navigation
ul li {
height:25px;
width:120px;
line-height:25px;
list-style:none;
padding-left:10px;
cursor:pointer;
background-image:url(images/menu1.gif);
}
#navigation
ul li a {
color:#FC0;
text-decoration:none;
text-transform:uppercase;
}
#navigation
ul li:hover {
background-image:url(images/menu2.gif);
position:relative;
}
#navigation
ul ul {
display:none;
position:absolute;
left:75px;
top:5px;
border:#fff solid;
border-width:1px;
background-color:#999;
}
#navigation
ul li:hover ul {
display:block;
}
#navigation
ul ul li {
width:150px;
float:left;
display:inline;
border:none;
}
#navigation
ul ul li:hover {
text-decoration:underline;
border:none;
}
#navigation
li:hover ul li ul {
display:none;
}
#navigation
ul ul li ul {
left:110px;
background-color:#0099cc;
}
#navigation
ul ul li:hover ul {
display:block;
}
/*----------------><------------------*/
#footer {
width:840px;
border-top:dashed #FFC;
padding:10px;
background-color:#900;
font:"MS Serif",
"New York", serif solid #FFF;
color:#FFF;
float:left;
margin:10px;
}
Home.html
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Jampink</title>
<link
href="style.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<div
id="wrapper">
<div
id="header"></div>
<div class="menu_tabbed">
<ul class="menu_tabbed">
<li><a
href="home.html">Home</a></li>
<li><a
href="tentang.html">Tentang</a></li>
<li><a
href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="navigation">
<ul>
<li><a
href="kampus.html">Campus Line</a></li>
<li><a
href="#">Lintas UKM</a>
<ul>
<li><a
href="desain_grafis.html">Desain Grafis</a></li>
<li><a href="pc.html">Programming
Club</a></li>
<li><a
href="linux.html">Linux</a></li>
<li><a
href="jampink.html">Jurnalistik</a></li>
<li><a
href="psm.html">PSM</a></li>
<li><a
href="photo_movie.html">Photo Movie</a></li>
<li><a
href="http://mint.stikom-db.net/">MINT</a></li>
<li><a
href="#">Agama</a>
<ul>
<li><a
href="kni.html">KNI</a></li>
<li><a
href="kristen.html">Kristiani</a></li>
<li><a
href="budha.html">Budha</a></li>
</ul>
</li>
</ul>
</li>
<li><a
href="#">Profil</a>
<ul>
<li><a
href="dosen.html">Dosen</a></li>
<li><a
href="mahasiswa.html">Mahasiswa</a></li>
<li><a
href="http://portal.stikom-db.ac.id/stikom-center.html">STIKOM
Center</a></li>
<li><a
href="stikom_carier.html">STIKOM Carier</a></li>
<li><a
href="http://library.stikom-db.ac.id/">Perpustakaan</a></li>
</ul>
</li>
<li><a
href="nyontek.html">Nyontek</a></li>
<li><a
href="gugel.html">Paman Gugel</a></li>
<li><a
href="pensil.html">Pensil</a></li>
</ul>
</div>
<div id="isi">
<br><p><a
href="http://www.myspaceantics.com/image-myspace-comment/welcome/cute_welcome.gif.html"
title="Click Image to Add"><img
src="http://myspaceantics.com/images/myspace-comments/welcome/cute_welcome.gif"
border="0" alt="More Pics @
MySpaceAntics.com"></a></p><br>
<p>Selamat datang di Jampink
Online Magazine. Berbagi Informasi teraktual dan terkini.</p>
</div>
</div>
<div id="footer"
align="center">Copyright @ 2013 By: Rezki Nanda
Lestari</div>
</div>
</body>
</html>
1
Comments
