Intro

Mamo comes with 7 intro layout options. Below are each layout with preview, code and demo links.

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

Layout 1#

This layout is more sutable for projects & pages. You can find a demo for this intro in project-2.html for your reference. Below are the entire code of this intro.

<div class="pth-intro pth-intro--layout-1">
	<!-- Decoratice title start -->
	<div class="pth-intro__decorative-text" data-0="transform: translate3d(0,0em,0)" data-100p="transform: translate3d(0,.25em,0)">
		<div class="pth-intro__decorative-text-inner">Decorative Title</div>
	</div>
	<!-- Decoratice title end -->

	<!-- Page heading start -->
	<div class="pth-intro__heading-wrap">
		<div class="pth-intro__meta">
			<div class="pth-intro__meta-cat">
				<a href="#">Photographt</a>
			</div>
			<div class="pth-intro__meta-date"><span>/</span>2022</div>
		</div>
		<div class="pth-intro__heading">
			<h1 data-inertia data-inertia-multiplier="4" data-inertia-scale=".004" data-inertia-skew=".04">Title</h1>
		</div>
	</div>
	<!-- Page heading end -->

	<!-- Intro media start -->
	<div class="pth-intro__media">
		<div class="pth-intro__media-inner pth-height-60vh pth-t-height-80vh pth-l-height-90vh">
			<img src="assets/images/img.png" alt="" data-0="transform: translate3d(0,-150px,0)" data-top-bottom="transform: translate3d(0,150px,0)"/>
		</div>
	</div>
	<!-- Intro media end -->

	<!-- Scrol indicator start -->
	<div class="pth-intro__scroll-indicator">Scroll</div>
	<!-- Scrol indicator end -->
</div>

You can add the modifier class .pth-intro--smaller-text to the parent intro element to get a smaller text size for the title.

<div class="pth-intro pth-intro--layout-1 pth-intro--smaller-text">
	...
</div>

Layout 2#

This layout is more sutable for projects & pages. You can find a demo for this intro in project-1.html for your reference. Below are the entire code of this intro.

<div class="pth-intro pth-intro--layout-2">
	<!-- Intro media start -->
	<div class="pth-intro__media">
		<div class="pth-intro__media-inner pth-height-100vh">
			<img src="assets/images/img.ong" alt="" data-0="transform: translate3d(0,-150px,0)" data-top-bottom="transform: translate3d(0,150px,0)"/>
		</div>
	</div>
	<!-- Intro media end -->

	<!-- Page heading start -->
	<div class="pth-intro__heading-wrap">
		<div class="pth-intro__meta">
			<div class="pth-intro__meta-cat">
				<a href="#">Photography</a>
				<a href="#">UX</a>
			</div>
			<div class="pth-intro__meta-date"><span>/</span>2022</div>
		</div>
		<div class="pth-intro__heading">
			<h1 data-inertia data-inertia-multiplier="4" data-inertia-scale=".004" data-inertia-skew=".04">Title</h1>
		</div>
	</div>
	<!-- Page heading end -->

	<!-- Scrol indicator start -->
	<div class="pth-intro__scroll-indicator">Scroll</div>
	<!-- Scrol indicator end -->
</div>

You can add the modifier class .pth-intro--smaller-text to the parent intro element to get a smaller text size for the title.

<div class="pth-intro pth-intro--layout-2 pth-intro--smaller-text">
	...
</div>

Layout 3#

This layout is more sutable for blog posts/articles. You can find a demo for this intro in post-4.html for your reference. Below are the entire code of this intro.

<div class="pth-intro pth-intro--layout-3 pth-intro--smaller-text">
	<!-- Decoratice title start -->
	<div class="pth-intro__decorative-text" data-0="transform: translate3d(0,0em,0)" data-100p="transform: translate3d(0,.25em,0)">
		<div class="pth-intro__decorative-text-inner">Decorative Title</div>
	</div>
	<!-- Decoratice title end -->

	<!-- Page heading start -->
	<div class="pth-intro__heading-wrap">
		<div class="pth-intro__heading">
			<h1 data-inertia data-inertia-multiplier="4" data-inertia-scale=".004" data-inertia-skew=".04">Title</h1>
		</div>
		<div class="pth-intro__meta">
			<div class="pth-intro__meta-author">
				<img src="./assets/images/author.jpg" alt=""/>
				<a href="#">
					<div>Author Name</div>
				</a>
			</div>
			<div class="pth-intro__meta-date"><span>/</span><a href="#" title="9:12 pm">Aug 12, 2020</a></div>
			<div class="pth-intro__meta-comments"><span>/</span><a href="#comments">2 Comments</a></div>
		</div>
	</div>
	<!-- Page heading end -->

	<!-- Intro media start -->
	<div class="pth-intro__media">
		<div class="pth-intro__media-inner pth-height-60vh pth-t-height-80vh pth-l-height-90vh">
			<img src="assets/images/img.png" alt="" data-0="transform: translate3d(0,-150px,0)" data-top-bottom="transform: translate3d(0,150px,0)"/>
		</div>
	</div>
	<!-- Intro media end -->

	<!-- Scrol indicator start -->
	<div class="pth-intro__scroll-indicator">Scroll</div>
	<!-- Scrol indicator end -->
</div>

You can remove the modifier class .pth-intro--smaller-text from the parent intro element to get a larger text size for the title.

<div class="pth-intro pth-intro--layout-3">
	...
</div>

Layout 4#

This layout is more sutable for blog posts/articles. You can find a demo for this intro in post-2.html for your reference. Below are the entire code of this intro.

<div class="pth-intro pth-intro--layout-4 pth-intro--smaller-text">
	<!-- Intro media start -->
	<div class="pth-intro__media">
		<div class="pth-intro__media-inner pth-height-100vh">
			<img src="assets/images/img.png" alt="" data-0="transform: translate3d(0,-150px,0)" data-top-bottom="transform: translate3d(0,150px,0)"/>
		</div>
	</div>
	<!-- Intro media end -->

	<!-- Page heading start -->
	<div class="pth-intro__heading-wrap">
		<div class="pth-intro__heading">
			<h1 data-inertia data-inertia-multiplier="4" data-inertia-scale=".004" data-inertia-skew=".04">Title</h1>
		</div>
		<div class="pth-intro__meta">
			<div class="pth-intro__meta-author">
				<img src="./assets/images/author.jpg" alt=""/>
				<a href="#">
					<div>Author Name</div>
				</a>
			</div>
			<div class="pth-intro__meta-date"><span>/</span><a href="#" title="9:12 pm">Aug 12, 2020</a></div>
			<div class="pth-intro__meta-comments"><span>/</span><a href="#">2 Comments</a></div>
		</div>
	</div>
	<!-- Page heading end -->

	<!-- Scrol indicator start -->
	<div class="pth-intro__scroll-indicator">Scroll</div>
	<!-- Scrol indicator end -->
</div>

You can remove the modifier class .pth-intro--smaller-text from the parent intro element to get a larger text size for the title.

<div class="pth-intro pth-intro--layout-4">
	...
</div>

Layout 5#

This layout is more sutable for blog posts/articles. You can find a demo for this intro in post-1.html for your reference. Below are the entire code of this intro.

<div class="pth-intro pth-intro--layout-5 pth-intro--smaller-text">
	<!-- Decoratice title start -->
	<div class="pth-intro__decorative-text" data-0="transform: translate3d(0,0em,0)" data-100p="transform: translate3d(0,.25em,0)">
		<div class="pth-intro__decorative-text-inner">Decorative Title</div>
	</div>
	<!-- Decoratice title end -->

	<!-- Page heading start -->
	<div class="pth-intro__heading-wrap">
		<div class="pth-intro__heading">
			<h1 data-inertia data-inertia-multiplier="4" data-inertia-scale=".004" data-inertia-skew=".04">Title</h1>
		</div>
		<div class="pth-intro__meta">
			<div class="pth-intro__meta-author">
				<img src="./assets/images/author.jpg" alt=""/>
				<a href="#">
					<div>Author Name</div>
				</a>
			</div>
			<div class="pth-intro__meta-date"><span>/</span><a href="#" title="9:12 pm">Aug 12, 2020</a></div>
			<div class="pth-intro__meta-comments"><span>/</span><a href="#">2 Comments</a></div>
		</div>
	</div>
	<!-- Page heading end -->

	<!-- Intro media start -->
	<div class="pth-intro__media">
		<div class="pth-intro__media-inner pth-height-30vh pth-t-height-50vh pth-l-height-70vh pth-d-height-80vh">
			<img src="assets/images/img.png" alt="" data-0="transform: translate3d(0,-150px,0)" data-top-bottom="transform: translate3d(0,150px,0)"/>
		</div>
	</div>
	<!-- Intro media end -->
</div>

You can remove the modifier class .pth-intro--smaller-text from the parent intro element to get a larger text size for the title.

<div class="pth-intro pth-intro--layout-5">
...
</div>

Layout 6#

This layout is more sutable for pages, it has no hero image, just the title and outlined decorative title. You can find a demo for this intro in about-1.html for your reference. Below are the entire code of this intro.

<div class="pth-intro pth-intro--layout-6 pth-intro--smaller-text">
	<!-- Decoratice title start -->
	<div class="pth-intro__decorative-text" data-0="transform: translate3d(0,0em,0)" data-100p="transform: translate3d(0,.25em,0)">
		<div class="pth-intro__decorative-text-inner">Decorative Title</div>
	</div>
	<!-- Decoratice title end -->

	<!-- Page heading start -->
	<div class="pth-intro__heading-wrap">
		<div class="pth-intro__heading">
			<h1 data-inertia data-inertia-multiplier="4" data-inertia-scale=".004" data-inertia-skew=".04">Title</h1>
		</div>
	</div>
	<!-- Page heading end -->
</div>

You can remove the modifier class .pth-intro--smaller-text from the parent intro element to get a larger text size for the title.

<div class="pth-intro pth-intro--layout-6">
...
</div>

Layout 7#

This layout is more sutable for pages, it has no hero image or title, just the outlined decorative title. You can find a demo for this intro in blog-list.html for your reference. Below are the entire code of this intro.

<div class="pth-intro pth-intro--layout-7">
	<!-- Decoratice title start -->
	<div class="pth-intro__decorative-text" data-0="transform: translate3d(0,0em,0)" data-100p="transform: translate3d(0,.25em,0)">
		<div class="pth-intro__decorative-text-inner">Decorative Title</div>
	</div>
	<!-- Decoratice title end -->
</div>