BOOTSTRAP
1.
Gambar Web Acuan
Gambar Struktur
2.
Gambar Hasil Pembuatan Web
3.
Script
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="css/bootstrap.min.css">
</head>
<body>
<!--header-->
<div class="row container-fluid
bg-primary">
<div class="col-md-4"
style="left:100px">
<img class="img"
src="Facebook_New_Logo_(2015)svg.png" alt=""</img>
</div>
<div
class="col-md-2"></div>
<div
class="col-md-2"><br>
<label
for="usr">Email atau Telepon</label><br>
<input type="text"
style="color:black" placeholder="Masukkan
Email"><br>
</div>
<div
class="col-md-4"><br>
<label
for="pwd">Password</label><br>
<input
type="password" style="color:black"
placeholder="Masukkan password">
<button
type="button" class="btn btn-primary
btn-xs">Masuk</button><br>
<a href="#"
class="bg-primary">Lupa akun?</a>
</div>
</div>
<!--Text
Gambar Konten-->
<div class="row container-fluid
bg-info ">
<div
class="col-md-1"></div>
<div class="col-md-5"
style="color:darkblue;
font-size:20px;"><br><br><b>Facebook membantu Anda
terhubung dan<br>berbagi dengan orang-orang dalam
kehidupan<br>Anda</b><br>
<img
class="img" src="pyNVUg5EM0j.png" alt=""
height="195" width="537"></img>
</div>
<div class="col-md-6">
<div style="color:black;
font-size:30px"><br><b>Mendaftar</b></div>
<div
style="font-size:20px">Gratis, sampai kapan
pun.<br><br></div>
<div style="color:black;
font-size:20px">
<input type="text"
style="color:black" placeholder="Nama depan">
<input type="text"
style="color:black" placeholder="Nama
belakang"><br><br>
<input type="text"
style="width:500px; color:black" placeholder="Nomor seluler atau
email"><br><br>
<input
type="text" style="width:500px; color:black"
placeholder="Masukkan ulang nomor seluler atau
email"><br><br>
<input type="text"
style="width:500px; color:black" placeholder="Kata sandi
baru"><br><br>
</div>
<div
class="form-group">
<label for="sel1"
style="font-size:20px">Tanggal Lahir</label><br>
<select class="form-inline"
id="sel1" style="height:30px; width:80px">
<option>Tanggal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select class="form-inline"
id="sel1" style="height:30px; width:80px">
<option>Bulan</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>Mei</option>
<option>Jun</option>
<option>Jul</option>
<option>Agu</option>
<option>Sep</option>
<option>Okt</option>
<option>Nov</option>
<option>Des</option>
</select>
<select class="form-inline"
id="sel1" style="height:30px; width:80px">
<option>Tahun</option>
<option>2016</option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
</select>
<a href="#"
style="font-size:10px">Mengapa saya harus memberikan tanggal lahir
saya?</a>
</div>
<div class="radio"
style="font-size:20px">
<label><input type="radio"
name="optradio">Perempuan</label>
<label><input type="radio"
name="optradio">Laki-laki</label>
</div>
<div class="container"
style="font-size:10px">
<p>Dengan mengeklik
Mendaftar, Anda menyetujui
<a
href="#">Ketentuan</a>
<p>kami dan bahwa Anda
telah membaca
<a
href="#">Kebijakan Data</a>
<p>kami, termasuk
<a
href="#">Penggunaan Kuki.</a>
</p>
</p>
</p>
</div>
<div class="container">
<button type="button" class="btn btn-success"
style="font-size:20px;
width:150px">Mendaftar</button><br>
<label
style="color:gray">_____________________________________________________________</label>
</div>
<div class="form-group"
style="font-size:15px">
<a href="#">Buat
Halaman </a>
<label>untuk selebriti, grup
musik, atau bisnis.</label><br><br>
</div>
</div>
</div>
<!--footer-->
<div class="container">
<ul class="pagination
text-center">
<li
class="active"><a href="#">Bahasa
Indonesia</a></li>
<li><a
href="#">English (UK)</a></li>
<li><a
href="#">Bahasa Jawa</a></li>
<li><a
href="#">Bahasa Melayu</a></li>
<li><a
href="#">日本語</a></li>
<li><a
href="#">العربية</a></li>
<li><a
href="#">Français (France)</a></li>
<li><a
href="#">Español</a></li>
<li><a
href="#">한국어</a></li>
<li><a
href="#">Português (Brasil)</a></li>
<li><a
href="#">Deutsch</a></li><br>
</ul>
</div>
<div class="container">
<a href="#">Kuki</a>
<label
style="color:blue">◀ Kami sudah
memperbarui kebijakan kami.</label>
<a href="#"
style="text-decoration:underline">Pelajari
Selengkapnya.</a><br>
</div>
<div class="container">
<ul class="pagination
text-center">
<li><a
href="#">Mendaftar</a></li>
<li><a
href="#">Masuk</a></li>
<li><a
href="#">Messenger</a></li>
<li><a
href="#">Facebook Lite</a></li>
<li><a
href="#">Seluler</a></li>
<li><a
href="#">Cari Teman</a></li>
<li><a
href="#">Lencana</a></li>
<li><a
href="#">Orang</a></li>
<li><a
href="#">Halaman</a></li>
<li><a
href="#">Tempat</a></li>
<li><a
href="#">Game</a></li>
<li><a
href="#">Lokasi</a></li>
<li><a
href="#">Selebriti</a></li>
<li><a
href="#">Grup</a></li>
<li><a href="#">Tentang</a></li>
<li><a
href="#">Buat Iklan</a></li>
<li><a
href="#">Buat Halaman</a></li>
<li><a
href="#">Pengembang</a></li>
<li><a
href="#">Karier</a></li>
<li><a
href="#">Privasi</a></li>
<li><a
href="#">Pilihan Iklan</a></li>
<li><a
href="#">Ketentuan</a></li>
<li><a
href="#">Bantuan</a></li>
</ul>
<p>Facebook@2016</p>
</div>
</body>
</html>
Penjelasan
Header
Dalam header
saya memilih class grid dengan pembagian yang berbeda yaitu 4 kolom (4, 2, 2, 4)
dengan background primary. Pada kolom pertama saya membuat memasukkan gambar
facebook dengan gaya sisi kiri 100px.
Pada kolom
kedua saya membuat kolom tersebut kosong.
Pada kolom ketiga
terdapat label dan input dengan tipe teks untuk memasukan email dengan gaya
warna teks hitam dan terdapat placeholder dengan nilai “Masukkan email”.
Pada kolom keempat
sama halnya dengan kolom kedua, hanya saja pada kolom ini input tipenya berupa
password dan terdapat button primary dengan ukuran paling kecil, juga terdapat
link dengan class background primary.
Konten
Pada bagian
konten ini saya juga memilih grid dengan pembagian yang berbeda yaitu 3 kolom
(1,5,6) dengan background info. Pada
kolom pertama saya membuat kolom tersebut kosong. Pada kolom kedua saya membuat
teks dengan gaya warna teks biru gelap, berukuran 20px. Terdapat juga gambar
dengan ketinggian 195 dan kelebaran 537.
Pada kolom ketiga
saya juga membuat teks “mendaftar” dengan gaya teks berwarna hitam, berukuran
30px dan teks “Gratis, sampai kapan pun.” berukuran 20px. Pada kolom ini
terdapat juga input bertipe teks dengan gaya warna teks hitam dan kelebaran
menu input 500px.
Form grup yang
berisi label berukuran 20px dan select
dengan class form inline dengan ketinggian 30px dan kelebaran 80px. Dalam
select berisi option dengan list down yang tertulis “tanggal”, “bulan” dan
“tahun”. Terdapat juga link dengan nilai “Mengapa saya harus memberikan tanggal
lahir saya?” berukuran 10px.
Radio button
yang berisi label dan input betipe radio yang berukuran 20px. Terdapat juga class container yang berukuran
20px yang berisi teks dan link.
Button yang
bernilai “Mendaftar” dengan gaya btn-success dan teks berukuran 20px dengan
kelebaran 150px. Kemudian disertai label teks berwarna abu-abu.
Form grup
dengan huruf berukuran 15px verisi link
dan label.
Footer
Dalam footer saya memanggil class
container dengan unordered list class pagination yang berisi list item aktif
dan tidak aktif, keduanya mempunyai link. Terdapat juga class container yang
berisi link dengan gaya text-decoration bergaris bawah dan label berwarna biru,
juga sebuah baris paragraph.
Tidak ada komentar:
Posting Komentar