“Runok” Documentation by “RRDevs” v1.0


“Runok”

Created:04/01/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!


Table of Contents

  1. HTML Structure
  2. Template Components
  3. CSS Files and Structure
  4. JavaScript
  5. Sources and Credits
  6. PHP Code Explanation (If your template uses PHP)
  7. Flash (If your template uses Flash)
  8. API Usage (If your template uses an API)
  9. Any additional unique features that need an overview

A) HTML Structure - top

Below is the general HTML structure of the landing page.

1) index.html File Structure - top

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>Runok - Web Agency 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/keyframe-animation.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="preloader-close"><i class="fa-regular fa-xmark"></i></div>
        <div class="sk-three-bounce">
            <div class="sk-child sk-bounce1"></div>
            <div class="sk-child sk-bounce2"></div>
            <div class="sk-child sk-bounce3"></div>
        </div>
    </div>
    <!-- ./ preloader -->
        
        <header class="header">
            
        </header><!-- /.Main Header -->

        <div id="popup-search-box">
            
        </div><!-- /#popup-search-box -->

		<section class="hero-section">
            
        </section><!-- ./ hero-section -->
        
        <section class="process-section">
            
        </section><!-- ./ process-section -->
        
        <section class="about-section">
    
        </section><!-- ./ about-section -->
        
        <section class="service-section">
            
        </section><!-- ./ service-section -->
        
        <section class="faq-section">
            
        </section><!-- ./ faq-section -->
        
        <section class="running-text">
            
        </section><!-- ./ running-text -->
        
        <section class="testimonial-section">
            
        </section><!-- ./testimonial-section -->
        
        <section class="project-section">
            
        </section><!-- ./project-section -->
        
        <section class="running-text">
            
        </section><!-- ./ running-text -->
        
        <section class="running-text running-1">
            
        </section><!-- ./ running-text -->
        
        <section class="blog-section">
            
        </section><!-- ./blog-section -->
        
        <section class="sponsor-section">
            
        </section><!-- ./sponsor-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/smooth-scroll.js"></script>
        <script src="assets/js/vendor/jquery.isotope.js"></script>
        <script src="assets/js/vendor/wow.min.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/nice-select.js"></script>
        <script src="assets/js/ajax-form.js"></script>
        <script src="assets/js/main.js"></script>
    </body>
</html>
        

B) Template Components - top

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="primary-header-inner">
			<div class="header-logo d-lg-block">
				<a href="index.html">
					<img src="assets/img/logo/logo-2.png" alt="Logo">
				</a>
			</div>
			<div class="header-right-wrap">
				<div class="header-menu-wrap">
					<div class="mobile-menu-items">
						<ul>
							<li class="menu-item-has-children active">
								<a href="index.html">Home</a>
								<ul>
									<li><a href="index.html">Web Design</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
				<!-- /.header-menu-wrap -->
				<div class="header-right">
					<div class="sidebar-icon">
						<button class="sidebar-trigger open">
							<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M0.300781 0H5.30078V5H0.300781V0Z" fill="currentColor"/>
								<path d="M0.300781 9H5.30078V14H0.300781V9Z" fill="currentColor"/>
								<path d="M0.300781 18H5.30078V23H0.300781V18Z" fill="currentColor"/>
								<path d="M9.30078 0H14.3008V5H9.30078V0Z" fill="currentColor"/>
								<path d="M9.30078 9H14.3008V14H9.30078V9Z" fill="currentColor"/>
								<path d="M9.30078 18H14.3008V23H9.30078V18Z" fill="currentColor"/>
								<path d="M18.3008 0H23.3008V5H18.3008V0Z" fill="currentColor"/>
								<path d="M18.3008 9H23.3008V14H18.3008V9Z" fill="currentColor"/>
								<path d="M18.3008 18H23.3008V23H18.3008V18Z" fill="currentColor"/>
								</svg>
						</button>
					</div>
				</div>
				<!-- /.header-right -->
			</div>
		</div>
		<!-- /.primary-header-inner -->
	</div>
</header>
<!-- /.Main Header -->

2) Hero Section - top


		<section class="hero-section">
            <div class="hero-bg-shape"><img src="assets/img/bg-img/hero-bg-shape.png" alt="shape"></div>
            <div class="hero-shape"><img src="assets/img/shapes/hero-shape-1.png" alt="shape"></div>
            <div class="hero-images">
                <img src="assets/img/images/hero-img-1.png" alt="hero">
            </div>
            <div class="hero-img"><img src="assets/img/images/hero-img.png" alt="hero"></div>
            <div class="container">
                <div class="hero-content">
                    <h4 class="sub-title anim-text">Transforming</h4>
                    <h2 class="title anim-text">Visions into</h2>
                    <h3 class="bottom-title anim-text">Digital Reality</h3>
                    <a href="about.html" class="hero-btn"><i class="fa-thin fa-arrow-right"></i></a>
                </div>
            </div>
        </section>
        <!-- ./ hero-section -->
	

3) Process Section - top


		<section class="process-section pt-130 fade-wrapper">
            <div class="bg-shape"><img src="assets/img/shapes/process-shape.png" alt="shape"></div>
            <div class="container">
                <div class="section-heading text-center">
                    <h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">Work Process</h4>
                    <h2 class="section-title overflow-hidden" data-text-animation data-split="word" data-duration="1">Follow 4 Easy Work Steps</h2>
                </div>
                <div class="row gy-lg-0 gy-5">
                    <div class="col-lg-3 col-md-6">
                        <div class="process-item fade-top">
                            <div class="process-icon">
                                <div class="icon-border"></div>
                                <img src="assets/img/icon/process-1.png" alt="icon">
                            </div>
                            <div class="process-content">
                                <h3 class="title">Project Processing</h3>
                                <p>Cursus euismod dictumst a non dis nisi <br>sociosqu mauris.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="process-text wow fade-in-bottom" data-wow-delay="400ms">
                <img src="assets/img/images/process-img.png" alt="process">
            </div>
        </section>
        <!-- ./ process-section -->


4) About Section - top


		<section class="about-section pb-130">
            <div class="round-shape"><img src="assets/img/shapes/round-shape.png" alt="shape"></div>
            <div class="about-wrap">
                <div class="shape"><img src="assets/img/shapes/about-dot-shape.png" alt="shape"></div>
                <div class="row about-wrapper align-items-center">
                    <div class="col-lg-7">
                        <div class="about-content fade-wrapper">
                            <div class="section-heading mb-0">
                                <h4 class="sub-heading"data-text-animation="fade-in" data-duration="1.5">About Our Company</h4>
                                <h2 class="section-title overflow-hidden"data-text-animation data-split="word" data-duration="1">We provide best web design <br>solution in city</h2>
                                <p>Digital marketing is the act of promoting and selling products and services by leveraging online marketing tactics such as social media marketing, search marketing, and email marketing. When you get down to it, digital marketing is simply marketing.</p>
                                <a href="about.html" class="rr-primary-btn">Get Started Now<i class="fa-regular fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="about-img-wrap">
                            <div class="img-shape"></div>
                            <div class="about-img reveal">
                                <img class="img-1" src="assets/img/images/about-img.jpg" alt="img">
                            </div>
                            </div>
                        </div>
                    </div>
                    <div class="about-text">
                        <img src="assets/img/images/about-text.png" alt="about">
                    </div>
                </div>
            </div>
        </section>
        <!-- ./ about-section -->


5) Service Section - top


			<section class="service-section pb-130 fade-wrapper">
            <div class="shape"><img src="assets/img/shapes/service-shape-1.png" alt="shape"></div>
            <div class="bg-color"></div>
            <div class="container">
                <div class="section-heading text-center">
                    <h4 class="sub-heading"data-text-animation="fade-in" data-duration="1.5">What We Offer For You</h4>
                    <h2 class="section-title"data-text-animation data-split="word" data-duration="1">Services We Provide</h2>
                </div>
                <div class="row gy-lg-0 gy-4">
                    <div class="col-lg-3 col-md-6">
                        <div class="service-item md-pb-30 fade-top">
                            <h4 class="service-text"><a href="service-details.html">/Designing</a></h4>
                            <div class="service-thumb">
                                <div class="overlay-color"></div>
                                <div class="transparent-shape"><img src="assets/img/shapes/service-shape.png" alt="shape"></div>
                                <img src="assets/img/service/service-2.jpg" alt="service">
                                <div class="service-icon">
                                    <svg width="50" height="50" viewBox="0 0 50 50" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M50.3639 36.3801L45.2404 33.8184L41.9797 25.3365C41.9413 25.2363 41.8826 25.145 41.8074 25.0684C41.7321 24.9918 41.6419 24.9315 41.5423 24.8914L21.3101 16.8039C21.1686 16.7476 21.0138 16.7339 20.8646 16.7644C20.7155 16.7949 20.5785 16.8684 20.4705 16.9758L17.7721 19.6742C17.6661 19.7822 17.5939 19.9187 17.5641 20.0671C17.5343 20.2155 17.5482 20.3693 17.6042 20.5099L25.6916 40.7421C25.7317 40.8417 25.792 40.9319 25.8686 41.0072C25.9452 41.0824 26.0365 41.1411 26.1368 41.1794L34.6186 44.4402L37.1803 49.5636C37.2343 49.6766 37.3146 49.775 37.4145 49.8504C37.5144 49.9258 37.6309 49.9761 37.7544 49.9971C37.7959 50.001 37.8378 50.001 37.8793 49.9971C38.0861 49.9962 38.2841 49.9134 38.4299 49.7667L50.5669 37.6297C50.6563 37.5435 50.7237 37.4373 50.7638 37.3198C50.8039 37.2023 50.8154 37.077 50.7973 36.9541C50.7764 36.8307 50.726 36.7142 50.6506 36.6143C50.5752 36.5144 50.4768 36.434 50.3639 36.3801ZM19.2404 20.4083L19.6739 19.9788L29.745 30.05C29.0813 30.9905 28.7947 32.1458 28.9418 33.2875C29.0889 34.4292 29.659 35.4741 30.5394 36.2156C31.4199 36.9572 32.5465 37.3414 33.6966 37.2922C34.8467 37.2431 35.9365 36.7642 36.7504 35.9502C37.5644 35.1362 38.0433 34.0465 38.0924 32.8964C38.1416 31.7463 37.7574 30.6197 37.0159 29.7392C36.2743 28.8588 35.2294 28.2886 34.0877 28.1415C32.946 27.9945 31.7907 28.2811 30.8502 28.9448L20.779 18.8736L21.2086 18.4402L40.6441 26.2152L43.7096 34.1894L34.9896 42.9094L27.0154 39.8439L19.2404 20.4083ZM33.4978 29.6634C34.1998 29.6644 34.8796 29.9088 35.4216 30.3549C35.9635 30.8009 36.3341 31.4211 36.4701 32.1098C36.6061 32.7984 36.4991 33.5129 36.1674 34.1315C35.8357 34.7501 35.2998 35.2346 34.6509 35.5024C34.0021 35.7702 33.2805 35.8047 32.609 35.6001C31.9375 35.3956 31.3578 34.9645 30.9685 34.3804C30.5792 33.7963 30.4044 33.0953 30.474 32.3969C30.5436 31.6984 30.8532 31.0456 31.35 30.5498C31.9202 29.9814 32.6927 29.6626 33.4978 29.6634ZM38.0941 47.8962L36.1416 43.9911L44.7835 35.3492L48.6886 37.3017L38.0941 47.8962Z" fill="currentColor"/>
                                        <path d="M15.7493 41.7964C15.5999 41.6553 15.4022 41.5766 15.1967 41.5766C14.9912 41.5766 14.7935 41.6553 14.6441 41.7964L13.6522 42.7883C11.0053 39.1959 9.54506 34.8671 9.47506 30.4053C9.40506 25.9436 10.7288 21.5711 13.2617 17.8974C14.0206 18.3149 14.8944 18.4753 15.7521 18.3545C16.6098 18.2337 17.4052 17.8382 18.0192 17.2273C18.6332 16.6164 19.0327 15.8229 19.1579 14.9658C19.283 14.1087 19.127 13.2342 18.7132 12.4732C22.387 9.94028 26.7594 8.61656 31.2212 8.68656C35.6829 8.75656 40.0117 10.2168 43.6042 12.8637L42.5967 13.8439C42.4514 13.9903 42.37 14.1883 42.3702 14.3945C42.3696 14.4973 42.3893 14.5992 42.4281 14.6944C42.467 14.7895 42.5243 14.8761 42.5967 14.949L46.0409 18.366C46.1873 18.5114 46.3852 18.5931 46.5916 18.5931C46.7979 18.5931 46.9958 18.5114 47.1422 18.366L50.5669 14.9412C50.6395 14.8687 50.6971 14.7826 50.7364 14.6877C50.7757 14.5929 50.796 14.4913 50.796 14.3887C50.796 14.286 50.7757 14.1844 50.7364 14.0896C50.6971 13.9948 50.6395 13.9086 50.5669 13.8361L47.1422 10.4113C46.9958 10.2659 46.7979 10.1842 46.5916 10.1842C46.3852 10.1842 46.1873 10.2659 46.0409 10.4113L44.7171 11.7274C41.4544 9.27221 37.5971 7.72971 33.5412 7.25823C29.4853 6.78676 25.377 7.40331 21.6381 9.04456L26.1407 4.55372C26.6512 4.79766 27.2316 4.85288 27.779 4.70958C28.3264 4.56628 28.8053 4.23372 29.1308 3.77091C29.4563 3.3081 29.6073 2.74495 29.5571 2.18137C29.5069 1.61778 29.2586 1.09021 28.8564 0.692234C28.4543 0.294258 27.9241 0.051612 27.36 0.00734173C26.7959 -0.0369285 26.2344 0.120039 25.7751 0.450398C25.3157 0.780757 24.9882 1.26315 24.8507 1.812C24.7132 2.36084 24.7745 2.94066 25.0238 3.44859L17.4245 11.0596C16.653 10.542 15.7256 10.3084 14.8009 10.3986C13.8762 10.4888 13.0115 10.8973 12.3545 11.5543C11.6976 12.2113 11.2891 13.076 11.1988 14.0007C11.1086 14.9254 11.3422 15.8527 11.8598 16.6243L4.2488 24.2236C3.73889 23.9751 3.1574 23.9155 2.60766 24.0553C2.05792 24.195 1.57554 24.5252 1.24623 24.987C0.91692 25.4489 0.762015 26.0125 0.809038 26.5778C0.856061 27.1431 1.10197 27.6734 1.50306 28.0745C1.90415 28.4756 2.43445 28.7215 2.99973 28.7685C3.56501 28.8155 4.12865 28.6606 4.59051 28.3313C5.05236 28.002 5.3825 27.5196 5.52228 26.9699C5.66206 26.4201 5.60241 25.8386 5.35394 25.3287L9.85649 20.8379C8.2136 24.5757 7.59511 28.6835 8.06452 32.7394C8.53393 36.7952 10.0743 40.6531 12.5276 43.9169L11.2077 45.2407C11.0622 45.3871 10.9805 45.585 10.9805 45.7913C10.9805 45.9977 11.0622 46.1956 11.2077 46.342L14.6324 49.7667C14.7782 49.9134 14.9762 49.9962 15.183 49.9971C15.2861 49.9972 15.3881 49.9769 15.4833 49.9373C15.5785 49.8978 15.6649 49.8398 15.7375 49.7667L19.1662 46.342C19.3117 46.1956 19.3933 45.9977 19.3933 45.7913C19.3933 45.585 19.3117 45.3871 19.1662 45.2407L15.7493 41.7964ZM46.5994 12.0593L48.919 14.3789L46.5994 16.6985L44.2797 14.3789L46.5994 12.0593ZM26.5858 1.82017C26.7019 1.70317 26.8501 1.62327 27.0116 1.59063C27.1732 1.55799 27.3408 1.57406 27.4931 1.63682C27.6455 1.69958 27.7758 1.80618 27.8675 1.94312C27.9592 2.08005 28.0082 2.24113 28.0082 2.40593C28.0082 2.57073 27.9592 2.73181 27.8675 2.86875C27.7758 3.00568 27.6455 3.11229 27.4931 3.17504C27.3408 3.2378 27.1732 3.25387 27.0116 3.22123C26.8501 3.18859 26.7019 3.1087 26.5858 2.99169C26.5089 2.9148 26.4478 2.82349 26.4061 2.72298C26.3644 2.62247 26.343 2.51474 26.343 2.40593C26.343 2.29713 26.3644 2.18939 26.4061 2.08888C26.4478 1.98837 26.5089 1.89706 26.5858 1.82017ZM13.4648 12.6646C13.6916 12.4367 13.9611 12.2559 14.258 12.1325C14.5549 12.0091 14.8732 11.9456 15.1947 11.9456C15.5162 11.9456 15.8346 12.0091 16.1314 12.1325C16.4283 12.2559 16.6979 12.4367 16.9247 12.6646C17.2675 13.0068 17.5011 13.4431 17.5959 13.9182C17.6907 14.3932 17.6424 14.8858 17.4572 15.3334C17.272 15.781 16.9582 16.1636 16.5554 16.4329C16.1527 16.7021 15.6792 16.8458 15.1947 16.8458C14.7103 16.8458 14.2368 16.7021 13.834 16.4329C13.4313 16.1636 13.1175 15.781 12.9323 15.3334C12.7471 14.8858 12.6988 14.3932 12.7936 13.9182C12.8884 13.4431 13.122 13.0068 13.4648 12.6646ZM3.79581 26.9572C3.63637 27.0901 3.43296 27.1587 3.22555 27.1493C3.01815 27.1399 2.82174 27.0533 2.67494 26.9065C2.52813 26.7597 2.44153 26.5633 2.43216 26.3559C2.42279 26.1485 2.49132 25.9451 2.62429 25.7856C2.78058 25.632 2.99093 25.546 3.21005 25.546C3.42918 25.546 3.63953 25.632 3.79581 25.7856C3.8728 25.8625 3.93387 25.9538 3.97554 26.0543C4.01721 26.1548 4.03866 26.2626 4.03866 26.3714C4.03866 26.4802 4.01721 26.5879 3.97554 26.6884C3.93387 26.789 3.8728 26.8803 3.79581 26.9572ZM15.1947 48.0953L12.8751 45.7757L15.1947 43.4561L17.5144 45.7757L15.1947 48.0953Z" fill="currentColor"/>
                                    </svg>
                                </div>
                                <a href="service-details.html" class="service-btn">Read Details <i class="fa-regular fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ./ service-section -->


6) Faq Section - top


		<section class="faq-section pt-130 pb-130">
        <div class="faq-shape"><img src="assets/img/shapes/faq-shape-1.png" alt="shape"></div>
        <div class="faq-top-shape"></div>
        <div class="container">
            <div class="row gy-lg-0 gy-4">
                <div class="col-xl-6 col-lg-12 col-md-12">
                    <div class="faq-content">
                        <div class="section-heading">
                            <h4 class="sub-heading after-none" data-text-animation="fade-in" data-duration="1.5">Just Ask us some question</h4>
                            <h2 class="section-title" data-text-animation data-split="word" data-duration="1">Digital Solution That Improve Your Agency Growth</h2>
                        </div>
                        <div class="accordion" id="accordionExampleTwo">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingFour">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                                        What kind of services do you offer?
                                    </button>
                                </h2>
                                <div id="collapseFour" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExampleTwo">
                                    <div class="accordion-body">
                                        Risus cum orci sollicitudin fringilla lectus neque rhoncus eget pretium magna, accumsan ante torquent a pellentesque tellus fermentum cursus.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-12 col-md-12">
                    <div class="faq-img reveal text-center">
                        <img src="assets/img/images/faq-img.png" alt="faq">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ./ faq-section -->


7) Running Text - top


		<div class="running-text testi">
            <div class="container">
                <div class="scroller" data-speed="fast">
                    <ul class="text-anim scroller__inner">
                        <li>Customer Testimonial .</li>
                        <li>Client Feedbacks</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- ./ running-text -->


8) Testimonial Section - top


		<section class="testimonial-section overflow-hidden">
            <div class="container">
                <div class="testi-carousel swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="testi-item text-center">
                                <div class="testi-thumb">
                                    <img src="assets/img/testi/testi-author-1.png" alt="img">
                                </div>
                                <div class="testi-content">
                                    <h3 class="author">Daniel Joseph <span>Writter</span></h3>
                                    <p>Curabitur accumsan nec aliquam mauris placat primis lacinia egestas congue facilisis ligula leo sociosqu consequat</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
        <!-- ./ testimonial-section -->


		<section class="project-section pt-130 pb-130">
            <div class="container">
                <div class="project-top heading-space align-items-end">
                    <div class="section-heading mb-0">
                        <h4 class="sub-heading after-none" data-text-animation="fade-in" data-duration="1.5">Project Showcase</h4>
                        <h2 class="section-title" data-text-animation data-split="word" data-duration="1">Let’s Look Our Recent <br> Project Gallery</h2>
                    </div>
                    <a href="project.html" class="rr-primary-btn">View More Project<i class="fa-regular fa-arrow-right"></i></a>
                </div>
                <div class="project-accordion">
                    <div class="accordion" id="projectAccordion">
                        <div class="accordion-item project-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    <span class="project-content">
                                        <span class="number">01</span>
                                        <span class="project-right">
                                            <span class="category">UI/UX Design</span>
                                            <span class="title">Marketing Solution For Brand</span>
                                        </span>
                                    </span>
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#projectAccordion">
                                <div class="accordion-body">
                                    <div class="hover-content">
                                        <div class="content-left">
                                            <p>Conubia elementum sodales molestie tempus gravida massa porta. Iaculis gravida feugiat tempor nulla orci imperdiet at aenean</p>
                                            <a href="project-details.html" class="rr-primary-btn">View Details<i class="fa-regular fa-arrow-right"></i></a>
                                        </div>
                                        <div class="content-right">
                                            <div class="project-thumb">
                                                <img src="assets/img/project/project-1.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ./ project-section -->

11) Running Text - top


		<div class="running-text running-1">
            <div class="container">
                <div class="scroller" data-speed="fast">
                    <ul class="text-anim scroller__inner inner-2">
                        <li>Digital Solution</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- ./ running-text -->

11) Running Text - top


		<div class="running-text running-1">
            <div class="container">
                <div class="scroller" data-speed="fast">
                    <ul class="text-anim scroller__inner inner-2">
                        <li>Digital Solution</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- ./ running-text -->

13) Blog Section - top


			<section class="blog-section pt-130 pb-130 fade-wrapper">
                <div class="container">
                    <div class="section-heading text-center">
                        <h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">NEWS & LATEST UPDATES</h4>
                        <h2 class="section-title" data-text-animation data-split="word" data-duration="1">Check Our Company Inside Story</h2>
                    </div>
                    <div class="post-wrap">
                        <div class="post-card-wrap fade-top">
                            <div class="post-card">
                                <div class="post-thumb">
                                    <img src="assets/img/blog/post-1.jpg" alt="post">
                                </div>
                                <div class="post-content-wrap">
                                    <div class="post-content">
                                        <ul class="post-meta">
                                            <li><i class="fa-sharp fa-regular fa-clock"></i>25 June, 2024</li>
                                        </ul>
                                        <h3 class="title"><a href="blog-details.html">The Future-Focused Strategies of Our Forward-Thinking Web Design Agency</a></h3>
                                        <a href="blog-details.html" class="rr-primary-btn blog-btn">Read More <i class="fa-sharp fa-regular fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- ./ blog-section -->

14) Sponsor Section - top


		<section class="sponsor-section pb-130">
            <div class="container">
                <div class="sponsor-wrap">
                    <div class="sponsor-item item-1">
                        <h3 class="title">WORKED WITH <br>GLOBAL LARGEST <br> BRANDS</h3>
                    </div>
                    <div class="sponsor-item">
                        <a href="#"><img src="assets/img/sponsor/sponsor-1.png" alt="sponsor"></a>
                    </div>
                </div>
            </div>
        </section>
        <!-- ./ blog-section -->

15) Footer Section - top


		<footer class="footer-section bg-dark-1">
            <div class="shape"><img src="assets/img/shapes/footer-shape.png" alt="footer"></div>
            <div class="container">
                <div class="row footer-wrap">
                    <div class="col-lg-3 col-md-6">
                        <div class="footer-widget">
                            <div class="widget-header">
                                <div class="footer-logo">
                                    <a href="index.html"><img src="assets/img/logo/logo-2.png" alt="logo"></a>
                                </div>
                            </div>
                            <p class="mb-20">Centric aplications productize before front end vortals visualize front end is results and value added</p>
                            <h4 class="title">WE ARE AVAILABLE <span>Mon-Sat: 09.00 am to 6.30 pm</span></h4>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="footer-widget footer-col-2">
                            <div class="widget-header">
                                <h3 class="widget-title">Useful Links</h3>
                            </div>
                            <ul class="footer-list">
                                <li><a href="about.html">About Us</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="footer-widget">
                            <div class="widget-header">
                                <h3 class="widget-title">Contact Us</h3>
                            </div>
                            <ul class="address-list">
                                <li><a href="mailto:support@agency.com">support@agency.com</a></li>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="footer-widget">
                            <div class="widget-header">
                                <h3 class="widget-title">Subscribe newsletter</h3>
                            </div>
                            <div class="footer-form mb-20">
                                <form action="#" class="rr-subscribe-form">
                                    <input class="form-control" type="email" name="email" placeholder="Email address">
                                    <input type="hidden" name="action" value="mailchimpsubscribe">
                                    <button class="submit">Sign Up</button>
                                    <div class="clearfix"></div>
                                </form>
                            </div>
                            <div class="form-check form-item">
                                <input class="form-check-input" type="checkbox" value="" id="man">
                                <label class="form-check-label" for="man">
                                    I’m okay with getting emails and having
                                    that tracked to improve my experience
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyright-area">
                <div class="container">
                    <div class="row copyright-content">
                        <div class="col-md-6">
                            <p>© 2024 Runok. All Rights Reserved.</p>
                        </div>
                        <div class="col-md-6">
                            <ul class="social-list">
                                <li class="facebook">
                                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- ./ footer-section -->

 


C) CSS Files and Structure - top

These are the css files:

  1. bootstrap.min.css
  2. animate.min.css
  3. fontawesome.min.css
  4. keyframe-animation.css
  5. odometer.min.css
  6. swiper.min.css
  7. nice-select.css
  8. venobox.min.css
  9. main.css

 


D) JavaScript - top

This template use these Javascript files:

  1. jQuery
    jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery 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
        wow.min.js
        swiper.min.js
        split-type.min.js
        gsap.min.js
        scroll-trigger.min.js
        nice-select.js
        ajax-form.js
        main.js
                
    You can edit the contact.js files. for setting contact form


F) Sources and Credits - top

  1. Bootstrap v5.0.2
  2. Swiper Carousel
  3. WOW JS
  4. VenoBox
  5. Smooth Scroll
  6. Gsap
  7. AjaxChimp


G) PHP Code Explanation - top

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.

Runok

Go To Table of Contents