Walau Terlihat Simple , Mungkin Itu Akan Berguna Bagi Yang Baru Belajar Dunia Web :D, Langsung Saja Lah.
1. Kita Ketik Dulu Kerangka HTML Nya Seperti Biasa.
2. Lalu Link Kan CSS Nya Bootstrap Dan Style.css Kita
<html>
<head>
<title>Mainan Iseng</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<head>
<title></title>
</head>
<body>
</body>
</html>
2. Lalu Link Kan CSS Nya Bootstrap Dan Style.css Kita
<html>
<head>
<title>Mainan Iseng</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
3. Lalu Ketik Atau Copy Kode Nya Sebagai Berikut ;
<header>
<div id="garis">
<p>| <a href="#">Daftar Dulu</a></p>
</div>
<div id="masuk">
<form class="form-inline">
<input type="text" class="input-medium" placeholder="Email Mu">
<input type="password" class="input-medium" placeholder="Password">
<button type="submit" class="btn btn-info">Masuk</button>
</form>
</div>
<div id="promosi">
<a href="http://website-inspirasi.blogspot.com" title="Web Design Tutorial"><img src="code2.png"></a>
<p>#Share Your Website Design</p>
</div>
</header>
<div id="garis">
<p>| <a href="#">Daftar Dulu</a></p>
</div>
<div id="masuk">
<form class="form-inline">
<input type="text" class="input-medium" placeholder="Email Mu">
<input type="password" class="input-medium" placeholder="Password">
<button type="submit" class="btn btn-info">Masuk</button>
</form>
</div>
<div id="promosi">
<a href="http://website-inspirasi.blogspot.com" title="Web Design Tutorial"><img src="code2.png"></a>
<p>#Share Your Website Design</p>
</div>
</header>
4. Kalau Sudah Lalu Kita Buat CSS Nya Ketik Atau Copy Kode Nya Di Teks Editor Mu :)
body{
margin: 0;
padding: 0;
background-color: whitesmoke;
}
header{
background-color: #F19075;
width: 100%;
height: 51px;
float: right;
}
#masuk{
float: right;
margin-right: 10px;
margin-top: 10px;
}
#garis p{
font-size: 35px;
float: right;
margin-right: 90px;
margin-top: 11px;
color: #666;
}
#garis a{
font-size: 15px;
float: right;
margin-right: -90px;
margin-top: -15px;
padding: 0 10px;
color: #333333;
}
#promosi img{
width: 50px;
height: 50px;
margin-left: 10px;
}
#promosi p{
margin-left: 70px;
margin-top: -35px;
font-family: lastwaerk regular;
color: #333333;
font-size: 25px;
}
Nah Maka Akan terlihat Seperti Ini Yang Sebelah Kiri Hiraukan Saja.margin: 0;
padding: 0;
background-color: whitesmoke;
}
header{
background-color: #F19075;
width: 100%;
height: 51px;
float: right;
}
#masuk{
float: right;
margin-right: 10px;
margin-top: 10px;
}
#garis p{
font-size: 35px;
float: right;
margin-right: 90px;
margin-top: 11px;
color: #666;
}
#garis a{
font-size: 15px;
float: right;
margin-right: -90px;
margin-top: -15px;
padding: 0 10px;
color: #333333;
}
#promosi img{
width: 50px;
height: 50px;
margin-left: 10px;
}
#promosi p{
margin-left: 70px;
margin-top: -35px;
font-family: lastwaerk regular;
color: #333333;
font-size: 25px;
}
Gimana Walau Terlihat Jelek Tapi Berguna Kan Bagi kalian Yang Baru Belajar :P.
" Agar Kalian Lebih Mudah Untuk Mengganti Nya Silahkan Download Filenya Disini " Atau " Bisa Di Via JSFiddle Disini "
Written by Nulled
Blogger Muda Yang Masih Berstatus Pelajar, Yang Berkecimpung Di Dunia IT Semenjak Tahun 2013 Dan Ingin Berbagi Ilmu Pengetahuan Tentang Programming Web Design,Desktop Application, Tips Blogging, Google Adsense, Dan Internet Marketing. Temukan Celotehan Saya Di Twitter @Anaksmkti
Keren Gan Ijin Minta file nya :D
ReplyDeleteYoi Gan Jangan Sungkan-sungkan datang kesini
Delete