<!DOCTYPE html>
<html lang="en">

<head>
    <?php
    include('./include/header/header.php');
    ?>
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="WebDuckDesigns MN">
</head>

<body>
    <?php
    include('./include/header/navigation.php');
    ?>
    <section class="container-fluid inner-banner" style="background-image: url(./assets/images/about-banner.png);">
        <div class="container">
            <div class="row d-flex align-items-center">
                <div class="col-lg-8 col-12 mx-auto">
                    <div class="content">
                        <h1>ABOUT MINNESOTA<br><span>ONLINE HIGH SCHOOL</span></h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="container-fluid custom-website py-5" style="background-image: url(./assets/images/who-we-are-bg.png); background-size: cover; background-position: center;">
        <div class="container">
            <div class="row align-items-center">
                <!-- Left Column: About Us Text -->
                <div class="col-lg-6 col-12 order-2 order-lg-1">
                    <span class="about-subtitle">ABOUT US</span>
                    <h2 class="about-main-title">MINNESOTA ONLINE HIGH SCHOOL</h2>
                    <div class="about-line"></div>
                    <p class="about-para">
                        Minnesota Online High School is the outstanding online public high school with 20 years of experience and counting! With a 10.5-to-one student-teacher ratio, we have time to learn all about you and encourage you to expect joy in learning. Full-time or part-time, find just the right balance—for you—of challenge, community and support at MNOHS.
                    </p>
                    <p class="about-para">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                    </p>
                </div>
                <!-- Right Column: Student Image with Offset Frame -->
                <div class="col-lg-6 col-12 order-1 order-lg-2 text-center text-lg-end mb-4 mb-lg-0">
                    <div class="about-img-wrapper">
                        <img src="./assets/images/about.png" class="img-fluid" alt="Student smiling">
                    </div>
                </div>
                <!-- Full-Width Bottom Paragraphs -->
                <div class="col-12 order-3 mt-lg-5 mt-3">
                    <p class="about-para">
                        i ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
                    </p>
                    <p class="about-para">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- Mission & Vision Section -->
    <section class="mission-vision-section" style="background-image: url(./assets/images/mission-bg.png); background-size: cover; background-position: center; background-repeat: no-repeat;">
        <div class="container">
            <div class="row justify-content-center gy-5">
                <!-- Mission Card -->
                <div class="col-md-6 col-12 d-flex justify-content-center">
                    <div class="mission-vision-card">
                        <div class="card-icon-box">
                            <img src="./assets/images/mission.png" alt="Our Mission Icon">
                        </div>
                        <h3 class="card-title text-blue">OUR MISSION</h3>
                        <p class="card-text">
                            The mission of Minnesota Online High School is to engage, inspire, and educate the whole student for an options-rich future through a challenging, flexible, teacher-developed curriculum; with the encouragement of responsive faculty and staff; within a creative, equitable and supportive learning community.
                        </p>
                    </div>
                </div>
                
                <!-- Vision Card -->
                <div class="col-md-6 col-12 d-flex justify-content-center">
                    <div class="mission-vision-card">
                        <div class="card-icon-box">
                            <img src="./assets/images/vision.png" alt="Our Vision Icon">
                        </div>
                        <h3 class="card-title text-red">OUR VISION</h3>
                        <p class="card-text">
                            The mission of Minnesota Online High School is to engage, inspire, and educate the whole student for an options-rich future through a challenging, flexible, teacher-developed curriculum; with the encouragement of responsive faculty and staff; within a creative, equitable and supportive learning community.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="overlap">
        <?php
        include('./include/footer/footer.php');
        ?>
    </div>