Membuat Layout Website seperti Facebook memanfaatkan kolaborasi CSS3 dan HTML5 ~ Roisa

Membuat Layout Website seperti Facebook memanfaatkan kolaborasi CSS3 dan HTML5

8:58 PM Unknown

Membuat layout sederhana dengan CSS, face-mu persembahan dari binnerrs.com, hmm.. berikut tampilan offline: localhost,



Script CSS: create-fb.css

.wrapper, .footer{
background-color : #0e25af;
font-family: arial;
font-size: 11px;
text-align: left;
color: #FFFFFF;
border: 0px;
}
.wrapper{
height : 90px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
}
.tabelx{
font-family: arial;
font-size: 11px;
text-align: left;
color: #FFFFFF;
border: 0px;
}
#crow{
width : 1000px;
}
.footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 30px;
padding-left : 30px;
color : white;
}
.center {
height : 500px;
background-image: url("face-mu/bg.jpg");
-moz-linear-gradient (top, #cccccc, #1c37da);
}
.login{
float: right;
color: white;
}
.footer, .login {
font-family: arial;
font-size: 10px;
text-align: center;
font-weight: bold;
color: #FFFFFF;
padding: 5px 5px 5px 5px;
}

#logo{
margin-top : 25px;
float : left;
height : 25px;
}

.new-aqua {
width: 75px;
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;
}
.new-aqua:hover {
text-shadow: rgb(255, 255, 255) 0px 0px 5px;
}

Kode HTML: layout-fb.html

<!--
Roisatul Azizah
109533414524
Layout Website dengan CSS
-->

<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to Binnerrs.com, Smile :) Spirit ;) and Share ^_^ </title>
<link href="belajar_html/roisa-binner.ico" rel="icon" type="image/vnd.microsoft.icon">
<link type="text/css" rel="stylesheet" href="create-fb.css">
</head>
<body>
<div class="wrapper">
<div id="crow">
<div id="logo">
 <img src="face-mu/facemu.png">
</div>
<div class="login" align="right">
<table class="tabelx">
  <tr>
    <td>Email</td>
    <td>Password</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="password"></td>
    <td><input type="button" value="Login" class="new-aqua"></td>
  </tr>
  <tbody id="bawah">
  <tr>
    <td><input type="checkbox">Keep me logged in</td>
    <td>Forgot your password?</td>
    <td>&nbsp;</td>
  </tr>
  </tbody>
</table>
</div>
</div>
</div>
<div class="center">
</div>
<div class="footer">
2011 © 109533414524
<br>
Binnerrs.com
</div>
  </body>
</html>

Artikel Lainnya

facebook
    Collegians - Campus

    1 comment:

    askepdb mengatakan...

    mantap bener nih share ilmunya.....thanks ya

    5 Desember 2015 pukul 04.56

    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