body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
background:
linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.95)),
url();
background-size: cover;
background-attachment: fixed;
}
}
/* HEADER ANIMASI */
header {
background: linear-gradient(270deg, red, white, red);
background-size: 600% 600%;
animation: gerak 8s ease infinite;
color: white;
padding: 25px;
text-align: center;
}
@keyframes gerak {
0% {background-position: 0%}
50% {background-position: 100%}
100% {background-position: 0%}
}
/* NAV MODERN */
nav {
background: rgba(255,255,255,0.95);
display: flex;
justify-content: center;
gap: 30px;
padding: 15px 0;
border-bottom: 2px solid #d32f2f;
}
/* LINK MENU */
nav a {
text-decoration: none;
color: #d32f2f;
font-weight: bold;
display: flex;
flex-direction: column; /* ICON DI ATAS */
align-items: center;
font-size: 14px;
transition: 0.3s;
}
/* ICON */
nav a img {
width: 35px;
height: 35px;
margin-bottom: 5px;
transition: 0.3s;
}
/* HOVER EFFECT */
nav a:hover {
color: #ff0000;
transform: translateY(-5px);
}
/* ICON HOVER */
nav a:hover img {
transform: scale(1.2);
filter: drop-shadow(0 0 5px red);
}
}
//* HERO DENGAN PETA INDONESIA */
.hero {
padding: 120px 20px;
text-align: center;
color: white;
position: relative;
background:
linear-gradient(rgba(0,0,0,0.6), rgba(211,47,47,0.8)),
url('https://upload.wikimedia.org/wikipedia/commons/8/80/Indonesia_location_map.svg');
background-size: cover;
background-position: center;
}
/* efek bayangan biar teks jelas */
.hero h1 {
text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}
.hero p {
text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}
/* CARD */
.content {
padding: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.card {
background: rgba(255,255,255,0.9);
padding: 20px;
border-radius: 15px;
transition: 0.3s;
text-decoration: none;
color: black;
}
.card img {
width: 100%;
border-radius: 10px;
}
.card:hover {
transform: scale(1.05);
}
/* FOOTER */
footer {
text-align: center;
padding: 20px;
background: #b71c1c;
color: white;
}
/* WRAPPER GRID BIAR RAPI */
.content {
padding: 50px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
}
/* CARD UTAMA */
.card {
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 20px;
text-align: center;
position: relative;
overflow: hidden;
text-decoration: none;
color: black;
transition: 0.4s;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* STIKER / ICON ATAS */
.card .icon {
width: 70px;
height: 70px;
margin: -50px auto 10px;
background: white;
border-radius: 50%;
padding: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.card .icon img {
width: 100%;
}
/* GAMBAR */
.card img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 15px;
}
/* JUDUL */
.card h3 {
margin-top: 15px;
color: #d32f2f;
}
/* DESKRIPSI */
.card p {
color: #555;
}
/* HOVER EFFECT */
.card:hover {
transform: translateY(-12px) scale(1.03);
box-shadow: 0 15px 30px rgba(211,47,47,0.3);
}
/* EFEK GARIS ATAS */
.card::before {
content: '';
position: absolute;
width: 100%;
height: 5px;
top: 0;
left: 0;
background: linear-gradient(to right, red, gold);
}
/* GRID */
.content {
padding: 50px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 25px;
}
/* CARD */
.card {
background: linear-gradient(135deg, #ff4d4d, #b30000);
border-radius: 20px;
padding: 30px 20px;
text-align: center;
color: white;
text-decoration: none;
transition: 0.4s;
position: relative;
overflow: hidden;
}
/* efek motif transparan */
.card::after {
content: "";
position: absolute;
inset: 0;
background: url('https://www.transparenttextures.com/patterns/batthern.png');
opacity: 0.2;
}
/* ICON BESAR */
.card .icon {
font-size: 50px;
margin-bottom: 15px;
display: block;
transition: 0.3s;
}
/* JUDUL */
.card h3 {
margin: 10px 0;
font-size: 20px;
}
/* DESKRIPSI */
.card p {
font-size: 14px;
opacity: 0.9;
}
/* HOVER */
.card:hover {
transform: translateY(-10px) scale(1.05);
background: linear-gradient(135deg, #ff0000, #800000);
box-shadow: 0 10px 30px rgba(255,0,0,0.4);
}
/* ICON ANIMASI */
.card:hover .icon {
transform: scale(1.2) rotate(5deg);
}
/* VARIASI WARNA */
.card:nth-child(1) {
background: linear-gradient(135deg, #1565c0, #0d47a1); /* biru */
}
.card:nth-child(2) {
background: linear-gradient(135deg, #2e7d32, #1b5e20); /* hijau */
}
.card:nth-child(3) {
background: linear-gradient(135deg, #ef6c00, #e65100); /* orange */
}
.card:nth-child(4) {
background: linear-gradient(135deg, #6a1b9a, #4a148c); /* ungu */
}
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
/* BODY */
body {
background: #f5f5f5;
color: #333;
}
/* HEADER */
header {
background: linear-gradient(135deg, #d32f2f, #ff5252);
color: white;
text-align: center;
padding: 30px 20px;
}
header h1 {
margin-bottom: 10px;
}
/* NAVBAR */
nav {
display: flex;
justify-content: center;
gap: 20px;
background: white;
padding: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
nav a {
text-decoration: none;
color: #d32f2f;
font-weight: bold;
display: flex;
align-items: center;
gap: 8px;
transition: 0.3s;
}
nav a img {
width: 20px;
}
nav a:hover {
color: black;
}
/* HERO */
.hero {
text-align: center;
padding: 50px 20px;
background: #ffeaea;
}
.hero h1 {
font-size: 32px;
margin-bottom: 10px;
}
/* GRID CONTENT (BERANDA) */
.content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
padding: 20px;
}
/* CARD UMUM */
.card {
background: white;
border-radius: 15px;
padding: 20px;
text-align: center;
text-decoration: none;
color: black;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card .icon {
font-size: 40px;
display: block;
margin-bottom: 10px;
}
/* GRID MATERI */
.materi-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
/* CARD MATERI */
.materi-card {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: 0.3s;
border-top: 5px solid #d32f2f;
}
.materi-card:hover {
transform: translateY(-5px);
}
.materi-card h3 {
color: #d32f2f;
margin-bottom: 10px;
}
.materi-card p {
font-size: 14px;
line-height: 1.6;
}
/* FOOTER */
footer {
text-align: center;
padding: 20px;
background: #d32f2f;
color: white;
margin-top: 20px;
}
/* RESPONSIVE */
@media (max-width: 600px) {
nav {
flex-direction: column;
align-items: center;
}
.hero h1 {
font-size: 24px;
}
}
/* GAMBAR ICON BESAR */
.materi-img {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 15px;
}
/* Biar card lebih rapi tengah */
.materi-card {
text-align: center;
}
/* Animasi biar hidup */
.materi-card:hover .materi-img {
transform: scale(1.15);
transition: 0.3s;
}
/* HERO BACKGROUND */
.hero {
height: 90vh;
background:
linear-gradient(rgba(0,0,0,0.5), rgba(211,47,47,0.6)),
url('img/Bg.png'); /* ganti dengan nama file bg kamu */
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
/* ISI HERO */
.hero-content {
animation: fadeIn 1.5s ease;
}
.hero h1 {
font-size: 40px;
margin-bottom: 10px;
}
.hero p {
font-size: 18px;
margin-bottom: 20px;
}
/* BUTTON HERO */
.hero-btn {
background: white;
color: #d32f2f;
padding: 12px 20px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}
.hero-btn:hover {
background: #d32f2f;
color: white;
}
/* ANIMASI */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =====================
RESET & BASE STYLE
===================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
background-color: #f4f6f8;
color: #2c3e50;
line-height: 1.7;
}
/* =====================
CONTAINER
===================== */
.container {
max-width: 1000px;
margin: 80px auto 40px;
padding: 20px;
}
/* =====================
NAVBAR
===================== */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: #c0392b;
color: white;
padding: 15px 20px;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.navbar h1 {
font-size: 20px;
}
/* =====================
CARD / CONTENT BOX
===================== */
.content {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
/* =====================
HEADINGS
===================== */
h1 {
font-size: 32px;
margin-bottom: 20px;
color: #c0392b;
}
h2 {
font-size: 24px;
margin: 30px 0 15px;
border-left: 5px solid #c0392b;
padding-left: 10px;
}
h3 {
font-size: 20px;
margin: 20px 0 10px;
color: #34495e;
}
/* =====================
TEXT & LIST
===================== */
p {
margin-bottom: 15px;
}
ul {
margin-left: 20px;
margin-bottom: 15px;
}
li {
margin-bottom: 8px;
}
/* =====================
HIGHLIGHT BOX
===================== */
.highlight {
background: #fff3cd;
border-left: 6px solid #f1c40f;
padding: 15px;
border-radius: 6px;
margin-top: 20px;
}
/* =====================
FAQ STYLE
===================== */
.faq p {
margin-bottom: 10px;
}
.faq strong {
color: #c0392b;
}
/* =====================
LINKS
===================== */
a {
color: #c0392b;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* =====================
TABLE (optional)
===================== */
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
table th, table td {
border: 1px solid #ddd;
padding: 10px;
}
table th {
background: #c0392b;
color: white;
}
/* =====================
BUTTON (optional)
===================== */
.button {
display: inline-block;
padding: 10px 15px;
background: #c0392b;
color: white;
border-radius: 6px;
transition: 0.3s;
}
.button:hover {
background: #a93226;
}
/* =====================
FOOTER
===================== */
.footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: #777;
}
/* =====================
RESPONSIVE
===================== */
@media (max-width: 768px) {
.container {
margin: 100px 10px 20px;
padding: 10px;
}
.content {
padding: 20px;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}
}