Mamo HTML Template Documentation

Footer

Below is the overview of the footer section with all the parts that can be added to it.

You can remove the footer completely if needed, a demo for this in portfolio-fullscreen.html for your reference.

<div class="pth-footer-actions pth-footer-actions--has-link">
	<!-- Share start -->
	<div class="pth-footer-actions__share">
		...
	</div>
	<!-- Share end -->

	<!-- Footer link start -->
	<div class="pth-footer-actions__link">
		...
	</div>
	<div class="pth-footer-actions__thumb">
		...
	</div>
	<!-- Footer link end -->

	<!-- Lower footer start -->
	<footer class="pth-footer">
		...
	</footer>
	<!-- Lower footer end -->
</div>

Let's break it into small parts.

The Wrapper#
<div class="pth-footer-actions pth-footer-actions--has-link">
	...
</div>

The main wrapper of the footer accepts one modifier calss, .pth-footer-actions--has-link, this class should be used only when the footer wrapper has a footer link. If you choose not to use a footer link in a certain page, you should remove this modifier class. More details on this below.

Share Links#
...
<div class="pth-footer-actions__share">
	<div class="pth-share-links">
		<span>Share</span>
		<a href="https://facebook.com/sharer/sharer.php?u=<URL_HERE>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;">Fb</a>
		<a href="https://twitter.com/intent/tweet/?url=<URL_HERE>&text=<TITLE_HERE>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;">Tw</a>
		<a href="https://www.pinterest.com/pin/create/button/?url=<URL_HERE>&description=<TITLE_HERE>&media=<IMAGE_PATH_HERE>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;">Pin</a>
		<a href="mailto:?body=<TITLE_HERE>%0A<URL_HERE>">Email</a>
	</div>
</div>
...

These are functional Facebook, Twitter, Pinterest and Email share links. You can add them to any page, but you will need to replace <URL_HERE> with page URL, <TITLE_HERE> with page title and <IMAGE_HERE> with page image (the one you would use in the intro for example). However you need to URL-encode these data first, for example Mamo HTML Template should be encoded to Mamo%20HTML%20Template. You can use this website to get your data encoded.

Footer Link#
...
<div class="pth-footer-actions__link">
	<div class="pth-text-marquee" data-skew data-skew-horizontal data-skew-multiplier=".4">
		<div class="pth-text-marquee__outer" data-bottom-top="transform: translate3d(0vw,0,0);" data-top-bottom="transform: translate3d(-10vw,0,0);">
			<div class="pth-text-marquee__inner">
				<span>Next Post Title</span>
				<span>Next Post Title</span>
				<span>Next Post Title</span>
				<span>Next Post Title</span>
				<span>Next Post Title</span>
				<span>Next Post Title</span>
			</div>
		</div>
	</div>

	<a href="#" class="pth-footer-link">
		<div class="pth-footer-link__inner" data-inertia data-inertia-multiplier="2.5" data-inertia-scale=".004" data-inertia-skew=".04">
			<span>Next</span>
		</div>
	</a>
</div>

<div class="pth-footer-actions__thumb">
	<div class="pth-footer-thumb" data-magnet data-magnet-force=".25" data-magnet-skew=".85">
		<a href="#" class="pth-footer-thumb__inner">
			<div class="pth-footer-thumb__img" style="background-image:url(assets/images/img.jpg)"></div>
		</a>
	</div>
</div>
...

A call to action link that takes you to another page, it could be the next post or project and any other page. It has 2 main parts, the text link (more on the text marquee later) and the thumbnail image.

Make sure to customize the href for both the text link and the thumbnail, and of curse customiz the thumbnail image (uses background image). Again, you have to add the modifier class .pth-footer-actions--has-link to the footer wrapper when you decide to use footer link.

Lower Footer#
...
<footer class="pth-footer">
	<div class="pth-footer__nav">
		<ul>
			<li class="menu-item"><a href="#">Privacy</a></li>
			<li class="menu-item"><a href="#">Terms of Use</a></li>
		</ul>
	</div>
	<div class="pth-footer__copyright">© Mamo by <a href="#">Premitheme</a></div>
</footer>
...

Just a simple footer navigation and copyright note.

The complete code#
<div class="pth-footer-actions pth-footer-actions--has-link">
	<!-- Share start -->
	<div class="pth-footer-actions__share">
		<div class="pth-share-links">
			<span>Share</span>
			<a href="https://facebook.com/sharer/sharer.php?u=<URL_HERE>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;">Fb</a>
			<a href="https://twitter.com/intent/tweet/?url=<URL_HERE>&text=<TITLE_HERE>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;">Tw</a>
			<a href="https://www.pinterest.com/pin/create/button/?url=<URL_HERE>&description=<TITLE_HERE>&media=<IMAGE_PATH_HERE>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;">Pin</a>
			<a href="mailto:?body=<TITLE_HERE>%0A<URL_HERE>">Email</a>
		</div>
	</div>
	<!-- Share end -->

	<!-- Footer link start -->
	<div class="pth-footer-actions__link">
		<div class="pth-text-marquee" data-skew data-skew-horizontal data-skew-multiplier=".4">
			<div class="pth-text-marquee__outer" data-bottom-top="transform: translate3d(0vw,0,0);" data-top-bottom="transform: translate3d(-10vw,0,0);">
				<div class="pth-text-marquee__inner">
					<span>Next Post Title</span>
					<span>Next Post Title</span>
					<span>Next Post Title</span>
					<span>Next Post Title</span>
					<span>Next Post Title</span>
					<span>Next Post Title</span>
				</div>
			</div>
		</div>

		<a href="#" class="pth-footer-link">
			<div class="pth-footer-link__inner" data-inertia data-inertia-multiplier="2.5" data-inertia-scale=".004" data-inertia-skew=".04">
				<span>Next</span>
			</div>
		</a>
	</div>

	<div class="pth-footer-actions__thumb">
		<div class="pth-footer-thumb" data-magnet data-magnet-force=".25" data-magnet-skew=".85">
			<a href="#" class="pth-footer-thumb__inner">
				<div class="pth-footer-thumb__img" style="background-image:url(assets/images/img.jpg)"></div>
			</a>
		</div>
	</div>
	<!-- Footer link end -->

	<!-- Lower footer start -->
	<footer class="pth-footer">
		<div class="pth-footer__nav">
			<ul>
				<li class="menu-item"><a href="#">Privacy</a></li>
				<li class="menu-item"><a href="#">Terms of Use</a></li>
			</ul>
		</div>
		<div class="pth-footer__copyright">© Mamo by <a href="#">Premitheme</a></div>
	</footer>
	<!-- Lower footer end -->
</div>