body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background: linear-gradient(to bottom, #0099ff, #0066cc); padding: 10px; color: #fff; } nav { display: flex; justify-content: space-between; align-items: center; } .nav-logo { font-size: 24px; font-weight: bold; } .hamburger-menu { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; cursor: pointer; border: none; background: transparent; padding: 0; } .line { width: 100%; height: 3px; background: #fff; } .main { max-width: 800px; margin: 0 auto; padding: 20px; } .featured-blogpost { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; margin-bottom: 20px; } .blogpost img { width: 100%; height: auto; } .blogpost h2, .blogpost h3 { margin: 10px 0; } .pagination { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .pagination ul { list-style: none; padding: 0; margin: 0; display: flex; } .pagination li { margin: 0 5px; } .pagination a { text-decoration: none; color: #000; padding: 5px 10px; border: 1px solid #ccc; border-radius: 3px; } .pagination a:hover { background: #0099ff; color: #fff; } @media (min-width: 768px) { /* Gunakan media query untuk tampilan desktop dengan lebar minimal 768px */ .nav-menu { display: flex; justify-content: flex-start; /* Mengubah posisi menu menjadi mulai dari kiri */ align-items: center; } .nav-menu-item { margin-right: 20px; /* Menambahkan margin kanan antar menu item */ } .hamburger-menu { display: none; /* Menyembunyikan hamburger menu di tampilan desktop */ } } @media (max-width: 767px) { /* Gunakan media query untuk tampilan mobile dengan lebar maksimal 767px */ .nav-menu { position: fixed; top: 0; right: -100%; /* Menggeser menu keluar dari tampilan normal */ width: 100%; height: 100vh; background: linear-gradient(to left, #0099ff, #0066cc); transition: left 0.3s ease; /* Menambahkan transisi agar animasi muncul lebih halus */ display: flex; flex-direction: column; justify-content: center; align-items: center; } .nav-menu.active { right: 0; /* Menggeser menu ke posisi tampilan penuh */ } .nav-menu-item { margin: 10px 0; /* Menambahkan margin atas dan bawah antar menu item */ color: #fff; text-decoration: none; } .hamburger-menu { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; /* Mengubah posisi hamburger menu menjadi di kanan */ width: 40px; height: 30px; cursor: pointer; border: none; background: transparent; padding: 0; } .line { width: 100%; height: 3px; background: linear-gradient(to left, #0099ff, #0066cc); transition: transform 0.3s ease; /* Menambahkan transisi agar animasi hamburger lebih halus */ } .hamburger-menu.active .line:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .hamburger-menu.active .line:nth-child(2) { opacity: 0; } .hamburger-menu.active .line:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); } } .facebook-icon:before { content: "\f09a"; margin-right: 5px; font-family: FontAwesome; } .twitter-icon:before { content: "\f099"; margin-right: 5px; font-family: FontAwesome; } .instagram-icon:before { content: "\f16d"; margin-right: 5px; font-family: FontAwesome; } footer { background-color: #f2f2f2; padding: 20px; } .footer-content { display: flex; flex-wrap: wrap; } .footer-section { flex: 1 1 100%; margin-bottom: 20px; } .footer-section h3 { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .footer-section p { font-size: 14px; line-height: 1.5; } .social-media { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; } .social-media li { margin-right: 10px; } .social-media li:last-child { margin-right: 0; } .social-media a { color: #333; text-decoration: none; font-size: 20px; } .footer-bottom { text-align: center; margin-top: 20px; font-size: 12px; color: #888; } margin: 0; display: flex; } .social-media li { margin-right: 10px; } .social-media li:last-child { margin-right: 0; } .social-media a { color: #333; text-decoration: none; font-size: 20px; } .footer-bottom { text-align: center; margin-top: 20px; font-size: 12px; color: #888; }