php js css php js css

Changes

Changes to Design: Martin Test

405258
Yesterday 8:28pm
System
Modified design
PART OF Find and Replace
405296
Yesterday 8:43pm
Cumberland, Alex
Deleted design
Id:
48
48
Deleted Datetime:

															

														
Type:
web
web
Title:
Martin Test
Martin Test
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>
<templates:header variant="YinYang" maxlogowidth="200px" maxlogoheight="100px" logo="/media/website_designs/13/muzosdirect-logo.svg" contentsize="md" bgcolor="#212529" navfontcolor="#f28e1a" navbgcolor="#171515">
<templates:headertext headerposition="primary" variant="Classic" color="#f28e1a"><a href="tel:#"><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" />
<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>
<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">
<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">
<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" 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" />
<regions:content requiressection="true"/>
</logic:else>
<!-- Footer -->
<regions:togglable id="footer_contact_us" label="Show footer 'Message Us' section" defaultvisible="true"> </regions:togglable>
<footer> </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>
<templates:header variant="YinYang" maxlogowidth="200px" maxlogoheight="100px" logo="/media/website_designs/13/muzosdirect-logo.svg" contentsize="md" bgcolor="#212529" navfontcolor="#f28e1a" navbgcolor="#171515">
<templates:headertext headerposition="primary" variant="Classic" color="#f28e1a"><a href="tel:#"><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" />
<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>
<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">
<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">
<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" 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" />
<regions:content requiressection="true"/>
</logic:else>
<!-- Footer -->
<regions:togglable id="footer_contact_us" label="Show footer 'Message Us' section" defaultvisible="true"> </regions:togglable>
<footer> </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:

															

														
Ajax Navigation: