How To

Cara Membuat Notes Pada Website

Di bawah ini kita akan memperlajari cara membuat “Notes” dengan CSS.

Notes

Catatan atau notes dapat digunakan untuk memberi tahu pengguna tentang sesuatu yang istimewa: danger, success, information atau warning

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  margin-bottom: 15px;
  padding: 4px 12px;
}

.danger {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}

.success {
  background-color: #ddffdd;
  border-left: 6px solid #4CAF50;
}

.info {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
}


.warning {
  background-color: #ffffcc;
  border-left: 6px solid #ffeb3b;
}
</style>
</head>
<body>

<h2>Notes</h2>
<div class="danger">
  <p><strong>Danger!</strong> Tulis Teks.........................................</p>
</div>

<div class="success">
  <p><strong>Success!</strong> Tulis Teks.........................................</p>
</div>

<div class="info">
  <p><strong>Info!</strong> Tulis Teks.........................................</p>
</div>

<div class="warning">
  <p><strong>Warning!</strong> Tulis Teks.........................................</p>
</div>

</body>
</html>

Cara Membuat Notes

Langkah 1) Tambahkan HTML:
Contoh

<div class="danger">
  <p><strong>Danger!</strong> Tulis Teks.........................................</p>
</div>

Langkah 2) Tambahkan CSS:
Contoh

.danger {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}

Hanifah Nurbaeti

Share
Tags: CSSHow To