Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS (Bagian 2)
Ok untuk memulainya hal pertama yang harus dilakukan adalah:
Wrap
<!DOCTYPE html>
<html>
<head>
<title> BolaCaur.Com</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div class="wrap">
<div class="frame">
<div class="logo">
<img width="80" src="image/logo.png">
<div class="fkanan">
<img width="130" title="Follow Us" src="image/socialfu.png">
<img width="45" title="Login Untuk Diskusi" src="image/login.png">
<img width="40" title="Daftar" src="image/daftar.gif">
</div>
</div>
</div>
Seperti pada bagian homepage wrap atau wrapper saya kembali gunakan memang bagi saya sangat penting unduh sebuah wadah dalam mengabungkan beberapa element
Header
<header>
<div class="header">
</div>
</header>
<div class="Menu">
<li><a href="index.html" style="color:white">Home</a></li>
<li>Liga Inggris</li>
<li>Liga Italia</li>
<li>Liga Spanyol</li>
<li>Liga Champions</li>
<li>Video Bola</li>
<input placeholder="Cari Berita" type="text" name="">
<button type="Submit">Cari</button>
</div>
<div class="Content">
<div class="RowKanan">
<img width="50" title="Lihat Lainya" src="image/arrowkanan.png">
</div>
<div class="RowKiri">
<img width="50" title="Lihat Lainya" src="image/arrowkiri.png">
</div>
<div class="Content1">
<h5> Rabu, 3 Maret 2019
<br>19:00 WIB </br>
<p>Live On SubiTV</p>
</h5>
</div>
<div class="Content2">
<h5> Rabu, 3 Maret 2019
<br>20:00 WIB </br>
<p>Live On CaurTV</p>
</h5>
</div>
<div class="Content3">
<h5> Kamis, 4 Maret 2019
<br>23:00 WIB </br>
<p>Live On SubiTV</p>
</h5>
</div>
<div class="Content4">
<h5> Kamis, 02 Maret 2019
<br>19:00 WIB </br>
<p>Live On SubiTV</p>
</h5>
</div>
</div>
Sama seperti homepage juga header tidak berubah sama sekali agar terlihat lebih simple dan mudah dimengerti untuk para pengunjung websitenya misalnya.
Isi
pada halaman registrasi ya biasanya akan terisi form pendaftran seperti email, password dan data dan data diri si calon pendaftar, dan saya menambahkan social sign seperti facebook, G+ dan Twitter agar terlihat lebih gampang untuk proses register.
<div class="Isi">
<div class="IsiKanan">
<h2>Isi Data Data Dibawah Ini</h2>
<div class="kiri">
<form>
<table cellspacing="30">
<tr>
<td>Username</td>
<td></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td></td>
</tr>
<tr>
<td>Email</td>
<td></td>
</tr>
<tr>
<td>Password</td>
<td></td>
</tr>
<tr>
<td>Ketik Ulang</td>
<td></td>
</tr>
</table>
<div class="pil">
<label>Tanggal Lahir</label>
<select><option value="">Tanggal</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="">Bulan</option>
<option value="Januari=">Januari</option>
<option value="Desember">Desember</option>
</select>
<select>
<option value="">Tahun</option>
<
<option value="1994">1994</option>
</select>
</div>
<p> <label for="pjk">Pilih Jenis Kelamin</label>
<label for="lk">
<input type="radio" id="lk" name="jk" value="L"/>Laki-Laki
</label>
<label for="pr">
<input type="radio" id="" name="jk" value="L"/>Perempuan
</label>
</p>
<p><button type="Submit">Daftar</button>
<u>klik disini</u></a></label></p>
</form>
</div>
<div class="kanan">
<label>Login Dengan</label>
<p><a href></a></p>
<p><a href></p>
<p><a href></a></p>
</div>
</div>
Sidebar
Seperti yang katakan diatas pada sidebar saya menghilangkan login form dan tabel kelasemen, dan seperti biasa dengan tag ol dan li.
div class="IsiKiri"> <div id="TopDiskus"> <h3>Berita Top Diskusi</h3> <ol> <li> </li> <li> </li> </ol> </div> </div> </div>
Footer
Footerpun sama tidak ada perubahan seperti halnya dengan homepage
<div class="Footer">
<div id="Wf">
<div id="fk">
<h3>Firman Taufik © 2017</h3>
</div>
<div id="fs">
<img width="150" src="image/socialfu.png">
</div>
</div>
</div>
</body>
</html>
CSS
Pada css tentunya akan lebih pendek dibandung css hompage saya sengaja dipisahkan css antara hompage dan halaman kedua yaitu register agar tidak terlalu pusing dan panjang.
*, *:after, *:before {box-sizing:border-box;}
a {
text-decoration: none;}
body{
background-color: #0d1013;
height: 1000px;
}
.wrap{
height: 1210px;
width: 1000px;
margin: 0 auto;
padding: 10px 10px 20px 10px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.frame{
background-color: #333435;
height: 50px;
width: 0 auto;
padding: 10px;
margin-bottom: 10px;
box-shadow:0 0 100px rgba(0,0,0,.3);
border-bottom: 1px solid red;
}
.logo{
height: 50px;
width: auto;
}
.logo img{
float: left;
cursor: pointer;
border: 1px solid;
}
.fkanan{
height: 50px;
text-align: center;
margin-top: 0px;
float: right;
}
.fkanan img{
float: right;
margin-right: 10px;
border: none;
}
header{
height: 200px;
width: 0 auto;
background-color: white;
padding: 10px;
border-color: white;
border: 1px solid;
margin-bottom: 10px;
background-image: url(image/logoheader.jpg);
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.Menu {
height: 50px;
margin-bottom: 10px;
background-color: #333435;
padding: 5px;
box-shadow:0 0 100px rgba(0,0,0,.3);
border-bottom: 1px solid red;
}
.Menu li{
list-style: none;
float: left;
margin-left: 5px;
font-size: 22px;
color: white;
cursor: pointer;
height: 40px;
text-align: center;
line-height: 30px;
padding: 5px;
}
.Menu li:hover{
color: orange;
}
.Menu input[type="text"]{
height: 30px;
margin-left: 20px;
font-style: bold;
margin-top: 5px;
}
.Menu button[type="submit"]{
height: 30px;
width: 50px;
cursor: pointer;
background-color: orange;
color: white;
border: none;
}
.Menu button:hover{
background-color: red;
}
.Content{
border: 3px solid;
height: 120px;
float: left;
background-color:#ececec;
width: 100%;
margin-bottom: 10px;
border-color: #333435;
background-image: url(image/rumput.jpg);
}
.Content1{
background-color: red;
width: 200px;
height: 115px;
float: left;
margin-left: 10px;
text-align: center;
cursor: pointer;
background-image: url(image/lfcvsmu.jpg);
background-size: 200px;
color: orange;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.Content1 h5 {
font-size: 12px;
background-image: url(image/bgkata.png);
background-size: 100%;
margin-top: 60px;
}
.Content1:hover{
color: white;
}
.Content2{
background-color: red;
width: 200px;
height: 115px;
float: left;
margin-left: 10px;
text-align: center;
cursor: pointer;
background-image: url(image/acvsinter.jpg);
background-size: 200px;
color: orange;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.Content2 h5 {
font-size: 12px;
background-image: url(image/bgkata.png);
background-size: 100%;
margin-top: 60px;
}
.Content2:hover{
color: white;
}
.Content3{
background-color: red;
width: 200px;
height: 115px;
float: left;
margin-left: 10px;
text-align: center;
cursor: pointer;
background-image: url(image/mcvsch.jpg);
background-size: 200px;
color: orange;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.Content3 h5 {
font-size: 12px;
background-image: url(image/bgkata.png);
background-size: 100%;
margin-top: 60px;
}
.Content3:hover{
color: white;
}
.Content4{
background-color: red;
width: 200px;
height: 115px;
float: left;
margin-left: 10px;
text-align: center;
cursor: pointer;
background-image: url(image/Real-Madrid-Barcelona.jpg);
background-size: 200px;
color: orange;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.Content4 h5 {
font-size: 12px;
background-image: url(image/bgkata.png);
background-size: 100%;
margin-top: 60px;
}
.Content4:hover{
color: white;
}
.Siaran label{
cursor: pointer;
}
.RowKanan{
cursor: pointer;
float: right;
height: 115px;
}
.RowKanan img{
float: right;
cursor: pointer;
margin-top: 30px;
margin-right: 10px;
}
.RowKiri{
float: left;
cursor: pointer;
height: 115px;
}
.RowKiri img{
margin-top: 30px;
margin-left: 10px;
}
.Isi{
width: 100%;
height: auto;
float: left;
margin-bottom: 10px;
box-shadow:0 0 50px rgba(0,0,0,.3);
padding: 10px;
}
.IsiKanan{
margin-top: 20px;
width: 70%;
height:auto;
background-color: #333435;
float: left;
color: orange;
padding: 10px;
}
.IsiKanan h2{
border-bottom: 1px solid;
}
.IsiKanan label{
margin-left: 30px;
}
.IsiKanan input[type="Checkbox"]{
margin-left: 30px;
}
.IsiKanan input[type="radio"]{
border: 1px solid;
}
.IsiKanan input[type="Username"]{
width: 220px;
}
.IsiKanan input[type="name"]{
width: 220px;
}
.IsiKanan input[type="Email"]{
width: 220px;
}
.IsiKanan input[type="Password"]{
width: 220px;
}
.IsiKanan input[type="Checkbox"]{
cursor: pointer;
}
.kiri{
float: left;
}
form{
border: 1px solid;
width:420px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.pil label{
margin-right: 35px;
}
.pil select{
cursor: pointer;
}
label[for="lk"]{
margin-left: auto;
cursor: pointer;
}
label[for="pr"]{
margin-left: auto;
cursor: pointer;
}
.IsiKanan button{
width: 100px;
height: 50px;
margin-left: 50px;
cursor: pointer;
background-color: orange;
color: white;
border: none;
}
.IsiKanan button:hover{
background-color: red;
}
.kanan{
border: 1px solid;
float: right;
width: 210px;
height:250px;
padding: 10px;
}
.kanan label{
border-bottom: 1px solid;
margin-left: 0px
}
.kanan img{
cursor: pointer;
float: left;
margin-top: 20px;
}
.kanan img:hover{
width: 190px;
}
.IsiKiri{
margin-top: 10px;
border: 1px solid;
width: 270px;
height: auto;
float: right;
padding: 10px;
}
#TopDiskus{
height: auto;
width: 100%;
background-color: #333435;
padding: 10px;
color: white;
}
#TopDiskus h3{
margin-left: 20px;
}
#TopDiskus h3:hover{
color: orange;
cursor: pointer;
}
#TopDiskus img{
text-align: center;
position: relative;
}
#TopDiskus ol li:hover{
border-color: orange;
}
#TopDiskus ol li{
border-bottom: 1px solid;
list-style: none;
}
#TopDiskus ol li p:hover{
color: orange;
}
#TopDiskus ol li p label{
color: orange;
margin-left: 5px;
font-size: 13px;
margin-top: 10px;
cursor: pointer;
}
.Footer{
margin-top: 10px;
height: 100px;
width: 100%;
float: left;
box-shadow:0 0 100px rgba(0,0,0,.3);
color: white;
padding: 10px;
}
#Wf{
padding: 10px 50px 10px 50px;
float: left;
height: 80px;
width: 100%;
float: left;
}
#Wf h3{
width: 300px;
}
#Wf h3:hover{
color: orange;
}
#fk h3{
float: left;
color: white;
}
#fs img{
float: right;
margin-top: 5px;
cursor: pointer;
}
#fs img:hover{
width: 200px;
}
Jika tidak salah maka tampilah pada halam kedua yaitu register akan seperti ini
untuk lebih lanjutnya silahkan isi dengan kemauan anda, dan silahkan sedikit masih ada kesalahan penempatan atau penyensuaian tempat dan juga size pada setiap tag, bila kurang dimengeri silahkan ambil hasil contohnya disini, untuk bagian homepagenya disini.
