Jadi kali ini saya mencoba menbuat tampilan profile sederhana yang terdiri atas html dan css di dalamnya agar saya bisa menyelesaikan dan mengerti tentang pemrograman web ini sendiri mulai dari yang sederhana atau basic.
<html>
<style >
#gambar
{
display: block;
margin: 0 auto;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
}
#shadow
{
padding: 1em;
clear: left;
text-align: center;
text-align: center;
}
#shadow
{
text-shadow: 5px 10px 10px black;
font-family: verdana;
color:#0000FF;
}
body
{
background-color: #ffe6e6
}
div.isi
{
border: 2px solid red;
border-radius: 12px;
margin-top: 10px;
margin-left: 10px;
}
div.haha
{
margin-left: inherit;
}
div.browser:hover
{
background-color: #0099cc;
}
div.browser1:hover
{
background-color: #0099cc;
}
div.browser2:hover
{
background-color: #0099cc;
}
div.browser
{
background-color: red;
margin: 20px;
padding: 20px;
width: 350px;
float: left;
}
#riwayat
{
margin: 0 auto;
}
div.browser1
{
background-color: red;
margin: 20px;
padding: 20px;
width: 360px;
float: left;
}
div.browser2
{
background-color: red;
margin: 20px;
padding: 20px;
width: 360px;
float: left;
}
div.icon1{
overflow: hidden;
}
#gambar1
{
display: block;
margin: auto;
width: 50%;
}
#menu1{
text-align: center;
}
h2{
text-align: center;
}
#browsertext
{
text-align: center;
}
tr,td{
padding: 15px;
text-align: left;
}
div.center iframe{
display: block;
margin-left: auto;
margin-right: auto;
}
#judul
{
text-align: center;
}
</style>
<title>
Profile
</title>
<head>
<h1><p id="shadow"><b>Selamat datang</b</p></h1>
</head>
<body>
<div id="atas">
<img id="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd-Ay6S02JEpEeDRDqCDJE14zM8vkYT_VFIkhquCl2mP46Fg4W3-THJG4Ffj2dOUFPyqDvS1jLrezft_sHcn-G3VLO8QzBXExGmN5s9Q_HVjxrKnocjVrMXaF78s_vvofhXD7oL9roCKA/s1600/IMG_20160719_165258.jpg" height="200 px" width="250 px">
</div>
</div>
<div class="isi">
<table id="riwayat" >
<tr>
<th>Nama </th>
<th>:</th>
<td>Ariya Wildan Devanto</td>
</tr>
<tr>
<th>Tanggal Lahir </th>
<th>:</th>
<td>11 Agustus 1996</td>
</tr>
<tr>
<th>Tempat Lahir </th>
<th>:</th>
<td>Magetan</td>
</tr>
<tr>
<th>Alamat </th>
<th>:</th>
<td>Perumahan Dosen ITS</td>
</tr>
</div>
<table id="riwayat" border="1px">
<h2><p id="judul">Riwayat Sekolah</p></h2>
<tr>
<th>Jenjang</th>
<th>Sekolah</th>
<th>Tahun</th>
</tr>
<tr>
<td>SMA</td>
<td>SMA Negeri 3 Surakarta</td>
<td>2015</td>
</tr>
<tr>
<td>SMP</td>
<td>SMP Negeri 1 Magetan</td>
<td>2013</td>
</tr>
<tr>
<td>SD</td>
<td>SD Negeri 2 Magetan</td>
<td>2010</td>
</tr>
</table>
<div class="icon1">
<h2 id="Menu1">Menu</h2>
<div class="browser">
<a href="https://web.facebook.com/" target="_blank">
<p id="browsertext">Browser</p>
<img id="gambar1" src="browser.png" alt="browser">
</a>
</div>
<div class="browser1">
<a href="https://login.yahoo.com/?.src=ym&.intl=id&.lang=id-ID&.done=https%3a//mail.yahoo.com" target="_blank">
<p id="browsertext">Email</p>
<img id="gambar1" src="envelope.png" alt="browser">
</a>
</div>
<div class="browser2">
<a href="https://www.linkedin.com" target="_blank">
<p id="browsertext">Linkedin</p>
<img id="gambar1" src="linkedin.png" alt="browser">
</a>
</div>
</div>
<div class="center">
<iframe src="http://ariya9c04.blogspot.co.id/" width="1300px" height="300px"></iframe>
</div>
</body>
</html>
Dan kerana belum di upload dan mempunyai domain maka saya sematkan beberapa screenshotnya :
Tidak ada komentar:
Posting Komentar