Tutorial Coding Cara Membuat Script Html + CSS Sederhana tapi Menarik menggunakan Notepad++ ~ Syahrul Adi Blogs

Kali ini saya akan membuat sebuah tampilan web sederhana menggunakan html dan css menggunakan Notepad++.

Berikut tampilan html sederhana :

Pada gambar diatas, Saya menggunakkan elemen css box-shadow, border-radius dan :hover pada div panel.

Berikut script html nya :

<html lang="id">
<head>
<title>Biodata Saya</title>
<style>
body{
color:#000;
background-color:#fff;
font-size:1.2em;
margin:auto;
padding:0;
}
.panel{
color:#000;
background-color:#add8e6;
text-align:center;
padding:18px;
margin:6px auto;
max-width:50%;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
box-shadow:0 2px 4px #888;
}
.panel:hover{
box-shadow:0 2px 8px #00008b;
}
</style>
</head>
<body>
<div class="panel"><b>BIODATA</b></div>
<div class="panel">
<p>
<img src="img.png" height="150" width="150"/>
</p>
<p align="center">
<table>
<tr><td><b>Nama Lengkap</b></td><td>: Syahrul Adiguna Kurniawan</td></tr>
<tr><td><b>NIM</b></td><td>: 14090018</td></td></tr>
<tr><td><b>Kelas</b></td><td>: 4A</td></td></tr>
<tr><td><b>Alamat</b></td><td>: Jl. Mawar No.04 Perumnas Gandasuli Brebes</td></td></tr>
<tr><td><b>Jenis Kelamin</b></td><td>: Laki-laki</td></td></tr>
<tr><td><b>E-Mail</b></td><td>: syahrulzzadie@gmail.com</td></td></tr>
<tr><td><b>Prodi</b></td><td>: D4-INFORMATIKA</td></td></tr>
</table>
</p>
</div>
</body>
</html>

Atau juga bisa memodifikasinya sendiri. Silahkan download saja script nya pada link dibawah ini.

Terimakasih atas kunjungan anda. Semoga Bermanfaat. :-)

Syahrul Adi Blogs

Tutorial Coding Cara Membuat Script Html + CSS Sederhana tapi Menarik menggunakan Notepad++

Related Post

1 comments: