Roda - Gaming Store & eCommerce HTML5 Template

Created: 22/01/2025

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to open a new ticket at our support forum

24/7 Support: Send us a message

Email: info@vecuro.com

Template Installation

FTP Upload:

HTML Structure

We are used Bootstrap Latest Version v5.3.0-alpha3 framework & GSAP, Lenis Smooth Scroll in this template.
The general template structure is the same throughout the template. Here is the general structure.

          
            <!doctype html>
            <html class="no-js" lang="zxx">
      
            <head>
              <meta charset="utf-8">
              <meta http-equiv="x-ua-compatible" content="ie=edge">
              <title>Roda - Gaming Store & eCommerce HTML5 Template | Vecuro | Home 1 </title>
              <meta name="author" content="vecuro">
              <meta name="description" content="Roda - Gaming Store & eCommerce HTML5 Template">
              <meta name="keywords" content="Roda - Gaming Store & eCommerce HTML5 Template">
              <meta name="robots" content="INDEX,FOLLOW">
              <!-- Mobile Specific Metas -->
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
              <!-- Favicons - Place favicon.ico in the root directory -->
              <link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-icon-57x57.png">
              <link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-icon-60x60.png">
              <link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-icon-72x72.png">
              <link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-icon-76x76.png">
              <link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-icon-114x114.png">
              <link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-icon-120x120.png">
              <link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-icon-144x144.png">
              <link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-icon-152x152.png">
              <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-icon-180x180.png">
              <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
              <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/favicon-96x96.png">
              <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
              <link rel="manifest" href="assets/img/favicons/manifest.json">
              <meta name="msapplication-TileColor" content="#ffffff">
              <meta name="msapplication-TileImage" content="assets/img/favicons/ms-icon-144x144.png">
              <meta name="theme-color" content="#ffffff">
              <!--==============================
                Google Fonts
              ============================== -->
              <link rel="preconnect" href="https://fonts.googleapis.com">
              <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
              <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Unbounded:wght@200..900&display=swap" rel="stylesheet">
              <!--==============================
                  All CSS File
              ============================== -->
              <!-- Bootstrap -->
              <link rel="stylesheet" href="assets/css/bootstrap.min.css">
              <!-- Fontawesome Icon -->
              <link rel="stylesheet" href="assets/css/fontawesome.min.css">
              <!-- Magnific Popup -->
              <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
              <!-- Slick Slider -->
              <link rel="stylesheet" href="assets/css/slick.min.css">
              <!-- Animation CSS -->
              <link rel="stylesheet" href="assets/css/animate.min.css">
              <!-- Custom Cursor CSS -->
              <link rel="stylesheet" href="assets/css/custom-cursor.min.css">
              <!-- Theme Custom CSS -->
              <link rel="stylesheet" href="assets/css/style.css">
            </head>
      
            <body class="vs-body">
            <!-- [if lte IE 9] -->
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
              <![endif]-->
          
              <!-- ********************************
                  Code Start From Here
              ******************************** -->
          
              <!-- ==============================
                Preloader
              ============================== -->
              <div class="preloader">
              .
              .
              </div>
          
              <!-- ==============================
                Mobile Menu
              ============================== -->
              <div class="vs-menu-wrapper">
              .
              .
              </div>
          
              <!--==============================
                Offcanvas
              ============================== -->
              <div class="sidemenu-wrapper">
              .
              .
              </div>
          
              <!-- ==============================
                Popup Search Box
              ============================== -->
              <div class="popup-search-box">
              .
              .
              </div>

              <!--==============================
                Cart Sidebar
              ===============================-->
              <div class="sideCart-wrapper">
              .
              .
              </div>
          
              <!-- Header Layout1 -->
              <header id="header" class="vs-header">
              .
              .
              </header>
              <!-- Header Layout1 End -->
              <!--********************************
                  Start Main Content
              ******************************** -->
              <main class="vs-page__main">
                <!-- Main Layouts -->
          
                <section></section>
                .
                .
                <div>
                .
                .
                </div>
                .
                .
                <section></section>
          
                </footer>
                <!-- Footer Start -->
                </main>
                <!--********************************
                    End Main Content
                ******************************** -->
          
              <button class="back-to-top" id="backToTop" aria-label="Back to Top">
                <span class="progress-circle">
                    <svg viewBox="0 0 100 100">
                        <circle class="bg" cx="50" cy="50" r="40"></circle>
                        <circle class="progress" cx="50" cy="50" r="40"></circle>
                    </svg>
                    <span class="progress-percentage" id="progressPercentage">0%</span>
                </span>
              </button>
            
              <!-- ********************************
              Code End Here
              ******************************** -->
          
              <!-- ==============================
                    All Js File
              ============================== -->
          
              <!-- Jquery -->
              <script src="assets/js/vendor/jquery-7.1.1.slim.min.js"></script>
          
              <!-- Slick Slider -->
              <script src="assets/js/slick.min.js"></script>
          
              <!-- Bootstrap -->
              <script src="assets/js/bootstrap.min.js"></script>
          
              <!-- WOW.js Animation -->
              <script src="assets/js/wow.min.js"></script>
          
              <!-- Magnific Popup -->
              <script src="assets/js/jquery.magnific-popup.min.js"></script>
          
              <!-- Image Loaded -->
              <script src="assets/js/imagesloaded.pkgd.min.js"></script>
          
              <!-- Isotope Filter -->
              <script src="assets/js/isotope.pkgd.min.js"></script>
          
              <!-- Gsap -->
              <script src="assets/js/gsap.min.js"></script>
          
              <!-- ScrollTrigger -->
              <script src="assets/js/ScrollTrigger.min.js"></script>
          
              <!-- Gsap ScrollTo Plugin -->
              <script src="assets/js/gsap-scroll-to-plugin.js"></script>
          
              <!-- Lenis Scroll -->
              <script src="assets/js/lenis.min.js"></script>
          
              <!-- Split Text -->
              <script src="assets/js/SplitText.js"></script>
          
              <!-- Marquee -->
              <script src="assets/js/marquee.js"></script>
          
              <!-- Custom Cursor -->
              <script src="assets/js/custom-cursor.js"></script>
          
              <!-- Main Js File -->
              <script src="assets/js/main.js"></script>
          
            </body>
          </html>

Favicon Settings

Favicon Will be found in <head> section.

          
            <link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-icon-57x57.png">
            <link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-icon-60x60.png">
            <link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-icon-72x72.png">
            <link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-icon-76x76.png">
            <link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-icon-114x114.png">
            <link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-icon-120x120.png">
            <link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-icon-144x144.png">
            <link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-icon-152x152.png">
            <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-icon-180x180.png">
            <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
            <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/favicon-96x96.png">
            <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">

Font Settings

Font Will be found in <head> section.


        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
          href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Unbounded:wght@200..900&display=swap"
          rel="stylesheet">

Logo Settings

Logo Will be found in <header> Layout.


        <div class="vs-header__logo">
          <a class="vs-header__logo-link" href="index.html">
            <img src="assets/img/logo.svg" alt="Roda Logo - Gaming HTML5 Template" loading="lazy" width="185" height="55">
          </a>
        </div>

Pages

Total 23 Pages

3 Home Pages

20 Inner Pages

Fonts

Google free fonts:

Open assets/css/style.css file to find the fonts name from typography area. That's it...

Source File (CSS)

<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Fontawesome Icon -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="assets/css/magnific-popup.min.css">
<!-- Slick Slider -->
<link rel="stylesheet" href="assets/css/slick.min.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.min.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="assets/css/style.css">

Source File (Js)

<!-- Jquery -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!-- Jquery UI -->
<script src="assets/js/jquery-ui.min.js"></script>
<!-- Slick Slider -->
<script src="assets/js/slick.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- WOW.js Animation -->
<script src="assets/js/wow.min.js"></script>
<!-- Magnific Popup -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!-- Gsap -->
<script src="assets/js/gsap.min.js"></script>
<!-- ScrollTrigger -->
<script src="assets/js/ScrollTrigger.min.js"></script>
<!-- ScrollToPlugin -->
<script src="assets/js/ScrollToPlugin.min.js"></script>
<!-- SplitText -->
<script src="assets/js/SplitText.min.js"></script>
<!-- Lenis -->
<script src="assets/js/bundled-lenis.min.js"></script>
<!-- Main Js File -->
<script src="assets/js/main.js"></script>

Customization

How to Change Menu Links

Demo of How To Change Menu Links

How to Change Email Address

Demo of How To Change Menu Links
⇧