Created:13/05/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>Roiser – Multipurpose eCommerce 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/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="category-section">
</section><!-- ./ category-section -->
<section class="discount-section">
</section><!-- ./ discount-section -->
<section class="discount-section">
</section><!-- ./ discount-section -->
<section class="collect-section">
</section><!-- ./ collect-section -->
<section class="cta-section">
</section><!-- ./cta-section -->
<section class="sponsor-section">
</section><!-- ./sponsor-section -->
<section class="deal-section">
</section><!-- ./deal-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/smooth-scroll.js"></script>
<script src="assets/js/vendor/jquery.isotope.js"></script>
<script src="assets/js/vendor/countdown.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/nice-select.js"></script>
<script src="assets/js/ajax-form.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="top-bar">
<div class="container">
<div class="top-bar-inner">
<div class="top-bar-left">
<ul class="top-left-list">
<li><a href="about.html">About</a></li>
</ul>
</div>
<div class="top-bar-middle">
<span>Free shipping for all orders of 150$</span>
</div>
<div class="top-bar-right">
<ul class="top-right-list">
<li><a href="contact.html">Store Location</a></li>
<li>
<div class="nice-select select-control country" tabindex="0">
<span class="current">Language</span>
<ul class="list">
<li data-value="" class="option selected focus">Language</li>
<li data-value="vdt" class="option">English</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-middle">
<div class="container">
<div class="header-middle-inner">
<div class="header-middle-left">
<div class="header-logo d-lg-block">
<a href="index.html">
<img src="assets/img/logo/logo-1.png" alt="Logo">
</a>
</div>
<div class="category-form-wrap">
<div class="nice-select select-control country" tabindex="0">
<span class="current">ALL Categories</span>
<ul class="list">
<li data-value="" class="option selected focus">ALL Categories</li>
<li data-value="vdt" class="option">Fashion</li>
</ul>
</div>
<form class="header-form" action="mail.php">
<input class="form-control" type="text" name="search" placeholder="Search here...">
<button class="submit rr-primary-btn">Search here</button>
</form>
</div>
</div>
<div class="header-middle-right">
<ul class="contact-item-list">
<li>
<div class="content">
<span>Call Us Now:</span>
<a class="number" href="tel:+25821592159">+(258) 2159-2159</a>
</div>
<a href="#" class="icon">
<i class="fa-regular fa-phone"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="primary-header">
<div class="container">
<div class="primary-header-inner">
<div class="header-logo mobile-logo">
<a href="index.html">
<img 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 active">
<a href="index.html">Home</a>
<ul>
<li><a href="index.html">Fashion Home</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /.header-menu-wrap -->
<div class="header-right-wrap">
<div class="header-right">
<span>Get 30% Discount Now <span>Sale</span></span>
<div class="header-right-item">
<a href="javascript:void(0)" class="mobile-side-menu-toggle"
><i class="fa-sharp fa-solid fa-bars"></i
></a>
</div>
</div>
<!-- /.header-right -->
</div>
</div>
<!-- /.primary-header-inner -->
</div>
</div>
</header>
<!-- /.Main Header -->
<section class="hero-section">
<div class="overlay"></div>
<div class="hero-images">
<div class="hero-people"><img src="assets/img/images/hero-peoples.png" alt="img"></div>
</div>
<div class="container">
<div class="row">
<div class="col-xl-8"></div>
<div class="col-xl-4 col-lg-12">
<div class="hero-content">
<h4 class="sub-title">ummer 22 women’s collection</h4>
<h2 class="title">Super COLLECTION <br>FOR WOMEN</h2>
<h5 class="price"><span>From</span>$320.00</h5>
<a href="shop.html" class="rr-primary-btn">View Collections</a>
</div>
</div>
</div>
</div>
</section>
<!-- ./ hero-section -->
<section class="category-section pt-100 pb-100">
<div class="container">
<div class="category-top heading-space space-border">
<div class="section-heading mb-0">
<h2 class="section-title">Best for your categories</h2>
<p>29 categories belonging to a total 15,892 products</p>
</div>
<!-- Carousel Arrows -->
<div class="swiper-arrow">
<div class="swiper-nav swiper-next"><i class="fa-regular fa-arrow-left"></i></div>
</div>
</div>
<div class="category-carousel swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="category-item">
<div class="category-img">
<img src="assets/img/images/cate-1.png" alt="category">
</div>
<h3 class="title"><a href="shop.html">Women Wear</a></h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ category-section -->
section class="discount-section overflow-hidden pb-100">
<div class="row gy-lg-0 gy-4">
<div class="col-lg-4 col-md-6">
<div class="discount-item item-1">
<div class="product-overlay"></div>
<div class="shape"><img src="assets/img/shapes/dis-shpe.png" alt="shape"></div>
<div class="content">
<span>Special 50% Disocunt</span>
<h3 class="title">The Latest Men’s Trends <br> This Season</h3>
<a href="shop.html"><i class="fa-regular fa-plus"></i>View Collections</a>
</div>
<div class="men"><img src="assets/img/images/discount-men-1.png" alt="img"></div>
</div>
</div>
</div>
</section>
<!-- ./ discount-section -->
section class="discount-section overflow-hidden pb-100">
<div class="row gy-lg-0 gy-4">
<div class="col-lg-4 col-md-6">
<div class="discount-item item-1">
<div class="product-overlay"></div>
<div class="shape"><img src="assets/img/shapes/dis-shpe.png" alt="shape"></div>
<div class="content">
<span>Special 50% Disocunt</span>
<h3 class="title">The Latest Men’s Trends <br> This Season</h3>
<a href="shop.html"><i class="fa-regular fa-plus"></i>View Collections</a>
</div>
<div class="men"><img src="assets/img/images/discount-men-1.png" alt="img"></div>
</div>
</div>
</div>
</section>
<!-- ./ discount-section -->
<section class="fashion-section pb-100">
<div class="container">
<div class="category-top heading-space space-border">
<div class="section-heading mb-0">
<h2 class="section-title">GET YOUR FASHION STYLE</h2>
<p>29 categories belonging to a total 15,892 products</p>
</div>
<!-- Carousel Arrows -->
<div class="swiper-arrow">
<div class="swiper-nav swiper-next"><i class="fa-regular fa-arrow-left"></i></div>
</div>
</div>
<div class="shop-carousel swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="shop-item">
<div class="shop-thumb">
<div class="overlay"></div>
<img src="assets/img/shop/shop-1.png" alt="shop">
<span class="sale">New</span>
<ul class="shop-list">
<li><a href="cart.html"><i class="fa-regular fa-cart-shopping"></i></a></li>
</ul>
</div>
<div class="shop-content">
<span class="category">Levi’s Cotton</span>
<h3 class="title"><a href="shop-details.html">Monica Diara Party Dress</a></h3>
<div class="review-wrap">
<ul class="review">
<li><i class="fa-solid fa-star"></i></li>
</ul>
<span>(15 Reviews)</span>
</div>
<span class="price"> <span class="offer">$250.00</span>$157.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ fashion-section -->
<section class="collect-section pb-100">
<div class="container">
<div class="row gy-lg-0 gy-4">
<div class="col-lg-6">
<div class="collect-item">
<span>1500+ Products</span>
<h3 class="title">Women Collections</h3>
<p>This is genuinely the first theme i bought for which i did not had <br> to write one line of code.</p>
<ul class="collect-list">
<li><a href="shop.html">Blazer</a></li>
</ul>
<div class="men"><img src="assets/img/images/discount-1.png" alt="discount"></div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ collect-section -->
<section class="cta-section pt-100 pb-100" data-background="assets/img/bg-img/cta-bg.jpg">
<div class="overlay"></div>
<div class="container">
<div class="cta-wrap text-center">
<span>Spring summer 22 women’s collection</span>
<h2 class="title">-15% Off Discount <br>All Here</h2>
<a href="shop.html" class="rr-primary-btn cta-btn">View Collections</a>
</div>
</div>
</section>
<!-- ./ cta-section -->
<div class="sponsor-section pt-100">
<div class="container">
<div class="row sponsor-wrap">
<div class="sponsor-item bd-right bd-bottom">
<a href="#"><img src="assets/img/sponsor/sponsor-1.png" alt="img"></a>
</div>
</div>
</div>
</div>
<!-- ./ sponsor-section -->
<section class="deal-section pt-100 pb-100">
<div class="container">
<div class="row deal-wrap align-items-center">
<div class="shape"><img src="assets/img/shapes/deal-shape.png" alt="shape"></div>
<div class="col-xl-5 col-lg-12">
<div class="deal-content">
<div class="section-heading mb-0">
<h2 class="section-title">Deal Of the days</h2>
<p>Elegant pink origami design three type of dimensional view and <br>decoration co Great for adding a decorative...</p>
</div>
<div class="deal-info">
<div class="icon">
<img src="assets/img/icon/deal-icon.png" alt="icon">
</div>
<div class="content">
<p>Limited Time offer. THe Deal will expire <br> one august 18, 2024 </p>
</div>
</div>
<a href="shop.html" class="rr-primary-btn deal-btn">View All Collections</a>
</div>
</div>
<div class="col-xl-7 col-lg-12">
<div class="row gy-md-0 gy-4">
<div class="col-md-6">
<div class="shop-item deal-shop">
<div class="shop-thumb">
<div class="overlay"></div>
<img src="assets/img/shop/shop-5.jpg" alt="shop">
<span class="sale">New</span>
<ul class="shop-list">
<li><a href="#"><i class="fa-regular fa-cart-shopping"></i></a></li>
</div>
<div class="shop-content">
<span class="category">Levi’s Cotton</span>
<h3 class="title"><a href="shop-details.html">Monica Diara Party Dress</a></h3>
<div class="review-wrap">
<ul class="review">
<li><i class="fa-solid fa-star"></i></li>
</ul>
<span>(15 Reviews)</span>
</div>
<span class="price"> <span class="offer">$250.00</span>$157.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ deal-section -->
<section class="blog-section pb-100">
<div class="container">
<div class="section-heading text-center">
<h2 class="section-title mb-0">Our Latest News Insight</h2>
</div>
<div class="row gy-lg-0 gy-4 justify-content-center">
<div class="col-lg-4 col-md-6">
<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-solid fa-calendar-days"></i>3 Comment</li>
</ul>
<h3 class="title"><a href="blog-details.html">Fashion Around the: Exploring Cultural Influences</a></h3>
</div>
<div class="post-bottom">
<a href="blog-details.html" class="read-more">Read More<i class="fa-regular fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ blog-section -->
<footer class="footer-section bg-grey pt-60">
<div class="container">
<div class="footer-items">
<div class="footer-item">
<div class="icon">
<img src="assets/img/icon/footer-1.png" alt="icon">
</div>
<div class="content">
<h4 class="title">Free Shipping</h4>
<span>Free shipping on orders over $65</span>
</div>
</div>
<div class="row footer-widget-wrap pb-60">
<div class="col-lg-3 col-md-6">
<div class="footer-widget">
<div class="widget-header">
<h3 class="widget-title">About Store</h3>
</div>
<div class="footer-contact">
<div class="icon"><i class="fa-sharp fa-solid fa-phone-rotary"></i></div>
<div class="content">
<span>Have Question? Call Us 24/7</span>
<a href="tel:+25836922569">+258 3692 2569</a>
</div>
</div>
<ul class="schedule-list">
<li><span>Monday - Friday:</span>8:00am - 6:00pm</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="footer-widget">
<div class="widget-header">
<h3 class="widget-title">Our Stores</h3>
</div>
<ul class="footer-list">
<li><a href="contact.html">New York</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">Our Newsletter</h3>
</div>
<div class="news-form-wrap">
<p class="mb-20">Subscribe to the mailing list to receive updates one the new arrivals and other discounts</p>
<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">Subscribe</button>
<div class="clearfix"></div>
</form>
</div>
<p class="mb-0">I would like to receive news and special offer</p>
</div>
</div>
</div>
</div>
</div>
<div class="copyright-area">
<div class="container">
<div class="row copyright-content">
<div class="col-lg-6">
<div class="footer-img-wrap">
<span>Payment System:</span>
<div class="footer-img"><a href="#"><img src="assets/img/images/footer-img-1.png" alt="img"></a></div>
</div>
</div>
<div class="col-lg-6">
<p>Copyright & Design 2024 <span>©Roiser</span>. All Right Reserved</p>
</div>
</div>
</div>
</div>
</footer>
<!-- ./ footer-section -->
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
nice-select.js
ajax-form.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.
Roiser