mfebykhoirusidqi/gist:ab82846ec47133b33342016e7f03b7fc

## gistfile1.txt
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try Out Precision UKPPG by Gemini AI - Beranda</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            color: #333;
        }

        .header {
            background-color: #2196F3; /* Google Blue */
            color: white;
            padding: 25px 0;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            margin-bottom: 30px;
        }

        .header h1 {
            margin: 0;
            font-size: 2.8em;
            font-weight: 700;
            letter-spacing: 1px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }

        .header p {
            font-size: 1.1em;
            margin-top: 5px;
            opacity: 0.9;
        }

        .container {
            flex-grow: 1;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            animation: fadeIn 1s ease-out;
        }

        .card {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            padding: 25px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
        }

        .card h2 {
            color: #1a73e8; /* Deeper Google Blue */
            font-size: 1.8em;
            margin-top: 0;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .card p {
            font-size: 1em;
            color: #555;
            line-height: 1.6;
            margin-bottom: 25px;
            flex-grow: 1; /* Allows card content to push button down */
        }

        .start-button {
            display: inline-block;
            background-color: #4CAF50; /* Green for start */
            color: white;
            padding: 12px 25px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1em;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 128, 0, 0.2);
        }

        .start-button:hover {
            background-color: #45a049;
            transform: translateY(-2px);
        }

        .footer {
            background-color: #3f51b5; /* Darker Blue */
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 40px;
            font-size: 0.9em;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2em;
            }
            .header p {
                font-size: 0.9em;
            }
            .card {
                padding: 20px;
            }
            .card h2 {
                font-size: 1.5em;
            }
            .start-button {
                padding: 10px 20px;
                font-size: 1em;
            }
        }
    </style>
</head>
<body>

    <header class="header">
        <h1>Try Out Prediction UKPPG</h1>
        <p>Disiapkan Khusus oleh Gemini AI untuk Kesuksesan Anda!</p>
    </header>

    <main class="container">
        <div class="card">
            <h2>Kelas Berpusat pada Peserta Didik</h2>
            <p>Materi ini fokus pada strategi pengelolaan kelas yang efektif untuk menciptakan lingkungan belajar yang aktif dan berpihak pada anak.</p>
            <a href="kuis-1.html" class="start-button">Mulai Kuis</a>
        </div>

        <div class="card">
            <h2>Kurikulum Merdeka dan P5</h2>
            <p>Pahami konsep dasar Kurikulum Merdeka dan implementasi Proyek Penguatan Profil Pelajar Pancasila (P5) dalam pembelajaran.</p>
            <a href="quiz-kurikulum-merdeka.html" class="start-button">Mulai Kuis</a>
        </div>

        <div class="card">
            <h2>Penilaian Autentik</h2>
            <p>Selami berbagai jenis penilaian autentik yang relevan untuk mengukur pemahaman dan keterampilan peserta didik secara komprehensif.</p>
            <a href="quiz-penilaian-autentik.html" class="start-button">Mulai Kuis</a>
        </div>

        <div class="card">
            <h2>Modul Ajar dan RPP</h2>
            <p>Pelajari cara menyusun modul ajar dan Rencana Pelaksanaan Pembelajaran (RPP) yang efektif dan inovatif.</p>
            <a href="quiz-modul-ajar.html" class="start-button">Mulai Kuis</a>
        </div>

        <div class="card">
            <h2>Kompetensi Pedagogik Guru</h2>
            <p>Uji pemahaman Anda tentang kompetensi pedagogik esensial yang harus dimiliki seorang guru profesional.</p>
            <a href="quiz-pedagogik.html" class="start-button">Mulai Kuis</a>
        </div>

        <div class="card">
            <h2>ICT dalam Pembelajaran</h2>
            <p>Manfaatkan teknologi informasi dan komunikasi untuk mendukung proses pembelajaran yang lebih interaktif dan menarik.</p>
            <a href="quiz-ict.html" class="start-button">Mulai Kuis</a>
        </div>

    </main>

    <footer class="footer">
        &copy; 2025 Try Out Precision UKPPG by Gemini AI. All rights reserved.
    </footer>

</body>
</html>
	<!DOCTYPE html>
	<html lang="id">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Try Out Precision UKPPG by Gemini AI - Beranda</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
	<style>
	body {
	font-family: 'Poppins', sans-serif;
	background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: #333;
	}

	.header {
	background-color: #2196F3; /* Google Blue */
	color: white;
	padding: 25px 0;
	text-align: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	margin-bottom: 30px;
	}

	.header h1 {
	margin: 0;
	font-size: 2.8em;
	font-weight: 700;
	letter-spacing: 1px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	}

	.header p {
	font-size: 1.1em;
	margin-top: 5px;
	opacity: 0.9;
	}

	.container {
	flex-grow: 1;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	animation: fadeIn 1s ease-out;
	}

	.card {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	padding: 25px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}

	.card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
	}

	.card h2 {
	color: #1a73e8; /* Deeper Google Blue */
	font-size: 1.8em;
	margin-top: 0;
	margin-bottom: 15px;
	font-weight: 600;
	}

	.card p {
	font-size: 1em;
	color: #555;
	line-height: 1.6;
	margin-bottom: 25px;
	flex-grow: 1; /* Allows card content to push button down */
	}

	.start-button {
	display: inline-block;
	background-color: #4CAF50; /* Green for start */
	color: white;
	padding: 12px 25px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.1em;
	transition: background-color 0.3s ease, transform 0.2s ease;
	box-shadow: 0 4px 10px rgba(0, 128, 0, 0.2);
	}

	.start-button:hover {
	background-color: #45a049;
	transform: translateY(-2px);
	}

	.footer {
	background-color: #3f51b5; /* Darker Blue */
	color: white;
	text-align: center;
	padding: 20px 0;
	margin-top: 40px;
	font-size: 0.9em;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
	}

	@media (max-width: 768px) {
	.header h1 {
	font-size: 2em;
	}
	.header p {
	font-size: 0.9em;
	}
	.card {
	padding: 20px;
	}
	.card h2 {
	font-size: 1.5em;
	}
	.start-button {
	padding: 10px 20px;
	font-size: 1em;
	}
	}
	</style>
	</head>
	<body>

	<header class="header">
	<h1>Try Out Prediction UKPPG</h1>
	<p>Disiapkan Khusus oleh Gemini AI untuk Kesuksesan Anda!</p>
	</header>

	<main class="container">
	<div class="card">
	<h2>Kelas Berpusat pada Peserta Didik</h2>
	<p>Materi ini fokus pada strategi pengelolaan kelas yang efektif untuk menciptakan lingkungan belajar yang aktif dan berpihak pada anak.</p>
	<a href="kuis-1.html" class="start-button">Mulai Kuis</a>
	</div>

	<div class="card">
	<h2>Kurikulum Merdeka dan P5</h2>
	<p>Pahami konsep dasar Kurikulum Merdeka dan implementasi Proyek Penguatan Profil Pelajar Pancasila (P5) dalam pembelajaran.</p>
	<a href="quiz-kurikulum-merdeka.html" class="start-button">Mulai Kuis</a>
	</div>

	<div class="card">
	<h2>Penilaian Autentik</h2>
	<p>Selami berbagai jenis penilaian autentik yang relevan untuk mengukur pemahaman dan keterampilan peserta didik secara komprehensif.</p>
	<a href="quiz-penilaian-autentik.html" class="start-button">Mulai Kuis</a>
	</div>

	<div class="card">
	<h2>Modul Ajar dan RPP</h2>
	<p>Pelajari cara menyusun modul ajar dan Rencana Pelaksanaan Pembelajaran (RPP) yang efektif dan inovatif.</p>
	<a href="quiz-modul-ajar.html" class="start-button">Mulai Kuis</a>
	</div>

	<div class="card">
	<h2>Kompetensi Pedagogik Guru</h2>
	<p>Uji pemahaman Anda tentang kompetensi pedagogik esensial yang harus dimiliki seorang guru profesional.</p>
	<a href="quiz-pedagogik.html" class="start-button">Mulai Kuis</a>
	</div>

	<div class="card">
	<h2>ICT dalam Pembelajaran</h2>
	<p>Manfaatkan teknologi informasi dan komunikasi untuk mendukung proses pembelajaran yang lebih interaktif dan menarik.</p>
	<a href="quiz-ict.html" class="start-button">Mulai Kuis</a>
	</div>

	</main>

	<footer class="footer">
	© 2025 Try Out Precision UKPPG by Gemini AI. All rights reserved.
	</footer>

	</body>
	</html>