<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta name="author" content="SemiColonWeb">
	<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable &amp; Best Selling Bootstrap Template, today.">

	<!-- Font Imports -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">

	<!-- Core Style -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Font Icons -->
	<link rel="stylesheet" href="css/font-icons.css">
	<link rel="stylesheet" href="css/et-line.css">

	<!-- One Page Module Specific Stylesheet -->
	<link rel="stylesheet" href="css/onepage.css">

	<!-- Custom CSS -->
	<link rel="stylesheet" href="css/custom.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Document Title
	============================================= -->
	<title>One Page Module | Canvas</title>

</head>

<body class="stretched side-push-panel">

	<div class="body-overlay"></div>

	<!-- Document Wrapper
	============================================= -->
	<div id="wrapper">

		<!-- Header
		============================================= -->
		<header id="header" class="full-header transparent-header border-full-header dark header-size-custom" data-sticky-shrink="false" data-sticky-class="not-dark" data-sticky-offset="full" data-sticky-offset-negative="auto">
			<div id="header-wrap">
				<div class="container" style="background: #00A859;">
					<div class="header-row">

						<!-- Logo
						============================================= -->
						<div id="logo">
							<a href="<?= base_url() ?>">
								<img class="logo-default" srcset="images/logo.jpg 2x" src="images/logo.jpg" alt="Logo">
								<img class="logo-dark" srcset="images/logo.jpg, images/logo.jpg 2x" src="images/logo.jpg" alt="Logo">
							</a>
						</div><!-- #logo end -->

						<div class="primary-menu-trigger">
							<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
								<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
							</button>
						</div>

						<!-- Primary Navigation
						============================================= -->
						<nav class="primary-menu">

							<ul class="one-page-menu menu-container" data-easing="easeInOutExpo" data-speed="1250" data-offset="65">
								<li class="menu-item">
									<a href="<?= base_url() ?>#section-about" class="menu-link"><div>Beranda</div></a>
								</li>
								<li class="menu-item">
									<a href="<?= base_url() ?>#section-category" class="menu-link"><div>Kategori Lomba</div></a>
								</li>
								<li class="menu-item">
									<a href="<?= base_url() ?>#section-timeline" class="menu-link"><div>Timeline</div></a>
								</li>
								<li class="menu-item">
									<a href="<?= base_url() ?>#section-contact" class="menu-link"><div>Kontak</div></a>
								</li>
							</ul>

						</nav><!-- #primary-menu end -->

					</div>
				</div>
			</div>
			<div class="header-wrap-clone"></div>
		</header><!-- #header end -->
		<section id="content">
			<div class="content-wrap py-0">

				<div id="section-about2" class="text-center page-section" style="padding-bottom: 200px">

					<div class="container">

						<div class="mx-auto mb-5 d-flex">
                            <img src="images/matsu fair.png">
                            <h2 class="custom-header my-auto ml-2" style="text-align:left;margin-left:20px">PERLOMBAAN SISWA/SISWI SD/MI <br>
                                TINGKAT JAWA BARAT 2024
                            </h2>   
                        </div>

						<div class="card-form">
                           
                        <form action="/daftar/submit" method="POST" enctype="multipart/form-data">
                        <?= csrf_field() ?>
    <div class="form-group">
        <label for="nama">NAMA</label>
        <input type="text" class="form-control" id="nama" name="nama" required>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <label for="tempat_lahir">TEMPAT LAHIR</label>
            <input type="text" class="form-control" id="tempat_lahir" name="tempat_lahir" required>
        </div>
        <div class="form-group col-md-6">
            <label for="tanggal_lahir">TANGGAL LAHIR</label>
            <input type="date" class="form-control" id="tanggal_lahir" name="tanggal_lahir" required>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <label for="nomor_hp">NOMOR HP</label>
            <input type="tel" class="form-control" id="nomor_hp" name="nomor_hp" pattern="[0-9]{10,13}" required>
        </div>
        <div class="form-group col-md-6">
            <label for="nisn">NISN</label>
            <input type="text" class="form-control" id="nisn" name="nisn" pattern="\d{10}" maxlength="10" required>
        </div>
    </div>
    <div class="form-group">
        <label for="alamat">ALAMAT</label>
        <textarea class="form-control" id="alamat" name="alamat" rows="3" required></textarea>
    </div>

    <div class="form-group">
        <label>JENIS LOMBA YANG DIIKUTI</label>
        <div class="custom-radio">
            <input type="radio" id="mhq" name="jenis_lomba" value="MHQ" required>
            <label for="mhq">MUSABAQOH HIFDZIL QUR'AN (MHQ)</label>
        </div>
        <div class="custom-radio">
            <input type="radio" id="storytelling" name="jenis_lomba" value="Story Telling">
            <label for="storytelling">STORY TELLING</label>
        </div>
        <div class="custom-radio">
            <input type="radio" id="sardulqishoh" name="jenis_lomba" value="Sardul Qishoh">
            <label for="sardulqishoh">SARDUL QISHOH</label>
        </div>
    </div>

    <div class="form-group">
        <label for="link_video">LINK VIDEO</label>
        <input type="url" class="form-control" id="link_video" name="link_video" required>
    </div>

    <div class="form-group">
        <label for="screenshot_follow">File Bukti Screenshot Follow Social Media MTs KH. A. Wahab Muhsin</label>
        <input type="file" class="form-control" id="screenshot_follow" name="screenshot_follow" accept=".jpg, .jpeg, .png" required>
    </div>

    <div class="form-group">
        <label for="bukti_pembayaran">FOTO BUKTI PEMBAYARAN</label>
        <input type="file" class="form-control" id="bukti_pembayaran" name="bukti_pembayaran" accept=".jpg, .jpeg, .png" required>
    </div>

    <div class="form-group">
        <label for="file_rapor">File Rapor Siswa/i Kelas V Semester Genap</label>
        <input type="file" class="form-control" id="file_rapor" name="file_rapor" accept=".pdf, .jpg, .jpeg, .png" required>
    </div>

    <button type="submit" class="btn btn-submit btn-lg w-100">Kirim</button>
</form>


                        </div>
                        

					</div>

				</div>

			</div>
		</section><!-- #content end -->

		<!-- Footer
		============================================= -->
		<footer id="footer" class="border-0">

<!-- 
            <div id="copyrights">
                    <div class="container text-center">
                        Copyrights Canvas 2020 | All Rights Reserved
                    </div>
            </div> -->
			<div class="footer-custom">
                <div class="row">
                    <div class="col-md-4 mb-4"> 
                        <i class="fa-brands fa-twitter"></i> @mtskhawm
                    </div>
                    <div class="col-md-4 mb-4">
                        <i class="fa-brands fa-facebook"></i> MTS Sukahideng                       
                    </div>
                    <div class="col-md-4 mb-4">
                        <i class="fa-brands fa-instagram"></i> <i class="fa-brands fa-tiktok"></i> @mtskhawabmuhsin
                    </div>
                    <div class="col-md-6 mb-2">
                        <i class="fa-brands fa-youtube"></i> MTS KH. A. Wahab Muhsin
                    </div>
                    <div class="col-md-6 mb-2">
                        <i class="bi bi-globe"></i> mtskhawabmuhsin.sch.id
                    </div>
                </div>
			</div>

		</footer><!-- #footer end -->

	</div><!-- #wrapper end -->

	<!-- Go To Top
	============================================= -->
	<div id="gotoTop" class="uil uil-angle-up"></div>

	<!-- JavaScripts
	============================================= -->
	<script src="js/functions.js"></script>

</body>
</html>