Made by Pe Themes
First of all, Thank you so much for purchasing this template and for being our customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.
This documentation is to help you regarding each step of customization.
Please go through the documentation carefully to understand how this template is made and how to edit this properly.
When you purchase Nayla from Themeforest, you need to login your account and download template files from Themeforest. Please make sure you downloaded All file & Documentation option.
After you downloaded template files you will find inside it;
01. Nayla - Template files for installation
02. Documentation - Contains Nayla template documentation
Step 1: Login to your hosting server via FTP client.
Step 2: Locate the domain folder you wish to upload Nayla.
Step 3: Upload Nayla theme files in your domain server
In Nayla you can set the site colors with adding some little CSS codes to body.
<body data-barba="wrapper" style="--primaryBackground: #ebebeb;--primaryColor: #191919">
As you can see above you onyl need to set your colors to body and leave the rest of to the Nayla.
Here's acceptable color settings;
--primaryColor ------ Will be used as main color
--primaryBackground ------ Will be used as main background
--secondaryColor ------ Will be used as secondary color.
--secondaryBackground ------ Will be used as secondary background
For using smooth-scroll you only need to add smooth-scroll class to the body classes.
<body class"smooth-scroll">As you can see below there's three different page loader options included with the template.
These are automatically running if the necessary object is exists.
For example: if page-loader-logo div exists, the logo animation will be run on page load. so you can remove the objects which you don't want to use
<!-- Page Loader -->
<div class="page-loader">
<!-- Percentage (Don't Touch) -->
<div class="page-loader-percentage"></div>
<!-- Percentage (Don't Touch) -->
<!-- Logo -->
<div class="page-loader-logo">
<img src="img/page-loader-logo-dark.png">
</div>
<!-- Logo -->
<!-- Caption -->
<div class="page-loader-caption bottom-right">
CREATIVITY MEETS
<br>FUNCTIONALITY
</div>
<!-- Caption -->
</div>
<!--/ Page Loader -->Nayla had lots of page transitions, some of them are specified for some specific showcase layouts but for the default transitions you can select any type you want.
You just need to add necessary class ti nayla-page-transitions div. As you can see in the followin example; the block transition type added and it'll be work on up direction.
<!-- Page Transitions -->
<div class="nayla-page-transition block up">
<!-- Caption -->
<div class="page-transition-caption">
Loading, please wait..
</div>
<!--/ Caption -->
</div>
<!-- Page Transitions -->Here's a list of accepted transitions;
block, overlay, opacity, page-over
And directions: up, down, left, right
There's two type of mouse curosr included in Nayla. dot and circle you just need to add the class you want in the div belov;
<!-- Mouse Cursor -->
<div id="mouseCursor" class="dot"> </div>
<!--/ Mouse Cursor -->
The cursor is automatically interacts with your content, but if you want to customize the cursor interaction of your elements you can use following classes for that:
Class: cursor-icon, Attribute data-cursor-icon
Class: cursor-text, Attribute data-cursor-text
Example:
<div class="single-image cursor-icon" data-cursor-icon="arrow_outward">
<img src="path/to/img">
</div>Please view #icons shortcode section for more information about icons.
Nayla has it's own grid system for creating unique pages you need to create your pages with Nayla's own grid system for maximum efficency.
Before talking about the grid system elements, I want to inform you about the classes you can use for all page elements;
hide-mobile -- Hides the element on mobile devices.
hide-desktop -- Hides the element on desktop devices.
no-margin -- Removes the default bottom margin from the element.
no-gap -- Removes the default left and right paddings.
Sections are the first parent div of your shortcodes which you can insert backgrounds, spacings etc.
there's some different customization classes and attributes available as you can see below;
fullscreen class is making that section fullscreen which is setting the section height equal to browser height.
anim-bg class is making the background of the section animated.
<div class="section fullscreen anim-bg" style="background: #191919">
...
</div>1.1 Section Backgrounds
One of the most unique features of Nayla is that you can use nearyl everything as background of a section. You just need to insert section-background div just before inserting the first wrapper.
And with fixed-bg class you can made the background fixed with the section.
Example:
<div class="section-background">
<div class="wrapper-full">
<div class="c-col-12">
<div class="single-image parallax-image has-anim-image slideDown" data-delay=1>
<img src="img/projects/architexture_15.jpg">
</div>
</div>
</div>
</div>Wrappers allows us the set the content with as a row, there's three type of wrappers are included with the tempalte these are: wrapper, wrapper-small, wrapper-full
<div class="section">
<div class="wrapper">
...
</div>
</div>There's 12 columns grid system used in Nayla which can bu sed with col- class and you can use sm- and md- classes for a responsive experiece:
Desktop: col-1, col-2, col-3, col-4, col-5, col-6, col-7, col-8, col-9, col-10, col-11, , col-12
Tablets: md-1, md-2, md-3, md-4, md-5, md-6, md-7, md-8, md-9, md-10, md-11, , md-12
Mobile: sm-1, sm-2, sm-3, sm-4, sm-5, sm-6, sm-7, sm-8, sm-9, sm-10, sm-11, , sm-12
See example below;
<div class="section">
<div class="wrapper">
<div class="c-col-4 -md-8 sm-12">
...
</div>
</div>
</div>Ther's some classes which you can insert in the header and make it more fit with your style;
light -- Makes the header color set light tones
dark -- Makes the header color set dark tones (which)
blend -- Turns the header elements blend mode to "difference".
dynamic -- Header will be absolute and will be stay above the content
fixed -- Header will be fixed and always follow the browser window
sticky -- Will be hidden when scrolling down and when user scrolls up it'll be visible again no matter where the scroll position on the page.
<!-- Site Header -->
<div id="header" class="site-header dynamic light">
</div>
<!--/ Site Header -->Header wrapper is the way you can set the header content size, you can use any wrapper size you want between wrapper, wrapper-small, wrapper-full.
After you insert the header wrapper you can insert your header content inside it with the theme's grid system.
<!-- Site Header -->
<div id="header" class="site-header dynamic light">
<!-- Header Wrapper -->
<div class="header-wrapper wrapper">
<div class="c-col-6"></div>
<div class="c-col-6"></div>
</div>
<!--/ Header Wrapper -->
</div>
<!--/ Site Header -->
Site branding is the place you need to insert your logos, don't forget to add your logo's all versions (dark, light, stickydark, sticky light) for a better experience.
<!-- Site Header -->
<div id="header" class="site-header dynamic light">
<!-- Header Wrapper -->
<div class="header-wrapper wrapper">
<div class="c-col-6">
<div class="site-branding">
<div class="site-logo">
<img class="dark-logo" src="img/site-logo.png">
<img class="light-logo" src="img/site-logo-light.png">
</div>
<div class="sticky-logo">
<img class="sticky-dark-logo" src="img/sticky_logo.png">
<img class="sticky-light-logo" src="img/sticky_logo_light.png">
</div>
</div>
</div>
<div class="c-col-6"></div>
</div>
<!--/ Header Wrapper -->
</div>
<!--/ Site Header -->
There's two types of site navigation included with the template classic and fullscreen
3.1 Classic Navigation
In classic navigation you just need to insert it in a column;
IMPORTANT: menu-toggle div is necessary for mobile navigation.
<!-- Site Header -->
<div id="header" class="site-header dynamic light">
<!-- Header Wrapper -->
<div class="header-wrapper wrapper">
<div class="c-col-6">
<div class="site-branding">
<div class="site-logo">
<img class="dark-logo" src="img/site-logo.png">
<img class="light-logo" src="img/site-logo-light.png">
</div>
<div class="sticky-logo">
<img class="sticky-dark-logo" src="img/sticky_logo.png">
<img class="sticky-light-logo" src="img/sticky_logo_light.png">
</div>
</div>
</div>
<div class="c-col-6">
<div id="site-navigation" class="classic align-right">
<ul class="menu main-menu">
<li><a href="http://localhost/nayla/home-creative-agency-dark.html">HOME</a></li>
<li><a href="http://localhost/nayla/pages/about-creative-dark.html">ABOUT</a></li>
<li><a href="http://localhost/nayla/pages/services-creative-dark.html">SERVICES</a></li>
<li><a href="http://localhost/nayla/pages/contact-creative-dark.html">CONTACT</a></li>
</ul>
</div>
<div class="menu-toggle hide-desktop">
<div class="toggle-lines">
<div class="toggle-line"></div>
<div class="toggle-line"></div>
</div>
</div>
</div>
</div>
<!--/ Header Wrapper -->
</div>
<!--/ Site Header -->
3.2 Fullscreen Navigation
For using fullscreen navigation; after you insert menu-toggle inside the header wrapper you need to create navigation outside the wrapper. In the widgets on fullscreen menu you can use theme widgets and animations these are will automatically integrated with the menu toggle animation
<!-- Site Header -->
<div id="header" class="site-header dynamic light">
<!-- Header Wrapper -->
<div class="header-wrapper wrapper">
<div class="c-col-6">
<div class="site-branding">
<div class="site-logo">
<img class="dark-logo" src="img/site-logo.png">
<img class="light-logo" src="img/site-logo-light.png">
</div>
<div class="sticky-logo">
<img class="sticky-dark-logo" src="img/sticky_logo.png">
<img class="sticky-light-logo" src="img/sticky_logo_light.png">
</div>
</div>
</div>
<div class="c-col-6">
<div class="menu-toggle hide-desktop">
<div class="toggle-lines">
<div class="toggle-line"></div>
<div class="toggle-line"></div>
</div>
</div>
</div>
</div>
<!--/ Header Wrapper -->
<!-- Fullscreen Menu -->
<div id="site-navigation" class="fullscreen_menu fullscreen">
<div class="wrapper fullscreen-menu-wrapper">
<div class="c-col-3 hide-mobile">
<ul class="menu" data-animation="linesUp">
<li><a href="#.">Documentation</a></li>
<li><a href="#.">Support</a></li>
<li><a href="#.">Purchase</a></li>
</ul>
</div>
<div class="c-col-3 hide-mobile">
<ul class="menu" data-animation="linesUp">
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Behance</a></li>
</ul>
</div>
<div class="c-col-6 sm-12">
<ul class="menu main-menu">
<li><a href="http://localhost/nayla">Home</a></li>
<li><a href="http://localhost/nayla/pages/works.html">Projects</a></li>
<li><a href="http://localhost/nayla/pages/about-us.html">About</a></li>
<li><a href="pages/services.html">Services</a></li>
<li><a href="http://localhost/nayla/pages/team.html">Team</a></li>
<li><a href="http://localhost/nayla/blog.html">Insights</a></li>
<li><a href="http://localhost/nayla/pages/contact.html">Contact</a></li>
</ul>
</div>
<div class="c-col-2 hide-mobile"></div>
<div class="fullscreen-menu-wrap-bottom">
<div class="c-col-3 hide-mobile has-anim maskDown" data-delay=.2>
<div class="nayla-video cursor-play" data-play="icon" data-controls="play progress mute fullscreen">
<video autoplay muted loop class="n-video">
<source src="../img/showreel.mp4">
</video>
</div>
</div>
<div class="c-col-3 hide-mobile"> </div>
<div class="c-col-3 sm-12 has-anim fadeDown" data-delay=.4>
<div class="nayla-button underline icon-right" data-icon="arrow_forward">
<a href="#">[email protected]</a>
</div>
</div>
<div class="c-col-3 sm-12 has-anim fadeDown" data-delay=.4>
<div class="nayla-button underline icon-right" data-icon="arrow_forward">
<a href="#">+44 852 748 45 12</a>
</div>
</div>
</div>
</div>
</div>
<!-- Fullscreen Menu -->
</div>
<!--/ Site Header -->
As same as the "header" you can insert footer content with the grid system and you can set color set by adding dark or light classes.
<!-- Footer -->
<div id="footer" class="site-footer light">
<div class="nayla-divider"></div>
<div class="footer-wrapper">
<div class="wrapper footer-top-wrapper">
<div class="c-col-6">
<div class="text-wrapper">
<p style="color: #888">INQUIRIES</p>
<p class="text-h5">WORK TOGETHER?
<br><a href="mailto:[email protected]">[email protected]</a>
<br><a href="mailto:[email protected]">+44 145 25 25</a>
</p>
</div>
</div>
<div class="c-col-3">
<p style="color: #888">FOLLOW</p>
<ul class="menu">
<li><a href="#.">TWITTER</a></li>
<li><a href="#.">INSTAGRAM</a></li>
<li><a href="#.">GITHUB</a></li>
</ul>
</div>
<div class="c-col-3">
<div class="text-wrapper align-right scroll-button" data-scroll-to=0>
<p>BACK TO TOP</p>
</div>
</div>
</div>
<div class="wrapper footer-bottom-wrapper">
<div class="c-col-6">
<div class="text-wrapper">
<p style="color: #888">© 2023 </p>
</div>
</div>
<div class="c-col-6">
<div class="single-image align-right" style="width: 50px">
<img src="img/site_emblem_light.png">
</div>
</div>
</div>
</div>
</div>
<!--/ Footer -->You can easily create project pages like creating the other inner pages, all page widgets are allowed for the project content.
Nayla offers 8 type of project page header, basically these project page headers are created with the templates'grid system and shortcodes. But with that pre-made design you can make things faster.
6.1 No Image
<!-- Project Header -->
<div class="project-page-header no-image">
<div class="wrapper">
<div class="c-col-12">
<!-- Project Title -->
<div class="project-title">
<h1 class="md-title has-anim-text charsUp" data-stagger=0.03 data-duration=2.5>ARCHITEXTURE</h1>
</div>
<!--/Project Title -->
</div>
<div class="c-col-6 sm-12">
<div class="text-wrapper">
<p class="has-anim-text linesUp">ARCHITECTURE
<br>2017 - SOLISCAPE
</p>
</div>
</div>
<div class="c-col-6 sm-12">
<!-- Project Meta -->
<div class="project-meta">
<p class="has-anim-text linesUp">In our architectural photography project, we embark on a captivating visual journey to capture the essence and beauty of remarkable structures. With a keen eye for detail and an appreciation for the interplay of light, lines, and shapes, our skilled photographers craft compelling images that reveal the unique character and grandeur of architectural masterpieces. </p>
</div>
<!--/Project Meta -->
<!-- Project Button -->
<div class="project-button has-anim maskUp">
<!-- Nayla Button -->
<div class="nayla-button underline icon-right" data-icon="arrow_outward">
<a href="#.">VISIT PROJECT</a>
</div>
<!--/Nayla Button -->
</div>
<!--/Project Button -->
</div>
</div>
</div>
<!--/Project Header -->6.2 Gallery Vertical
<!-- Project Header -->
<div class="project-page-header fullscreen image-gallery vertical">
<div class="wrapper">
<!-- Project Hero -->
<div class="project-hero">
<!-- Nayla Button -->
<div class="nayla-button small has-anim slideUp">
<div class="nayla-button outline icon-left" data-icon="arrow_back">
<a href="#">BACK</a>
</div>
</div>
<!--/Nayla Button -->
<!-- Project Title -->
<div class="project-title">
<h1 class="has-anim-text charsUp">Beach Brown</h1>
</div>
<!--/Project Title -->
<!-- Project Category -->
<div class="project-category has-anim-text wordsUp">(PHOTOGRAPHY)</div>
<!--/Project Category -->
<!-- Project Meta -->
<div class="project-meta">
<p class="has-anim-text wordsUp">FRAMING LIFE'S SNAPSHOTS:
<br>REVEALING BEAUTY ONE CLICK AT A TIME
</p>
</div>
<!--/Project Meta -->
</div>
<!--/Project Hero -->
<!-- Project Slide Button -->
<div class="project-slide-button has-anim fadeDown">
<span class="material-symbols-outlined">
arrow_downward
</span>
</div>
<!--/Project Slide Button -->
<!-- Project Images -->
<div class="project-images cursor-text" data-cursor-text="SCROLL" data-speed="4">
<!-- Project Images Slider -->
<div class="project-images-slider">
<!-- Project Image -->
<div class="project-image featured">
<img src="../img/projects/beach-brown_8.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/beach-brown_2.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/beach-brown_3.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/beach-brown_4.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/beach-brown_5.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/beach-brown_6.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/beach-brown_7.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/beach-brown_1.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/beach-brown_9.jpg" alt="Project Image">
</div>
<!--/Project Image -->
</div>
<!--/Project Image Slider -->
</div>
<!--/Project Images -->
</div>
</div>
<!--/Project Header -->
6.3 Video
<!-- Project Header -->
<div class="project-page-header video">
<div class="wrapper">
<!-- Project Page -->
<div class="project-top">
<!-- Project Title -->
<div class="project-title">
<h1 class="md-title has-anim-text charsUp">Dynamic Exposé</h1>
</div>
<!--/Project Tittle -->
<!-- Project Category -->
<div class="project-category text-h6 has-anim-text wordsUp">Editorial</div>
<!--/Project Category -->
</div>
<!--/Project Page -->
<!-- Project Video -->
<div class="project-video has-anim maskUp">
<div class="nayla-video cursor-play" data-play="PLAY" data-controls="play progress mute fullscreen">
<video autoplay muted loop style="width: 100%;display: block" class="n-video">
<source src="../img/projects/dynamic_expose_inner.mp4">
</video>
</div>
</div>
<!--/Project Video -->
<!-- Project Meta -->
<div class="project-meta">
<!-- Text Wrapper -->
<div class="text-wrapper">
<p class="has-anim-text linesUp">DIGITAL STRATEGY
<br>VISUAL LANGUAGE
<br>CONTENT DIRECTION
</p>
</div>
<!--/Text Wrapper -->
<!-- Text Wrapper -->
<div class="text-wrapper">
<p class="text-h3 no-margin has-anim-text charsUp">2017
</p>
</div>
<!--/Text Wrapper -->
<!-- Text Wrapper -->
<div class="text-wrapper">
<p class="has-anim-text linesUp">THIS IS OUR VIDEO PROJECT, WHERE DREAMS BECOME REALITY, AND THE MAGIC OF CINEMA IS UNLEASHED.</p>
</div>
<!--/Text Wrapper -->
<!-- Nayla Button -->
<div class="nayla-button hide-mobile has-anim slideUp">
<div class="nayla-button underline icon-right" data-icon="arrow_outward">
<a href="http://localhost/nayla/projects/project-los-coyotes.html">NEXT PROJECT</a>
</div>
</div>
<!--/Nayla Button -->
</div>
<!--/Project Meta -->
</div>
</div>
<!--/Project Header -->
6.4 Half Image
<div class="project-page-header half-image">
<div class="project-image featured">
<img src="../img/projects/immersive_realities_featured.jpg">
</div>
<div class="wrapper">
<!-- Project Title -->
<div class="project-title">
<h1 class="md-title has-anim-text wordsUp" data-delay=.3>IMMERSIVE REAILITIES</h1>
</div>
<!--/Project Title -->
<!-- Project Category -->
<div class="project-category text-h6 has-anim-text linesUp" data-delay=.3>ART DIRECTION</div>
<!--/Project Category -->
<!-- Project Back Button -->
<div class="project-back-button">
<div class="nayla-icon has-anim fadeLeft" data-delay=1 style="--fontSize: 100px;--wgt: 200">
<span class="material-symbols-outlined">keyboard_backspace</span>
</div>
</div>
<!--/Project Back Button -->
<div class="project-button has-anim slideLeft" data-delay=1>
<div class="nayla-button underline icon-right" data-icon="arrow_outward">
<a href="#">Visit Project</a>
</div>
</div>
</div>
</div>
6.5 Creative
<!-- Project Header -->
<div class="project-page-header light creative">
<div class="wrapper no-margin">
<!-- Project Title -->
<div class="project-title has-anim fadeUp">
<!-- Nayla Marquee -->
<div class="nayla-marquee right-to-left" data-duration="13" data-seperator="remove">
<p class="md-title">INK SENSE </p>
</div>
<!--/Nayla Marquee-->
</div>
<!--/Project Title-->
<!-- Project Meta -->
<div class="project-meta">
<div class="has-anim-text project-category text-h6 charsUp">WEB DESIGN</div>
<div class="text-wrapper">
<p class="has-anim-text linesUp">WE ARE COMMITTED TO CRAFTING AN ONLINE PRESENCE THAT NOT ONLY CAPTURES ATTENTION BUT ALSO ENHANCES USER ENGAGEMENT AND DRIVES MEANINGFUL INTERACTIONS. </p>
</div>
<div class="text-wrapper">
<p class="has-anim-text linesUp">CWITH METICULOUS ATTENTION TO DETAIL, WE BRING YOUR BRAND'S ESSENCE TO LIFE.</p>
</div>
</div>
<!--/Project Meta -->
</div>
<div class="wrapper-full no-gap no-margin">
<!-- Project Image -->
<div class="project-image featured has-anim maskUp">
<img src="../img/projects/ink-sense_24.jpg" alt="Project Image">
</div>
<!--/Project Image -->
</div>
</div>
<!--/Project Header -->
6.6 Gallery Horizontal
<!-- Project Header -->
<div class="project-page-header fullscreen image-gallery horizontal">
<div class="wrapper">
<!-- Project Hero -->
<div class="project-hero">
<!-- Project Title -->
<div class="project-title">
<h1 class="md-title has-anim-text wordsUp no-revert" data-stagger=0.1>
FROM THE LENS:
<br>LIFE'S STORIES
</h1>
</div>
<!--/Project Title -->
<!-- Project Category -->
<div class="project-category text-h6 has-anim-text wordsUp">(PHOTOGRAPHY)</div>
<!--/Project Cateogry -->
<!-- Project Meta -->
<div class="project-meta">
<!-- Text Wrapper -->
<div class="text-wrapper">
<p class="has-anim-text linesUp">2017 – DAKIKA</p>
</div>
<!--/Text Wrapper -->
<!-- Text Wrapper -->
<div class="text-wrapper">
<p class="has-anim-text linesUp"> THROUGH THE LENS OF OUR CREATIVE VISION, WE INVITE YOU TO IMMERSE YOURSELF IN AN IMMERSIVE NARRATIVE EXPERIENCE THAT WILL TRANSPORT YOU TO NEW REALMS OF EMOTION AND IMAGINATION. </p>
</div>
<!--/Text Wrapper -->
</div>
<!--/Project Meta -->
<!-- Project Slide Button -->
<div class="project-slide-button has-anim fadeRight">
<span class="material-symbols-outlined">
arrow_forward
</span>
</div>
<!--/Project Slide Button -->
</div>
<!--/Project Hero -->
<!-- Project Images -->
<div class="project-images cursor-text" data-cursor-text="SCROLL" data-speed="7">
<!-- Project Images Slider -->
<div class="project-images-slider">
<!-- Project Image -->
<div class="project-image featured has-anim fadeLeft">
<img src="../img/projects/lifes-stories_7.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_1.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_2.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_3.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_4.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_5.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_6.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_8.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_9.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_10.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_11.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_12.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_13.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_14.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_15.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_16.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_17.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_18.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_19.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_20.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_21.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<!-- Project Image -->
<div class="project-image">
<img src="../img/projects/lifes-stories_22.jpg" alt="Project Image">
</div>
<!--/Project Image -->
</div>
<!--/Project Image Slider -->
</div>
<!--/Project Images -->
</div>
</div>
6.7 Fullscreen Image
<!-- Project Header -->
<div class="project-page-header fullscreen section light fullscreen-image">
<!-- Project Image -->
<div class="project-image featured">
<img src="../img/projects/los-coyotes_featured.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<div class="wrapper">
<!-- Project Meta -->
<div class="project-meta">
<div class="has-anim-text project-category text-h6 wordsUp" data-delay=1>BRANDING</div>
<div data-delay=1 class="has-anim-text project-summary text-h6 wordsUp">THINGS WILL WORK OUT</div>
<!-- Project Title -->
<div class="project-title has-anim slideUp">
<!-- Nayla Marquee -->
<div class="nayla-marquee right-to-left" data-duration="7" data-seperator=" fiber_manual_record">
<p class="md-title">Los Coyotes</p>
</div>
<!--/Nayla Marquee -->
</div>
<!--/Project Title -->
</div>
<!--/Project Meta -->
</div>
</div>
6.8 Tall Image
<!-- Project Header -->
<div class="project-page-header tall">
<!-- Project Image -->
<div class="project-image featured">
<img src="../img/projects/primo_featured.jpg" alt="Project Image">
</div>
<!--/Project Image -->
<div class="wrapper">
<!-- Project Category -->
<div class="project-category c-col-12 has-anim-text linesUp fade">PHOTOGRAPHY</div>
<!--/Project Category -->
<!-- Project Title -->
<div class="project-title c-col-12">
<h1 class="has-anim-text charsUp fade" data-duration="1.5">Primo</h1>
</div>
<!--/Project Title -->
<!-- Project Summary -->
<div class="project-summary text-h6 c-col-12 has-anim-text wordsUp fade">With an unwavering passion for capturing the beauty and intricacy of structures, we strive to unveil their hidden stories and convey their unique character through the lens.</div>
<!--/Project Summary -->
<!-- Project Meta -->
<div class="project-meta c-col-12">
<div class="project-client text-h6 has-anim-text wordsUp fade">
<span class="meta-title">Client</span>
I.D. Building
</div>
<div class="project-client text-h6 has-anim-text wordsUp fade">
<span class="meta-title">Industries</span>
Interrior Architecture
</div>
<div class="project-client text-h6 has-anim-text wordsUp fade">
<span class="meta-title">Year</span>
2022
</div>
</div>
<!--/Project Meta -->
<!-- Project Meta -->
<div class="project-button has-anim fadeUp">
<!-- Nayla Button -->
<div class="nayla-button underline icon-right text-h6" data-icon="arrow_outward">
<a href="#">Visit Project</a>
</div>
<!--/Nayla Button -->
</div>
<!--/Project Meta -->
<!-- Nayla Circular Text -->
<div class="nayla-circular-text" data-height="200" data-duration=13 data-target="max" data-seperator="radio_button_unchecked" data-icon="arrow_downward">
<!-- Circle Text -->
<h3 class="circle-text">
DISCOVER PROJECT
</h3>
<!--/Circle Text -->
</div>
<!--/Nayla Circular Text -->
</div>
</div>
<!--/Project Header -->
<!-- Showcase Fullscreen Slideshow -->
<div class="showcase-fullscreen-slideshow fullscreen dark">
<!-- Slideshow Wrap -->
<div class="fs-slideshow-wrap">
<!-- Showcase Project -->
<div data-elements-color="#fff" class="showcase-project">
<!-- Project Inner -->
<div class="project-inner">
<!-- Index -->
<div class="project-index text-h5">
(01 / 05)
</div>
<!--/ Index -->
<!-- Title -->
<div class="project-title">
<h2>Soothes Dry Lips</h2>
</div>
<!--/ Title -->
<!-- Details -->
<div class="project-details">
<!-- Category -->
<div class="project-category text-h5">
Production
</div>
<!--/ Category -->
<!-- Year -->
<div class="project-year text-h5">2020</div>
<!--/ Year -->
<!-- Summary -->
<div class="project-summary text-h5">
Waving the Motto® flag and creating
bold battle cries since 2005.
</div>
<!--/ Summary -->
</div>
<!--/ Details -->
<!-- Button -->
<div class="project-button">
<!-- Project URL --><a href="#">
<span class="material-symbols-outlined text-h2">
arrow_outward
</span>
</a>
</div>
<!--/ Button -->
</div>
<!--/ Project Inner -->
<!-- Project Image -->
<div class="project-image">
<img alt="Project Image" src="img/slider-iamge-5.jpg">
</div>
<!--/ Project Image -->
</div>
<!--/ Showcase Project -->
</div>
<!--/ Slideshow Wrap -->
<!-- Showcase Footer -->
<div class="showcase-footer wrapper no-gap">
<!-- Showcase Footer Left -->
<div class="showcase-footer-left c-col-4 no-gap no-margin">
<!-- Slides Navigation -->
<div class="slides-nav icons-nav">
<div class="slide-prev">
<span class="material-symbols-outlined">west</span>
</div>
<div class="slide-next">
<span class="material-symbols-outlined">east</span>
</div>
</div>
<!--/ Slides Navigation -->
</div>
<!--/ Showcase Footer Left -->
<!-- Showcase Footer Center -->
<div class="c-col-4 showcase-footer-center no-gap no-margin">
<!-- Text -->
<div class="text-wrapper align-center">
<p>VISION IS THE HIGHEST FORM OF LEADERSHIP.
<br>WHAT VISION ARE YOU BUILDING?
</p>
</div>
<!--/ Text -->
</div>
<!--/ Showcase Footer Center -->
<!-- Showcase Footer Right -->
<div class="showcase-footer-right c-col-4 no-gap no-margin align-right">
<!-- Nayla Button -->
<div class="nayla-button hide-mobile">
<a style="background: #fff; color: #191919; border: none" href="#" class="outline text-h6" data-hover="all">
View All Projects
</a>
</div>
<!--/ Nayla Button -->
</div>
<!--/ Showcase Footer Right -->
</div>
<!-- Showcase Footer -->
</div>
<!--/ Showcase Fullscreen Slidehow --><!-- Showcase FullScreen Wall -->
<div class="showcase-fullscreen-wall">
<!-- Projects Wrapper -->
<div class="sfw-projects-wrapper">
<!-- Showcase Project -->
<div class="showcase-project">
<!-- Project URL --><a href="#">
<!-- Project Image -->
<div class="project-image">
<img alt="Project Image" src="img/project__6.jpg">
</div>
<!--/ Project Image -->
<!-- Project Title -->
<div class="project-title text-h2">Pastel Ladies</div>
<!--/ Project Title -->
<!-- Project Meta -->
<div class="project-meta">
<!-- Year -->
<div class="project-year">2018</div>
<!--/ Year -->
<!-- Category -->
<div class="project-category">Photography</div>
<!--/ Category -->
</div>
<!--/ Project Meta -->
</a>
</div>
<!--/ Showcase Project -->
</div>
<!--/ Projects Wrapper -->
<!-- Layout Switcher -->
<div class="swf-layout-switch">
<div class="sfw-switch switch-titles active">Titles</div>
<div class="sfw-switch switch-images">Images</div>
</div>
<!--/ Layout Switcher -->
</div>
<!--/ Showcase Fullscreen Wall --><!-- Showcase Horizontal List -->
<div class="showcase-horizontal-list fullscreen light horizontal col-3" style="background: rgb(0, 0, 10)">
<!-- Images -->
<div class="shl-images"></div>
<!--/ Images -->
<!-- Wrapper -->
<div class="shl-wrapper">
<!--/ Wrapper -->
<!-- Showcase Project -->
<div class="showcase-project">
<!-- Project URL --><a href="#">
<!-- Title -->
<div class="project-title">
<h2>Fubiz Studio</h2>
</div>
<!--/ Title -->
</a>
<!-- Category -->
<div class="project-category">Photography</div>
<!--/ Category -->
<!-- Image -->
<div class="project-image">
<img alt="Project Image" src="img/slider-image-1.jpg">
</div>
<!--/ Image -->
</div>
<!--/ Showcase Project -->
</div>
<!--/ Wrapper -->
<!-- Showcase Footer -->
<div class="showcase-footer wrapper no-gap">
<!-- Showcase Footer Left -->
<div class="showcase-footer-left c-col-4 no-gap no-margin">
<!-- Category -->
<div class="shl-cat"></div>
<!--/ Category -->
</div>
<!--/ Showcase Footer Left -->
<!-- Showcase Footer Center -->
<div class="c-col-4 showcase-footer-center no-gap no-margin">
<!-- Fraction -->
<div class="shl-fraction">
<span class="shl-curr"></span>
/
<span class="shl-tot"></span>
</div>
<!--/ Fraction -->
</div>
<!--/ Showcase Footer Center -->
<!-- Showcase Footer Right -->
<div class="showcase-footer-right c-col-4 no-gap no-margin align-right">
<p style="opacity: .5" class="caption">(SCROLL)</p>
</div>
<!--/ Showcase Footer Right -->
</div>
<!--/ Showcase Footer -->
</div>
<!--/ Showcase Horizontal List --><!-- Showcase Infinite Grid -->
<div class="showcase-infinite-grid fullscreen dark horizontal col-3">
<!-- Bg Text -->
<div class="sfg-bg-text" style="white-space: nowrap">
<!-- Nayla Marquee -->
<div class="nayla-marquee right-to-left" data-duration="7">
<!-- Marquee Wrap -->
<div class="marquee-wrap">
<h1 class="big-title" style="margin: 0;font-size: 100vh">
FEATURED WORKS
<span class="material-symbols-outlined">
</span>
</h1>
</div>
<!--/ Marquee Wrap -->
</div>
<!--/ Nayla Marquee -->
</div>
<!--/ Bg Text -->
<!-- Overlay -->
<div class="sfg-overlay"></div>
<!--/ Overlay -->
<!-- Infinite Grid -->
<div class="sfg-infinite-wrap">
<!-- Grid Wrapper -->
<div class="sfg-grid-wrapper">
<!-- Showcase Project -->
<div class="showcase-project">
<!-- Project URL --><a href="projects/project-taller-alvarado.html">
<!-- Project Image -->
<div class="project-image">
<img alt="Project Image" alt="Project Image" src="img/projects/taller_26.jpg">
</div>
<!--/Project Image -->
<!-- Project Meta -->
<div class="project-meta">
<!-- Title -->
<div class="project-title">Taller Alvarado</div>
<!--/ Title -->
<!-- Category -->
<div class="project-category">Branding</div>
<!--/ Category -->
</div>
<!--/Project Meta -->
</a>
</div>
<!--/Showcase Project -->
</div>
<!--/ Grid Wrapper -->
</div>
<!--/ Infinite Grid -->
<!-- Showcase Footer -->
<div class="showcase-footer wrapper-full">
<div class="c-col-6 no-margin">
<!-- Nayla List -->
<div class="nayla-list">
<!-- Menu (Horizontal) -->
<ul class="menu horizontal">
<li><a href="#.">INSTAGRAM</a></li>
<li><a href="#.">BEHANCE</a></li>
<li><a href="#.">TWITTER</a></li>
</ul>
<!--/ Menu (Horizontal) -->
</div>
<!--/ Nayla List -->
</div>
<!-- Showcase Footer Right -->
<div class="showcase-footer-right c-col-6 no-margin align-right">
<!-- Text -->
<div class="text-wrapper">
<p class="text-h5">©2023</p>
</div>
<!--/ Text -->
</div>
<!--/ Showcase Footer Right -->
</div>
<!--/ Showcase Footer -->
</div>
<!-- Showcase Infinite Grid --><!-- Showcase Minimal List -->
<div class="showcase-minimal-list fullscreen hover-normal animate-colors">
<!-- Project Overlay -->
<div class="sml-overlay"></div>
<!--/Project Overlay -->
<!-- Project Images -->
<div class="sml-images"></div>
<!--/Project Images -->
<!-- Wrapper -->
<div class="sml-wrapper">
<!-- Project Wrap -->
<div class="sml-projects-wrap">
<!-- Sml Wrap -->
<div class="sml-wrap">
<!-- Showcase Project -->
<div class="showcase-project">
<!-- Project URL --><a href="projects/project-curology.html">
<!-- Project Title -->
<div class="project-title text-h2">
Curology
</div>
<!--/Project Title -->
<!-- Project Meta -->
<div class="project-meta">
<div class="project-category">Branding</div>
<div class="project-year">2016</div>
</div>
<!--/Project Meta -->
<!-- Project Image -->
<div class="project-image" data-width="35" data-height="70" data-top="28" data-left="64">
<img alt="Project Image" alt="Project Image" src="img/projects/curology_featured.jpg">
</div>
<!--/Project Image -->
</a>
</div>
<!--/Showcase Project -->
</div>
<!--/ Sml Wrap -->
</div>
<!--/ Project Wrap -->
</div>
<!--/Project Wrapper -->
</div>
<!--/Showcase Minimal List --><!-- Showcase Minimal List -->
<div class="showcase-minimal-list fullscreen hover-normal animate-colors">
<!-- Project Overlay -->
<div class="sml-overlay"></div>
<!--/Project Overlay -->
<!-- Project Image -->
<div class="sml-images"></div>
<!--/Project Image -->
<!-- Wrapper -->
<div class="sml-wrapper">
<!-- Project Wrap -->
<div class="sml-projects-wrap">
<!-- Sml Wrap -->
<div class="sml-wrap">
<!-- Showcase Project -->
<div class="showcase-project">
<!-- Project URL --><a href="projects/project-curology.html">
<!-- Project Title -->
<div class="project-title text-h2">
Curology
</div>
<!--/Project Title -->
<!-- Project Meta -->
<div class="project-meta">
<div class="project-category">Branding</div>
<div class="project-year">2016</div>
</div>
<!--/Project Meta -->
<!-- Project Image -->
<div class="project-image" data-width="35" data-height="70" data-top="28" data-left="64">
<img alt="Project Image" src="img/projects/curology_featured.jpg">
</div>
<!--/Project Image -->
</a>
</div>
<!--/Showcase Project -->
</div>
<!--/ Sml Wrap -->
</div>
<!--/ Project Wrap -->
</div>
<!--/Project Wrapper -->
</div>
<!--/Showcase Minimal List --><!-- Showcase Carousel -->
<div class="showcase-carousel fullscreen animate-colors light" data-speed="10000" style="background: #15181C">
<!-- Overlay -->
<div class="sc-overlay"></div>
<!--/ Overlay -->
<!-- Lines -->
<div class="sc-lines">
<span class="sc-line"></span>
<span class="sc-line sc-line-fill"></span>
</div>
<!--/ Lines -->
<!-- Images -->
<div class="sc-images"></div>
<!--/ Images -->
<!-- Wrapper -->
<div class="sc-wrapper">
<!-- Project Wrap -->
<div class="sc-projects-wrap">
<!-- Showcase Project -->
<div class="showcase-project">
<!-- Project URL --><a href="projects/project-nyc-street-life.html">
<!-- Title -->
<div class="project-title">
NYC Street Life
</div>
<!--/ Title -->
<!-- Meta -->
<div class="project-meta">
<!-- Category -->
<div class="project-categoy">Photography</div>
<!--/ Category -->
<!-- Year -->
<div class="project-year">2017</div>
<!--/ Year -->
</div>
<!--/ Meta -->
<!-- Image -->
<div class="project-image">
<img alt="Project Image" src="img/projects/nyc_streetlife-7.jpg">
</div>
<!--/ Image -->
</a>
</div>
<!--/ Showcase Project -->
</div>
<!--/ Project Wrap -->
</div>
<!--/ Wrapper -->
<!-- Showcase Footer -->
<div class="showcase-footer wrapper no-gap">
<!-- Showcase Footer Left -->
<div class="showcase-footer-left c-col-6 no-gap no-margin">
<!-- Fraction -->
<div class="slides-fraction">
<!-- Current -->
<div class="slide-current text-h6">
1
</div>
<!--/ Current -->
<!-- Line -->
<span class="fraction-line"></span>
<!--/ Line -->
<!-- Total -->
<div class="slide-total text-h6">5</div>
<!--/ Total -->
</div>
<!--/ Fraction -->
</div>
<!--/ Showcase Footer Left -->
<!-- Showcase Footer Right -->
<div class="showcase-footer-right c-col-6 no-margin align-right">
<!-- Nayla Button -->
<div class="nayla-button">
<a href="portfolio-classic.html" class="underline" data-hover="all">
All Projects
</a>
</div>
<!--/ Nayla Button -->
</div>
<!--/ Showcase Footer Right -->
</div>
<!--/ Showcase Footer -->
</div>
<!-- Showcase Carousel --><!-- Showcase List -->
<div class="showcase-list animate-in" data-speed=1000>
<!-- Showcase List Wrapper -->
<div class="showcase-list-wrapper">
<!-- Projects Wrap -->
<div class="sfl-projects-wrap">
<!-- Projects -->
<div class="sfl-projects">
<!-- Project -->
<div class="showcase-project">
<!-- Project URL --><a href="#.">
<!-- Title -->
<div class="project-title text-h1">
Percent
</div>
<!--/ Title -->
<!-- Meta -->
<div class="project-meta">
<!-- Category -->
<div class="project-category">
UI/UX Design
</div>
<!--/ Category -->
</div>
<!--/ Meta -->
</a>
<!-- Image -->
<div class="project-image">
<img alt="Project Image" src="img/projects/percent_19.jpg">
</div>
<!--/ Image -->
</div>
<!--/ Project -->
</div>
<!--/ Projects -->
</div>
<!--/ Projects Wrap -->
<!-- Overlay -->
<div class="sfl-overlay"></div>
<!--/ Overlay -->
<!-- Images -->
<div class="sfl-images-wrap"></div>
<!--/ Images -->
</div>
<!--/ Showcase Lit Wrapper -->
</div>
<!-- Showcase List --><!-- Showcase Slideshow (Vertical) -->
<div class="showcase-slideshow-vertical">
<!-- Slideshow Wrapper -->
<div class="ssv-wrapper wrapper">
<!-- Project Wrap -->
<div class="ssv-projects-wrap">
<!-- Showcase Project -->
<div class="showcase-project" data-background-color="#FFE6D6" data-elements-color="#374354">
<!-- Showcase URL --><a href="#">
<!-- Title -->
<div class="project-title">
<h2>Fubiz Studio</h2>
</div>
<!--/ Title -->
<!-- Meta -->
<div class="project-meta">
<!-- Category -->
<div class="project-categoy">Photography</div>
<!--/ Category -->
<!-- Year -->
<div class="project-year">2017</div>
<!--/ Year -->
</div>
<!--/ Meta -->
<!-- Project Image -->
<div class="project-image" data-width="45" data-height="96" data-top="2" data-left="54">
<img alt="Project Image" src="img/banner-2.png">
</div>
<!--/ Project Image -->
</a>
</div>
<!--/ Showcase Project -->
</div>
<!--/ Project Wrap -->
</div>
<!--/ Slideshow Wrapper -->
</div>
<!--/ Showcase Slideshow (Vertical) -->
<!-- Showcase Wall -->
<div class="showcase-wall fullscreen hover-normal" data-speed="4000" style="background: #ebebeb">
<!-- Showcase Wall Wrap -->
<div class="showcase-wall-wrap" data-color-anim="true">
<!-- Projects Wrap -->
<div data-start-pos="25" data-end-pos="-35" class="sw-projects-wrap">
<!-- Showcase Project -->
<div class="showcase-project" data-primary-color="#F2B433" data-secondary-color="#F2B433">
<!-- Project URL --><a href="#.">
<!-- Title -->
<div class="project-title">
<h1 class="text-h1">Antigel</h1>
</div>
<!--/ Title -->
</a>
<!-- Image -->
<div class="project-image">
<img alt="Project Image" src="img/image-2.png">
</div>
<!--/ Image -->
</div>
<!--/ Showcase Project -->
</div>
<!--/ Projects Wrap -->
</div>
<!--/ Showcase Wall Wrap -->
<!-- Overlay -->
<div class="sw-overlay"></div>
<!--/ Overlay -->
<!-- Images Wrap -->
<div class="sw-images-wrap"></div>
<!--/ Images Wrap -->
</div>
<!--/ Showcase Wall -->
<!-- Nayla Accordion -->
<div class="nayla-accordion" data-duration="0.5">
<ul class="accordion-wrap">
<!-- Accordion Item -->
<li class="accordion-item">
<!-- Accordion Title -->
<div class="accordion-title text-h5">Web Design & Development<span class="material-symbols-outlined accordion-toggle">add</span>
</div>
<!--/Accordion Title -->
<!-- Accordion Content -->
<div class="accordion-content">
<p class="text-h5" style="col">We create visually stunning and user-friendly websites that are optimized for performance and search engine rankings. Our web design and development team works closely with you to understand your business goals and create a website that accurately represents your brand and meets your business needs. From responsive design to e-commerce integration, we have the skills and expertise to take your website to the next level.</p>
<div class="single-image">
<img src="img/d1.png">
</div>
</div>
<!--/Accordion Content-->
</li>
<!--/Accordion Item -->
</ul>
</div>
<!--/Nayla Accordion -->
Nayla,s dynamic grid system offers a mulit-use grid system you can create, project grids, ımages grids, team grids etc. There's some setting you can made when creating a grid, let's take a look at these,
col-6: An allowed classname for main div, that will made the grid a ready-to-use 6 columns grid rows will automatically generated.
equal-height: The images that used in the grid will bi same height.
lightbox-gallery: Will turn the grid to a lightbox gallery when one of the images are clicked (only allowed for single image grid item type)
data-animation: data attribute that allowed for main div tht will implement the animation to inner grid elements
data-stagger: delay between grid--item that will efect its animation
--gc: allowed style variable for main div that will define the grids column size. In the example below each column will be 18/1 of the screen width if you change it to repeat(9, 1fr) each column size will be 9/1 of the screen width.
--gap The gap between grid items
--rowHeight Determines the row height of the grid (px, %, vh or vw units can be used)
-cThe specifi column start/end position for the grid--item in the example below that item will be start grid column8 and it'll be end on grid column 10, the item will be get it's width from that values
--rRow posiiton for the grid--item for example if you set --r: 3 that element will be displayed on 3rd row on the grid.
<div class="nayla-dynamic-grid col-6 equal-height lightbox-gallery" data-animation="slideUp" data-stagger=0.05 style="--gc: repeat(18, 1fr);--gap:50px;--rowHeight: 30%">
<div class="grid--wrapper">
<div class="grid--item" style="--c: 8 / 10">
<div class="single-image">
<img src="../img/projects/lifes-stories_3.jpg">
</div>
</div>
</div>
</div>
<!-- Nayla Button -->
<div class="nayla-button button-md">
<a href="#" class="underline icon-right" data-hover="all">Our Services<span class="button-icon material-symbols-outlined">arrow_outward</span>
</a>
</div>
<!--/Nayla Button --><!-- Nayla Circular Text -->
<div class="nayla-circular-text" data-height="250" data-duration="6" data-target='.site-footer' style="--fontSize: 20px">
<div class="circular-text-wrap">
<div class="circular-text-content">
<!-- Circular Text -->
<h3 class="circle-text">ABOUT US</h3>
<!--/Circular Text -->
<!-- Circular Seperator-->
<h3 class="circle-seperator"><span class="material-symbols-outlined">radio_button_unchecked</span>
</h3>
<!--/Circular Seperator -->
</div>
</div>
<!-- Circular Icon -->
<div class="circular-text-icon"><span class="material-symbols-outlined">arrow_downward</span>
</div>
<!--/Circular Icon -->
</div>
<!--/Nayla Circular Text -->
<!-- Nayla Clients Carousel -->
<div class="nayla-clients-carousel" data-duration='20'>
<div class="clients-wrapper autoplay nav-drag">
<!-- Client Item -->
<div class="client">
<a href="#">
<img src="../img/0101.svg">
</a>
</div>
<!--/Client Item -->
</div>
</div>
<!--/Nayla Clients Carousel --><!-- Nayla Clients -->
<div class="nayla-clients-grid col-5">
<!-- Client -->
<div class="client">
<a href="#.">
<img src="../img/0101.svg">
<span class="client-caption">APRILLA</span>
</a>
</div>
<!--/Client -->
</div>
<!--/Nayla Clients --><!-- Contact Form -->
<div class="nayla-form">
<form action="/" method="post">
<!-- Form Field -->
<div class="field-wrap">
<label>
Company Name
</label>
<input type="text" required autocomplete="off" required pattern="\d{4,4}" />
</div>
<!--/ Form Field -->
<!-- Form Field -->
<div class="field-wrap">
<label>
Your Name
</label>
<input type="text" required autocomplete="off" />
</div>
<!--/ Form Field -->
<!-- Form Field -->
<div class="field-wrap">
<label>
Phone number
</label>
<input type="tel" required autocomplete="off" />
</div>
<!--/ Form Field-->
<!-- Form Field -->
<div class="field-wrap">
<label>
E-mail
</label>
<input type="email" required autocomplete="off" />
</div>
<!--/ Form Field-->
<!-- Form Field -->
<div class="field-wrap">
<label>
Subject
</label>
<input type="text" required autocomplete="off" />
</div>
<!--/ Form Field -->
<!-- Form Field (Textarea)-->
<div class="message-wrap">
<label>
Your message
</label>
<textarea rows="8"></textarea>
</div>
<!--/ Form Field (Textarea)-->
<!-- Button -->
<div class="send-wrap">
<button type="submit" class="button button-block">Submit</button>
</div>
<!--/ Button -->
</form>
</div>
<!--/Contact Form --><!-- Nayla Icon -->
<div class="nayla-icon scroll-button" data-scroll-to=0 style="--fontSize: 100px;--rotate: 90deg">
<span class="material-symbols-outlined">
arrow_forward
</span>
</div>
<!--/Nayla Icon --><!-- Nayla Carousel Image -->
<div class="nayla-dynamic-carousel navDrag eq-height parallax-on" data-animation="slideUp" data-stagger=0.1 data-scroll-speed="3000" style="--w: 40vw;--h: 500px;--gap: 25px;" data-drag-text="DRAG">
<div class="carousel--wrapper">
<!-- Carousel Item -->
<div class="carousel--item">
<div class="single-image">
<img src="../img/agency_16-9.jpg">
</div>
</div>
<!--/Carousel Item -->
</div>
</div>
<!--/Nayla Carousel Image--><!-- Nayla Images Gallery -->
<div class="nayla-dynamic-grid" style="--gc: repeat(4, 1fr);--gap:120px" data-animation="fadeUp" data-stagger="0.05" data-duration=2.5>
<div class="grid--wrapper">
<!-- Images Gallery Item -->
<div class="grid--item">
<img src="../img/p2.jpg">
</div>
<!--/Images Gallery Item -->
</div>
</div>
<!--/Nayla Images Gallery -->
<!-- Nayla Images -->
<div class="nayla-dynamic-grid cascade" style="--gc: repeat(24, 1fr);--gap:20px;--rh: 25vh" data-animation="fadeIn" data-delay=0.5>
<div class="grid--wrapper">
<!-- Images Item -->
<div class="grid--item" style="--c: 15 / 25; --r: 1 / 3;">
<img src="../img/p2.jpg">
</div>
<!--/Images Item -->
</div>
</div>
<!--/Nayla Images -->
<!-- Nayla Info Box Carousel -->
<div class="nayla-dynamic-carousel navScroll items-center" data-scroll-speed="3000" style="--w: 30vw;--gap: 50px" data-drag-text="DRAG">
<div class="carousel--wrapper">
<!-- Info Box Carousel Item -->
<div class="carousel--item">
<div class="nayla-info-box has-bg" style="background: #dadada">
<!-- Info Box Carousel Item Title -->
<div class="info-box-top">
<div class="text-wrapper">
<p class="text-h6 info-box-title">Web Design & Development</p>
</div>
</div>
<!--/Info Box Carousel Item Title -->
<!-- Info Box Carousel Item Content -->
<div class="info-box-content">
<div class="text-wrapper">
<p class="text-h6">We're a small team of curious humans who create work we’re proud of for people and brands we believe in.</p>
</div>
</div>
<!--/Info Box Carousel Item Content -->
</div>
</div>
<!--/Info Box Carousel Item -->
</div>
</div>
<!--/Nayla Info Box Carousel Item --><!-- Info Box -->
<div class="nayla-info-box has-bg" style="background: #dadada">
<!-- Info Box Title -->
<div class="info-box-top">
<div class="text-wrapper">
<p class="text-h6 info-box-title">Web Design & Development</p>
</div>
</div>
<!--/Info Box Title -->
<!-- Info Box Content -->
<div class="info-box-content">
<div class="text-wrapper">
<p class="text-h6 info-box-title">YOSHIMURA</p>
<p class="text-h6">We're a small team of curious humans who create work we’re proud of for people and brands we believe in.</p>
</div>
</div>
<!--/Info Box Content -->
</div>
<!--/Info Box --><!-- Nayla Marquee -->
<div class="nayla-marquee right-to-left" data-duration="7">
<div class="marquee-wrap">
<p class="md-title" style="margin: 0">Recent Works<span class="material-symbols-outlined">arrow_downward</span></p>
</div>
</div>
<!--/Nayla Marquee --><!-- Nayla Number Counter -->
<div class="nayla-number-counter" data-duration="2" data-stagger="0.05" data-count="9" style="font-size: 200px">
<span class="ct-number">20</span>
<span class="ct-text count-end">%</span>
</div>
<!--/Nayla Number Counter --><!-- Nayla Project Carousel -->
<div class="nayla-dynamic-carousel parallax-on navScroll items-bottom" data-scroll-speed="3000" style="--w: 30vw;--gap: 10px;" data-drag-text="DRAG" data-pin='#pin2'>
<div class="carousel--wrapper">
<!-- Project Carousel Item -->
<div class="carousel--item">
<!-- Single Project -->
<div class="single-project">
<a href="#">
<div class="single-project-wrap">
<div class="single-project-image">
<img src="img/d5.png">
</div>
<div class="single-project-meta">
<div class="grid-project-title">
<h6>IN2 Design Portraits</h6>
</div>
<div class="single-project-category">Website</div>
</div>
</div>
</a>
</div>
<!--/Single Project -->
</div>
<!--/Project Carousel Item -->
</div>
</div>
<!--/Nayla Project Carousel --><!-- Nayla Services Accordion -->
<div class="nayla-services pin-titles">
<!-- Services Accordion Item -->
<div class="nayla-service">
<!-- Services Accordion Title -->
<div class="service-title-wrap">
<div class="nayla-icon" style="--fontSize: 70px">
<span class="material-symbols-outlined">
data_object
</span>
</div>
<span class="empty-space" style="height: 50px"></span>
<h2 class="has-anim-text charsUp">Web Design <br>& Development</h2>
</div>
<!--/Services Accordion Title -->
<!-- Services Accordion Content -->
<div class="service-content-wrap">
<div class="single-image">
<img src="img/exo.jpg.webp">
</div>
<div class="text-wrapper">
<p class="text-h6">Our web design and development services focus on creating custom, responsive websites that are both visually stunning and user-friendly. From the initial wireframe to the final launch, we collaborate with clients to ensure their website reflects their brand and business needs.</p>
</div>
</div>
<!--/Services Accordion Content -->
</div>
<!--/Services Accordion Item -->
</div>
<!--/Nayla Services Accordion -->
<!-- Single Post -->
<div class="single-post">
<!-- Single Post Image -->
<div class="single-post-image-area">
<img class="single-post-image" src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80">
</div>
<!--/Single Post Image -->
<!-- Single Post Content -->
<div class="single-post-content-area">
<div class="single-post-title">
<h3 class="single-post-heading">
How to Build an Online Marketplace: A Complete Guide
</h3>
</div>
<div class="single-post-bottom-area">
<div class="single-post-bottom-left">
<div class="single-post-date-area">
<h6 class="single-post-date">
08 April 2022
</h6>
</div>
<div class="single-post-category-area">
<h5 class="single-post-category">
UX Design, Marketplaces, eCommmerse
</h5>
</div>
</div>
<div class="single-post-bottom-right">
<div class="single-post-read-link">
<a href="#.">
<span class="read-sign">
>
</span>
<span class="read-text">
Read More
</span>
</a>
</div>
</div>
</div>
</div>
<!--/Single Post Content -->
</div>
<!--/Single Post --><!-- Nayla Infinite Tabs -->
<div class="nayla-infinite-tabs" data-duration='0.5'>
<!-- Tab Title Wrap -->
<ul class="tab-title-wrap">
<li class="tab-title md-title active">
Strategy
</li>
</ul>
<!--/Tab Title Wrap -->
<!-- Tab Content Wrap -->
<div class="tab-contents-wrap">
<!-- Tab Content -->
<div class="tab-content active">
<div class="c-col-12">
<div class="text-wrapper" style="width: 80%">
<p class="text-h5">Brand & Business Strategy</p>
<p class="text-h6" style="color: #696969">We create visually stunning and user-friendly <br>websites that are optimized for performance <br>and search engine rankings.</p>
</div>
</div>
</div>
<!--/Tab Content -->
</div>
<!--/Tab Content Wrap -->
</div>
<!--/Nayla Infinite Tab --><!-- Team Member -->
<div class="nayla-team-member overlay">
<!-- Team Member Image -->
<div class="team-member-image">
<img src="../img/team-member-1.png">
</div>
<!--/Team Member Image -->
<!-- Team Member Card -->
<div class="team-member-card">
<div class="team-member-name text-h5">
Alex Lewis
</div>
<div class="team-member-title text-h6">
Creative Director
</div>
<div class="cv-toggle">
<span class="material-symbols-outlined">
add
</span>
</div>
<div class="team-member-cv">
<p class="text-h6">
By abandoning conventional tools and the way traditional agencies work, we created the addmore way of working. We built a multidisciplinary team that lets us move fast and deliver results every week.
</p>
</div>
</div>
<!--/Team Member Card -->
<!-- Team Member Socials -->
<div class="team-member-socials">
<ul class="menu social-menu">
<li> <a href="#" target="_blank">LinkedIn</a></li>
</ul>
</div>
<!--/Team Member Socials -->
</div>
<!--/ Nayla Team Member --><!-- Nayla Text -->
<div data-delay=".5" data-stagger='0.03' class="has-anim-text project-summary text-h2 charsUp">
Chars Up
</div>
<!--/Nayla Text--><!-- Nayla Vimeo Video -->
<div style="width: 80%;border-radius: 15px;overflow: hidden;" class="nayla-video nayla-play dark no-interactions" data-controls="false">
<video autoplay muted loop style="width: 100%;display: block" class="n-video">
<source src="img/showreel-exoape-2022.mp4">
</video>
</div>
<!--/Nayla Vimeo Video --><!-- Nayla Youtube Video -->
<div class="nayla-video nayla-play dark n-vimeo" data-controls="play progress mute fullscreen" data-autoplay=true data-muted=true data-loop=true style="width: 100%">
<div class="play-icon icon">
<span class="material-symbols-outlined">
play_arrow
</span>
</div>
<div class="n-video" data-plyr-provider="youtube" data-plyr-embed-id="r1tlQNvC-7Y"></div>
</div>
<!--/Nayla Youtube Video --><!-- Nayla Self Hosted Video -->
<div class="nayla-video nayla-play dark n-vimeo" data-controls="play progress mute fullscreen" data-autoplay=true data-muted=true data-loop=true style="width: 100%">
<div class="play-icon icon">
<span class="material-symbols-outlined">
play_arrow
</span>
</div>
<video autoplay muted loop style="width: 100%;display: block" class="n-video">
<source src="../img/pexels-rostislav-uzunov-9150545-1280x720-24fps.mp4">
</video>
</div>
<!--/Nayla Self Hosted Video -->