php js css php js css

Changes

Changes to Design: Main Website Design

406800
Yesterday 3:43pm
McNaught, Scott
Modified design
Change made at /admin/website/designs/
408705
Yesterday 10:20pm
McNaught, Scott
Modified design
Change made at /admin/website/designs/
Title:
Id:
13
13
Deleted Datetime:

															

														
Type:
web
web
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<templates:styles
bodyfontlibrary="google"
bodyFontFamily="Lato"
bodyfontweight="400"
bodycolor="#333333"
bodyfontsize="1rem"
bodylineheight="1.55rem"

h1fontlibrary="google"
h1FontFamily="Oswald"
h1FontWeight="400"
h1color=""
h1fontsize="3.375rem"
h1lineheight="3.9693rem"
h1margintop="3.1rem"
h1marginbottom="1.6rem"

h2fontlibrary="google"
h2FontFamily="Oswald"
h2FontWeight="400"
h2color=""
h2fontsize="2.25rem"
h2lineheight="2.7777rem"
h2margintop="3.1rem"
h2marginbottom="1.6rem"

h3fontlibrary="google"
h3FontFamily="Oswald"
h3FontWeight="400"
h3color=""
h3fontsize="1.5rem"
h3lineheight="2rem"
h3margintop="2.3rem"
h3marginbottom="0.8rem"

h4fontlibrary="google"
h4FontFamily="Oswald"
h4FontWeight="400"
h4color=""
h4fontsize="1rem"
h4lineheight="1.55rem"
h4margintop="2.3rem"
h4marginbottom="0.8rem"

h5fontlibrary="google"
h5FontFamily="Oswald"
h5FontWeight="400"
h5color=""
h5fontsize="1rem"
h5lineheight="1.55rem"
h5margintop="1.6rem"
h5marginbottom="0.8rem"

acolor="#f28e1a"
atextdecoration="none"

improveformstyles="true"
formaccentcolor="#f28e1a"
formstylevariant="minimal" lastusedratio="1.5" bodymargintop="0rem" bodymarginbottom="0.8rem" rootfontsize="17px" section-fullheight="50vh"
/>
</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WRKPSJ2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<templates:header variant="YinYang" maxlogowidth="200px" maxlogoheight="100px" logo="/media/website_designs/13/muzosdirect-logo.svg" contentsize="md" bgcolor="#212529" navfontcolor="#f28e1a" navbgcolor="#171515">
<navigation:primary includestyles="true" autopopulatelevel="2" classlicurrent="navigationPrimaryItem--active">
<navigation:item at="start" page="/">Home</navigation:item>
</navigation:primary>
<templates:headertext headerposition="primary" variant="Classic" color="#f28e1a"><a href="tel:(03)999999"><strong><standard:icon library="fontawesome" iconstyle="solid" iconname="phone-volume" size="4" style="width: 20px; height: 20px;" />&nbsp;(03)
999 999</strong></a></templates:headertext>
<templates:sociallinks headerposition="secondary" variant="Round" icon-width="36px" icon-height="35px" facebook="#" twitter="" linkedin="" instagram="#" youtube="#" size="3" bgcolor="#f28e1a" color="#ffffff" />
</templates:header>
<!-- HOME PAGE DISPLAY -->
<logic:if test="\Components\Website\Pages::currentPageId() == '/'">
<regions:content requiressection="true" />
</logic:if>
<!-- BLOG PAGE DISPLAY -->
<logic:else test="\Components\Website\Pages::currentPageId() == '/blog/'">
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">[? $page['page_title']; ?]</h2>
<h4 style="text-align: center;">Catch up on our latest announcements</h4>
</div>
</templates:section>
<regions:content requiressection="true" />
</logic:else>
<!-- BLOG ARTICLE PAGE DISPLAY -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/blog/',false)">
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1506423456648-c11ccb27338d?ixid=eyJhcHBfaWQiOjY4ODV9">
<h2 style="text-align: center;">Blog</h2>
<h4 style="text-align: center;">[? $page['page_title'] ?]</h4>
</templates:section>
<templates:section>
<templates:row>
<templates:column width="8">
<div class="blog-entry-text">
<regions:content />
</div>
</templates:column>
<templates:column width="4">
<div class="sidebar">
<div class="widget blog-widget">
<h3 class="widget__heading">MORE NEWS</h3>
<data:repeater datasource="\Components\Website\Posts::getAll()" datalimit="4" as="post">
<div class="blog-row">
<templates:row>
<templates:column width="4">
<logic:if test="$post['post_icon']">
<div class="blog-row__thumbnail">
<a href="[? $post['post_content_url'] ?]">
<standard:image alt="[? $post['post_title'] ?]" src="[? $post['post_icon'] ?]" maintainaspect="crop" height="60" width="100%" /></a>
</div>
</logic:if>
</templates:column>
<templates:column width="8">
<div class="blog-row__blog-entry">
<span><time itemprop="datePublished" datetime="[? date('c', strtotime($post['post_date'])) ?]">[?
formatDate($post['post_date']) ?]</time></span>
<h5><a href="[? $post['post_content_url'] ?]">[? $post['post_title'] ?]</a></h5>
</div>
</templates:column>
</templates:row>
</div>
</data:repeater>
</div>
</div>
</templates:column>
</templates:row>
</templates:section>
</logic:else>
<!-- CONTACT PAGE DISPLAY -->
<logic:else test="\Components\Website\Pages::currentPageId() == '/contact/'">
<regions:content requiressection="true" />
</logic:else>
<!-- Products -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/products/',true)">
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1457960784918-ea479c62a2c5?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">Browse Products</h2>
</div>
</templates:section>
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem">
<regions:content />
</templates:section>
</logic:else>
<!-- Commerce -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/commerce/',true)">
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1457960784918-ea479c62a2c5?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">[? $page['page_title']; ?]</h2>
</div>
</templates:section>
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem">
<regions:content />
</templates:section>
</logic:else>
<!-- COMMUNITY EVENTS PAGE -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/community/',true)">
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" contentsize="md" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1457960784918-ea479c62a2c5?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">[? $page['page_title']; ?]</h2>
</div>
</templates:section>
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem">
<regions:content />
</templates:section>
</logic:else>
<!-- GENERAL CONTENT PAGE DISPLAY -->
<logic:else>
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1457960784918-ea479c62a2c5?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">[? $page['page_title']; ?]</h2>
</div>
</templates:section>
<regions:content requiressection="true"/>
</logic:else>
<!-- Footer -->
<regions:togglable id="footer_contact_us" label="Show footer 'Message Us' section" defaultvisible="true">
<templates:section bgcolor="#212529" color="#ffffff" paddingbottom="5rem">
<templates:row style="text-align: center;">
<templates:column width="8">
<h2 style="text-align: left;"><strong>Have a Question?</strong></h2>
<h4 style="text-align: left;">We're always happy to help<span style="color: #f28e1a;"></span>.</h4>
</templates:column>
<templates:column width="4">
<p><br /></p>
<templates:button variant="Classic" bgcolor="#f28e1a" color="#fff" borderRadius="0px" href="/contact-us/"><small>MESSAGE US NOW</small></templates:button>
</templates:column>
</templates:row>
</templates:section>
</regions:togglable>
<footer>
<templates:section paddingtop="5rem" paddingbottom="1rem" paddingleft="2rem" paddingright="2rem" bgcolor="#171515" color="#ffffff">
<templates:row>
<templates:column width="3">
<h4><strong>Sitemap</strong></h4>
<navigation:primary includestyles="false" includestyles="false" autopopulatelevel="1" class="list-unstyled" />
</templates:column>
<templates:column width="3">
<h4><strong>Browse Products</strong></h4>
<ul>
<data:repeater as="category" datasource="\Components\Commerce\Products\Categories::getChildren(null)">
<li><a href="[? $category['product_category_uri'] ?]">[? $category['product_category_title'] ?]</a></li>
</data:repeater>
</ul>
</templates:column>
<templates:column width="3">
<h4><strong>Connect with us</strong></h4>
<standard:icon library="fontawesome" iconstyle="solid" iconname="phone" size="4" style="width: 30px; height: 30px; background-color: #f28e1a; padding: 9px" />
(03) 999 999<br />
<br />
<standard:icon library="fontawesome" iconstyle="solid" iconname="envelope-open" size="4" style="width: 30px; height: 30px; background-color: #f28e1a; padding: 9px" />
info@muzosdirect.com<br />
<br />
<standard:icon library="fontawesome" iconstyle="solid" iconname="location-dot" size="4" style="width: 30px; height: 30px; background-color: #f28e1a; padding: 9px" />
Brisbane, Australia<br />
</templates:column>
<templates:column width="3">
<h4><strong>Subscribe to our Newsletter</strong></h4>
<forms:form editorwizard="1" recordsubmissions="true" id="newsletterSubscribe" contactmode="register" onsuccesstoastmessage="Thanks! You have successfully subscribed.">
<forms:row label="Name" type="one_column">
<forms:editbox id="contact_first_name" validations="mandatory" placeholder="First Name"></forms:editbox>
<forms:editbox id="contact_last_name" placeholder="Last Name"></forms:editbox>
</forms:row>
<forms:row label="Email Address" type="one_column">
<forms:editbox id="contact_email" validations="mandatory,email" transformations="tolower"></forms:editbox>
</forms:row>
<forms:row type="one_column">
<forms:submitbutton>Subscribe</forms:submitbutton>
</forms:row>
</forms:form>
</templates:column>
</templates:row>
<br />
<hr style="border: 1px solid #414141"/>
<br />
<templates:row>
<templates:column width="9">
<p>
Copyright © [? date('Y') ?] Muzos Direct. All rights reserved. <br />
<a href="https://www.oncord.com/">Website Powered by Oncord</a> 
</p>
</templates:column>
<templates:column width="3">
<templates:sociallinks headerposition="secondary" variant="Round" icon-width="36px" icon-height="32px" facebook="#" twitter="" linkedin="" instagram="#" youtube="#" size="3" bgcolor="#f28e1a" color="#ffffff" />
</templates:column>
</templates:row>
<p style="text-align: center;"></p>
</templates:section>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<templates:styles
bodyfontlibrary="google"
bodyFontFamily="Lato"
bodyfontweight="400"
bodycolor="#333333"
bodyfontsize="1rem"
bodylineheight="1.55rem"

h1fontlibrary="google"
h1FontFamily="Oswald"
h1FontWeight="400"
h1color=""
h1fontsize="3.375rem"
h1lineheight="3.9693rem"
h1margintop="3.1rem"
h1marginbottom="1.6rem"

h2fontlibrary="google"
h2FontFamily="Oswald"
h2FontWeight="400"
h2color=""
h2fontsize="2.25rem"
h2lineheight="2.7777rem"
h2margintop="3.1rem"
h2marginbottom="1.6rem"

h3fontlibrary="google"
h3FontFamily="Oswald"
h3FontWeight="400"
h3color=""
h3fontsize="1.5rem"
h3lineheight="2rem"
h3margintop="2.3rem"
h3marginbottom="0.8rem"

h4fontlibrary="google"
h4FontFamily="Oswald"
h4FontWeight="400"
h4color=""
h4fontsize="1rem"
h4lineheight="1.55rem"
h4margintop="2.3rem"
h4marginbottom="0.8rem"

h5fontlibrary="google"
h5FontFamily="Oswald"
h5FontWeight="400"
h5color=""
h5fontsize="1rem"
h5lineheight="1.55rem"
h5margintop="1.6rem"
h5marginbottom="0.8rem"

acolor="#f28e1a"
atextdecoration="none"

improveformstyles="true"
formaccentcolor="#f28e1a"
formstylevariant="minimal" lastusedratio="1.5" bodymargintop="0rem" bodymarginbottom="0.8rem" rootfontsize="17px" section-fullheight="50vh"
/>
</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WRKPSJ2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<templates:header variant="YinYang" maxlogowidth="200px" maxlogoheight="100px" logo="/media/website_designs/13/muzosdirect-logo.svg" contentsize="md" bgcolor="#212529" navfontcolor="#f28e1a" navbgcolor="#171515">
<navigation:primary includestyles="true" autopopulatelevel="2" classlicurrent="navigationPrimaryItem--active">
<navigation:item at="start" page="/">Home</navigation:item>
</navigation:primary>
<templates:headertext headerposition="primary" variant="Classic" color="#f28e1a"><a href="tel:(03)999999"><strong><standard:icon library="fontawesome" iconstyle="solid" iconname="phone-volume" size="4" style="width: 20px; height: 20px;" />&nbsp;(03)
999 999</strong></a></templates:headertext>
<templates:sociallinks headerposition="secondary" variant="Round" icon-width="36px" icon-height="35px" facebook="#" twitter="" linkedin="" instagram="#" youtube="#" size="3" bgcolor="#f28e1a" color="#ffffff" />
</templates:header>
<!-- HOME PAGE DISPLAY -->
<logic:if test="\Components\Website\Pages::currentPageId() == '/'">
<regions:content requiressection="true" />
</logic:if>
<!-- BLOG PAGE DISPLAY -->
<logic:else test="\Components\Website\Pages::currentPageId() == '/blog/'">
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">[? $page['page_title']; ?]</h2>
<h4 style="text-align: center;">Catch up on our latest announcements</h4>
</div>
</templates:section>
<regions:content requiressection="true" />
</logic:else>
<!-- BLOG ARTICLE PAGE DISPLAY -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/blog/',false)">
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1506423456648-c11ccb27338d?ixid=eyJhcHBfaWQiOjY4ODV9">
<h2 style="text-align: center;">Blog</h2>
<h4 style="text-align: center;">[? $page['page_title'] ?]</h4>
</templates:section>
<templates:section>
<templates:row>
<templates:column width="8">
<div class="blog-entry-text">
<regions:content />
</div>
</templates:column>
<templates:column width="4">
<div class="sidebar">
<div class="widget blog-widget">
<h3 class="widget__heading">MORE NEWS</h3>
<data:repeater datasource="\Components\Website\Posts::getAll()" datalimit="4" as="post">
<div class="blog-row">
<templates:row>
<templates:column width="4">
<logic:if test="$post['post_icon']">
<div class="blog-row__thumbnail">
<a href="[? $post['post_content_url'] ?]">
<standard:image alt="[? $post['post_title'] ?]" src="[? $post['post_icon'] ?]" maintainaspect="crop" height="60" width="100%" /></a>
</div>
</logic:if>
</templates:column>
<templates:column width="8">
<div class="blog-row__blog-entry">
<span><time itemprop="datePublished" datetime="[? date('c', strtotime($post['post_date'])) ?]">[?
formatDate($post['post_date']) ?]</time></span>
<h5><a href="[? $post['post_content_url'] ?]">[? $post['post_title'] ?]</a></h5>
</div>
</templates:column>
</templates:row>
</div>
</data:repeater>
</div>
</div>
</templates:column>
</templates:row>
</templates:section>
</logic:else>
<!-- CONTACT PAGE DISPLAY -->
<logic:else test="\Components\Website\Pages::currentPageId() == '/contact/'">
<regions:content requiressection="true" />
</logic:else>
<!-- Products -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/products/',true)">
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1457960784918-ea479c62a2c5?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">Browse Products</h2>
</div>
</templates:section>
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem">
<regions:content />
</templates:section>
</logic:else>
<!-- Commerce -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/commerce/',true)">
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1457960784918-ea479c62a2c5?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">[? $page['page_title']; ?]</h2>
</div>
</templates:section>
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem">
<regions:content />
</templates:section>
</logic:else>
<!-- COMMUNITY EVENTS PAGE -->
<logic:else test="\Components\Website\Pages::currentIsChildPageOf('/community/',true)">
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" contentsize="md" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1457960784918-ea479c62a2c5?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">[? $page['page_title']; ?]</h2>
</div>
</templates:section>
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem">
<regions:content />
</templates:section>
</logic:else>
<!-- GENERAL CONTENT PAGE DISPLAY -->
<logic:else>
<logic:variable value="[? \Components\Website\Pages::current() ?]" as="page" />
<templates:section paddingtop="6rem" paddingbottom="6rem" paddingleft="3rem" paddingright="3rem" color="#ffffff" bgwashcolor="#000" bgwashopacity="50" bgimage="https://images.unsplash.com/photo-1457960784918-ea479c62a2c5?ixid=eyJhcHBfaWQiOjY4ODV9">
<div class="entry-title">
<h2 style="text-align: center;">[? $page['page_title']; ?]</h2>
</div>
</templates:section>
<regions:content requiressection="true"/>
</logic:else>
<!-- Footer -->
<regions:togglable id="footer_contact_us" label="Show footer 'Message Us' section" defaultvisible="true">
<templates:section bgcolor="#212529" color="#ffffff" paddingbottom="5rem">
<templates:row style="text-align: center;">
<templates:column width="8">
<h2 style="text-align: left;"><strong>Have a Question?</strong></h2>
<h4 style="text-align: left;">We're always happy to help<span style="color: #f28e1a;"></span>.</h4>
</templates:column>
<templates:column width="4">
<p><br /></p>
<templates:button variant="Classic" bgcolor="#f28e1a" color="#fff" borderRadius="0px" href="/contact-us/"><small>MESSAGE US NOW</small></templates:button>
</templates:column>
</templates:row>
</templates:section>
</regions:togglable>
<footer>
<templates:section paddingtop="5rem" paddingbottom="1rem" paddingleft="2rem" paddingright="2rem" bgcolor="#171515" color="#ffffff">
<templates:row>
<templates:column width="3">
<h4><strong>Sitemap</strong></h4>
<navigation:primary includestyles="false" includestyles="false" autopopulatelevel="1" class="list-unstyled" />
</templates:column>
<templates:column width="3">
<h4><strong>Browse Products</strong></h4>
<ul>
<data:repeater as="category" datasource="\Components\Commerce\Products\Categories::getChildren(null)">
<li><a href="[? $category['product_category_uri'] ?]">[? $category['product_category_title'] ?]</a></li>
</data:repeater>
</ul>
</templates:column>
<templates:column width="3">
<h4><strong>Connect with us</strong></h4>
<standard:icon library="fontawesome" iconstyle="solid" iconname="phone" size="4" style="width: 30px; height: 30px; background-color: #f28e1a; padding: 9px" />
(03) 999 999<br />
<br />
<standard:icon library="fontawesome" iconstyle="solid" iconname="envelope-open" size="4" style="width: 30px; height: 30px; background-color: #f28e1a; padding: 9px" />
info@muzosdirect.com<br />
<br />
<standard:icon library="fontawesome" iconstyle="solid" iconname="location-dot" size="4" style="width: 30px; height: 30px; background-color: #f28e1a; padding: 9px" />
Brisbane, Australia<br />
</templates:column>
<templates:column width="3">
<h4><strong>Subscribe to our Newsletter</strong></h4>
<forms:form editorwizard="1" recordsubmissions="true" id="newsletterSubscribe" contactmode="register" onsuccesstoastmessage="Thanks! You have successfully subscribed.">
<forms:row label="Name" type="one_column">
<forms:editbox id="contact_first_name" validations="mandatory" placeholder="First Name"></forms:editbox>
<forms:editbox id="contact_last_name" placeholder="Last Name"></forms:editbox>
</forms:row>
<forms:row label="Email Address" type="one_column">
<forms:editbox id="contact_email" validations="mandatory,email" transformations="tolower"></forms:editbox>
</forms:row>
<forms:row type="one_column">
<forms:submitbutton>Subscribe</forms:submitbutton>
</forms:row>
</forms:form>
</templates:column>
</templates:row>
<br />
<hr style="border: 1px solid #414141"/>
<br />
<templates:row>
<templates:column width="9">
<p>
Copyright © [? date('Y') ?] Muzos Direct. All rights reserved. <br />
<a href="https://www.oncord.com/">Website Powered by Oncord</a> 
</p>
</templates:column>
<templates:column width="3">
<templates:sociallinks headerposition="secondary" variant="Round" icon-width="36px" icon-height="32px" facebook="#" twitter="" linkedin="" instagram="#" youtube="#" size="3" bgcolor="#f28e1a" color="#ffffff" />
</templates:column>
</templates:row>
<p style="text-align: center;"></p>
</templates:section>
</footer>
</body>
</html>
Css:
.s8-navigationPrimary .navigationPrimaryItem--active > a {
background: rgba(255,255,255,0.1);
}

footer ul {
list-style: none;
margin: 0px;
padding: 0px;
}

form#newsletterSubscribe #contact_first_name,
form#newsletterSubscribe #contact_last_name {
width: 49% !important;
}

.post_image_container {
position: relative;
}

.post_image_container img {
position: relative;
width: 100%;
height: 200px;
object-fit: contain;
background: #212529;
}

.post_product {
background: #212529;
}

.post_content h5 {
padding: 20px;
background: #f28e1a;
color: white;
margin: 0px;
}

.post_content h5 a {
color: white !important;
}

p.product_discount {
margin: 0px;
background: #212529;
padding: 20px;
color: white;
}

p.product_discount small {
font-size: 12px;
color: #ccc;
}

p.product_discount small, p.product_discount small span {
font-size: 12px;
color: #ccc !important;
}

.post_product_button {
background: #f28e1a;
padding: 10px 20px;
}

.post_product_button a {
color: white;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
font-family: Oswald;
}

.s8-navigationPrimary li ul li a {
font-size: 14px;
}

html
{

}

.footer-newsletter
{
text-align: center;
}

.footer-newsletter input
{
display: inline-block;
}

.sr-only
{
display: none;
}

.footer-newsletter .form-group
{
display: inline-block;
}

.footer-newsletter button[type="submit"]
{
padding: 6px;
margin-top: 20px;
width: 100%;
}

.blog-row
{
padding: 20px;
border-bottom: 1px solid #eee;
}

.blog-row__thumbnail
{

}

.blog-row__blog-entry
{

}

.blog-widget
{

}

.widget__heading
{
text-align: center;
padding: 10px;
color: #ffffff;
background-color: #000;
font-weight: 300;
font-size: 18px;
}

.widget__login
{
padding: 10px;
}

/* Posts */
.post
{
margin: 10px;
width: 30%;
display: flex;
flex-flow: column nowrap;
}

.post__image-container
{
height: 200px;
}

.post__content
{
padding: 10px;
text-align: center;
}

.post__content > *
{
margin-top: 10px;
margin-bottom: 10px;
}

img.grayscale {
filter: grayscale(100%);
}

hr {
border: 0px;
border-top: 1px solid #efefef;
}
@media(max-width: 767px) {
.post {
width: 100%;
}
form#contact_us input {
width: 100% !important;
}
}
.s8-navigationPrimary .navigationPrimaryItem--active > a {
background: rgba(255,255,255,0.1);
}

footer ul {
list-style: none;
margin: 0px;
padding: 0px;
}

form#newsletterSubscribe #contact_first_name,
form#newsletterSubscribe #contact_last_name {
width: 49% !important;
}

.post_image_container {
position: relative;
}

.post_image_container img {
position: relative;
width: 100%;
height: 200px;
object-fit: contain;
background: #212529;
}

.post_product {
background: #212529;
}

.post_content h5 {
padding: 20px;
background: #f28e1a;
color: white;
margin: 0px;
}

.post_content h5 a {
color: white !important;
}

p.product_discount {
margin: 0px;
background: #212529;
padding: 20px;
color: white;
}

p.product_discount small {
font-size: 12px;
color: #ccc;
}

p.product_discount small, p.product_discount small span {
font-size: 12px;
color: #ccc !important;
}

.post_product_button {
background: #f28e1a;
padding: 10px 20px;
}

.post_product_button a {
color: white;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
font-family: Oswald;
}

.s8-navigationPrimary li ul li a {
font-size: 14px;
}

html
{

}

.footer-newsletter
{
text-align: center;
}

.footer-newsletter input
{
display: inline-block;
}

.sr-only
{
display: none;
}

.footer-newsletter .form-group
{
display: inline-block;
}

.footer-newsletter button[type="submit"]
{
padding: 6px;
margin-top: 20px;
width: 100%;
}

.blog-row
{
padding: 20px;
border-bottom: 1px solid #eee;
}

.blog-row__thumbnail
{

}

.blog-row__blog-entry
{

}

.blog-widget
{

}

.widget__heading
{
text-align: center;
padding: 10px;
color: #ffffff;
background-color: #000;
font-weight: 300;
font-size: 18px;
}

.widget__login
{
padding: 10px;
}

/* Posts */
.post
{
margin: 10px;
width: 30%;
display: flex;
flex-flow: column nowrap;
}

.post__image-container
{
height: 200px;
}

.post__content
{
padding: 10px;
text-align: center;
}

.post__content > *
{
margin-top: 10px;
margin-bottom: 10px;
}

img.grayscale {
filter: grayscale(100%);
}

hr {
border: 0px;
border-top: 1px solid #efefef;
}
@media(max-width: 767px) {
.post {
width: 100%;
}
form#contact_us input {
width: 100% !important;
}
}
Js:

															

														
Php Source:

															

														
Mobile Function:
none
none
Mobile Value: