Membuat Newsletter Section dengan CSS

Membuat Newsletter Section dengan CSS

—

by

Webbiz.ID
in

Berikut ini adalah contoh code untuk membuat newsletter section dengan CSS beserta penerapannya dengan HTML.

CSS

CSS
/* CSS Code */
.newsletter-section {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

.newsletter-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.newsletter-description {
  font-size: 16px;
  margin-bottom: 20px;
}

.newsletter-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.newsletter-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 300px;
  margin-right: 10px;
}

.newsletter-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.newsletter-button:hover {
  background-color: #0056b3;
}
CSS

HTML

HTML
<!-- HTML Code -->
<section class="newsletter-section">
  <h2 class="newsletter-title">Berlangganan Newsletter Kami</h2>
  <p class="newsletter-description">Dapatkan informasi terbaru langsung di email Anda.</p>
  <form class="newsletter-form">
    <input type="email" class="newsletter-input" placeholder="Masukkan alamat email Anda" required>
    <button type="submit" class="newsletter-button">Berlangganan</button>
  </form>
</section>
HTML

See the Pen Newsletter CSS by WebbizID (@De-Orchids) on CodePen.

Silakan gunakan code di atas untuk membuat newsletter section dengan CSS dan menerapkannya dengan HTML. Anda dapat menyesuaikan tampilan dan gaya sesuai kebutuhan Anda.

Baca juga:

Semoga bermanfaat!

Artikel Terbaru ⭐