<?xml version="1.0" encoding="UTF-8"?>
<?pcf-stylesheet path="/_resources/xsl/interior.xsl" title="HTML" extension="html"?>

<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">

<document xmlns:ouc="http://omniupdate.com/XSL/Variables">

    <headcode></headcode> <!-- before closing head tag -->
    <bodycode></bodycode> <!-- after opening body tag -->
    <footcode></footcode> <!-- before closing body tag -->

    <ouc:properties label="metadata">
        <title>test2</title>
        <meta name="Description" content="" />
        <meta name="Keywords" content="" />
    </ouc:properties>

    <ouc:properties label="config">
        <parameter name="heading" type="text" group="Everyone" prompt="Page Heading"
            alt="Please enter the page heading.">test2</parameter>
        <parameter name="breadcrumb" type="text" group="Everyone" prompt="Custom Breadcrumb"
            alt="Default is Page Heading. This is not used on index pages."></parameter>
        <parameter name="hero-img" type="filechooser" dependency="yes" group="Everyone" prompt="Hero Banner Image"
            alt="Choose optional banner image file.">{{f:73773098}}</parameter>
        <parameter section="Page Layout" name="layout" group="Everyone" type="radio" prompt="Select Page Layout" alt="">
            <option value="full-width" selected="true">Full-Width</option>
            <option value="two-col" selected="false">Two-Column</option>
        </parameter>
        <parameter section="Social Meta Tags" name="override-og-image" type="filechooser" group="Everyone"
            prompt="Og Image" alt="Please choose the open graph image. Recommended dimension: 1200x630."
            dependency="yes"></parameter>
        <parameter name="override-og-image-alt" type="text" group="Everyone" prompt="Og Image Alt"
            alt="Please enter the open graph image alt text."></parameter>
        <parameter name="override-og-title" type="text" group="Everyone" prompt="Og Title"
            alt="Please enter the open graph title. Defaults to the page title when this field is blank."></parameter>
        <parameter name="override-og-description" type="text" rows="4" group="Everyone" prompt="Og Description"
            alt="Please enter the open graph description. Defaults to the page description when this field is blank.">
        </parameter>
        <parameter name="override-twitter-card-image" type="filechooser" group="Everyone" prompt="Twitter Card Image"
            alt="Please choose the twitter card image. This image size needs to be below 5MB in size per Twitter Documentation."
            dependency="yes"></parameter>
        <parameter name="override-twitter-card-image-alt" type="text" group="Everyone" prompt="Twitter Card Image Alt"
            alt="Please enter the twitter card image alt text. This alt text will be trimmed at a length of 420 characters per Twitter Documentation.">
        </parameter>
        <parameter name="override-twitter-card-title" type="text" group="Everyone" prompt="Twitter Card Title"
            alt="Please enter the twitter card title. Defaults to the page title when this field is blank."></parameter>
        <parameter name="override-twitter-card-description" type="text" rows="4" group="Everyone"
            prompt="Twitter Card Description"
            alt="Please enter the twitter card description. This description will trimmed at 200 characters per Twitter Documentation. Defaults to the page description when this field is blank.">
        </parameter>
        <parameter name="override-twitter-card-type" type="select" group="Everyone" prompt="Twitter Card Type"
            alt="Please choose the twitter card type.">
            <option value="summary" selected="false">Summary</option>
            <option value="summary_large_image" selected="true">Summary Large Image</option>
        </parameter>
    </ouc:properties>

    <ouc:div label="main-content" style="padding: 0;" group="Everyone" button-text="Main Content"><ouc:editor csspath="/_resources/ou/editor/wysiwyg.css" cssmenu="/_resources/ou/editor/styles.txt" wysiwyg-class="main-content"/><div class="container" style="padding: 0;">
<div class="row gx-5" style="padding: 0;">
<div class="col-lg-4 p-0 p-lg-4">
<div class="d-flex justify-content-center mb-4"><video width="100%" height="250px" controls="controls"><source src="{{f:74232493}}" type="video/mp4" /></video></div>
<hr />
<div class="sidenav-accordion">
<div id="SidenavAccordionPanels" class="accordion">
<div><button class="sidenav-heading accordion-button collapsed" type="button" data-bs-target="#sidenav-mobile" aria-expanded="false" aria-controls="sidenav-mobile"> Resources </button></div>
<div id="sidenav-mobile" class="accordion-main-collapse accordion-collapse collapse show">
<div class="accordion-item">
<div id="sidenav-headingOne" class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidenav-collapseOne" aria-expanded="false" aria-controls="sidenav-collapseOne"> How Do I Pay For This? </button></div>
<div id="sidenav-collapseOne" class="accordion-collapse collapse" aria-labelledby="sidenav-headingOne">
<div class="accordion-body"><a href="#">Scholarships</a> <a href="#">Financial Aid</a></div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header"><a class="accordion-button collapsed" href="#/"> Degree Plan </a></div>
</div>
<div class="accordion-item">
<div class="accordion-header"><a class="accordion-button collapsed" href="#/"> Faculty </a></div>
</div>
<div class="accordion-item">
<div class="accordion-header"><a class="accordion-button collapsed" href="#/"> Career Coach </a></div>
</div>
<div class="accordion-item">
<div class="accordion-header"><a class="accordion-button collapsed" href="#/"> Apply Now </a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 mb-5" style="padding: 0;">
<p class="px-3 px-sm-0 pb-4">Program summary goes here. A couple of sentences. Program summary goes here. A couple of sentences. Program summary goes here. A couple of sentences. Program summary goes here. A couple of sentences. Program summary goes here. A couple of sentences.</p>
<table class="ou-" data-snippet="ou-checkerboards"><caption class="mceNonEditable">Checkerboards</caption>
<thead>
<tr>
<td class="mceNonEditable" colspan="4" data-name="instructional-heading">Insert new rows as needed below. Rows will alternate order of the image and content automatically.</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" data-name="side" data-select-list="sides">right</td>
</tr>
<tr data-name="item">
<td data-name="image" data-type="image"><img style="object-position: 30px 30px;" src="{{f:72577666}}" alt="alt" width="1800" height="1200" /></td>
<td colspan="3" data-name="content" data-type="wysiwyg">
<div class="w-100 text-center d-flex flex-column align-items-center justify-content-center">
<div class="w-100">
<div class="d-flex flex-column align-items-center" style="height: 20%;">
<h1 style="margin: 0; line-height: 0.9em;">Time + Cost</h1>
<p>(total for tuition, fees + books)</p>
</div>
<div class="d-flex flex-column align-items-center justify-content-center" style="height: 80%;">
<div class="d-flex flex-row align-items-center"><span class="stats-icon"> <span class="material-symbols-outlined" style="font-size: 2em;"> schedule </span> </span>
<h3 style="margin-left: 0.2em;">4 Semesters</h3>
</div>
<div class="d-flex flex-row align-items-center">
<div class="stats-icon">
<div class="material-symbols-outlined" style="font-size: 2em;">money_bag</div>
</div>
<h3 style="margin-left: 0.2em;">$16,500</h3>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr data-name="item">
<td data-name="image" data-type="image"><img src="{{f:72577675}}" alt="alt" width="1919" height="1281" /></td>
<td colspan="3" data-name="content" data-type="wysiwyg">
<div class="w-100 text-center d-flex flex-column align-items-center justify-content-center">
<div class="w-100 pt-1 d-flex flex-column">
<h2 class="m-0 text-center" style="line-height: 1em;">Careers + Average Salaries</h2>
<p>(regionally)</p>
</div>
<div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center" style="font-size: 1.2em;">
<div class="w-100 d-flex justify-content-between">
<p>Elementary Teacher</p>
<p style="font-weight: bold;">$47,878</p>
</div>
<div class="w-100 d-flex justify-content-between">
<p>Special Education</p>
<p style="font-weight: bold;">$56,991</p>
</div>
<div class="w-100 d-flex justify-content-between">
<p>Experienced Teacher</p>
<p style="font-weight: bold;">$65,056</p>
</div>
</div>
</div>
</td>
</tr>
<tr style="display: block;" data-name="item">
<td data-name="image" data-type="image"><img src="{{f:72577666}}" alt="alt" width="1800" height="1200" /></td>
<td colspan="3" data-name="content" data-type="wysiwyg">
<div class="w-100 text-center d-flex flex-column align-items-center justify-content-center">
<div class="w-100 pt-1 d-flex flex-column">
<h1 class="m-0 w-100" style="line-height: 1em;">Jobs Available</h1>
<p>(regionally)</p>
</div>
<div class="w-100 d-flex align-items-center justify-content-center">
<div class="stats-icon">
<div class="material-symbols-outlined" style="font-size: 2.2em;">check_circle</div>
</div>
<h1 style="margin-left: 0.1em;">489</h1>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></ouc:div>
</document>