Salam sejahtera kawan, semoga anda semua berada dalam kesehatan.
Baiklah, ini merupakan postingan lanjutan dari design Twitter Homepage Jika belum membacanya silahkan kunjungi disini.
Pada kali ini, penulis akan men-share sedikit apa yang sudah penulis lakukan untuk keisengan mendesain halaman sebuah homepage sosial networking yang penulis kasih nama AMPIBI. Disini penulis menggunakan sentuhan HTML dan CSS untuk mendesainnya. Langsung saja mari kita lihat source code nya untuk tampilan homepage AMPIBI seperti berikut :
HTML –> index.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>Ampibi</title>
<link rel="shortcut icon" href="img/logoampibi.ico" type="image/x-icon">
<link href="css/index.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="headerin"></div>
<div id="atasin">
<div id="judulin">
<img src="img/ampibitext.png"/></div>
<div id="brand"><h4>viva basdata community</h4></div>
<div id="login">
<form action="" method="post" id="login_form">
<div>
<p>
<input name="username" id="username" type="text" value="username" onfocus="this.value=''" onblur="<script>if (this.value==''){this.value='username'}</script>" />
<input name="password" id="password" type="password" value="password" onfocus="this.value=''"/>
<input name="submit" type="submit" value="Login" />
</p>
<div class="lupa" ><a href="#"><p>forget password? </p></a></div>
<div class="ceklogin"><span id="msgbox" style="display:none"></span></div>
</div>
</form>
</div>
</div>
<div id="headnav"></div>
<div id="container" >
<div id="content">
<div id="kiri">
<div>
<div class="posthead">People Inside</div>
<div class="postcontent">
<ul>
<li id="foto">
<img src="foto/-c26a783b7545be6a.png" />
<img src="foto/main-thumb-3804-25-sZqZD0VPaaEyIIz08uTej2Xm3gd7rdms.jpg" />
<img src="foto/main-thumb-6151-25-5Pmx02iBAHN3ekuelmaDY3wZBveVhS0a.jpg" />
<img src="foto/main-thumb-18956-25-eCB3M6z7q04JEg4YTRynzBVxeRvgWR1y.jpg" />
<img src="foto/-c26a783b7545be6a.png" />
<img src="foto/main-thumb-3804-25-sZqZD0VPaaEyIIz08uTej2Xm3gd7rdms.jpg" />
<img src="foto/main-thumb-6151-25-5Pmx02iBAHN3ekuelmaDY3wZBveVhS0a.jpg" />
<img src="foto/main-thumb-18956-25-eCB3M6z7q04JEg4YTRynzBVxeRvgWR1y.jpg" />
<img src="foto/main-thumb-6151-25-5Pmx02iBAHN3ekuelmaDY3wZBveVhS0a.jpg" />
</li>
<li id="foto">
<img src="foto/-c26a783b7545be6a.png" />
<img src="foto/main-thumb-3804-25-sZqZD0VPaaEyIIz08uTej2Xm3gd7rdms.jpg" />
<img src="foto/main-thumb-6151-25-5Pmx02iBAHN3ekuelmaDY3wZBveVhS0a.jpg" />
<img src="foto/main-thumb-18956-25-eCB3M6z7q04JEg4YTRynzBVxeRvgWR1y.jpg" />
<img src="foto/-c26a783b7545be6a.png" />
<img src="foto/main-thumb-3804-25-sZqZD0VPaaEyIIz08uTej2Xm3gd7rdms.jpg" />
<img src="foto/main-thumb-6151-25-5Pmx02iBAHN3ekuelmaDY3wZBveVhS0a.jpg" />
<img src="foto/main-thumb-18956-25-eCB3M6z7q04JEg4YTRynzBVxeRvgWR1y.jpg" />
<img src="foto/main-thumb-6151-25-5Pmx02iBAHN3ekuelmaDY3wZBveVhS0a.jpg" />
</li>
</ul>
</div>
</div>
<div>
<div class="posthead">Recent Quotes
<span class="next"><a href="#">Lihat semua</a></span>
</div>
<div class="postcontentslide">
<ul id="accordion">
<li><div class="slide">
<ul id="recent">
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.19.2009</span> <a href="#">Recent Entry Title</a> <span class="date">Post by Mpeb</span></li>
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.15.2009</span> <a href="#">Recent Entry Title</a></li>
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.13.2009</span> <a href="#">Recent Entry Title</a></li>
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.11.2009</span> <a href="#">Recent Entry Title</a></li>
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.10.2009</span> <a href="#">Recent Entry Title</a></li>
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.19.2009</span> <a href="#">Recent Entry Title</a></li>
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.15.2009</span> <a href="#">Recent Entry Title</a></li>
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.13.2009</span> <a href="#">Recent Entry Title</a></li>
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.11.2009</span> <a href="#">Recent Entry Title</a></li>
<li><img src="img/wall post.png" width="15" height="15"/>
<span class="date">01.10.2009</span> <a href="#">Recent Entry Title</a></li>
</ul></div>
</li>
</ul>
</div>
</div>
</div>
<div id="kanan">
<div class="posthead" id="kananatas">Free Join Here</div>
<div id="signupin">
<div id="status"></div>
<form action="" method="post" name="signup" id="contact-form">
<table width="283" border="0" class="cssform">
<tr>
<td>username</td>
<td><label>
:
<input type="text" name="uname" id="uname" />
</label></td>
</tr>
<tr>
<td width="107">email</td>
<td width="163">:
<label>
<input type="text" name="email" id="email" />
</label></td>
</tr>
<tr>
<td>first name</td>
<td>:
<label>
<input type="text" name="fname" id="fname" />
</label></td>
</tr>
<tr>
<td>last name</td>
<td>:
<label>
<input type="text" name="lname" id="lname" />
</label></td>
</tr>
<tr>
<td>birthday</td>
<td>:
<label>
<input type="text" name="bday" id="bday" />
</label></td>
</tr>
<tr>
<td>sex</td>
<td>:
<label>
<select name="sex" id="sex">
<option selected="selected">select gender</option>
<option>male</option>
<option>female</option>
</select>
</label></td>
</tr>
<tr>
<td>no hp</td>
<td><label>
: <input type="text" name="nope" id="nope" value="+62"/>
</label></td>
</tr>
<tr>
<td>password</td>
<td>:
<label>
<input type="password" name="pass" id="pass" />
</label></td>
</tr>
<tr>
<td> </td>
<td align="right"><label>
<input type="submit" name="submit2" id="submit" value="Join" />
</label></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div id="footer">
<p>Database Research Laboratory © 2010</p>
</div>
</div>
</body>
</html>
CSS –> index.css
@charset "utf-8";
/* CSS Document by Febriyana */
body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button {
margin: 0; padding: 0; border: 0; list-style: none;
}
a {
text-decoration: none;
color:#000000;
}
a:hover {
color: #6f92a7;
}
:focus {
outline: 0;
}
a:visited{
color:#FFFFFF;
}
h1, h2, h3 {
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
font-weight: normal;
}
h2 {
font-size: 22px;
line-height: 28px;
}
h4 {
color:#666;
margin:0 0 5px 0;
}
.float {
float:left;
}
body {
background:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
}
input,select{
height: 22px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-left:1px;
filter:progid:DXImageTransform.Microsoft.Shadow
(color=#e2e2e2, Direction=135, Strength=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow
(color=#e2e2e2, Direction=135, Strength=5)";
}
textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#999999;
-webkit-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
-moz-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
box-shadow: 2px 2px 5px#e2e2e2, inset 2px 2px 5px #e2e2e2;
filter:progid:DXImageTransform.Microsoft.Shadow
(color=#e2e2e2, Direction=135, Strength=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow
(color=#e2e2e2, Direction=135, Strength=5)";
}
input[type=submit]
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
height: 25px;
color:#060;
border: 1px solid #8cb332;
background:#8cb332;
cursor: pointer ;
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.2);
box-shadow: inset 0 3px 8px rgba(0,0,0,.2);
}
input[type=submit]:hover{
background:#CCCCCC;
}
/* ===================
header
======================================
*/
#header{
width:100%;
display:block;
padding-top:0;
margin:auto;
height:50px;
background:url(../img/head.jpg) repeat-x;
}
#headerin{
width:100%;
display:block;
padding-top:0;
margin:auto;
height:90px;
background:url(../img/head.jpg) repeat-x;
}
#headnav{
width:100%;
display:block;
margin:auto;
height:15px;
background:#EEE;
}
/* ===================
atas
======================================
*/
#atasin{
width: 850px;
padding-top: 0px;
position:absolute;
margin-left:260px;
margin-top:-45px;
}
#atas{
width: 850px;
padding-top: 10px;
position:absolute;
margin-left:260px;
margin-top:-40px;
}
#judulin{
float:left;
margin-left:5px;
display:block;
width:120px;
margin-top:-20px;
}
#judul{
float:left;
margin-left:0;
display:block;
width:120px;
margin-top:-10px;
}
#judulin h2{ color: #CCCCCC ; font-size:33px; text-shadow: 1px -1px 4px #fff , 0 -1px 0 #fff; margin-top:-14px;}
#judul h2{ color: #CCCCCC ; font-size:33px; text-shadow: 1px -1px 4px #fff , 0 -1px 0 #fff; margin-top:-5px;}
#brand h4{color:#EEE ; font-size:15px; font-family: Arial;text-shadow: 0px 0px 2px #fff }
#brand{
position:absolute;
margin-left:50px;
margin-top:23px;
}
#login{
float:right;
width:auto;
margin-top:-10px;
}
#login .lupa a{
position:absolute;
color:#CCC;
font-size:10px;
margin-left:235px;
}
#login .lupa a:hover{
text-decoration:underline;
}
/*body */
#container {
width: 850px;
margin: 0 auto;
padding-top: 10px;
margin-top: 10px;
}
#content {
width:100%;
height:auto;
display:block;
}
/*kanan*/
#kanan{
float:right;
width:320px;
}
#kananatas{width:290px;}
#signupin{
float:left;
margin-left:2px;
margin-top:5px;
display:block;
background:#EEE;
border: 1px solid #EEE;
-moz-border-radius:10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
padding: 15px 15px 15px 15px;
height:auto;
width:88%;
}
#signup{
float:left;
margin-left:2px;
margin-top:5px;
display:block;
border: 1px solid #EEE;
-moz-border-radius:10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
padding: 15px 15px 15px 15px;
height:auto;
width:88%;
}
/*kiri*/
#kiri{
float:left;
width:475px;
}
.posthead{
float:left;
width:95%;
padding:5px;
padding-left:20px;
display:block;
background:#EEE;
border: 1px solid #EEE;
clear:both;
-moz-border-radius:12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
font-size:18px;
}
.postcontent{
padding:40px 0px 20px 10px;
}
.postcontentslide{
padding:40px 0px 20px 10px;
}
/*foto*/
#foto img{
width:40px;
height:40px;
margin-top:7px;
margin-left:7px;
}
/*table*/
.cssform
{
border-collapse: collapse;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
.cssform th
{
padding: 5px;
font-weight: normal;
text-align: center;
background-color: #EEE;
font-weight: bold;
-moz-border-radius: 40px 40px;
border-radius: 40px 40px;
}
.cssform td input[type=text]
{
border: 1px solid #CCCCCC;
height: 27px;
}
.cssform td input[type=password]
{
border: 1px solid #CCCCCC;
height: 27px;
}
.cssform td select
{
border: 1px solid #CCCCCC;
height: 30px;
}
.cssform td input[type=submit], .cssform td input[type=reset], .cssform td input[type=reset]:hover
{
line-height: 22px;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
color: #333333;
padding: 0px 10px 0px 10px;
border: 1px solid #999999;
cursor: pointer ;
}
.cssform td input[type=submit]:hover{
background:#CCCCCC;
}
/*accordian*/
/*****Accordion Styles*****/
ul#accordion, ul#accordion ul { list-style: none; margin: 0; }
ul#accordion { border-bottom: 1px solid #C2C8D1; }
ul#accordion ul li { border: none; border-bottom: 1px solid #C2C8D1; color: #999; padding: 5px 10px; }
ul#accordion ul li:last-child { border-bottom: none; }
ul#accordion a.heading {
color:#000000;
display: block;
font-size: 18px;
line-height: 18px;
padding: 10px 5px;
text-decoration: none;
}
ul#accordion li ul a { border-bottom: 1px solid #00B9D2; color: #025185; text-decoration: none; }
ul#accordion li ul a:hover { border-bottom: none; }
ul#accordion li ul .date { padding-right: 10px; }
ul#accordion li ul .count { padding-left: 10px; }
/*****Additional Custom Accordion Styles*****/
body#customAccordion ul#accordion li ul { display: none; }
body#customAccordion ul#accordion li.current ul { display: block; }
.next a{
float:right;
text-decoration:underline;
cursor:pointer;
font-size:11px;
margin-top:5px;
margin-right:10px;
display:block;
color:#666;
}
.next a:hover{
color:#fff;
display:block;
background:#069;
text-decoration:none;
-moz-border-radius:10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
}
/* ===================
footer
======================================
*/
#footer {
float:left;
position:relative;
clear: both;
display:block;
margin-top:20px;
border-top: 1px solid #c9c9c0;
width:100%;
}
#footer p {
text-align: right;
color: #b6b6ab;
}
/*cek login*/
.ceklogin{
position:absolute;
margin-left:-28px;
width:308px;
}
.messagebox{
position:absolute;
width:308px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
padding:3px;
color:#008000;
}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
padding:3px;
color:#CC0000;
}
#status{
position:absolute;
margin-top:10px;
margin-left:200px;
font-size:10px;
width:auto;
}
.green
{
background-color:#CEFFCE;
}
.red
{
background-color:#FFD9D9;
}
bagaimana, ada yang ditanyakan?
Dengan dua file tersebut kita bisa mendapatkan tampilan homepage AMPIBI seperti diatas.
Terima Kasih 😀
berikut adalah source code nya:
jangan lupa untuk memberikan komentar dan rating nya ya.. 😀
Download Here
password : pehapecode.wordpress.com
pehapecode 