Created:08/07/2024
By: RRDevs
Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The template page's layout consist of top that show the logo and main menu, hero section that show background image, before content that show some amaizing content, about section contain about your some info & feature, service section contained all services, portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<!-- Site Title -->
<title>Nunca - Creative Agency & Portfolio HTML5 Template</title>
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/css/venobox.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/odometer.min.css">
<link rel="stylesheet" href="assets/css/nice-select.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="preloader">
<div class="loading" data-loading-text="Nunca"></div>
</div>
<!-- ./ preloader -->
<header class="header">
</header><!-- /.Main Header -->
<div id="popup-search-box">
</div><!-- /#popup-search-box -->
<section class="slider-section">
</section><!-- ./ slider-section -->
<section class="about-section">
</section><!-- ./ about-section -->
<section class="service-section">
</section><!-- ./ service-section -->
<section class="project-section">
</section><!-- ./ project-section -->
<section class="running-text-wrap">
</section><!-- ./ running-text-wrap -->
<section class="team-section">
</section><!-- ./team-section -->
<section class="growth-section">
</section><!-- ./growth-section -->
<section class="running-text">
</section><!-- ./running-text -->
<section class="video-section">
</section><!-- ./video-section -->
<section class="cta-section">
</section><!-- ./cta-section -->
<section class="cta-section">
</section><!-- ./cta-section -->
<section class="process-section">
</section><!-- ./process-section -->
<section class="appointment-section">
</section><!-- ./appointment-section -->
<section class="blog-section">
</section><!-- ./blog-section -->
<section class="footer-section">
</section><!-- ./footer-section -->
<div id="scroll-percentage"><span id="scroll-percentage-value"></span></div>
<!--scrollup-->
<!-- JS here -->
<script src="assets/js/vendor/jquary-3.6.0.min.js"></script>
<script src="assets/js/vendor/bootstrap-bundle.js"></script>
<script src="assets/js/vendor/imagesloaded-pkgd.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/vendor/venobox.min.js"></script>
<script src="assets/js/vendor/odometer.min.js"></script>
<script src="assets/js/vendor/meanmenu.js"></script>
<script src="assets/js/vendor/jquery.isotope.js"></script>
<script src="assets/js/vendor/swiper.min.js"></script>
<script src="assets/js/vendor/split-type.min.js"></script>
<script src="assets/js/vendor/gsap.min.js"></script>
<script src="assets/js/vendor/scroll-trigger.min.js"></script>
<script src="assets/js/vendor/scroll-smoother.js"></script>
<script src="assets/js/vendor/jquery.carouselTicker.js"></script>
<script src="assets/js/vendor/nice-select.js"></script>
<script src="assets/js/slider.js"></script>
<script src="assets/js/contact.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header class="header sticky-active">
<div class="primary-header">
<div class="container">
<div class="primary-header-inner">
<div class="header-logo d-lg-block">
<a href="index.html">
<img class="logo-dark" src="assets/img/logo/logo-1.png" alt="Logo">
<img class="logo-light" src="assets/img/logo/logo-1.png" alt="Logo">
</a>
</div>
<div class="header-menu-wrap">
<div class="mobile-menu-items">
<ul>
<li class="menu-item-has-children">
<a href="index.html">Home</a>
<ul>
<li><a href="index.html">Digital Agency</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /.header-menu-wrap -->
<div class="header-right-wrap">
<div class="header-right">
<a href="contact.html" class="rr-primary-btn header-btn">Get in Touch</a>
<div class="sidebar-icon">
<button class="sidebar-trigger open">
<span></span>
</button>
</div>
</div>
<!-- /.header-right -->
</div>
</div>
<!-- /.primary-header-inner -->
</div>
</div>
</header>
<section class="slider-section">
<div class="slider-img-wrap">
<img src="assets/img/images/hero-img-1.png" alt="img">
</div>
<div class="shape"><img src="assets/img/shapes/slider-shape-1.png" alt="shape"></div>
<div class="container">
<div class="nunca-slider swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider-item">
<div class="slider-content-wrap">
<div class="slider-content">
<div class="section-heading white-content">
<h2 class="section-title mb-10" data-animation="nunca-fadeInUp" data-delay="1000ms" data-duration="1200ms">Modern Business</h2>
<h2 class="section-title" data-animation="nunca-fadeInUp" data-delay="1200ms" data-duration="1400ms">Digital Solution</h2>
</div>
<p data-animation="nunca-fadeInUp" data-delay="1400ms" data-duration="1600ms">We specialize in a comprehensive range of services, including branding, digital marketing, content creation, and web design, all tailored to meet the unique needs of each client.</p>
<div class="slider-btn-wrap" data-animation="nunca-fadeInUp" data-delay="1600ms" data-duration="1800ms">
<a href="contact.html" class="rr-primary-btn slider-btn">Get in touch</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slider-arrow">
<div class="slider-nav slider-prev"><i class="fa-regular fa-arrow-left"></i></div>
</div>
</div>
</div>
</section>
<section class="about-section about-1 pt-140 pb-140 overflow-hidden">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 col-md-12">
<div class="about-img img-reveal">
<div class="img-overlay"></div>
<img src="assets/img/images/about-img-1.jpg" alt="about">
</div>
</div>
<div class="col-lg-7 col-md-12">
<div class="about-content fade-wrapper">
<div class="section-heading mb-50">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">About Us</h4>
<h2 class="section-title" data-text-animation="fade-in-right" data-split="char" data-duration="0.6" data-stagger="0.07">We’re Powerful Agency For Digital Solutions</h2>
</div>
<p class="mb-50 fade-top">Artificial Intelligence refers to the development of computer systems that can perform tasks that would typically require human intelligence. It involves the creation of algorithms and models that enable machines to learn, reason, perceive, and make decisions.</p>
<p class="fade-top">There are generally two types of AI: Narrow or Weak AI, which is designed to perform specific tasks, and General or Strong AI, which possesses human-level intelligence and can handle a wide range of tasks.</p>
<div class="about-btn fade-top">
<a href="contact.html" class="rr-primary-btn">Get in Touch</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ about-section -->
<section class="service-section overflow-hidden">
<div class="service-wrap pt-140 pb-140">
<div class="container">
<div class="section-heading white-content">
<span class="bg-text">Nunca</span>
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">Our Services</h4>
<h2 class="section-title" data-text-animation="fade-in-right" data-split="char" data-duration="0.6" data-stagger="0.07">Pioneering Projects For <br> Intelligent Solutions</h2>
</div>
<div class="row fade-wrapper gy-lg-0 gy-4 justify-content-center">
<div class="col-lg-4 col-md-6">
<div class="service-item fade-top">
<div class="icon"><img src="assets/img/icon/service-1.png" alt="service"></div>
<div class="content white-content">
<h3 class="title"><a href="service-details.html">Content Writing</a></h3>
<p>Elevate your brand and engage your audience. Our expert team combines innovative design with cutting-edge technology to deliver</p>
<a href="service-details.html" class="service-btn">Get in Touch <i class="fa-regular fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="project-section pt-140 pb-140 overflow-hidden">
<div class="container">
<div class="section-heading text-center">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">Our Projects</h4>
<h2 class="section-title" data-text-animation="fade-in-right" data-split="char" data-duration="0.6" data-stagger="0.07">Discover Our Selected <br>Projects</h2>
</div>
<div class="row align-items-center justify-content-center fade-wrapper">
<div class="col-lg-7 col-md-12">
<div class="project-item fade-top">
<div class="project-thumb">
<img src="assets/img/project/project-img-1.png" alt="project">
<div class="project-btn">
<a class="venobox" href="assets/img/project/project-img-1.png" data-gall="projects"><i class="fa-sharp fa-solid fa-eye"></i></a>
</div>
</div>
<div class="project-content">
<h4 class="number">01</h4>
<h3 class="title">We Worked With Global <br> Largest Brands</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="team-section pt-140 pb-140 overflow-hidden">
<div class="container">
<div class="section-heading text-center">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">Team Mates</h4>
<h2 class="section-title" data-text-animation="fade-in-right" data-split="char" data-duration="0.6" data-stagger="0.07">Meet Our Team <br>Members</h2>
</div>
<div class="row gy-lg-0 gy-4 fade-wrapper justify-content-center">
<div class="col-lg-4 col-md-6">
<div class="team-item fade-top">
<div class="overlay"></div>
<div class="team-thumb">
<img src="assets/img/team/team-1.png" alt="team">
</div>
<div class="team-content">
<h3 class="title"><a href="team-details.html">Markus Daniel</a></h3>
<span>Product Manager</span>
</div>
<ul class="team-social">
<li><a href="#">FB</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="growth-section bg-dark-1 pt-140 pb-140 overflow-hidden">
<div class="shape"><img src="assets/img/shapes/star.png" alt="shape"></div>
<div class="overlay"></div>
<div class="bg-img"><img src="assets/img/images/growth-img.png" alt="growth"></div>
<div class="container">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6">
<div class="growth-content fade-wrapper">
<div class="section-heading mb-40 white-content">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">Progressive Growth</h4>
<h2 class="section-title" data-text-animation="fade-in-right" data-split="char" data-duration="0.6" data-stagger="0.07">We Helping with operational challenge</h2>
</div>
<p class="mb-40 fade-top">We dig deep to identify the root of complex problems and focus on delivering tangible results for clients, these are a selection of the operations challenges we regularly work on.</p>
<div class="growth-btn fade-top">
<a href="contact.html" class="rr-white-btn">Get in Touch</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="running-text testi bg-dark-1 overflow-hidden">
<div class="carouselTicker carouselTicker-nav" data-speed="fast">
<ul class="text-anim carouselTicker__list">
<li>Creative Agency <div class="icon"><img src="assets/img/icon/sparkle.svg" alt="img"></div></li>
</ul>
</div>
</div>
<div class="video-section overflow-hidden">
<div class="video-wrap text-center">
<div class="play-btn">
<a
class="video-popup venobox"
data-autoplay="true"
data-vbtype="video"
href="https://youtu.be/8oON21G1Bqg?feature=shared">
Play Video
<div class="play-icon">
<i class="fa-sharp fa-regular fa-play"></i>
</div>
</a>
</div>
</div>
</div>
<section class="cta-section overflow-hidden">
<div class="container">
<div class="cta-wrap pt-140 pb-140">
<div class="overlay"></div>
<div class="cta-img">
<img src="assets/img/images/cta-img.png" alt="mask-img">
</div>
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6">
<div class="cta-content fade-wrapper">
<div class="section-heading mb-40">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">Make Appointment</h4>
<h2 class="section-title" data-text-animation="fade-in-right" data-split="char" data-duration="0.6" data-stagger="0.07">Let’s Get Started For New Projects</h2>
</div>
<div class="cta-contact fade-top">
<div class="icon"><img src="assets/img/icon/phone.svg" alt="phone"></div>
<div class="content">
<span>Call Us Anytime</span>
<a href="tel:+258325621586">+258 3256 21586</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="process-section pt-140 pb-140 overflow-hidden">
<div class="container">
<div class="section-heading">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">How We Works</h4>
<h2 class="section-title" data-text-animation="fade-in-right" data-split="char" data-duration="0.6" data-stagger="0.07">Follow The Four (04) Steps <br>Work Process</h2>
</div>
<div class="row gy-lg-0 gy-5 fade-wrapper">
<div class="col-lg-3 col-md-6">
<div class="process-item fade-top">
<span class="number">01</span>
<h3 class="title">Discovery & Strategy</h3>
<p>Meet with the client to gather detailed information about their brand, objectives, and expectations.</p>
</div>
</div>
</div>
</div>
</section>
<section class="appointment-section pt-140 pb-140 overflow-hidden" data-background="assets/img/bg-img/appointment-bg.jpg">
<div class="container">
<div class="row align-items-center fade-wrapper">
<div class="col-lg-6 col-md-12">
<div class="appointment-content white-content fade-wrapper">
<div class="section-heading mb-30 white-content">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">Make Appointment</h4>
<h2 class="section-title" data-text-animation="fade-in-right" data-split="char" data-duration="0.6" data-stagger="0.07">Start Your Agency Startup Journey Today.</h2>
</div>
<p class="fade-top">Lorem ipsum dolor sit consectetur adipiscing elit, curabitur pretium ligula dignissim bibendum dui mus cum, nullam facilisis natoque porttitor</p>
<ul class="appointment-contact">
<li class="fade-top">
<div class="icon"><i class="fa-regular fa-check"></i></div>
<div class="content">
<h4 class="title">Call Us For Support:</h4>
<div class="contact-number">
<a href="tel:+258256832158">+258 2568 32158</a>,
<a href="tel:+258256832158">+258 2568 32158</a>
</div>
</div>
</li>
<li class="fade-top">
<div class="icon"><i class="fa-regular fa-check"></i></div>
<div class="content">
<h4 class="title">Email Us Anytime:</h4>
<div class="contact-number">
<a href="mailto:info@nunca.com">info@nunca.com</a>,
<a href="gency@nunca.com"> gency@nunca.com</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="appointment-form fade-top">
<form action="mail.php">
<div class="form-group row">
<div class="col-md-6">
<div class="form-item">
<h4 class="title">Your Name*</h4>
<input type="text" id="fullname" name="fullname" class="form-control" placeholder="">
</div>
</div>
</div>
<div class="submit-btn">
<button id="submit" class="rr-primary-btn" type="submit">Submit Message</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="blog-section pt-140 pb-140 overflow-hidden">
<div class="container">
<div class="section-heading text-center">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">Blog Posts</h4>
<h2 class="section-title" data-text-animation="fade-in-right" data-split="char" data-duration="0.6" data-stagger="0.07">Read Our Latest Blog <br>& Insights</h2>
</div>
<div class="row gy-lg-0 gy-4 justify-content-center fade-wrapper">
<div class="col-lg-4 col-md-6">
<div class="post-card fade-top">
<div class="post-thumb">
<img src="assets/img/blog/post-1.jpg" alt="post">
</div>
<div class="post-content">
<ul class="post-meta">
<li><i class="fa-solid fa-user"></i>By Markus</li>
</ul>
<h3 class="title"><a href="blog-details.html">Benefits of Responsive Web Design in the Mobile Era</a></h3>
<a href="blog-details.html" class="rr-primary-btn blog-btn">Read More <i class="fa-solid fa-regular fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ blog-section -->
<footer class="footer-section pt-140">
<div class="shapes">
<div class="shape shape-1"><img src="assets/img/shapes/footer-shape-1.png" alt="shape"></div>
</div>
<div class="container">
<div class="footer-top">
<h2 class="title">Let's Create <br>Something Great</h2>
<a href="contact.html" class="rr-white-btn">Book Appointment</a>
</div>
<div class="row footer-wrap">
<div class="col-xl-3 col-lg-6 col-md-6">
<div class="footer-widget">
<div class="widget-header">
<h3 class="widget-title">Contact</h3>
</div>
<ul class="address-list">
<li>
<div class="icon"><i class="fa-sharp fa-solid fa-location-dot"></i></div>
<div class="content"><p>256 Daniel Avenue, Suite Road, <br>VBA 21, Berlin Germany</p></div>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6">
<div class="footer-widget footer-col-2">
<div class="widget-header">
<h3 class="widget-title">Special Links</h3>
</div>
<ul class="footer-list">
<li><a href="about.html">About Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="copyright-area">
<div class="container">
<div class="copyright-content text-center">
<p>© Copyright 2024, All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
These are the css files:
This template use these Javascript files:
jquary-3.6.0.min.js
bootstrap-bundle.js
imagesloaded-pkgd.js
waypoints.min.js
venobox.min.js
odometer.min.js
meanmenu.js
smooth-scroll.js
swiper.min.js
split-type.min.js
gsap.min.js
scroll-trigger.min.js
scroll-smoother.min.js
nice-select.js
contact.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is mail.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist.
Nunca