|
|
|
|
|
|
|
|
|
|
|
|
|
<templates:section bgcolor="#f6f7f9">
<h2>About Us</h2>
<templates:flexlayout style="justify-content: center; align-items: stretch;" preventwrap="preventwrap">
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
</templates:flexlayout>
<templates:flexlayout style="justify-content: center; align-items: stretch;" preventwrap="preventwrap">
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
</templates:flexlayout>
</templates:section>
<templates:section paddingtop="3rem" paddingbottom="3rem" paddingleft="2rem" paddingright="2rem">
<templates:row>
<templates:column width="4">
<h3 style="text-align: center;">Change Heading. </h3>
<p style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br />
<br />
</p>
</templates:column>
<templates:column width="4">
<h3 style="text-align: center;">Feature 2</h3>
<p style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br />
<br />
</p>
</templates:column>
<templates:column width="4">
<h3 style="text-align: center;">Feature 3</h3>
<p style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br />
<br />
</p>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="4">
<h3 style="text-align: center;">Feature 4</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</templates:column>
<templates:column width="4">
<h3 style="text-align: center;">Feature 5</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</templates:column>
<templates:column width="4">
<h3 style="text-align: center;">Feature 6</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</templates:column>
</templates:row>
</templates:section>
<templates:section class="test" paddingtop="4rem" paddingbottom="3rem">
<templates:row style="text-align: left;">
<templates:column width="4">
<h2><strong>Features</strong></h2>
<p>
<strong><standard:icon library="fontawesome" iconstyle="solid" iconname="dollar-sign" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Fixed
Monthly Cost</strong>
</p>
<p>
<strong><standard:icon library="fontawesome" iconstyle="solid" iconname="star" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Easy
to use</strong>
</p>
<p>
<strong><standard:icon library="fontawesome" iconstyle="brands" iconname="html5" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Secure &
Reliable</strong>
</p>
<p>
<strong><standard:icon library="fontawesome" iconstyle="solid" iconname="dollar-sign" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Great
Support</strong>
</p>
<p>
<strong><standard:icon library="fontawesome" iconstyle="solid" iconname="dollar-sign" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Scalable</strong>
</p>
</templates:column>
<templates:column width="8" style="text-align: center;">
<h2 style="text-align: left;">Change Text or Headings<strong></strong></h2>
<p style="text-align: left;">
We've been selling music products for the last 3 years.<br />
You can visit us at our shop in the town, we are open from 9am to 5pm every day.
</p>
<p style="text-align: left;">
If you don’t want to leave to comfort of your own home, why not have a look at our online store. We have some great new lines and also
some fantastic seasonal offers on many of our ranges with up to 75% off if you’re lucky before stocks run out.
</p>
<p style="text-align: left;">
Whether you're buying guitars for the kids, need something a little different, or you're an experienced musician - we'd love to hook you
up with something special.
</p>
</templates:column>
</templates:row>
</templates:section>
<templates:section paddingtop="8rem" paddingbottom="7rem" paddingleft="2rem" paddingright="2rem" bgcolor="#f5f5f5">
<templates:row verticalAlignColumns="center">
<templates:column width="7">
<standard:image src="https://images.unsplash.com/photo-1519892300165-cb5542fb47c7?ixid=eyJhcHBfaWQiOjY4ODV9" maintainaspect="crop" width="100%" style="float: left; margin-right: 8px" height="416" />
<p></p>
<h2><strong></strong></h2>
<p><a href="https://www.oncord.com/"></a><br /></p>
</templates:column>
<templates:column width="5">
<h2><strong>Our Website</strong></h2>
<p>
MuzosDirect is a fictional online music store used to showcase how the Oncord website and digital marketing platform can be used in a
retail environment.
</p>
<p>This template can be used as a starting foundation for creating an online presence for your retail store.</p>
<p>Find out more about the Oncord platform and access the back-end of this demo.</p>
<p>
<templates:button variant="Classic" bgcolor="#f28e1a" color="#fff" borderRadius="16px" href="https://www.synergy8.com" target="_blank"><small>VISIT
OUR WEBSITE</small></templates:button>
</p>
<p><br /></p>
</templates:column>
</templates:row>
</templates:section>
<templates:section paddingtop="5rem" paddingbottom="3rem" paddingleft="2rem" paddingright="2rem">
<templates:row verticalAlignColumns="flex-start">
<templates:column width="2">
<standard:image width="150" src="/Logo-1.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" /><br />
</templates:column>
<templates:column width="3">
<standard:image width="150" src="/Logo-2.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" />
</templates:column>
<templates:column width="2">
<standard:image width="150" src="/Logo-3.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" />
</templates:column>
<templates:column width="3">
<standard:image width="150" src="/Logo-4.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" />
</templates:column>
<templates:column width="2">
<standard:image width="150" src="/Logo-5.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" />
</templates:column>
</templates:row>
</templates:section>
<templates:section bgcolor="#f6f7f9">
<data:postrepeater paging="true" pagingrows="3" templatetype="list" variant="card" />
</templates:section>
<templates:section paddingtop="5rem" paddingbottom="5rem" bgcolor="#ffffff">
<h2 style="text-align: center; margin-bottom: 2rem;">German Shepherds Gallery</h2>
<layout:gallery spacing="15" sizing="2,4" modalTheme="dark" sizingtolerance="1" modalcontent="*">
<standard:image lazy="true" src="https://images.unsplash.com/photo-1605725657590-b2cf0d31b1a5?ixid=M3w2ODg1fDB8MXxzZWFyY2h8MXx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd Portrait" modalCaptionDescription="A beautiful German Shepherd looking directly at the camera." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1589941013453-ec89f33b5e95?ixid=M3w2ODg1fDB8MXxzZWFyY2h8Mnx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd in Field" modalCaptionDescription="A German Shepherd running through a grassy field." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1621951714491-3cde56a9cadf?ixid=M3w2ODg1fDB8MXxzZWFyY2h8M3x8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd Puppy" modalCaptionDescription="An adorable German Shepherd puppy with bright eyes." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1649923625148-1e13d9431053?ixid=M3w2ODg1fDB8MXxzZWFyY2h8NHx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd Close-up" modalCaptionDescription="A close-up of a German Shepherd's face showing its intelligent expression." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1649923625793-af1cbd33c8bd?ixid=M3w2ODg1fDB8MXxzZWFyY2h8NXx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd in Action" modalCaptionDescription="A German Shepherd in mid-air, showing its athleticism." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1575785662490-1e3ce6806ed5?ixid=M3w2ODg1fDB8MXxzZWFyY2h8Nnx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd with Owner" modalCaptionDescription="A German Shepherd walking beside its owner, showing the strong bond between them." />
</layout:gallery>
</templates:section>
<templates:section bgcolor="#f6f7f9">
<h2>About Us</h2>
<templates:flexlayout style="justify-content: center; align-items: stretch;" preventwrap="preventwrap">
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
</templates:flexlayout>
<templates:flexlayout style="justify-content: center; align-items: stretch;" preventwrap="preventwrap">
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
<templates:card bgcolor="#FFFFFF" style="padding: 20px; margin: 10px; border-radius: 0px;" cardSize="sm">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p></p>
</templates:card>
</templates:flexlayout>
</templates:section>
<templates:section paddingtop="3rem" paddingbottom="3rem" paddingleft="2rem" paddingright="2rem">
<templates:row>
<templates:column width="4">
<h3 style="text-align: center;">Change Heading. </h3>
<p style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br />
<br />
</p>
</templates:column>
<templates:column width="4">
<h3 style="text-align: center;">Feature 2</h3>
<p style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br />
<br />
</p>
</templates:column>
<templates:column width="4">
<h3 style="text-align: center;">Feature 3</h3>
<p style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br />
<br />
</p>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="4">
<h3 style="text-align: center;">Feature 4</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</templates:column>
<templates:column width="4">
<h3 style="text-align: center;">Feature 5</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</templates:column>
<templates:column width="4">
<h3 style="text-align: center;">Feature 6</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</templates:column>
</templates:row>
</templates:section>
<templates:section class="test" paddingtop="4rem" paddingbottom="3rem">
<templates:row style="text-align: left;">
<templates:column width="4">
<h2><strong>Features</strong></h2>
<p>
<strong><standard:icon library="fontawesome" iconstyle="solid" iconname="dollar-sign" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Fixed
Monthly Cost</strong>
</p>
<p>
<strong><standard:icon library="fontawesome" iconstyle="solid" iconname="star" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Easy
to use</strong>
</p>
<p>
<strong><standard:icon library="fontawesome" iconstyle="brands" iconname="html5" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Secure &
Reliable</strong>
</p>
<p>
<strong><standard:icon library="fontawesome" iconstyle="solid" iconname="dollar-sign" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Great
Support</strong>
</p>
<p>
<strong><standard:icon library="fontawesome" iconstyle="solid" iconname="dollar-sign" size="4" style="width: 35px; height: 35px; color: #f28e1a; background-color: #212529; padding: 6px" /> Scalable</strong>
</p>
</templates:column>
<templates:column width="8" style="text-align: center;">
<h2 style="text-align: left;">Change Text or Headings<strong></strong></h2>
<p style="text-align: left;">
We've been selling music products for the last 3 years.<br />
You can visit us at our shop in the town, we are open from 9am to 5pm every day.
</p>
<p style="text-align: left;">
If you don’t want to leave to comfort of your own home, why not have a look at our online store. We have some great new lines and also
some fantastic seasonal offers on many of our ranges with up to 75% off if you’re lucky before stocks run out.
</p>
<p style="text-align: left;">
Whether you're buying guitars for the kids, need something a little different, or you're an experienced musician - we'd love to hook you
up with something special.
</p>
</templates:column>
</templates:row>
</templates:section>
<templates:section paddingtop="8rem" paddingbottom="7rem" paddingleft="2rem" paddingright="2rem" bgcolor="#f5f5f5">
<templates:row verticalAlignColumns="center">
<templates:column width="7">
<standard:image src="https://images.unsplash.com/photo-1519892300165-cb5542fb47c7?ixid=eyJhcHBfaWQiOjY4ODV9" maintainaspect="crop" width="100%" style="float: left; margin-right: 8px" height="416" />
<p></p>
<h2><strong></strong></h2>
<p><a href="https://www.oncord.com/"></a><br /></p>
</templates:column>
<templates:column width="5">
<h2><strong>Our Website</strong></h2>
<p>
MuzosDirect is a fictional online music store used to showcase how the Oncord website and digital marketing platform can be used in a
retail environment.
</p>
<p>This template can be used as a starting foundation for creating an online presence for your retail store.</p>
<p>Find out more about the Oncord platform and access the back-end of this demo.</p>
<p>
<templates:button variant="Classic" bgcolor="#f28e1a" color="#fff" borderRadius="16px" href="https://www.synergy8.com" target="_blank"><small>VISIT
OUR WEBSITE</small></templates:button>
</p>
<p><br /></p>
</templates:column>
</templates:row>
</templates:section>
<templates:section paddingtop="5rem" paddingbottom="3rem" paddingleft="2rem" paddingright="2rem">
<templates:row verticalAlignColumns="flex-start">
<templates:column width="2">
<standard:image width="150" src="/Logo-1.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" /><br />
</templates:column>
<templates:column width="3">
<standard:image width="150" src="/Logo-2.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" />
</templates:column>
<templates:column width="2">
<standard:image width="150" src="/Logo-3.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" />
</templates:column>
<templates:column width="3">
<standard:image width="150" src="/Logo-4.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" />
</templates:column>
<templates:column width="2">
<standard:image width="150" src="/Logo-5.png" class="grayscale" style="margin-left: auto; margin-right: auto; display: block" />
</templates:column>
</templates:row>
</templates:section>
<templates:section bgcolor="#f6f7f9">
<data:postrepeater paging="true" pagingrows="3" templatetype="list" variant="card" />
</templates:section>
<templates:section paddingtop="5rem" paddingbottom="5rem" bgcolor="#ffffff">
<h2 style="text-align: center; margin-bottom: 2rem;">German Shepherds Gallery</h2>
<layout:gallery spacing="15" sizing="2,4" modalTheme="dark" sizingtolerance="1" modalcontent="*">
<standard:image lazy="true" src="https://images.unsplash.com/photo-1605725657590-b2cf0d31b1a5?ixid=M3w2ODg1fDB8MXxzZWFyY2h8MXx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd Portrait" modalCaptionDescription="A beautiful German Shepherd looking directly at the camera." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1589941013453-ec89f33b5e95?ixid=M3w2ODg1fDB8MXxzZWFyY2h8Mnx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd in Field" modalCaptionDescription="A German Shepherd running through a grassy field." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1621951714491-3cde56a9cadf?ixid=M3w2ODg1fDB8MXxzZWFyY2h8M3x8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd Puppy" modalCaptionDescription="An adorable German Shepherd puppy with bright eyes." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1649923625148-1e13d9431053?ixid=M3w2ODg1fDB8MXxzZWFyY2h8NHx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd Close-up" modalCaptionDescription="A close-up of a German Shepherd's face showing its intelligent expression." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1649923625793-af1cbd33c8bd?ixid=M3w2ODg1fDB8MXxzZWFyY2h8NXx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd in Action" modalCaptionDescription="A German Shepherd in mid-air, showing its athleticism." />
<standard:image lazy="true" src="https://images.unsplash.com/photo-1575785662490-1e3ce6806ed5?ixid=M3w2ODg1fDB8MXxzZWFyY2h8Nnx8Z2VybWFuJTIwc2hlcGhlcmR8ZW58MHx8fHwxNzU2OTQ1NzA2fDA" width="300" height="300" maintainaspect="crop" modalCaptionTitle="German Shepherd with Owner" modalCaptionDescription="A German Shepherd walking beside its owner, showing the strong bond between them." />
</layout:gallery>
</templates:section>
|
|
|
|
function onMouseOver(nElement)
{
nElement.style.color = 'red';
}
function onMouseOver(nElement)
{
nElement.style.color = 'red';
}
|
|
|
|
|
|
|
|
|
|
This is our team. We are a group of 5 music enthusiasts from a range of diverse backgrounds.
This is our team. We are a group of 5 music enthusiasts from a range of diverse backgrounds.
|
|
Keyboard, Guitars, Drums, Trumpets, Pianos, String Instruments, symbols, piano, guitar
Keyboard, Guitars, Drums, Trumpets, Pianos, String Instruments, symbols, piano, guitar
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|