Kartu Profile Menggunakan HTML dan CSS

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
October 27, 2017





Selamat sore sobat Blogger kali ini saya aan share bagaimana cara membuat Kartu Profile Menggunakan HTML dan CSS, Bagi anda yang sudah mengerti atau mempunyai pengetahuan dasar HTML dan Css pasti sangat mudah membuat kartu identitas seperti di bawah ini.


Disini kami menggunakan Notepad++. Kami tidak perlu menjelaskan secara detail karena kami yakin anda semua yang membaca ini sudah sangat mengerti. Kami langsung share kode HTML dam CSS nya dibawah ini.

 <!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

.card {

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  max-width: 300px;

  margin: auto;

  text-align: center;

  font-family: arial;

}

.title {

  color: grey;

  font-size: 18px;

}

button {

  border: none;

  outline: 0;

  display: inline-block;

  padding: 8px;

  color: white;

  background-color: #006400;

  text-align: center;

  cursor: pointer;

  width: 100%;

  font-size: 18px;

}

a {

  text-decoration: none;

  font-size: 22px;

  color: black;

}

button:hover, a:hover {

  opacity: 0.7;

}

</style>

</head>

<body>

<h2 style="text-align:center">User Profile Card</h2>

<div class="card">

  <img src="../image/arman.jpg" alt="arman" style="width:100%">

  <h1>Arman Basir</h1>

  <p class="title">Web Developer & Blogger</p>

  <p>Tanri Abeng University</p>

  <div style="margin: 24px 0;">

    <a href="#"><i class="fa fa-dribbble"></i></a>

    <a href="#"><i class="fa fa-twitter"></i></a> 

    <a href="#"><i class="fa fa-linkedin"></i></a> 

    <a href="#"><i class="fa fa-facebook"></i></a>

 </div>

 <p><button>Contact</button></p>

</div>

</body>

</html> 

Untuk Tampilannya anda bisa lihat pada gambar di atas. Sekain share kali ini semoga apa yang kami share bermanfaat bagi anda semua. Jangan lupa tinggalkan comment jika anda masih belum mengerti, kami selalu siap membantu.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed