<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="assets/logoFLS3N.png" type="image/x-icon">

    <title>Festival dan Lomba Seni Siswa Nasional (FLS3N)</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }



        body {

            background-color: #f5f5f5;

        }



        /* Header styles */

        header {

            background-color: #a61a50;

            color: white;

            padding: 15px 0;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .logo-container {

            display: flex;

            align-items: center;

            margin-left: 20px;

        }



        .logo {

            height: 40px;

            margin-right: 10px;

        }



        .header-title {

            font-size: 1.2rem;

            font-weight: bold;

        }



        .navigation {

            margin-right: 20px;

        }



        .navigation a {

            color: white;

            text-decoration: none;

            margin-left: 20px;

            font-size: 1rem;

        }



        /* Hero section styles */

        .hero {

            background-color: #b71e5c;

            color: white;

            min-height: 80vh;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            text-align: center;

            padding: 50px 20px;

        }



        .emblem {

            width: 150px;

            margin-bottom: 30px;

        }



        .info-text {

            margin-bottom: 20px;

            font-size: 1.2rem;

        }



        .main-title {

            font-size: 2.5rem;

            font-weight: bold;

            margin-bottom: 15px;

            text-transform: uppercase;

        }



        .subtitle {

            font-size: 1.5rem;

            margin-bottom: 40px;

        }



        .year {

            font-size: 1.3rem;

            margin-bottom: 40px;

        }



        .separator {

            display: flex;

            align-items: center;

            margin: 20px 0;

            width: 200px;

        }



        .separator hr {

            flex-grow: 1;

            height: 2px;

            background-color: white;

            border: none;

        }



        .separator .star {

            font-size: 1.5rem;

            margin: 0 10px;

        }



        .tagline {

            font-size: 1.2rem;

            margin-bottom: 40px;

            font-style: italic;

        }



        .btn-masuk {

            background-color: white;

            color: #b71e5c;

            padding: 12px 30px;

            border-radius: 30px;

            text-decoration: none;

            font-weight: bold;

            font-size: 1.1rem;

            border: none;

            cursor: pointer;

            transition: all 0.3s ease;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        }



        .btn-masuk:hover {

            background-color: #f0f0f0;

            transform: translateY(-3px);

            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

        }



        /* Footer styles */

        footer {

            background-color: #a61a50;

            color: white;

            padding: 20px;

            text-align: center;

            font-size: 0.9rem;

        }



        footer a {

            color: white;

            text-decoration: none;

        }



        .footer-info {

            max-width: 800px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <header>

        <div class="logo-container">

            <img src="assets/unisbank.png" alt="Logo unisbank" class="logo">

            <img src="assets/logoFLS3N.png" alt="Logo FLS3N" class="logo">

            <span class="header-title">FLS3N 2026</span>

        </div>



        <nav class="navigation">

            <a href="#"></a>

            <a href="#"></a>

            <a href="#"></a>

        </nav>

    </header>



    <main>

        <section class="hero">

            <img src="assets/jatengfls.png" alt="Logo FLS3N" class="emblem">

            <p class="info-text">Portal Pengumpulan Karya Seni dan Sastra Siswa Nasional</p>

            <h1 class="main-title">CABANG DINAS PENDIDIKAN<br>WILAYAH I</h1>

            <h2 class="subtitle">DINAS PENDIDIKAN PROVINSI JAWA TENGAH</h2>



            <div class="separator">

                <hr>

                <span class="star">★</span>

                <hr>

            </div>



            <p class="tagline">"Ajang Prestasi untuk Mengembangkan Bakat dan Minat Siswa"</p>



            <a href="dashboard_awal" class="btn-masuk">MASUK DASHBOARD →</a>

        </section>

    </main>



    <footer>

        <div class="footer-info">

            <p>Portal ini dikembangkan dan dikelola oleh Fakultas Teknologi Informasi & Industri (FTII) Universitas Stikubank Semarang</p>

            <p>@<?php echo date('Y'); ?> FTI Unisbank. All rights reserved.</p>

            <p><a href="https://linktr.ee/ourteamftii">Our Team</a></p>

        </div>

    </footer>

</body>

</html>
