Cara Menciptakan Website Gosip Bola Sederhana Dengan Html Dan Css (Bagian 2)

Setelah menciptakan halaman hompage yang saya jelaskan disini, saya akan melanjutkanya kembali ibarat yang saya janjikan kita menciptakan halamn keduanya, yaitu halam register sebetulnya isinya hanya ditambahkan sebuah form dan di tambah tambahkan sebuah social media sign. untuk header dan footer kita samakan saja ibarat homepag selain itu sidebar kita menghilangkan form login dan tabel kelasemen saja.

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="Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS (Bagian 2) " src="image/socialfu.png">
<img width="45" title="Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS (Bagian 2) " src="image/login.png">
<img width="40" title="Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS (Bagian 2) " src="image/daftar.gif">
</div>
</div>
</div>

Seperti pada bab homepage wrap atau wrapper saya kembali gunakan memang bagi saya sangat penting unduh sebuah wadah dalam mengabungkan beberapa element

Header

</div>

</header>

<li>Liga Inggris</li>

<li>Liga Italia</li>

<li>Liga Spanyol</li>

<li>Liga Champions</li>

<li>Video Bola</li>

</div>

</div>

</div>

<h5> Rabu, 3 Maret 2019

<p>Live On SubiTV</p>

</h5>

</div>

<h5> Rabu, 3 Maret 2019

<p>Live On CaurTV</p>

</h5>

</div>

<h5> Kamis, 4 Maret 2019

<p>Live On SubiTV</p>

</h5>

</div>

<h5> Kamis, 02 Maret 2019

<p>Live On SubiTV</p>

</h5>

</div>

Sama ibarat homepage juga header tidak berubah sama sekali semoga terlihat lebih simple dan simpel dimengerti untuk para pengunjung websitenya misalnya.

Isi

pada halaman pendaftaran ya biasanya akan terisi form pendaftran ibarat email, password dan data dan data diri si calon pendaftar, dan saya menambahkan social sign ibarat facebook, G+ dan Twitter semoga terlihat lebih simpel untuk proses register.

<h2>Isi Data Data Dibawah Ini</h2>

<form>

<tr>

<td>Username</td>

</tr>

<tr>

<td>Nama Lengkap</td>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td>Password</td>

</tr>

<tr>

<td>Ketik Ulang</td>

</tr>

</table>

<label>Tanggal Lahir</label>

<select><option value="">Tanggal</option>

</select>

<option value="">Bulan</option>

<option value="Januari=">Januari</option>

<option value="Desember">Desember</option>

</select>

<option value="">Tahun</option>

</select>

</div>

<p> <label for="pjk">Pilih Jenis Kelamin</label>

<input type="radio" id="lk" name="jk" value="L"/>Laki-Laki

</label>

<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>

<label>Login Dengan</label>

</div>

Sidebar

Seperti yang katakan diatas pada sidebar saya menghilangkan login form dan tabel kelasemen, dan ibarat 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 ibarat halnya dengan homepage

</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 semoga 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;

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;

}

.Content1{

background-color: red;

width: 200px;

height: 115px;

float: left;

margin-left: 10px;

text-align: center;

cursor: pointer;

background-size: 200px;

color: orange;

box-shadow:0 0 100px rgba(0,0,0,.3);

}

.Content1 h5 {

font-size: 12px;

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-size: 200px;

color: orange;

box-shadow:0 0 100px rgba(0,0,0,.3);

}

.Content2 h5 {

font-size: 12px;

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-size: 200px;

color: orange;

box-shadow:0 0 100px rgba(0,0,0,.3);

}

.Content3 h5 {

font-size: 12px;

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-size: 200px;

color: orange;

box-shadow:0 0 100px rgba(0,0,0,.3);

}

.Content4 h5 {

font-size: 12px;

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 ibarat ini

untuk lebih lanjutnya silahkan isi dengan kemauan anda, dan silahkan sedikit masih ada kesalahan penempatan atau penyensuaian daerah dan juga size pada setiap tag, bila kurang dimengeri silahkan ambil hasil contohnya disini.

Ilmu Andoid

Cara Menciptakan Website Gosip Bola Sederhana Dengan Html Dan Css (Bagian 2)

0 Response to "Cara Menciptakan Website Gosip Bola Sederhana Dengan Html Dan Css (Bagian 2)"