php js css php js css

Changes

Changes to Design: Design #2

221036
Today 4:31am
Guevarra, Kim
Modified design
221037
Today 4:31am
Guevarra, Kim
Modified design
Css:
Id:
16
16
Deleted Datetime:

															

														
Type:
web
web
Title:
Design #2
Design #2
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="google-site-verification" content="LQLLn9dwNbtTdmbzIBtrjoG_9viQ5dSph_YsAYrnMP8" />
<link href="/media/website_designs/16/favicon.png" rel="icon" sizes="32x32"/>
<templates:styles
boxsizingborderbox="true"
maxwidthmedia="true"

rootfontsize="17px"
rootfontsizemobile="15px"
lastusedratio="1.333"
bodyfontlibrary="google"
bodyfontfamily="Albert Sans"
bodyfontweight="400"
bodycolor="#242424"
bodyfontsize="1rem"
bodylineheight="1.55rem"
bodymargintop="0rem"
bodymarginbottom="0.8rem"

h1fontlibrary="google"
h1fontfamily="PT Serif"
h1fontweight="700"
h1color=""
h1fontsize="3.375rem"
h1lineheight="2.8411rem"
h1margintop="3.1rem"
h1marginbottom="1.6rem"

h2fontlibrary="google"
h2fontfamily="PT Serif"
h2fontweight="400"
h2color=""
h2fontsize="1.7768rem"
h2lineheight="2.2490rem"
h2margintop="3.1rem"
h2marginbottom="1.6rem"
h3fontlibrary="google"
h3fontfamily="PT Serif"
h3fontweight="400"
h3color=""
h3fontsize="1.333rem"
h3lineheight="1.833rem"
h3margintop="2.3rem"
h3marginbottom="0.8rem"

h4fontlibrary="google"
h4fontfamily="Albert Sans"
h4fontweight="700"
h4color=""
h4fontsize="1rem"
h4lineheight="1.55rem"
h4margintop="2.3rem"
h4marginbottom="0.8rem"

h5fontlibrary="google"
h5fontfamily="Albert Sans"
h5fontweight="700"
h5color=""
h5fontsize="1rem"
h5lineheight="1.55rem"
h5margintop="1.6rem"
h5marginbottom="0.8rem"

acolor="#d2042d"
atextdecoration="none"
improveformstyles="true"
formaccentcolor="#d2042d"
formstylevariant="minimal" sectionsize-md="1300px" sectionsize-sm="800px" />
<style>

</style>

</head>
<body>
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<logic:if test="\Components\Website\Pages::currentPageId() == '/commerce/order/success/'">
<!---->
</logic:if>
<!-- newsletter popup box-->
<forms:dialogbox id="newsletter_popup" width="60%">
<logic:include page="/design-elements/receive-newsletter/" />
</forms:dialogbox>
<!-- search popup box-->
<forms:dialogbox id="search_popup" width="30%">
<logic:include page="/new-site/includes/search/" />
</forms:dialogbox>
<!-- login popup box-->
<forms:dialogbox id="login_popup" width="[? \Components\Customers\Contacts::currentIsLoggedIn() ? '50%' : '60%' ?]">
<logic:include page="/new-site/includes/login/" />
</forms:dialogbox>
<templates:header linklogo="/new-site/" variant="Slim" maxlogowidth="255px" maxlogoheight="74px" logo="/media/website_designs/13/logo-af-oncord-colored-2.svg" contentsize="lg" bgcolor="#ffffff" navbgcolor="#ffffff" navfontcolor="#333333" sticky="true">
<templates:headertext headerposition="primary" variant="Classic">
<div class="login">
<standard:link opendialogid="login_popup">
<standard:icon iconstyle="standard" iconname="user" library="feather" style="width: 16px; height: 16px; color: #d2042d" />
<logic:if test="!(\Components\Customers\Contacts::currentIsLoggedIn())">
<span style="font-size: small; text-transform: uppercase; font-weight: 500;">Login</span>
</logic:if>
<logic:else>
<span style="font-size: small; text-transform: uppercase; font-weight: 500;">Bonjour <personalisation:firstname /><span class="caret"></span></span>
</logic:else>
</standard:link>
</div> </templates:headertext>
<navigation:primary rootpage="/new-site/" id="headerNav" includeStyles="true" autopopulatelevel="2" openonhover="true" MobileBreakPoint="" >
<navigation:item at="end" page="/commerce/order/" order="1">
<standard:icon iconstyle="solid" iconname="cart-shopping" library="fontawesome" style="width: 16px; height: 16px" />
</navigation:item>
<navigation:item at="end" order="2">
<standard:link opendialogid="search_popup">
<standard:icon iconstyle="solid" iconname="magnifying-glass" library="fontawesome" style="width: 16px; height: 16px" />
</standard:link>
</navigation:item>
</navigation:primary>
</templates:header>
<!-- Home Page -->
<logic:if test="\Components\Website\Pages::currentPageId() == '/'">
<regions:content requiressection="true" />
</logic:if>

<!-- Placement test -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/placement-tests/', true)">
<templates:section contentsize="md" paddingBottom="8rem" paddingTop="6rem">
<regions:content requiressection="true" />
</templates:section>
</logic:else>
<!-- General Page -->
<logic:else>
<div class="section-mainContent">
<logic:variable as="postMain" value="[? (\Components\Website\Posts::getAllLinkingToPage(\Components\Website\Pages::currentPageId()))[0] ?]" />

<!-- Article Page -->
<logic:if test="count(\Components\Website\Posts::getAllLinkingToPage(\Components\Website\Pages::currentPageId())) > 0">
<templates:section contentsize="sm" paddingright="1rem" paddingleft="1rem" paddingBottom="4rem" paddingTop="4rem">
<h1>[? $postMain['post_title'] ?]</h1>
<span>[? formatDate($postMain['post_date']) ?]</span>
<data:repeater as="post_category" datasource="\Components\Website\Posts\Categories::getAllForPost($postMain['post_id'])">
<span><span style="color: #cf102d;">//</span> [?? $post_category['post_category_title'] ??]</span>
</data:repeater>
<logic:variable as="arrAdditionalCategory" value="[? \Components\Website\Posts\Categories::getAllForPost($postMain['post_id'], true) ?]" />
<logic:if test="$postMain['post_event_start_date']">
<table border="0" width="100%" style="display: none">
<tr>
<td width="30px" style="vertical-align: top;">
<standard:icon library="fontawesome" iconstyle="regular" iconname="calendar" size="4" style="width: 15px; height: 15px;" />
</td>
<td width="auto">
[? formatDateTime($postMain['post_event_start_date']) ?]
<logic:if test="$postMain['post_event_end_date']">- [? formatDateTime($postMain['post_event_end_date']) ?]</logic:if>
</td>
</tr>
</table>
</logic:if>
<logic:if test="$postMain['post_event_location']">
<table border="0" width="100%" style="display:none">
<tr>
<td width="30px" style="vertical-align: top;">
<standard:icon library="fontawesome" iconstyle="solid" iconname="location-dot" size="4" style="width: 15px; height: 15px;" />
</td>
<td width="auto">[? $postMain['post_event_location'] ?]</td>
</tr>
</table>
</logic:if>
</templates:section>
<regions:content requiressection="true" />
</logic:if>
<logic:else>
<regions:content requiressection="true" />
</logic:else>
</div>
</logic:else>
<regions:togglable id="togglable_footerCTA" defaultvisible="false" label="Display Footer CTA" labelarrowposition="topleft">
<templates:section paddingLeft="0rem" paddingTop="0rem" paddingRight="0rem" paddingBottom="0rem" contentsize="lg" bgimage="https://images.unsplash.com/photo-1656261574782-5d199dbc55e7?ixid=M3w2ODg1fDB8MXxzZWFyY2h8MTh8fGNhbGxpbmclMjBmcm9tJTIwcHxlbnwwfHx8fDE3NDgyNjg2NTV8MA&" bgwashcolor="#000000" bgwashopacity="40">
<templates:section class="section-footerCTA" bgimageblur="0" paddingBottom="6rem" paddingTop="9rem" paddingleft="1rem" bgposition="top" paddingright="1rem" bgimage="/media/website_designs/16/top-svg-01.svg" color="#ffffff" bgcolor="">
<templates:row verticalAlignColumns="flex-start">
<templates:column width="5">
<h2>Have a question?</h2>
<p>If you have a question or need help finding the right course for you, simply fill in the form and we will be happy to help. </p>
</templates:column>
<templates:column width="7">
<templates:section paddingBottom="0rem" paddingTop="0rem" paddingLeft="3rem" paddingRight="0rem">
<forms:form id="have_a_question_cta" recordsubmissions="true" contactmode="store" onsubmitemailsubject="[? 'AF Have a question: ' + $_POST['contact_first_name'] ?]" onsubmitemail="support@oncord.com" method="ajax">
<templates:row>
<templates:column width="6">
<forms:row type="two_column" label="First Name">
<forms:editbox id="contact_first_name" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="two_column" label="Last Name">
<forms:editbox id="contact_last_name" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="6">
<forms:row type="two_column" label="Phone Number">
<forms:editbox id="contact_phone" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="two_column" label="Email Address">
<forms:editbox id="contact_email" validations="mandatory,email" transformations="tolower" />
</forms:row>
</templates:column>
</templates:row>
<forms:row type="one_column" label="How can we help you?">
<forms:textarea id="message" width="100%" rows="4" validations="mandatory" />
</forms:row>
<forms:submitbutton>Submit</forms:submitbutton>
<forms:successcontent>
<p><br /></p>
<standard:icon library="fontawesome" iconname="circle-check" iconstyle="regular" size="4" style="width: 131px; height: 131px; margin-left: auto; margin-right: auto; display: block; color: #75d776" />
<p><br /></p>
<h3 style="text-align: center;">Thank you! We've received your submission.</h3>
<p style="text-align: center;">
One of our staff will get back to you shortly.<br />
<br />
</p>
</forms:successcontent>
</forms:form>
</templates:section>
</templates:column>
</templates:row>
</templates:section>
</templates:section>
</regions:togglable>
<regions:togglable id="togglable_memberCTA" defaultvisible="true" label="Display Become a Member CTA">
<templates:section paddingLeft="0rem" paddingTop="0rem" paddingRight="0rem" paddingBottom="0rem" contentsize="lg" bgimage="https://images.unsplash.com/photo-1532635241-17e820acc59f?ixid=M3w2ODg1fDB8MXxzZWFyY2h8MTF8fHBlb3BsZXxlbnwwfHx8fDE3NDY0OTc0NjV8MA&" bgwashcolor="#000000" bgwashopacity="40">
<templates:section class="section-footerCTA" bgimageblur="0" paddingBottom="6rem" paddingTop="9rem" paddingleft="1rem" bgposition="top" paddingright="1rem" bgimage="/media/website_designs/16/top-svg-01.svg" color="#ffffff" bgcolor="">
<templates:row style="text-align: left;">
<templates:column width="5">
<h2>Become a Member</h2>
<p style="text-align: left;">
Become a member of Alliance Française for exclusive offers, member events, discounts and more.<br />
<br />
</p>
<templates:button variant="Classic" borderRadius="0" color="#ffffff" bgcolor="#d2042d" padding="15" href="/join-us/become-a-member/" target="">Learn
French Now<br /></templates:button>
</templates:column>
<templates:column width="7"></templates:column>
</templates:row>
</templates:section>
</templates:section>
</regions:togglable>
<regions:togglable id="togglable_testCTA" defaultvisible="false" label="Display Placement Test CTA">
<templates:section paddingLeft="0rem" paddingTop="0rem" paddingRight="0rem" paddingBottom="0rem" contentsize="lg" bgimage="https://images.unsplash.com/photo-1543269866-487350d6fa5e?ixid=M3w2ODg1fDB8MXxzZWFyY2h8MTB8fHBlcnNvbiUyMG9uJTIwbGFwdG9wfGVufDB8fHx8MTY4NzQ5OTY0OHww&" bgwashcolor="#000000" bgwashopacity="35">
<templates:section class="section-footerCTA" bgimageblur="0" paddingBottom="8rem" paddingTop="8rem" paddingleft="1rem" bgposition="top" paddingright="1rem" bgimage="/media/website_designs/16/top-svg-01.svg" color="#ffffff" bgcolor="">
<templates:row style="text-align: left;">
<templates:column width="7">
<h2>Unsure what level of French classes to enrol in?<br /></h2>
<p style="text-align: left;">
Take our online test to find what level of French class is suitable for you.<br />
<br />
</p>
<templates:button variant="Classic" borderRadius="0" color="#ffffff" bgcolor="#d2042d" padding="15" href="/placement-tests/" target="">Find
my level <br /></templates:button>
</templates:column>
<templates:column width="5"></templates:column>
</templates:row>
</templates:section>
</templates:section>
</regions:togglable>
<regions:togglable id="togglable_newslettercta" defaultvisible="false" label="Display Newsletter Subscribe" labelpositionmyat="top left">
<logic:include page="/new-site/includes/newsletter/" />
</regions:togglable>
<footer>
<templates:section class="footer_copyright" color="#333333" paddingtop="4rem" paddingBottom="4rem" paddingleft="1rem" paddingRight="0rem" bgcolor="#fafafa">
<templates:row>
<templates:column width="3">
<p><strong>Learn French<br /></strong></p>
<p><a href="/new-site/learn-french/">Group Classes</a></p>
<p> <a href="/new-site/learn-french/private-tuition/">Private Tuition</a><br /> </p>
<p><a href="/placement-tests/">Placement Tests<br /></a></p>
<p><a href="/new-site/learn-french/exams/">Exams<br /></a> </p>
<p><a href="/new-site/about/policies/">Policies, T&amp;Cs</a></p>
</templates:column>
<templates:column width="3">
<p><strong>Live French<br /></strong></p>
<p> <a href="/new-site/events/">Events</a><br /> </p>
<p> <a href="/new-site/join-us/membership/">Membership</a><br /> </p>
<p> <a href="/new-site/blog/">Blog</a></p>
</templates:column>
<templates:column width="3">
<p> <strong>Love French</strong><br /> </p>
<p> <a href="/new-site/join-us/donate/">Donate</a> </p>
<p> <a href="/new-site/join-us/volunteer/">Volunteer</a><br /> </p>
<p><a href="/af/student/">Student Portal<br /></a></p>
<p> <a href="/new-site/about/">About</a><br />

</p>
</templates:column>
<templates:column width="3">
<strong>Contact Us</strong>
<table border="0" width="100%" style="border-spacing: 5px;">
<tr>
<td width="11.69%" style="vertical-align: top; padding: 0px">
<standard:icon library="feather" iconstyle="standard" iconname="message-circle" size="4" style="width: 24px; height: 24px; color: #d2042d" />
</td>
<td width="88.31%" style="padding: 0px;"> <a href="mailto:info@aflcr.org">support@oncord.com<br /></a> </td>
</tr>
<tr>
<td width="11.69%" style="vertical-align: top; padding: 0px">
<standard:icon library="feather" iconstyle="standard" iconname="map-pin" size="4" style="width: 24px; height: 24px; color: #d2042d" />
</td>
<td width="88.31%" style="padding: 0px; vertical-align: top">#31 Brisbane Rd</td>
</tr>
<tr>
<td width="11.69%" style="vertical-align: top; padding: 0px">
<standard:icon library="feather" iconstyle="standard" iconname="phone" size="4" style="width: 24px; height: 24px; color: #d2042d" />
</td>
<td width="88.31%" style="padding: 0px; vertical-align: top">123 4567 890<br /></td>
</tr>
<tr>
<td width="11.69%" style="vertical-align: top; padding: 0px">
<standard:icon library="feather" iconstyle="standard" iconname="clock" size="4" style="width: 24px; height: 24px; color: #d2042d" />
</td>
<td width="88.31%" style="padding: 0px; vertical-align: top">
Mon - Fri 8:00am - 4:00pm<br />
Sat 10:00am - 12:00nn<br />
Sun <span style="color: #d2042d;">CLOSED</span><br />
</td>
</tr>
</table>
<p><br /></p>
<templates:sociallinks variant="Round" icon-height="35px" icon-width="34px" facebook="https://www.facebook.com/OncordSoftware" twitter="https://x.com/oncordsoftware" linkedin="https://www.linkedin.com/company/oncord/" googleplus="googleplus" instagram="" youtube="https://www.youtube.com/channel/UCID5cisICXhLExbmW-xhW2g" size="4" googlemybusiness="" color="#d2042d" border="1px solid #d2042d" />
</templates:column>
</templates:row>
<p><br /></p>
<p>
© [? date(Y) ?] Alliance Française Oncord Demo<br />
<small>Illustrations by</small> <a href="https://storyset.com/" target="_blank"><small>StorySet</small></a><small><br/></small> <a href="https://www.oncord.com/">
<small>Website Powered by Oncord</small></a>
</p>
</templates:section>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="google-site-verification" content="LQLLn9dwNbtTdmbzIBtrjoG_9viQ5dSph_YsAYrnMP8" />
<link href="/media/website_designs/16/favicon.png" rel="icon" sizes="32x32"/>
<templates:styles
boxsizingborderbox="true"
maxwidthmedia="true"

rootfontsize="17px"
rootfontsizemobile="15px"
lastusedratio="1.333"
bodyfontlibrary="google"
bodyfontfamily="Albert Sans"
bodyfontweight="400"
bodycolor="#242424"
bodyfontsize="1rem"
bodylineheight="1.55rem"
bodymargintop="0rem"
bodymarginbottom="0.8rem"

h1fontlibrary="google"
h1fontfamily="PT Serif"
h1fontweight="700"
h1color=""
h1fontsize="3.375rem"
h1lineheight="2.8411rem"
h1margintop="3.1rem"
h1marginbottom="1.6rem"

h2fontlibrary="google"
h2fontfamily="PT Serif"
h2fontweight="400"
h2color=""
h2fontsize="1.7768rem"
h2lineheight="2.2490rem"
h2margintop="3.1rem"
h2marginbottom="1.6rem"
h3fontlibrary="google"
h3fontfamily="PT Serif"
h3fontweight="400"
h3color=""
h3fontsize="1.333rem"
h3lineheight="1.833rem"
h3margintop="2.3rem"
h3marginbottom="0.8rem"

h4fontlibrary="google"
h4fontfamily="Albert Sans"
h4fontweight="700"
h4color=""
h4fontsize="1rem"
h4lineheight="1.55rem"
h4margintop="2.3rem"
h4marginbottom="0.8rem"

h5fontlibrary="google"
h5fontfamily="Albert Sans"
h5fontweight="700"
h5color=""
h5fontsize="1rem"
h5lineheight="1.55rem"
h5margintop="1.6rem"
h5marginbottom="0.8rem"

acolor="#d2042d"
atextdecoration="none"
improveformstyles="true"
formaccentcolor="#d2042d"
formstylevariant="minimal" sectionsize-md="1300px" sectionsize-sm="800px" />
<style>

</style>

</head>
<body>
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<logic:if test="\Components\Website\Pages::currentPageId() == '/commerce/order/success/'">
<!---->
</logic:if>
<!-- newsletter popup box-->
<forms:dialogbox id="newsletter_popup" width="60%">
<logic:include page="/design-elements/receive-newsletter/" />
</forms:dialogbox>
<!-- search popup box-->
<forms:dialogbox id="search_popup" width="30%">
<logic:include page="/new-site/includes/search/" />
</forms:dialogbox>
<!-- login popup box-->
<forms:dialogbox id="login_popup" width="[? \Components\Customers\Contacts::currentIsLoggedIn() ? '50%' : '60%' ?]">
<logic:include page="/new-site/includes/login/" />
</forms:dialogbox>
<templates:header linklogo="/new-site/" variant="Slim" maxlogowidth="255px" maxlogoheight="74px" logo="/media/website_designs/13/logo-af-oncord-colored-2.svg" contentsize="lg" bgcolor="#ffffff" navbgcolor="#ffffff" navfontcolor="#333333" sticky="true">
<templates:headertext headerposition="primary" variant="Classic">
<div class="login">
<standard:link opendialogid="login_popup">
<standard:icon iconstyle="standard" iconname="user" library="feather" style="width: 16px; height: 16px; color: #d2042d" />
<logic:if test="!(\Components\Customers\Contacts::currentIsLoggedIn())">
<span style="font-size: small; text-transform: uppercase; font-weight: 500;">Login</span>
</logic:if>
<logic:else>
<span style="font-size: small; text-transform: uppercase; font-weight: 500;">Bonjour <personalisation:firstname /><span class="caret"></span></span>
</logic:else>
</standard:link>
</div> </templates:headertext>
<navigation:primary rootpage="/new-site/" id="headerNav" includeStyles="true" autopopulatelevel="2" openonhover="true" MobileBreakPoint="" >
<navigation:item at="end" page="/commerce/order/" order="1">
<standard:icon iconstyle="solid" iconname="cart-shopping" library="fontawesome" style="width: 16px; height: 16px" />
</navigation:item>
<navigation:item at="end" order="2">
<standard:link opendialogid="search_popup">
<standard:icon iconstyle="solid" iconname="magnifying-glass" library="fontawesome" style="width: 16px; height: 16px" />
</standard:link>
</navigation:item>
</navigation:primary>
</templates:header>
<!-- Home Page -->
<logic:if test="\Components\Website\Pages::currentPageId() == '/'">
<regions:content requiressection="true" />
</logic:if>

<!-- Placement test -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/placement-tests/', true)">
<templates:section contentsize="md" paddingBottom="8rem" paddingTop="6rem">
<regions:content requiressection="true" />
</templates:section>
</logic:else>
<!-- General Page -->
<logic:else>
<div class="section-mainContent">
<logic:variable as="postMain" value="[? (\Components\Website\Posts::getAllLinkingToPage(\Components\Website\Pages::currentPageId()))[0] ?]" />

<!-- Article Page -->
<logic:if test="count(\Components\Website\Posts::getAllLinkingToPage(\Components\Website\Pages::currentPageId())) > 0">
<templates:section contentsize="sm" paddingright="1rem" paddingleft="1rem" paddingBottom="4rem" paddingTop="4rem">
<h1>[? $postMain['post_title'] ?]</h1>
<span>[? formatDate($postMain['post_date']) ?]</span>
<data:repeater as="post_category" datasource="\Components\Website\Posts\Categories::getAllForPost($postMain['post_id'])">
<span><span style="color: #cf102d;">//</span> [?? $post_category['post_category_title'] ??]</span>
</data:repeater>
<logic:variable as="arrAdditionalCategory" value="[? \Components\Website\Posts\Categories::getAllForPost($postMain['post_id'], true) ?]" />
<logic:if test="$postMain['post_event_start_date']">
<table border="0" width="100%" style="display: none">
<tr>
<td width="30px" style="vertical-align: top;">
<standard:icon library="fontawesome" iconstyle="regular" iconname="calendar" size="4" style="width: 15px; height: 15px;" />
</td>
<td width="auto">
[? formatDateTime($postMain['post_event_start_date']) ?]
<logic:if test="$postMain['post_event_end_date']">- [? formatDateTime($postMain['post_event_end_date']) ?]</logic:if>
</td>
</tr>
</table>
</logic:if>
<logic:if test="$postMain['post_event_location']">
<table border="0" width="100%" style="display:none">
<tr>
<td width="30px" style="vertical-align: top;">
<standard:icon library="fontawesome" iconstyle="solid" iconname="location-dot" size="4" style="width: 15px; height: 15px;" />
</td>
<td width="auto">[? $postMain['post_event_location'] ?]</td>
</tr>
</table>
</logic:if>
</templates:section>
<regions:content requiressection="true" />
</logic:if>
<logic:else>
<regions:content requiressection="true" />
</logic:else>
</div>
</logic:else>
<regions:togglable id="togglable_footerCTA" defaultvisible="false" label="Display Footer CTA" labelarrowposition="topleft">
<templates:section paddingLeft="0rem" paddingTop="0rem" paddingRight="0rem" paddingBottom="0rem" contentsize="lg" bgimage="https://images.unsplash.com/photo-1656261574782-5d199dbc55e7?ixid=M3w2ODg1fDB8MXxzZWFyY2h8MTh8fGNhbGxpbmclMjBmcm9tJTIwcHxlbnwwfHx8fDE3NDgyNjg2NTV8MA&" bgwashcolor="#000000" bgwashopacity="40">
<templates:section class="section-footerCTA" bgimageblur="0" paddingBottom="6rem" paddingTop="9rem" paddingleft="1rem" bgposition="top" paddingright="1rem" bgimage="/media/website_designs/16/top-svg-01.svg" color="#ffffff" bgcolor="">
<templates:row verticalAlignColumns="flex-start">
<templates:column width="5">
<h2>Have a question?</h2>
<p>If you have a question or need help finding the right course for you, simply fill in the form and we will be happy to help. </p>
</templates:column>
<templates:column width="7">
<templates:section paddingBottom="0rem" paddingTop="0rem" paddingLeft="3rem" paddingRight="0rem">
<forms:form id="have_a_question_cta" recordsubmissions="true" contactmode="store" onsubmitemailsubject="[? 'AF Have a question: ' + $_POST['contact_first_name'] ?]" onsubmitemail="support@oncord.com" method="ajax">
<templates:row>
<templates:column width="6">
<forms:row type="two_column" label="First Name">
<forms:editbox id="contact_first_name" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="two_column" label="Last Name">
<forms:editbox id="contact_last_name" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="6">
<forms:row type="two_column" label="Phone Number">
<forms:editbox id="contact_phone" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="two_column" label="Email Address">
<forms:editbox id="contact_email" validations="mandatory,email" transformations="tolower" />
</forms:row>
</templates:column>
</templates:row>
<forms:row type="one_column" label="How can we help you?">
<forms:textarea id="message" width="100%" rows="4" validations="mandatory" />
</forms:row>
<forms:submitbutton>Submit</forms:submitbutton>
<forms:successcontent>
<p><br /></p>
<standard:icon library="fontawesome" iconname="circle-check" iconstyle="regular" size="4" style="width: 131px; height: 131px; margin-left: auto; margin-right: auto; display: block; color: #75d776" />
<p><br /></p>
<h3 style="text-align: center;">Thank you! We've received your submission.</h3>
<p style="text-align: center;">
One of our staff will get back to you shortly.<br />
<br />
</p>
</forms:successcontent>
</forms:form>
</templates:section>
</templates:column>
</templates:row>
</templates:section>
</templates:section>
</regions:togglable>
<regions:togglable id="togglable_memberCTA" defaultvisible="true" label="Display Become a Member CTA">
<templates:section paddingLeft="0rem" paddingTop="0rem" paddingRight="0rem" paddingBottom="0rem" contentsize="lg" bgimage="https://images.unsplash.com/photo-1532635241-17e820acc59f?ixid=M3w2ODg1fDB8MXxzZWFyY2h8MTF8fHBlb3BsZXxlbnwwfHx8fDE3NDY0OTc0NjV8MA&" bgwashcolor="#000000" bgwashopacity="40">
<templates:section class="section-footerCTA" bgimageblur="0" paddingBottom="6rem" paddingTop="9rem" paddingleft="1rem" bgposition="top" paddingright="1rem" bgimage="/media/website_designs/16/top-svg-01.svg" color="#ffffff" bgcolor="">
<templates:row style="text-align: left;">
<templates:column width="5">
<h2>Become a Member</h2>
<p style="text-align: left;">
Become a member of Alliance Française for exclusive offers, member events, discounts and more.<br />
<br />
</p>
<templates:button variant="Classic" borderRadius="0" color="#ffffff" bgcolor="#d2042d" padding="15" href="/join-us/become-a-member/" target="">Learn
French Now<br /></templates:button>
</templates:column>
<templates:column width="7"></templates:column>
</templates:row>
</templates:section>
</templates:section>
</regions:togglable>
<regions:togglable id="togglable_testCTA" defaultvisible="false" label="Display Placement Test CTA">
<templates:section paddingLeft="0rem" paddingTop="0rem" paddingRight="0rem" paddingBottom="0rem" contentsize="lg" bgimage="https://images.unsplash.com/photo-1543269866-487350d6fa5e?ixid=M3w2ODg1fDB8MXxzZWFyY2h8MTB8fHBlcnNvbiUyMG9uJTIwbGFwdG9wfGVufDB8fHx8MTY4NzQ5OTY0OHww&" bgwashcolor="#000000" bgwashopacity="35">
<templates:section class="section-footerCTA" bgimageblur="0" paddingBottom="8rem" paddingTop="8rem" paddingleft="1rem" bgposition="top" paddingright="1rem" bgimage="/media/website_designs/16/top-svg-01.svg" color="#ffffff" bgcolor="">
<templates:row style="text-align: left;">
<templates:column width="7">
<h2>Unsure what level of French classes to enrol in?<br /></h2>
<p style="text-align: left;">
Take our online test to find what level of French class is suitable for you.<br />
<br />
</p>
<templates:button variant="Classic" borderRadius="0" color="#ffffff" bgcolor="#d2042d" padding="15" href="/placement-tests/" target="">Find
my level <br /></templates:button>
</templates:column>
<templates:column width="5"></templates:column>
</templates:row>
</templates:section>
</templates:section>
</regions:togglable>
<regions:togglable id="togglable_newslettercta" defaultvisible="false" label="Display Newsletter Subscribe" labelpositionmyat="top left">
<logic:include page="/new-site/includes/newsletter/" />
</regions:togglable>
<footer>
<templates:section class="footer_copyright" color="#333333" paddingtop="4rem" paddingBottom="4rem" paddingleft="1rem" paddingRight="0rem" bgcolor="#fafafa">
<templates:row>
<templates:column width="3">
<p><strong>Learn French<br /></strong></p>
<p><a href="/new-site/learn-french/">Group Classes</a></p>
<p> <a href="/new-site/learn-french/private-tuition/">Private Tuition</a><br /> </p>
<p><a href="/placement-tests/">Placement Tests<br /></a></p>
<p><a href="/new-site/learn-french/exams/">Exams<br /></a> </p>
<p><a href="/new-site/about/policies/">Policies, T&amp;Cs</a></p>
</templates:column>
<templates:column width="3">
<p><strong>Live French<br /></strong></p>
<p> <a href="/new-site/events/">Events</a><br /> </p>
<p> <a href="/new-site/join-us/membership/">Membership</a><br /> </p>
<p> <a href="/new-site/blog/">Blog</a></p>
</templates:column>
<templates:column width="3">
<p> <strong>Love French</strong><br /> </p>
<p> <a href="/new-site/join-us/donate/">Donate</a> </p>
<p> <a href="/new-site/join-us/volunteer/">Volunteer</a><br /> </p>
<p><a href="/af/student/">Student Portal<br /></a></p>
<p> <a href="/new-site/about/">About</a><br />

</p>
</templates:column>
<templates:column width="3">
<strong>Contact Us</strong>
<table border="0" width="100%" style="border-spacing: 5px;">
<tr>
<td width="11.69%" style="vertical-align: top; padding: 0px">
<standard:icon library="feather" iconstyle="standard" iconname="message-circle" size="4" style="width: 24px; height: 24px; color: #d2042d" />
</td>
<td width="88.31%" style="padding: 0px;"> <a href="mailto:info@aflcr.org">support@oncord.com<br /></a> </td>
</tr>
<tr>
<td width="11.69%" style="vertical-align: top; padding: 0px">
<standard:icon library="feather" iconstyle="standard" iconname="map-pin" size="4" style="width: 24px; height: 24px; color: #d2042d" />
</td>
<td width="88.31%" style="padding: 0px; vertical-align: top">#31 Brisbane Rd</td>
</tr>
<tr>
<td width="11.69%" style="vertical-align: top; padding: 0px">
<standard:icon library="feather" iconstyle="standard" iconname="phone" size="4" style="width: 24px; height: 24px; color: #d2042d" />
</td>
<td width="88.31%" style="padding: 0px; vertical-align: top">123 4567 890<br /></td>
</tr>
<tr>
<td width="11.69%" style="vertical-align: top; padding: 0px">
<standard:icon library="feather" iconstyle="standard" iconname="clock" size="4" style="width: 24px; height: 24px; color: #d2042d" />
</td>
<td width="88.31%" style="padding: 0px; vertical-align: top">
Mon - Fri 8:00am - 4:00pm<br />
Sat 10:00am - 12:00nn<br />
Sun <span style="color: #d2042d;">CLOSED</span><br />
</td>
</tr>
</table>
<p><br /></p>
<templates:sociallinks variant="Round" icon-height="35px" icon-width="34px" facebook="https://www.facebook.com/OncordSoftware" twitter="https://x.com/oncordsoftware" linkedin="https://www.linkedin.com/company/oncord/" googleplus="googleplus" instagram="" youtube="https://www.youtube.com/channel/UCID5cisICXhLExbmW-xhW2g" size="4" googlemybusiness="" color="#d2042d" border="1px solid #d2042d" />
</templates:column>
</templates:row>
<p><br /></p>
<p>
© [? date(Y) ?] Alliance Française Oncord Demo<br />
<small>Illustrations by</small> <a href="https://storyset.com/" target="_blank"><small>StorySet</small></a><small><br/></small> <a href="https://www.oncord.com/">
<small>Website Powered by Oncord</small></a>
</p>
</templates:section>
</footer>
</body>
</html>
Js:
var activeChild = document.querySelector('.s8-navigationPrimary-hasChildren .s8-navigationPrimaryItem--active');

if (activeChild) {
var parentLi = activeChild.closest('.s8-navigationPrimary-hasChildren');
if (parentLi) {
parentLi.classList.add('s8-navigationPrimaryItem--active');
}
}

document.addEventListener("DOMContentLoaded", function() {
function wrapElementWithWrapper(element, wrapperClassName) {
var wrapperDiv = document.createElement('div');
wrapperDiv.className = wrapperClassName;
wrapperDiv.appendChild(element.cloneNode(true));
element.parentNode.replaceChild(wrapperDiv, element);
}

var curve1Elements = document.querySelectorAll('[id^="curve1"]');
curve1Elements.forEach(function(curve1Element) {
wrapElementWithWrapper(curve1Element, 'curveSectionWrapper1');
});

var curve2Elements = document.querySelectorAll('[id^="curve2"]');
curve2Elements.forEach(function(curve2Element) {
wrapElementWithWrapper(curve2Element, 'curveSectionWrapper2');
});
});

document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".s8-templates-teammember-content").forEach(function (element) {
const fullText = element.textContent.trim();
const maxLength = 260;

if (fullText.length > maxLength) {
const truncatedText = fullText.substring(0, maxLength).trim() + "...";
element.innerHTML = `<span class="short-text">${truncatedText}</span>` +
`<span class="full-text" style="display: none;">${fullText}</span>` +
` <a href="#" class="toggle-text">See More</a>`;

const toggleLink = element.querySelector(".toggle-text");
toggleLink.addEventListener("click", function (event) {
event.preventDefault();
const shortText = element.querySelector(".short-text");
const fullTextEl = element.querySelector(".full-text");
if (shortText.style.display === "none") {
shortText.style.display = "inline";
fullTextEl.style.display = "none";
this.innerText = "See More";
} else {
shortText.style.display = "none";
fullTextEl.style.display = "inline";
this.innerText = "See Less";
}
});
}
});
});
var activeChild = document.querySelector('.s8-navigationPrimary-hasChildren .s8-navigationPrimaryItem--active');

if (activeChild) {
var parentLi = activeChild.closest('.s8-navigationPrimary-hasChildren');
if (parentLi) {
parentLi.classList.add('s8-navigationPrimaryItem--active');
}
}

document.addEventListener("DOMContentLoaded", function() {
function wrapElementWithWrapper(element, wrapperClassName) {
var wrapperDiv = document.createElement('div');
wrapperDiv.className = wrapperClassName;
wrapperDiv.appendChild(element.cloneNode(true));
element.parentNode.replaceChild(wrapperDiv, element);
}

var curve1Elements = document.querySelectorAll('[id^="curve1"]');
curve1Elements.forEach(function(curve1Element) {
wrapElementWithWrapper(curve1Element, 'curveSectionWrapper1');
});

var curve2Elements = document.querySelectorAll('[id^="curve2"]');
curve2Elements.forEach(function(curve2Element) {
wrapElementWithWrapper(curve2Element, 'curveSectionWrapper2');
});
});

document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".s8-templates-teammember-content").forEach(function (element) {
const fullText = element.textContent.trim();
const maxLength = 260;

if (fullText.length > maxLength) {
const truncatedText = fullText.substring(0, maxLength).trim() + "...";
element.innerHTML = `<span class="short-text">${truncatedText}</span>` +
`<span class="full-text" style="display: none;">${fullText}</span>` +
` <a href="#" class="toggle-text">See More</a>`;

const toggleLink = element.querySelector(".toggle-text");
toggleLink.addEventListener("click", function (event) {
event.preventDefault();
const shortText = element.querySelector(".short-text");
const fullTextEl = element.querySelector(".full-text");
if (shortText.style.display === "none") {
shortText.style.display = "inline";
fullTextEl.style.display = "none";
this.innerText = "See More";
} else {
shortText.style.display = "none";
fullTextEl.style.display = "inline";
this.innerText = "See Less";
}
});
}
});
});
Php Source:
<?php

function determineHeaderImages()
{
$strPage = \Components\Website\Pages::currentPageId();

while($strPage)
{
if(file_exists('media/website_pages' . $strPage . 'header-images/'))
{
$arrFiles = \Components\Website\Media::getChildren('/media/website_pages' . $strPage . 'header-images/');

if(count($arrFiles))
{
return $arrFiles;
}
}

$strPage = \Framework\Components\TextualIds::getParent($strPage);
}

return [];
}

function youMayAlsoLikeGeneral()
{
$strCurrentPageId = \Components\Website\Pages::currentPageId();

$arrNoSideNavPages = [];
$arrNoSideNavPages[] = '/community/profile/';
$arrNoSideNavPages[] = '/placement-tests/';
$arrNoSideNavPages[] = '/af/';
$arrNoSideNavPages[] = '/commerce/';
$arrNoSideNavPages[] = '/products/';
$arrNoSideNavPages[] = '/order-a-course/';


foreach($arrNoSideNavPages as $strPageId)
{
if(strpos($strCurrentPageId, $strPageId) === 0)
{
return false;
}
}

return true;
}

?>
<?php

function determineHeaderImages()
{
$strPage = \Components\Website\Pages::currentPageId();

while($strPage)
{
if(file_exists('media/website_pages' . $strPage . 'header-images/'))
{
$arrFiles = \Components\Website\Media::getChildren('/media/website_pages' . $strPage . 'header-images/');

if(count($arrFiles))
{
return $arrFiles;
}
}

$strPage = \Framework\Components\TextualIds::getParent($strPage);
}

return [];
}

function youMayAlsoLikeGeneral()
{
$strCurrentPageId = \Components\Website\Pages::currentPageId();

$arrNoSideNavPages = [];
$arrNoSideNavPages[] = '/community/profile/';
$arrNoSideNavPages[] = '/placement-tests/';
$arrNoSideNavPages[] = '/af/';
$arrNoSideNavPages[] = '/commerce/';
$arrNoSideNavPages[] = '/products/';
$arrNoSideNavPages[] = '/order-a-course/';


foreach($arrNoSideNavPages as $strPageId)
{
if(strpos($strCurrentPageId, $strPageId) === 0)
{
return false;
}
}

return true;
}

?>
Mobile Function:
none
none
Mobile Value: