Cara Membuat Bio Profile Sederhana HTML + CSS

muzadidil 


1. Buat 1 Folder dengan nama BEBAS (terserah kalian)
2. siapkan 2 buah foto 
    - foto untuk foto profile

    - foto untuk Background

3. Rename nama Foto profile dengan nama " profile.jpg"
4. Rename nama foto Background dengan nama " bg.jpg"
5. buat 1 file HTML dengan nama bebas, pastikan extensi .HTML
6. buat 1 file css dengan nama style.css (wajib)
7. copy kode di bawah ini sesuai dengan type dokumentnya
8. simpan semua file CSS + HTML-nya

HTML
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
      <link rel="stylesheet" href="style.css">
      <title>Personal WebSite</title>
   </head>
   <body>
      <div class="box">
         <img src="profile.jpg" alt="" class="box-img">
         <h1>AEMITRA.ID</h1>
         <h5>
            DISTRIBUTOR PULSA MURAH
         </h5>
         <p>
            Apa sih bedanya bertransaksi menggunakan metode lama jika dibandingkan dengan transaksi memakai aplikasi Android ini? Lebih praktis, lebih mudah, dan lebih cepat. Ketiga poin tersebut rasanya cukup untuk menunjukkan perbedaan mencolok transaksi melalui aplikasi dan lewat opsi lainnya. 
         </p>
         <ul>
            <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
         </ul>
      </div>
   </body>
</html>


CSS


body{
margin: 0;
padding: 0;
background: url(bg.jpg) no-repeat;
background-size: cover;
}
.box{
width: 450px;
background: rgba(0, 0, 0, 0.4);
padding: 40px;
text-align: center;
margin: auto;
margin-top: 5%;
color: white;
font-family: 'Century Gothic',sans-serif;
}
.box-img{
border-radius: 50%;
width: 200px;
height: 200px;
}
.box h1{
font-size: 40px;
letter-spacing: 4px;
font-weight: 100;
}
.box h5{
font-size: 20px;
letter-spacing: 3px;
font-weight: 100;
}
.box p{
text-align: justify;
}
ul{
margin: 0;
padding: 0;
}
.box li{
display: inline-block;
margin: 6px;
list-style: none;
}
.box li a{
color: white;
text-decoration: none;
font-size: 60px;
transition: all ease-in-out 250ms;
}
.box li a:hover{
color: #b9b9b9;
}
Tags
muzadidil
Intovert, Cepat beradaptasi, simple, Fokus, Cenderung Lebih suka makan daripada Minum.
Komentar