Selasa, 30 September 2025

Arduino Project

https://www.youtube.com/watch?v=ZxwpbX9CP20&list=PLfYjSygQ7aJb-gOBRNBnL0TFZ6fJHw2em

Jumat, 26 September 2025

Coding Java - Swing

https://www.youtube.com/watch?v=EF3yvfmAJIs&list=PLBpH5WxSM4d1hX8CRJw_q838KNCM2DVJZ

https://www.youtube.com/watch?v=MXGhmh6oUlw&list=PLBpH5WxSM4d1hX8CRJw_q838KNCM2DVJZ&index=5

Rabu, 24 September 2025

Membuat Profil Usaha

https://www.youtube.com/watch?v=BAbehgx5uiM

Senin, 15 September 2025

Versi 1

Versi 2

Versi 3

Versi 4

Aplikasi ini versi GUI dengan Swing mempunyai form input catatan (judul & isi) dan tombol untuk menambah catatan ke daftar, lalu ditampilkan di JTextArea.

Fitur:

Form Input: user bisa mengisi judul & isi catatan.
Tombol Tambah Catatan: menyimpan catatan ke dalam ArrayList.
Daftar Catatan: semua catatan ditampilkan di bawah dalam JTextArea.
Validasi: jika judul/isi kosong → muncul pop-up peringatan.

Versi 5

Fitur:

Lanjutan dengan JTable
Input Judul dan Isi Catatan.
Tombol Simpan Catatan untuk menambahkan ke daftar.
Area bawah menampilkan semua catatan yang tersimpan.

Versi 6

Fitur:

Lanjutan GUI Aplikasi Catatan Pribadi dengan fitur:
Tambah catatan baru
Pilih catatan dari daftar (JList)
Edit catatan
Hapus catatan
:

✅ Tambah catatan baru
✅ Pilih catatan dari daftar kiri
✅ Edit judul & isi catatan
✅ Hapus catatan dengan konfirmasi

Versi 7

Fitur 1 yang tersedia:

✅ Tambah, edit, hapus catatan
✅ Simpan catatan ke file (notes.dat)
✅ Muat catatan otomatis saat aplikasi dijalankan

Versi 8

Fitur 2 :

Aplikasi catatan supaya catatan bisa disimpan ke file (persistent storage).
Saya gunakan serialization (ObjectOutputStream dan ObjectInputStream) agar catatan bisa disimpan dalam file notes.dat.

✅ Tambah, edit, hapus catatan
✅ Simpan catatan ke file (notes.dat)
✅ Muat catatan otomatis saat aplikasi dijalankan

Versi 9

Fitur 3 :

Menyimpan tiap catatan sebagai file .txt agar bisa dibuka dengan Notepad atau editor teks lain.

✅ Catatan disimpan sebagai file .txt di folder notes_txt
✅ File bisa dibuka di Notepad atau editor teks lain
✅ Catatan otomatis dimuat saat aplikasi dibuka
✅ Bisa tambah, edit, hapus catatan

Versi 10

Fitur tambahan:

Menambahkan fitur pencarian catatan berdasarkan judul.

✅ Pencarian catatan berdasarkan judul
✅ Tombol Cari menampilkan hasil filter
✅ Tombol Reset mengembalikan semua catatan
✅ Semua fitur sebelumnya (Tambah, Edit, Hapus, Simpan TXT, Load TXT) tetap ada

Landing Page contoh

https://codegym.cc/java-coding-practice

Coding Java - Latihan OOP Java Berbasis Proyek

Rencana 16 Pertemuan OOP Java Berbasis Proyek

Pertemuan 1 – Pengenalan OOP & Java

Materi: Konsep OOP (class, object, atribut, method), perbedaan OOP dengan prosedural.
Latihan Proyek: Aplikasi Catatan Pribadi
- Membuat class Note dengan atribut title, content.
- Buat objek catatan baru dan tampilkan di console.
Link https://codestudio80.blogspot.com/2025/09/coding-java-noteapp.html

Pertemuan 2 – Class & Object

Materi: Cara membuat class dan object di Java.
Latihan Proyek: Aplikasi Data Mahasiswa
- Class Student dengan atribut nama, nim, jurusan.
- Buat beberapa objek mahasiswa lalu tampilkan datanya.

Pertemuan 3 – Constructor & Method

Materi: Constructor default & parameterized, method sederhana.
Latihan Proyek: Aplikasi Kalkulator Sederhana
- Class Calculator dengan method tambah, kurang, kali, bagi.
- Gunakan constructor untuk inisialisasi.

Pertemuan 4 – Encapsulation

Materi: Access modifier (private, public), getter & setter.
Latihan Proyek: Aplikasi Rekening Bank
- Class Account dengan atribut saldo.
- Method deposit, withdraw dengan validasi saldo.

Pertemuan 5 – Inheritance (Pewarisan)

Materi: Konsep pewarisan, extends.
Latihan Proyek: Aplikasi Kendaraan
- Class Vehicle (merek, tahun).
- Subclass Car dan Motorcycle dengan method khusus.

Pertemuan 6 – Polymorphism

Materi: Overriding, dynamic polymorphism.
Latihan Proyek: Aplikasi Pembayaran
- Class Payment → subclass CashPayment, DigitalPayment.
- Override method pay().

Pertemuan 7 – Abstract Class

Materi: Abstract method & class.
Latihan Proyek: Aplikasi Hewan Peliharaan
- Abstract class Animal dengan method makeSound().
- Subclass Dog, Cat.

Pertemuan 8 – Interface

Materi: Interface dan implementasi.
Latihan Proyek: Aplikasi Media Player
- Interface Playable (play, pause).
- Class MusicPlayer & VideoPlayer.

Pertemuan 9 – Collection & ArrayList

Materi: Array vs Collection, penggunaan ArrayList.
Latihan Proyek: Aplikasi Manajemen Perpustakaan
- Class Book (judul, penulis).
- Simpan daftar buku di ArrayList.

Pertemuan 10 – Exception Handling

Materi: Try-catch-finally, custom exception.
Latihan Proyek: Aplikasi ATM
- Jika saldo tidak cukup → lempar InsufficientBalanceException.

Pertemuan 11 – File I/O

Materi: Membaca & menulis file.
Latihan Proyek: Aplikasi To-Do List
- Simpan daftar tugas ke file .txt dan baca kembali.

Pertemuan 12 – GUI dengan Swing (Dasar)

Materi: Pengenalan Swing, JFrame, JButton, JLabel.
Latihan Proyek: Aplikasi Login Form
- Form login dengan username & password sederhana.

Pertemuan 13 – GUI dengan Swing (Lanjutan)

Materi: Layout manager, JTable.
Latihan Proyek: Aplikasi Data Kontak
- Menyimpan dan menampilkan kontak (nama, no HP) dalam tabel.

Pertemuan 14 – Package & Modularisasi

Materi: Membuat package, mengatur project lebih terstruktur.
Latihan Proyek: Aplikasi Manajemen Sekolah
- Package student, teacher, course.

Pertemuan 15 – Mini Project

Materi: Integrasi konsep OOP.
Proyek: Aplikasi Point of Sale (Kasir Toko)
- Class Product, Cart, Transaction.
- Fitur: tambah produk, hitung total, cetak struk sederhana.

Pertemuan 16 – Final Project Presentation

Mahasiswa membuat proyek akhir berbasis OOP Java.
Contoh ide:

Aplikasi Reservasi Hotel
Aplikasi Sistem Parkir
Aplikasi Pengingat Jadwal
Aplikasi Catatan Keuangan Pribadi

Referensi

https://www.w3resource.com/java-exercises/

https://www.w3resource.com/java-exercises/constructor/java-constructors.php

https://www.w3resource.com/java-exercises/constructor/java-constructor-exercise-1.php

https://exercism.org/tracks/java/exercises

https://codegym.cc/java-coding-practice#objects-exercises

https://www.w3schools.com/java/java_exercises.asp

https://www.geeksforgeeks.org/java/java-exercises/

https://www3.ntu.edu.sg/home/ehchua/programming/java/J2a_BasicsExercises.html

https://codingbat.com/doc/java-example-solution-code.html

https://www.youtube.com/watch?v=Qtr9FnsQYm4

https://www.youtube.com/watch?v=qQVqfvs3p48&list=PLS1QulWo1RIYEMepIBinxplXsx9v0zCSf&index=6

https://www.youtube.com/watch?v=l-yoxklZwfM&list=PLS1QulWo1RIbfTjQvTdj8Y6yyq4R7g-Al&index=110

https://www.youtube.com/playlist?list=PLS1QulWo1RIbfTjQvTdj8Y6yyq4R7g-Al

Minggu, 14 September 2025

Coding Web Back End

https://www.youtube.com/watch?v=rMzbqEM8LHE&list=PL3uuG4lYbnOyccQGREqdmpIQkBqOc6YEJ

https://www.youtube.com/watch?v=FIsgMZ1m4Zs&list=PL3uuG4lYbnOy7PhYt6Ab4JZpW2YRk-80s

https://www.youtube.com/watch?v=RwiFvxeSYWo&list=PL3uuG4lYbnOyhIyckZxjdl8EVBRyZWDX2

https://www.youtube.com/watch?v=tDO0g3pbp5U&list=PL3uuG4lYbnOw-KF5MvnL6XUFVl5EfZqLq

Coding Java

https://www.youtube.com/watch?v=tHYekApO_Pk&list=PL4JpL3QOaS6jxDi9RXsr1h3j-8wbXkSyV&index=1

https://www.youtube.com/watch?v=FpwcfLHswUo&list=PLjRBWix725xpzzfIPRkjeUJ5mCk_Yj1H7

https://www.youtube.com/watch?v=PVm4Yfs5OPI&list=PL3uuG4lYbnOwoWGQEFYxpxWZ5XljcrPTu

https://www.youtube.com/watch?v=irqCvKATRAI&list=PLjRBWix725xqorCUlyeZ2HuoZ1pJYWdUq&index=5

https://www.petanikode.com/tutorial/java/

Kamis, 11 September 2025

Ledera

https://www.ledera.org/

PROMPT

Buatkan Website (Research Landing Page)
Judul Website: Ledera – Platform untuk Pelatihan dan Pengembangan Diri

Desain & Layout:

Header (Navbar atas):

Logo dengan ikon bulat berisi huruf L dan teks "Ledera".

Navigasi bagian kanan terdiri dari: ikon media sosial (Twitter, Facebook, Pinterest, Instagram).

Kontak di pojok kanan atas: ikon telepon + nomor, ikon email + alamat email.

Gaya minimalis, tipografi modern.

Hero Section (Bagian utama):

Background putih bersih.

Layout 2 kolom:

Kiri:

Judul besar (bold) "Learning and Development Research Academy."

Kata Ledera diberi warna biru untuk penekanan.

Paragraf deskripsi singkat dengan warna teks abu-abu.

Form pencarian:

Input "Search for Activity" dengan ikon search.

Input "Categories" dengan ikon panah dropdown.

Tombol biru "Join Now".

Semua elemen form dalam card dengan background abu-abu muda dan rounded corner.

Kanan:

Gambar ilustrasi (contoh: burung yang terbang atau visual bebas terkait pembelajaran/ilustrasi modern).

Footer (opsional jika ingin dibuat):

Copyright kecil.

Ikon media sosial tambahan.

Warna & Style:

Warna utama: biru lembut (#4A90E2 atau sejenis).

Background: putih.

Font: modern sans-serif (contoh: Poppins atau Inter).

Tombol: biru dengan teks putih, rounded, efek hover lembut.

Elemen form: clean, dengan shadow halus.

Teknologi:

HTML, CSS (Flexbox atau Grid untuk layout).

Responsive (terutama mobile-friendly).

Gunakan ikon dari RemixIcon atau FontAwesome.

HTML

<!DOCTYPE html>

<head>

<title>Ledera - Platform untuk Pelatihan dan Pengembangan Diri</title>

<style>

body {

font-family: 'Inter', sans-serif;

}

.logo-circle {

background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);

}

.search-card {

background: #F8FAFC;

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

}

.btn-primary {

background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);

transition: all 0.3s ease;

}

.btn-primary:hover {

transform: translateY(-2px);

box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3);

}

.hero-illustration {

animation: float 6s ease-in-out infinite;

}

@keyframes float {

0%, 100% { transform: translateY(0px); }

50% { transform: translateY(-20px); }

}

</style>

</head>

</div>

<span class="text-2xl font-bold text-gray-900">Ledera</span>

</div>

</div>

<span>info@ledera.com</span>

</div>

</a>

</a>

</a>

</a>

</div>

</header>

Learning and Development Research

<span class="text-blue-500">Academy</span>

</h1>

Platform terdepan untuk pengembangan diri dan pelatihan profesional.

Bergabunglah dengan ribuan peserta yang telah meningkatkan karir mereka

melalui program pembelajaran berkualitas tinggi.

</p>

</div>

</div>

<input

type="text"

placeholder="Search for Activity"

class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"

</div>

<option>Categories</option>

<option>Leadership</option>

<option>Digital Marketing</option>

<option>Data Science</option>

<option>Project Management</option>

<option>Soft Skills</option>

</select>

</div>

Join Now

</button>

</div>

</g>

</g>

</g>

</g>

</g>

</circle>

</circle>

</circle>

</svg>

</div>

</main>

</div>

</a>

</a>

</a>

</a>

</div>

</footer>

// Form functionality

document.querySelector('button').addEventListener('click', function(e) {

e.preventDefault();

const searchInput = document.querySelector('input[type="text"]');

const categorySelect = document.querySelector('select');

if (searchInput.value.trim() === '') {

alert('Silakan masukkan kata kunci pencarian!');

searchInput.focus();

return;

}

// Simulate search action

alert(`Mencari "${searchInput.value}" dalam kategori "${categorySelect.value}"...`);

});

// Social media links

document.querySelectorAll('a[href="#"]').forEach(link => {

link.addEventListener('click', function(e) {

e.preventDefault();

const icon = this.querySelector('i').className;

let platform = 'media sosial';

if (icon.includes('twitter')) platform = 'Twitter';

else if (icon.includes('facebook')) platform = 'Facebook';

else if (icon.includes('pinterest')) platform = 'Pinterest';

else if (icon.includes('instagram')) platform = 'Instagram';

alert(`Mengarahkan ke halaman ${platform} Ledera...`);

});

</script>

</html>

Rabu, 10 September 2025

Web Design Mastery - Booking Hotel

https://www.youtube.com/watch?v=wUw8eLeJH0A&list=PLz_5rPRIvGECVDOGY8fMs3-8uZVlyJ-gr

https://webdesignmastery.github.io/Royal_Hotel_31-05-25/

https://github.com/WebDesignMastery/Royal_Hotel_31-05-25

Templat Html 2

https://smadt.net/linksite/linkpersonal.html

Prompt Design Website

Judul Website: LinkSite – Personal Links Page

Deskripsi:
Buat desain website sederhana bergaya personal link page seperti Linktree, dengan tampilan modern, minimalis, dan mobile-friendly. Website ini digunakan untuk menampilkan daftar tautan media sosial, portofolio, atau link penting.

Struktur Halaman:

Header (Profile Section):
- Foto profil berbentuk bulat (center).
- Nama lengkap pemilik website.
- Deskripsi singkat / tagline (contoh: Content Creator | Designer | Educator).
Daftar Link (Main Content):
- Tampilkan tombol/link dengan gaya kotak membulat (rounded).
- Setiap link berisi teks + ikon.
- Efek hover: background sedikit lebih gelap / ada animasi transisi halus.
- Link yang ditampilkan: Instagram, YouTube, TikTok, Portofolio, Blog, Email.
Footer:
- Teks copyright kecil (center).
- Tambahkan ikon media sosial kecil (optional).

Style & Warna:

Latar belakang (background): gradasi warna lembut (misalnya ungu → biru).
Font: modern sans-serif (contoh: Poppins, Inter).
Tombol link: warna putih dengan teks hitam, shadow lembut.
Hover: tombol sedikit membesar (scale up) + bayangan lebih jelas.

Teknologi:

HTML, CSS (flexbox/center alignment).
Responsive (ramah untuk HP).
Optional: gunakan Google Fonts untuk tipografi modern.

Index.html

<!DOCTYPE html>

<head>

<title>LinkSite – Personal Links Page</title>

</head>

<body>

<p class="profile__tagline">Content Creator | Designer | Educator</p>

</header>

<a href="#" class="link__btn"><i class="ri-instagram-line"></i> Instagram</a>

<a href="#" class="link__btn"><i class="ri-youtube-line"></i> YouTube</a>

<a href="#" class="link__btn"><i class="ri-tiktok-line"></i> TikTok</a>

<a href="#" class="link__btn"><i class="ri-briefcase-line"></i> Portfolio</a>

<a href="mailto:example@email.com" class="link__btn"><i class="ri-mail-line"></i> Email</a>

</main>

</div>

</footer>

</body>

</html>

styles.css

/* Font */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

:root {

--bg-gradient: linear-gradient(135deg, #7f7fd5, #86a8e7, #91eae4);

--white: #ffffff;

--text-dark: #111827;

--text-light: #6b7280;

--btn-shadow: rgba(0, 0, 0, 0.1);

}

/* Reset */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: "Poppins", sans-serif;

background: var(--bg-gradient);

color: var(--text-dark);

display: flex;

flex-direction: column;

align-items: center;

min-height: 100vh;

padding: 2rem 1rem;

}

/* Profile */

.profile {

text-align: center;

margin-bottom: 2rem;

}

.profile__img {

width: 120px;

height: 120px;

border-radius: 50%;

object-fit: cover;

margin-bottom: 1rem;

border: 3px solid var(--white);

box-shadow: 0 4px 8px var(--btn-shadow);

}

.profile__name {

font-size: 1.8rem;

font-weight: 700;

}

.profile__tagline {

font-size: 1rem;

font-weight: 400;

color: var(--text-light);

}

/* Links */

.links {

width: 100%;

max-width: 400px;

display: flex;

flex-direction: column;

gap: 1rem;

}

.link__btn {

background: var(--white);

color: var(--text-dark);

padding: 0.9rem 1.2rem;

border-radius: 12px;

font-size: 1.1rem;

font-weight: 600;

display: flex;

align-items: center;

justify-content: center;

gap: 0.5rem;

text-decoration: none;

box-shadow: 0 4px 10px var(--btn-shadow);

transition: all 0.3s ease;

}

.link__btn:hover {

background: #f3f4f6;

transform: scale(1.05);

box-shadow: 0 6px 14px var(--btn-shadow);

}

/* Footer */

.footer {

margin-top: auto;

text-align: center;

font-size: 0.9rem;

color: var(--white);

opacity: 0.9;

}

.footer__socials {

margin-top: 0.5rem;

display: flex;

gap: 1rem;

justify-content: center;

}

.footer__socials a {

color: var(--white);

font-size: 1.2rem;

transition: 0.3s;

}

.footer__socials a:hover {

color: #222;

}

Template HTML 1

https://smadt.net/linksite/linkcourse.html

Prompt Design Website (E-Learning Landing Page)

Judul Website: E-Learning – Single Platform for All Your Learning Needs

Desain & Layout:

Header (Navbar atas):
- Logo dengan ikon bulat berisi huruf E dan teks "Learning".
- Navigasi bagian kanan terdiri dari: ikon media sosial (Twitter, Facebook, Pinterest, Instagram).
- Kontak di pojok kanan atas: ikon telepon + nomor, ikon email + alamat email.
- Gaya minimalis, tipografi modern.
Hero Section (Bagian utama):
- Background putih bersih.
- Layout 2 kolom:
  - Kiri:
    - Judul besar (bold) "Single Platform For All Your Learning Needs."
      - Kata Learning diberi warna biru untuk penekanan.
    - Paragraf deskripsi singkat dengan warna teks abu-abu.
    - Form pencarian:
      - Input "Search for Course" dengan ikon search.
      - Input "Categories" dengan ikon panah dropdown.
      - Tombol biru "Search Now".
      - Semua elemen form dalam card dengan background abu-abu muda dan rounded corner.
  - Kanan:
    - Gambar ilustrasi (contoh: burung yang terbang atau visual bebas terkait pembelajaran/ilustrasi modern).
Footer (opsional jika ingin dibuat):
- Copyright kecil.
- Ikon media sosial tambahan.

Warna & Style:

Warna utama: biru lembut (#4A90E2 atau sejenis).
Background: putih.
Font: modern sans-serif (contoh: Poppins atau Inter).
Tombol: biru dengan teks putih, rounded, efek hover lembut.
Elemen form: clean, dengan shadow halus.

Teknologi:

HTML, CSS (Flexbox atau Grid untuk layout).
Responsive (terutama mobile-friendly).
Gunakan ikon dari RemixIcon atau FontAwesome.

index.html

<!DOCTYPE html>

<head>

<title>E-Learning Platform</title>

</head>

<body>

<span>Learning</span>

</div>

</ul>

<div>

</div>

<div>

<p>Email Us</p>

<h4>info@elearnings.com</h4>

</div>

</nav>

<h1>Single Platform For All Your <span>Learning</span> Needs.</h1>

<p>

Whether you're seeking to enhance your professional skills, explore

new hobbies, or pursue academic interests, our comprehensive platform

offers diverse courses and resources tailored to support your lifelong

learning journey.

</p>

</div>

</div>

<button type="submit">Search Now</button>

</form>

</div>

</div>

</header>

</body>

</html>

style.css

/* Font */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

:root {

--primary-color: #4a90e2;

--text-dark: #111827;

--text-light: #6b7280;

--white: #ffffff;

--max-width: 1200px;

}

/* Reset */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: "Poppins", sans-serif;

color: var(--text-dark);

background-color: var(--white);

}

/* NAVBAR */

.navbar {

max-width: var(--max-width);

margin: auto;

padding: 1rem;

display: flex;

align-items: center;

justify-content: space-between;

gap: 2rem;

border-bottom: 1px solid #ddd;

}

.nav__logo {

display: flex;

align-items: center;

gap: 0.5rem;

font-size: 1.5rem;

font-weight: 700;

color: var(--primary-color);

}

.logo-circle {

width: 35px;

height: 35px;

display: grid;

place-items: center;

background: var(--primary-color);

color: var(--white);

font-weight: 600;

border-radius: 50%;

}

/* Socials */

.nav__socials {

list-style: none;

display: flex;

gap: 1rem;

}

.nav__socials a {

font-size: 1.3rem;

color: var(--text-dark);

transition: 0.3s;

}

.nav__socials a:hover {

color: var(--primary-color);

}

/* Contact */

.nav__contact {

display: flex;

gap: 1.5rem;

}

.nav__contact__card {

display: flex;

align-items: center;

gap: 0.5rem;

font-size: 0.9rem;

}

.nav__contact__card i {

font-size: 1.5rem;

color: var(--primary-color);

}

.nav__contact__card p {

color: var(--text-light);

font-size: 0.8rem;

}

.nav__contact__card h4 {

font-size: 0.9rem;

font-weight: 600;

}

/* HEADER */

.header__container {

max-width: var(--max-width);

margin: 2rem auto;

padding: 1rem;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 2rem;

align-items: center;

}

.header__content h1 {

font-size: 2.5rem;

font-weight: 700;

margin-bottom: 1rem;

}

.header__content h1 span {

color: var(--primary-color);

}

.header__content p {

font-size: 1rem;

line-height: 1.6rem;

margin-bottom: 2rem;

color: var(--text-light);

}

/* Search form */

.search__form {

background: #f6f6f6;

padding: 1rem;

border-radius: 10px;

display: flex;

flex-direction: column;

gap: 1rem;

}

.input__row {

display: flex;

gap: 1rem;

}

.input__group {

flex: 1;

display: flex;

align-items: center;

gap: 0.5rem;

background: var(--white);

padding: 0.5rem 1rem;

border-radius: 8px;

}

.input__group input {

border: none;

outline: none;

flex: 1;

font-size: 1rem;

}

.search__form button {

background: var(--primary-color);

color: var(--white);

border: none;

padding: 0.8rem;

border-radius: 8px;

font-size: 1rem;

font-weight: 600;

cursor: pointer;

transition: 0.3s;

}

.search__form button:hover {

background: #357ac8;

}

/* Image */

.header__image img {

width: 100%;

border-radius: 10px;

}

/* Responsive */

@media (max-width: 768px) {

.header__container {

grid-template-columns: 1fr;

text-align: center;

}

.input__row {

flex-direction: column;

}