Assalamualaikum temen-temen...
Hai gengs yoo balik lagi dengan si mimin yak, Jangan bosen ya sama mimin hehe, Oke tanpa basa basi kali ini kita akan membahas form di Css,Sebenernya mimin agak sedih karena ini pertemuan terakhirr kita aaaaa, Maksudnya pembahasan terakhir tentang Css ya gengs jangan salah paham dl wkwkw... Oke ini dia yang akan dibahas:> Eksternal Css on Form
> Eksternal Css on Button
> Button Hover
> Css on Radio button
> Part Bonus
> Quizz
Oke yang pertama ada
1. Ekternal Css on form
Disini mimin memakai teks area,Apa itu Text Area ? text area adalah area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text atau kode script dalam bentuk dan format text.Biasanya text area dipakai untuk menyimpan kode HTML yang tidak bisa di tulis langsung ke dalam postingan di blog. Jadi fungsi dari text area ini kurang lebih untuk memudahkan pengunjung mengcopy seluruh isi text. > Contoh Pertama
Ini dia contoh kodingan Html nya :
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Pada Form text area</title>
<link rel="stylesheet" href="cssonform.css">
</head>
<body>
<form action="" name="form1" method="post">
<table>
<tr>
<td width="50">Nama</td>
<td width="175">
<textarea name="textarea" cols="50"></textarea>
</td>
</tr>
<tr>
<td width="50">Pesan</td>
<td width="175">
<textarea name="textarea" cols="50" rows="14"></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Pengaturan Pada Form text area</title>
<link rel="stylesheet" href="cssonform.css">
</head>
<body>
<form action="" name="form1" method="post">
<table>
<tr>
<td width="50">Nama</td>
<td width="175">
<textarea name="textarea" cols="50"></textarea>
</td>
</tr>
<tr>
<td width="50">Pesan</td>
<td width="175">
<textarea name="textarea" cols="50" rows="14"></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
Dan ini Css nya gengs jangan lupa ya:
form{
border: 2px solid yellow;
width: 70%;
margin-left: 0;
background-color: green;
color: pink;
font-family: Arial;
}
body{
background-color: salmon;
}
border: 2px solid yellow;
width: 70%;
margin-left: 0;
background-color: green;
color: pink;
font-family: Arial;
}
body{
background-color: salmon;
}
Hasilnya akan menjadi jeng jeng :
> Contoh ke dua
Sebenernya sih ga terlalu beda ya guys sama yang contoh satu, bedanya cuman di settingan font dan juga warna gengs. Untuk background ini dia atributnya..
Ini dia kode html nya:
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Pada Form text area</title>
<link rel="stylesheet" href="cssonform2.css">
</head>
<body>
<form action="" name="form1" method="post">
<table bodercolor=1>
<tr>
<td width="50">Nama</td>
<td width="175">
<textarea name="textarea" cols="50"></textarea>
</td>
</tr>
<tr>
<td width="50">Pesan</td>
<td width="175">
<textarea name="textarea" cols="50" rows="14"></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Pengaturan Pada Form text area</title>
<link rel="stylesheet" href="cssonform2.css">
</head>
<body>
<form action="" name="form1" method="post">
<table bodercolor=1>
<tr>
<td width="50">Nama</td>
<td width="175">
<textarea name="textarea" cols="50"></textarea>
</td>
</tr>
<tr>
<td width="50">Pesan</td>
<td width="175">
<textarea name="textarea" cols="50" rows="14"></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
Ini Css nya:
textarea{
color: yellow;
background-color: blue;
font-family: arial;
}
body{
background-color: pink;
color: red;
font-family: impact;
}
color: yellow;
background-color: blue;
font-family: arial;
}
body{
background-color: pink;
color: red;
font-family: impact;
}
Hasilnya akan jadi:
> Contoh ke tiga
Nah disini sudah mulai menggunakan boder ini dia atributnya:
Properti border-style digunakan untuk memilih tipe border yang akan ditampilkan. Ada banyak tipe border pada CSS seperti titik dll. Berikut ini penjelasannya.
dotted – untuk membuat border titik
dashed – untuk membuat border garis
solid – untuk membuat border solid (garis tebal)
double – untuk membuat border double
groove – untuk membuat border grooved 3D. Efek ini terjadi ketika ada nilai border-color.
ridge – untuk membuat border 3D ridge. Efek ini juga terjadi ketika ada nilai border-color.
inset – untuk membuat 3D border masuk kedalam
outset – untuk membuat 3D border
none – untuk membuat tidak ada border
hidden – untuk membuat border tersembunyi
dashed – untuk membuat border garis
solid – untuk membuat border solid (garis tebal)
double – untuk membuat border double
groove – untuk membuat border grooved 3D. Efek ini terjadi ketika ada nilai border-color.
ridge – untuk membuat border 3D ridge. Efek ini juga terjadi ketika ada nilai border-color.
inset – untuk membuat 3D border masuk kedalam
outset – untuk membuat 3D border
none – untuk membuat tidak ada border
hidden – untuk membuat border tersembunyi
Untuk properti border-style ini dapat mempunyai satu sampai dengan empat nilai (top border, right border, bottom border, dan left border).
Ini dia codingannya:
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Pada Form text area</title>
<link rel="stylesheet" href="cssonform3.css">
</head>
<body>
<form action="" name="form1" method="post">
<table bodercolor=1>
<tr>
<td width="58">Nama</td>
<td width="230">
<input type="text" name="nama">
</td>
</tr>
<tr>
<td width="58">Pesan</td>
<td width="230">
<input type="text" name="alamat">
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Pengaturan Pada Form text area</title>
<link rel="stylesheet" href="cssonform3.css">
</head>
<body>
<form action="" name="form1" method="post">
<table bodercolor=1>
<tr>
<td width="58">Nama</td>
<td width="230">
<input type="text" name="nama">
</td>
</tr>
<tr>
<td width="58">Pesan</td>
<td width="230">
<input type="text" name="alamat">
</td>
</tr>
</table>
</form>
</body>
</html>
Ini Css nya:
input{
color: red;
background: yellow;
border-color: green;
border-bottom-color: black;
border-top: 0px solid;
border-bottom: 2px dotted;
border-left: 0px solid;
border-right: 0px solid;
font-family: consolas;
font-size: 11px;
}
color: red;
background: yellow;
border-color: green;
border-bottom-color: black;
border-top: 0px solid;
border-bottom: 2px dotted;
border-left: 0px solid;
border-right: 0px solid;
font-family: consolas;
font-size: 11px;
}
Hasilnya akan jadi:
2. Eksternal Css on Button
Ini dia kodingannya:
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Form tombol</title>
<link rel="stylesheet" href="cssbutton.css">
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td width="58">Nama</td>
<td width="230">:<input type="text" name="nama"></td>
</tr>
<tr>
<td width="58">Alamat</td>
<td width="230">:<input type="text" name="alamat"></td>
</tr>
<tr>
<td></td>
<td>
<input class="button" type="submit" name="submit" value="simpan">
<input class="button" type="submit" name="submit2" value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Pengaturan Form tombol</title>
<link rel="stylesheet" href="cssbutton.css">
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td width="58">Nama</td>
<td width="230">:<input type="text" name="nama"></td>
</tr>
<tr>
<td width="58">Alamat</td>
<td width="230">:<input type="text" name="alamat"></td>
</tr>
<tr>
<td></td>
<td>
<input class="button" type="submit" name="submit" value="simpan">
<input class="button" type="submit" name="submit2" value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>
Dan ini dia css nya:
input.button{
color: salmon;
background: lightblue;
border-color: white;
border-bottom-color: black;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-left: 1px dotted;
border-right: 1px dotted;
font-family: tw cen mt;
font-size: 12px;
}
body{
background: lightcoral;
}
color: salmon;
background: lightblue;
border-color: white;
border-bottom-color: black;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-left: 1px dotted;
border-right: 1px dotted;
font-family: tw cen mt;
font-size: 12px;
}
body{
background: lightcoral;
}
Hasilnya akan jadi:
3. Button Hover
Hover adalah salah satu element css. Hover ini berguna untuk membuat efek saat mouse mengenai suatu element HTML.Lihatlah Contoh dibawah.
Ini dia koding nya
Ini dia koding nya
<!DOCTYPE html>
<html>
<head>
<title>pengaturan Pada tombol Hover</title>
<link rel="stylesheet" href="buttonhover.css">
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td width="58">Nama</td>
<td width="230">
<input type="text" name="nama">
</td>
</tr>
<tr>
<td width="58">Pesan</td>
<td width="230">
<input type="text" name="alamat">
</td>
</tr>
<tr>
<td></td>
<td>
<input class="button" type="submit" name="submit" value="simpan">
<input class="button" type="submit" name="submit2" value="Submit"><br><br>
<a href="cssbuttoncss.html" class="linknya">Kembali</a>
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>pengaturan Pada tombol Hover</title>
<link rel="stylesheet" href="buttonhover.css">
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td width="58">Nama</td>
<td width="230">
<input type="text" name="nama">
</td>
</tr>
<tr>
<td width="58">Pesan</td>
<td width="230">
<input type="text" name="alamat">
</td>
</tr>
<tr>
<td></td>
<td>
<input class="button" type="submit" name="submit" value="simpan">
<input class="button" type="submit" name="submit2" value="Submit"><br><br>
<a href="cssbuttoncss.html" class="linknya">Kembali</a>
</td>
</tr>
</table>
</form>
</body>
</html>
Ini css nya:
input,button{
color: coral;
background: indianred;
border: 2px outset khaki;
font-family: calibri, Times,serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
input.button:hover{
color: coral;
background: lightsteelblue;
border: 3px outset yellow;
font-family: cambria, times,serif;
font-weight: bold;
}
body{
background-color: pink;
}
a.linknya{
background-image: url(bahan/simpan.jpg);
text-decoration: none;
font-family: Tw cen mt;
}
a.linknya:hover{
background-image: url(bahan/batal.jpg);
color: coral;
text-decoration: none;
font-family: Arial black;
}
color: coral;
background: indianred;
border: 2px outset khaki;
font-family: calibri, Times,serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
input.button:hover{
color: coral;
background: lightsteelblue;
border: 3px outset yellow;
font-family: cambria, times,serif;
font-weight: bold;
}
body{
background-color: pink;
}
a.linknya{
background-image: url(bahan/simpan.jpg);
text-decoration: none;
font-family: Tw cen mt;
}
a.linknya:hover{
background-image: url(bahan/batal.jpg);
color: coral;
text-decoration: none;
font-family: Arial black;
}
Dan Hasilnya:
4. Css on Radio button
Radio button adalah salah satu elemen form dasar dalam dunia html. Mereka biasa digunakan pada saat ada 2 atau lebih pilihan yang eksklusif, dan user diharuskan dan hanya diperbolehkan untuk memilih hanya salah satu dari pilihan tersebut.
Ini dia Htmlnya:
Ini dia Htmlnya:
<!DOCTYPE html>
<html>
<head>
<title>Radiobutton</title>
<link rel="stylesheet" href="radiobutton.css">
</head>
<body>
<form name="form1" method="post" action="" class="f1">
<table bordercolor="1">
<tr width="120">
<td width="58">Kelamin</td>
<td width="150">:
<input type="radio" name="radiobutton" value="radiobutton" class="rb1">Pria/Male
</td>
</tr>
<tr>
<td width="58"> </td>
<td width="150" class="k1">:
<input type="radio" name="radiobutton" value="radiobutton" class="rb2">Wanita/Female
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Radiobutton</title>
<link rel="stylesheet" href="radiobutton.css">
</head>
<body>
<form name="form1" method="post" action="" class="f1">
<table bordercolor="1">
<tr width="120">
<td width="58">Kelamin</td>
<td width="150">:
<input type="radio" name="radiobutton" value="radiobutton" class="rb1">Pria/Male
</td>
</tr>
<tr>
<td width="58"> </td>
<td width="150" class="k1">:
<input type="radio" name="radiobutton" value="radiobutton" class="rb2">Wanita/Female
</td>
</tr>
</table>
</form>
</body>
</html>
Dan ini css nya:
input.rb1{
color: black;
background: dodgerblue;
border-color: lime;
font-family: tw cen mt;
font-size: 12px;
}
input.rb2{
color: red;
background: coral;
border-color: yellow;
font-family: tw cen mt;
font-size: 12px;
}
td{
color: midnightblue;
background: bisque;
border-color: yellow;
font-family: tw cen mt;
font-size: 12px;
}
form.f1{
background: ;
}
color: black;
background: dodgerblue;
border-color: lime;
font-family: tw cen mt;
font-size: 12px;
}
input.rb2{
color: red;
background: coral;
border-color: yellow;
font-family: tw cen mt;
font-size: 12px;
}
td{
color: midnightblue;
background: bisque;
border-color: yellow;
font-family: tw cen mt;
font-size: 12px;
}
form.f1{
background: ;
}
Hasilnya tadaaa:
5. Part Bonus
Disini mimin akan memperlihatkan hasil karya mimin ini dia cekidooot:
<!DOCTYPE html>
<html>
<head>
<title>Form Kreasi</title>
<link rel="stylesheet" href="kreasi.css">
</head>
<body>
<fieldset>
<legend>Formulir Pendaftaran</legend>
<center>
<img src="bahan/avatar.jpg" alt="Avatar" class="avatar">
</center>
<div class="container">
<input type="text" placeholder="Nama" required><br>
<input type="text" placeholder="No.Induk Penduduk" required><br>
<label for="ultah"><b>Tanggal Lahir</b></label><br>
<input type="date" name="ultah"><br>
<label for="agama"><b>Agama</b></label><br>
<input class="agama" list="agama">
<datalist id="agama">
<option value="Islam">
<option value="Khatolik">
<option value="Protestan">
<option value="Hindu">
<option value="Buddha">
<option value="Khonghucu">
</datalist>
<br><label for="status"><b>Status</b></label><br>
<input class="stat" list="status">
<datalist id="status">
<option value="Pelajar">
<option value="Mahasiswa">
<option value="Menikah">
<option value="Belum menikah">
</datalist>
<br><b>Jenis Kelamin :</b><br>
<input type="radio" name="radiobutton" value="radiobutton">Pria/Male
<input type="radio" name="radiobutton" value="radiobutton">Wanita/Female<br>
<button type="submit">Daftar</button><br>
<button type="button" class="cancel">Batal</button>
</div>
</fieldset>
</body>
</html>
<html>
<head>
<title>Form Kreasi</title>
<link rel="stylesheet" href="kreasi.css">
</head>
<body>
<fieldset>
<legend>Formulir Pendaftaran</legend>
<center>
<img src="bahan/avatar.jpg" alt="Avatar" class="avatar">
</center>
<div class="container">
<input type="text" placeholder="Nama" required><br>
<input type="text" placeholder="No.Induk Penduduk" required><br>
<label for="ultah"><b>Tanggal Lahir</b></label><br>
<input type="date" name="ultah"><br>
<label for="agama"><b>Agama</b></label><br>
<input class="agama" list="agama">
<datalist id="agama">
<option value="Islam">
<option value="Khatolik">
<option value="Protestan">
<option value="Hindu">
<option value="Buddha">
<option value="Khonghucu">
</datalist>
<br><label for="status"><b>Status</b></label><br>
<input class="stat" list="status">
<datalist id="status">
<option value="Pelajar">
<option value="Mahasiswa">
<option value="Menikah">
<option value="Belum menikah">
</datalist>
<br><b>Jenis Kelamin :</b><br>
<input type="radio" name="radiobutton" value="radiobutton">Pria/Male
<input type="radio" name="radiobutton" value="radiobutton">Wanita/Female<br>
<button type="submit">Daftar</button><br>
<button type="button" class="cancel">Batal</button>
</div>
</fieldset>
</body>
</html>
Ini css nya ya gengs:
body {
font-family: Tw Cen Mt;
text-align: left;
background-color:#00b3e6 ;
}
fieldset {
background-color:white;
max-width: 500px;
background-color:;
border-style: solid;
border-color: green;
border-radius: 10px;
}
legend{
font-size: 35px;
border-style: solid;
background-color: #4CAF;
color: white;
}
input[type=text], input[type=date], input.stat, input.agama {
border-radius: 40px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid green;
box-sizing: border-box;
}
button {
background-color: green;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 20px;
}
button:hover {
opacity: 0.8;
font-weight: bold;
background-color: black;
}
.cancel {
width: 100%;
padding: 10px 18px;
background-color: #f44336;
border-radius: 20px;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 30%;
border-radius: 50%;
}
.container {
padding: 16px;
background-image: url();
}
span.psw {
float: right;
padding-top: 16px;
}
font-family: Tw Cen Mt;
text-align: left;
background-color:#00b3e6 ;
}
fieldset {
background-color:white;
max-width: 500px;
background-color:;
border-style: solid;
border-color: green;
border-radius: 10px;
}
legend{
font-size: 35px;
border-style: solid;
background-color: #4CAF;
color: white;
}
input[type=text], input[type=date], input.stat, input.agama {
border-radius: 40px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid green;
box-sizing: border-box;
}
button {
background-color: green;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 20px;
}
button:hover {
opacity: 0.8;
font-weight: bold;
background-color: black;
}
.cancel {
width: 100%;
padding: 10px 18px;
background-color: #f44336;
border-radius: 20px;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 30%;
border-radius: 50%;
}
.container {
padding: 16px;
background-image: url();
}
span.psw {
float: right;
padding-top: 16px;
}
Hasilnya penasaran yakan ini diaa...
Disitu mimin menggunakan border radius agar si ujung ujung box nya jadi melengkung, Dan mimin menggunakan Class="Avatar" agar si gambarnya jadi bulat gengs
6. Quizz
Ini dia htmlnya :
<!DOCTYPE html>
<html>
<head>
<title>Artikel</title>
<link rel="stylesheet" href="artikel.css" type="text/css">
</head>
<body>
<p class="judul"><img class="menu" src="bahan/menus.png">Homina Tech
<img class="search" src="bahan/secing.png"></p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Gallery</a></li>
<li><a href="#home">About</a></li>
<li><a href="#news">Trick</a></li>
<li><a href="#home">Sign in</a></li>
<li><a href="#news">More Info</a></li>
</ul>
<h1>Kemeriahan Asian Games 2018</h1>
<p class="hari"><i>Sabtu, 25 Agustus 2018 <br>By: Annisarahayu | 18.00</p></i><br>
<img class="op" src="bahan/opening.jpg">
<img class="cab" src="bahan/cabor.jpg">
<img class="sea" src="bahan/asiangames.png">
<p class="isi"> Tanggal 18 Agustus 2018 Asian Games 2018 resmi dibuka, dan opening ceremony Asian Games 2018 diadakan di stadion Gelora Bung Karno (GBK) Jakarta. Upacara pembukaan berlangsung sangat meriah, para atlet dari negara-negara peserta Asian Games pun melakukan parade perkenalan.<br>Beberapa artis Indonesia juga tampil memeriahkan acara pembukaan Asian Games 2018 ini lho. Tentu saja mereka merasa bangga bisa tampil di acara ini, dan sudah mempersiapkan diri dengan sebaik-baiknya. Tampil di atas pentas Asian Games 2018 dan disaksikan oleh ratusan juta orang di Asia, penampilan para artis ini sangat memukau.<br>Inilah deretan artis yang turut serta tampil mengisi acara Asian Games 2018 di stadion Gelora Bung Karno pada 18 Agustus 2018 kemarin.<br>1. Rossa <br>2. Via Vallen <br>3. Raisa <br>4. Fatin Shidqia <br>5. Anggun.C.Sasmi <br>6. Wizzy Williana <br>7. GAC (Gamaliel Audrey Cantika) <br>8. Ariel Noah, Rian D'masiv, Sheryl Sheinafia, dan Cakra Khan <br>9. Rinni Wulandari <br>10. Putri Ayu <br> Perolehan medali terkini: <br><br><b>Medali emas - 10</b><br><br>Khoiful Mukhib (downhill)<br>Tiara Andini Prastika (downhill)<br>Eko Yuli Irawan (angkat berat)<br>Defia Rosmaniar (taekwondo)<br>Lindswell Kwok (wushu)<br>Tim putra ketepatan mendarat (paralayang)<br>Jafro Megaranto (paralayang)<br>Aries Susanti Rahayu (panjang tebing)<br>
</p>
<p class="copyright">Create by: Annisarhy ♥</p>
</body>
</html>
<html>
<head>
<title>Artikel</title>
<link rel="stylesheet" href="artikel.css" type="text/css">
</head>
<body>
<p class="judul"><img class="menu" src="bahan/menus.png">Homina Tech
<img class="search" src="bahan/secing.png"></p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Gallery</a></li>
<li><a href="#home">About</a></li>
<li><a href="#news">Trick</a></li>
<li><a href="#home">Sign in</a></li>
<li><a href="#news">More Info</a></li>
</ul>
<h1>Kemeriahan Asian Games 2018</h1>
<p class="hari"><i>Sabtu, 25 Agustus 2018 <br>By: Annisarahayu | 18.00</p></i><br>
<img class="op" src="bahan/opening.jpg">
<img class="cab" src="bahan/cabor.jpg">
<img class="sea" src="bahan/asiangames.png">
<p class="isi"> Tanggal 18 Agustus 2018 Asian Games 2018 resmi dibuka, dan opening ceremony Asian Games 2018 diadakan di stadion Gelora Bung Karno (GBK) Jakarta. Upacara pembukaan berlangsung sangat meriah, para atlet dari negara-negara peserta Asian Games pun melakukan parade perkenalan.<br>Beberapa artis Indonesia juga tampil memeriahkan acara pembukaan Asian Games 2018 ini lho. Tentu saja mereka merasa bangga bisa tampil di acara ini, dan sudah mempersiapkan diri dengan sebaik-baiknya. Tampil di atas pentas Asian Games 2018 dan disaksikan oleh ratusan juta orang di Asia, penampilan para artis ini sangat memukau.<br>Inilah deretan artis yang turut serta tampil mengisi acara Asian Games 2018 di stadion Gelora Bung Karno pada 18 Agustus 2018 kemarin.<br>1. Rossa <br>2. Via Vallen <br>3. Raisa <br>4. Fatin Shidqia <br>5. Anggun.C.Sasmi <br>6. Wizzy Williana <br>7. GAC (Gamaliel Audrey Cantika) <br>8. Ariel Noah, Rian D'masiv, Sheryl Sheinafia, dan Cakra Khan <br>9. Rinni Wulandari <br>10. Putri Ayu <br> Perolehan medali terkini: <br><br><b>Medali emas - 10</b><br><br>Khoiful Mukhib (downhill)<br>Tiara Andini Prastika (downhill)<br>Eko Yuli Irawan (angkat berat)<br>Defia Rosmaniar (taekwondo)<br>Lindswell Kwok (wushu)<br>Tim putra ketepatan mendarat (paralayang)<br>Jafro Megaranto (paralayang)<br>Aries Susanti Rahayu (panjang tebing)<br>
</p>
<p class="copyright">Create by: Annisarhy ♥</p>
</body>
</html>
Dan ini Css nya:
body {
margin-bottom: 100px;
margin-right: 80px;
margin-left: 80px;
border-style: solid;
}
img.menu {
width: 45px;
height: 45px;
padding-right: 360px;
padding-left: 20px;
}
img.search {
padding-left: 260px;
}
p.judul {
margin-top: 15px;
margin-bottom: 15px;
font-family: ArtBrush;
letter-spacing: 3px;
font-size: 60px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
font-family: tw cen mt;
font-size: 20px;
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: green;
}
h1 {
font-family: tw cen mt;
text-align: center;
font-size: 40px;
}
p.hari {
font-family: sans-serif;
font-size: 15px;
text-align: left;
margin-left: 150px;
color: grey;
}
img.op {
width: 550px;
height: 300px;
margin-left: 150px;
align-content: left;
}
img.cab {
width: 300px;
height: 300px;
align-content: right;
margin-left: 30px;
}
img.sea {
width: 300px;
height: 100px;
margin-top: 10px;
margin-left: 150px;
}
p.isi {
font-family: tw cen mt;
font-size: 20px;
margin-left: 40px;
}
p.copyright {
font-size: 20px;
font-family: tw cen mt;
text-align: center;
}
/** Yee pass seratus */
margin-bottom: 100px;
margin-right: 80px;
margin-left: 80px;
border-style: solid;
}
img.menu {
width: 45px;
height: 45px;
padding-right: 360px;
padding-left: 20px;
}
img.search {
padding-left: 260px;
}
p.judul {
margin-top: 15px;
margin-bottom: 15px;
font-family: ArtBrush;
letter-spacing: 3px;
font-size: 60px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
font-family: tw cen mt;
font-size: 20px;
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: green;
}
h1 {
font-family: tw cen mt;
text-align: center;
font-size: 40px;
}
p.hari {
font-family: sans-serif;
font-size: 15px;
text-align: left;
margin-left: 150px;
color: grey;
}
img.op {
width: 550px;
height: 300px;
margin-left: 150px;
align-content: left;
}
img.cab {
width: 300px;
height: 300px;
align-content: right;
margin-left: 30px;
}
img.sea {
width: 300px;
height: 100px;
margin-top: 10px;
margin-left: 150px;
}
p.isi {
font-family: tw cen mt;
font-size: 20px;
margin-left: 40px;
}
p.copyright {
font-size: 20px;
font-family: tw cen mt;
text-align: center;
}
/** Yee pass seratus */
Hasilnya akan jadi:
Yup mungkin itu saja yang bisa mimin sampaikan kali ini, mohon maaf bila ada salah salah kata.
Yup mungkin itu saja yang bisa mimin sampaikan kali ini, mohon maaf bila ada salah salah kata.
0 Komentar