Pada kesempatan ini aku akan mencoba memberitahu bagaimana cara menciptakan sebuah website info khusunya info bola tetapi aku tidak menjelaskan back end melainkan hanya menciptakan sebuah front end dari sebuah website yaitu hanya HTML+CSS ada 2 halaman pada pembuatan website ini aku tetapi pada artikel ini aku hanya akan menjelaskan bab homepagenya unutk bab keduanya silahkan lihat disini caranya memang sanggup dibilang sulit sulit gampang, alasannya yakni pada pembuatan web aku harus memperhatikan pada class class dan juga penempatanya. ok untuk itu mari kita simak pada souce code dibawah ini:
Wrapper
<!DOCTYPE html>
<html>
<head>
<title> BolaCaur.Com</title>
<link rel="stylesheet" type="text/css" href="style.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" src="image/socialfu.png">
<img width="45" title="Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS" src="image/login.png">
<img width="40" title="Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS" src="image/daftar.gif">
</div>
</div>
</div>
Wrapper atau aku lebih suka untuk menyingkatnya lagi menajri wrap sama halnya dengan cara menciptakan web web lain aku menggunakanya untuk wadah dari sebuah body dan footer biar untuk memeper praktis penyesuaianya
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="Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS" src="image/arrowkanan.png">
</div>
<div class="RowKiri">
<img width="50" title="Cara Membuat Website Berita Bola Sederhana dengan HTML dan CSS" 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>
Untuk Header di sini aku disini aku mencoba menciptakan sebuah kegiatan yang sanggup di scrool ke kiri atau kekanan biar sanggup memuat lebih banyak konten tujuanya.
Isi
<div class="Isi">
<div class="BBerita">
<div class="Berita1">
</div>
<div class="IsiKanan">
<div class="LigaInggris">
<a href style="color:white"> <h2>Liga Inggris</h2> </a>
</div>
<button type="Submit">Berita Lainya....</button>
</div>
<div class="LigaItalia">
</div>
<button type="Submit">Berita Lainya....</button>
</div>
<div class="LigaSpanyol">
</div>
<button type="Submit">Berita Lainya....</button>
</div>
<div class="LigaChampions">
</div>
</div>
Isi nantinya kau sanggup isi dengan info warta apa yang kau mau.
Sidebar
<div class="IsiKiri">
<div id="Login">
<label>Email</label>
<input placeholder="Masukan Email" type="Email" name="">
<p><label>Password</label>
<input placeholder="Masukan Password" type="Password" name="">
</p>
<button type="Daftar"><a href="regis.html" style="color:white">Daftar</a></button>
<button type="Submit">Login</a></button>
<h5>Ayo Gabung Dengan Bola Caur.com
atau Bila Kamu Lupa Password
klik
<a href="#" style="color:orange"> disini </a>
</h5>
</div>
<div id="Kelasemen">
<h3>Kelasemen</h3>
</table>
</div>
<div id="Populer">
<h3>Berita Populer</h3>
<ol>
</ol>
</div>
</div>
</div>
Untuk sidebar sendiri aku mencantumkan sebuah form untuk login dan entry/postingan terpopuler serta kelasemen peringkat club yang sanggup dipilih, kau sanggup sesuaikan liga apa yang kau mau pada kelasemen dengan tag ol li dan juga entry terkenal pun sama dengan ol li.
Footer
<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>
</div>
</body>
</html>
Footer atau bab paling bawah aku buatkan terlihat lebih simple dan hanya memakai icon sosial media dan copyright nama aku dan tahun pembuatan.
CSS
*, *:after, *:before {box-sizing:border-box;}
a {
text-decoration: none;}
body{
background-color: #0d1013;
height: 1000px;
}
.wrap{
height: 2590px;
width: 1000px;
margin: 0 auto;
padding: 10px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.frame{
box-shadow:0 0 100px rgba(0,0,0,.3);
height: 50px;
width: 0 auto;
padding: 10px;
margin-bottom: 10px;
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;
padding: 10px;
}
.Video{
float: right;
background-color: black;
height: auto;
padding: 10px 10px 10px 10px;
margin-top: 10px;
cursor: pointer;
}
.Video h3{
color: white;
cursor: pointer;
}
.Video h3:hover{
color: orange;
}
.IsiKanan{
float: left;
height: auto;
width: 70%;
padding: 10px;
margin-top: 5px;
}
.LigaInggris{
height: 800px;
width: 49%;
float: left;
padding: 10px;
color: white;
text-underline-position: none;
text-decoration: none;
border-color: white;
border-bottom: 1px solid;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.LigaInggris h2{
text-decoration: none;
}
.LigaInggris h2:hover{
color: orange;
cursor: pointer;
}
.LigaInggris button{
background-color: orange;
margin-top: 20px;
cursor: pointer;
border: none;
float: right;
height: 30px;
}
.LigaInggris button:hover{
background-color: red;
}
#LigaInggris1{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/berita1.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
#LigaInggris1 h6{
background-image: url(image/bgkata.png);
margin-top: 95px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaInggris1 h6:hover{
color: orange;
}
#LigaInggris2{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/22735b23-9d2b-4e9b-971c-217c212c32ec_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaInggris2 h6{
background-image: url(image/bgkata.png);
margin-top: 95px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaInggris2 h6:hover{
color: orange;
}
#LigaInggris3{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/66e9659d-95f3-4898-9147-243899344486_43.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaInggris3 h6{
background-image: url(image/bgkata.png);
margin-top: 80px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaInggris3 h6:hover{
color: orange;
}
#LigaInggris4{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/cbbdfafd-cb9b-4f59-9a81-2e23708127c1_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaInggris4 h6{
background-image: url(image/bgkata.png);
margin-top: 95px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaInggris4 h6:hover{
color: orange;
}
.LigaItalia{
height: 800px;
width: 49%;
float: right;
padding: 10px;
color: white;
border-color: white;
border-bottom: 1px solid;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.LigaItalia h2:hover{
color: orange;
cursor: pointer;
}
.LigaItalia button{
background-color: orange;
margin-top: 20px;
cursor: pointer;
border: none;
float: right;
height: 30px;
}
.LigaItalia button:hover{
background-color: red;
}
#LigaItalia1{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/53631b00-f2d0-45b5-9f84-4b3a597cbf3a_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
#LigaItalia1 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaItalia1 h6:hover{
color: orange;
}
#LigaItalia2{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/dfd86c19-c5d3-4199-9c9c-dddd1137d868_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaItalia2 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaItalia2 h6:hover{
color: orange;
}
#LigaItalia3{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/c9b0b3ea-188f-4e18-aadc-d4156a5ae4cd_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaItalia3 h6{
background-image: url(image/bgkata.png);
margin-top: 80px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaItalia3 h6:hover{
color: orange;
}
#LigaItalia4{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/ed8ac509-f7cd-43d5-93c6-43ec53244168_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaItalia4 h6{
background-image: url(image/bgkata.png);
margin-top: 80px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaItalia4 h6:hover{
color: orange;
}
.LigaSpanyol{
margin-top: 20px;
height: 800px;
width: 49%;
float: left;
padding: 10px;
color: white;
text-underline-position: none;
text-decoration: none;
box-shadow:0 0 100px rgba(0,0,0,.3);
border-color: white;
border-bottom: 1px solid;
}
.LigaSpanyol h2{
text-decoration: none;
}
.LigaSpanyol h2:hover{
color: orange;
cursor: pointer;
}
.LigaSpanyol button{
background-color: orange;
margin-top: 20px;
cursor: pointer;
border: none;
float: right;
height: 30px;
}
.LigaSpanyol button:hover{
background-color: red;
}
#LigaSpanyol1{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/17055cbb-a215-4e83-9f3f-649cad206a96_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
#LigaSpanyol1 h6{
background-image: url(image/bgkata.png);
margin-top: 70px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaSpanyol1 h6:hover{
color: orange;
}
#LigaSpanyol2{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/03f8d99e-8884-4cce-b97f-1dc42ed4912e_43.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaSpanyol2 h6{
background-image: url(image/bgkata.png);
margin-top: 85px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaSpanyol2 h6:hover{
color: orange;
}
#LigaSpanyol3{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/fe7693a1-e7c9-4074-b801-31cf72212c27_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaSpanyol3 h6{
background-image: url(image/bgkata.png);
margin-top: 85px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaSpanyol3 h6:hover{
color: orange;
}
#LigaSpanyol4{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/feafa7b3-3b13-4433-b03a-32b223cb48c5_916.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaSpanyol4 h6{
background-image: url(image/bgkata.png);
margin-top: 85px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
}
#LigaSpanyol4 h6:hover{
color: orange;
}
.LigaChampions{
margin-top: 20px;
height: 800px;
width: 49%;
box-shadow:0 0 100px rgba(0,0,0,.3);
float: right;
padding: 10px;
color: white;
border-color: white;
border-bottom: 1px solid;
}
.LigaChampions h2:hover{
color: orange;
cursor: pointer;
}
.LigaChampions button{
background-color: orange;
margin-top: 20px;
cursor: pointer;
border: none;
float: right;
height: 30px;
}
.LigaChampions button:hover{
background-color: red;
}
#LigaChampions1{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/32d1ac61-ce45-4359-8375-99398d5ec7c3_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
#LigaChampions1 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaChampions1 h6:hover{
color: orange;
}
#LigaChampions2{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/6c3d6d2e-0ffb-4b40-9a99-257e745238dc_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaChampions2 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaChampions2 h6:hover{
color: orange;
}
#LigaChampions3{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/4fc1b12d-1d03-4e40-aa0a-c6d9abd82599_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaChampions3 h6{
background-image: url(image/bgkata.png);
margin-top: 75px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaChampions3 h6:hover{
color: orange;
}
#LigaChampions4{
width: 100%;
height: 150px;
float: left;
border: 1px solid;
background-image: url(image/84eb5389-ddbe-44f2-b3b4-6fba5149f500_169.jpg);
color: black;
background-size: 300px;
box-shadow:0 0 100px rgba(0,0,0,.3);
margin-top: 20px;
}
#LigaChampions4 h6{
background-image: url(image/bgkata.png);
margin-top: 90px;
padding: 5px;
color: white;
height: 55px;
background-size: 1px;
float: left;
font-size: 10px;
}
#LigaChampions4 h6:hover{
color: orange;
}
.BBerita{
height: 1000;
width: 55%;
float: left; ;
padding: 10px;
box-shadow:0 0 100px rgba(0,0,0,.3);
}
.Berita1{
float: left;
border:1px solid;
height: 300px;
width: 500px;
cursor: pointer;
margin-left: 3px;
box-shadow:0 0 100px rgba(0,0,0,.3);
background: url(image/berita1.jpg);
background-size: 500px;
}
.Berita1 h2{
margin-top: 210px;
cursor: pointer;
height: 90px;
color: white;
padding: 10px;
float: left;
background: url(image/bgkata.png);
}
.Berita1 h2:hover{
color: orange;
}
.Berita1 h2 p{
color: #ececec;
font-size: 15px;
}
.Berita1 h2 p:hover{
color: white;
}
.IsiKiri{
float: right;
height: auto;
width: 28%;
margin-left: 10px;
margin-top: 20px;
padding: 10px;
border-color: white;
}
#Login{
background-color:#333435;
height: 200px;
width: 100%;
margin-bottom: 10px;
padding: 30px 10px 10px 10px;
color: white;
border-bottom: 1px solid;
border-color: white;
}
#Login input{
width: 150px;
}
#Login input[type="Email"]{
margin-left: 35px;
}
#Login input[type="Password"]{
margin-left: 12px;
}
#Login button{
float: right;
}
#Login button[type="Submit"]{
float: right;
cursor: pointer;
background-color: orange;
border: none;
height: 30px;
width: 60px;
color: white;
margin-right: 10px;
}
#Login button:hover{
background-color: red;
}
#Login button[type="Daftar"]{
cursor: pointer;
background-color: black;
border: none;
height: 30px;
width: 60px;
color: white;
}
#Login h5{
margin-top: 50px;
}
#Kelasemen{
background-color:#333435;
margin-bottom: 20px;
height: auto;
padding:10px;
margin-top: 20px;
}
#Kelasemen h3{
color: white;
margin-left: 20px;
float: left;
cursor: pointer;
}
#Kelasemen h3:hover{
color: orange;
}
#Pilke{
float: left;
margin-top: 5px;
margin-left: 10px;
cursor: pointer;
width: 100px;
float: left;
}
table{
border: 1px solid;
color: white;
background-color: orange;
margin-left: 3px;
font-size: 10px;
line-height: 2px;
margin-bottom: 20px;
}
table:hover{
color: black;
}
#Populer{
width: 100%;
height: auto;
border: 1px solid;
background-color:#333435;
float: right;
padding: 10px;
}
#Populer h3{
color: white;
margin-left: 20px;
cursor: pointer;
float: left;
}
#Populer h3:hover{
color: orange;
}
#Populer ol li{
color: white;
float: left;
margin-bottom: 0px;
}
#Populer img{
float: left;
}
#Populer ol li p{
float: left;
}
#Populer ol li p:hover{
color: orange;
}
.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;
}
#fs img{
float: right;
margin-top: 5px;
}
#fs img:hover{
width: 200px;
}
Pada CSS sendiri memang cukup panjang alasannya yakni begitu banyaknya class
Untuk hasil kesannya mungkin menyerupai ini tetapi ya sesuainakn saja sesuai kemauan anda sendiri
Nah untuk membuatnya kau tinggal copas saja coding coding diatas silahkan pahami dan yang perlu di ketahui awas penempatan kata tag <div> atau </div> hiperbola atau berkurang, tapi kalau kalau kurang paham juga aku kasih misalnya silahkan ambil disini, jangan lupa untuk kelanjutan halaman keduanya disini.
0 Response to "Cara Menciptakan Website Informasi Bola Sederhana Dengan Html Dan Css"