membuat profil hmtl dan css
CARA
MEMBUAT PROFIL DENGAN MENGGUNAKAN HTML DAN CSS DENGAN MENGGUNAKAN NOTEPAD++
Sebelum membuat sebuah
form profil untuk terlebih dahulu bukalah aplikasi notepad++ pada Pc anda dengan begitu anda lansung langkah
awal untuk koding.
Dibawah ini adalah koding
untuk membuat sebuah profil.
1.ketika
sudah selesai mengetik koding tersebut simpanlah dengan nama profil.html lalu
taruh di folder yang sama
<html>
<head>
<title>Profil</title>
<link
rel="stylesheet" type="text/css"
href="styles.css">
</head>
<body>
<div
class="main">
<div
class="img"></div>
<h1>YUSRIL
FAMRY</h1>
<div
class="text">Web Develover From <strong>Bayan,
indonesia</strong></div>
<br>
<center><table
border="1">
<tr>
<th
colspan="3" height="65">
<p>
BIODATA SAYA</p>
</th>
<tr>
<td>NIM</td>
<td>18RP149</td>
</tr>
<tr>
<td>NAMA</td>
<td>YUSRIL
FAMRY</td>
</tr>
<tr>
<td>KELAS</td>
<td>RPL
B1</td>
</tr>
<tr>
<td>JURUSAN</td>
<td>REKAYASA
PERANGKAT LUNAK</td>
</tr>
</table>
</center>
<ul>
<li><a
href="#"><img src="images/fb.jpg"
width="25px" height="25px"></a></li>
<li><a
href="#"><img src="images/ig.jpg"
width="25px" height="25px"></a></li>
<li><a
href="#"><img src="images/tw.jpg"
width="25px" height="25px"></a></li>
</ul>
</div>
</body>
</html>
2.Setelah selesai membuat CSS simpanlah dengan nama
style.css dan simpan di satu folder
3. Untuk memanggil CSS sudah tertera diatas di dalam
<head> di koding profil.html
body{
padding:100px;
background-image:
Linear-gradient(-20deg, #ff2846 0%, #6944ff 100%);
text-align: center;
font-family:
'Quicksand', sans-serif;
}
ul{
margin-left: -45px;
}
li{
list-style: none;
display:inline-block;
}
.main{
width:800px;
height:520px;
background-color:
#fafafa;
margin:0 auto;
margin-top: 20px;
border-radius: 10px;
border: 1px solid
#eeeeee;
}
.img{
background-image:
url(yusril.jpg);
background-color:#eaeaea;
background-size:
cover;
border-radius: 100px;
width: 150px;
height:150px;
margin:0 auto;
border: 1px solid
#eaeaea;
}
h1{
text-align: center;
font-size: 30px;
margin: 0;
font-weight: bold;
color: #6944ff;
}
.text{
text-align: center;
font-size: 15px;
margin:0;
color:#324e63;
}
p{
margin: 0 auto;
padding-top: 20px;
width:450px;
height: auto;
color:#324e63;
}
SEKIAN DAN TERIMAKASIH
0 Response to "membuat profil hmtl dan css"
Post a Comment