INTRODUCTION

Created: 10 September 2025

Author: Atypical Themes

Thank you for choosing STRIDER!

This document will guide you through installing and customizing the STRIDER HTML Template.

STRIDER is the perfect template for small studios and solo developers to showcase their games in a sleek, professional and eye-catching manner!

Built for efficiency and smoothness with HTML5, CSS3, PHP and Javascript on the Bootstrap 5 framework.

You can edit the template files using any text editor but I use Visual Studio Code.


What's Included:

  • 35 fully functional HTML templates

  • 2 Coming Soon pages

  • Terms & Conditions and Privacy Policy Pages included in every template

  • 404 Page included in every 'studio-style' template

  • FontAwesome icon pack included (base version)


NOTE: This is version 2.0 of STRIDER, you can download version 1.5 using this link.

INSTALLATION

1. Download the Template

  • After purchasing, log in to your ThemeForest account and download the package.
  • You'll receive a .zip file
  • Inside, you'll find:
    • Documentation - This guide (how to use the template).
    • Template Files - The actual HTML, CSS, JS, and assets.

2. Unzip the Package

  • Extract the .zip file to a folder on your computer
  • You should now see a file structure like:
    •                      
    /documentation
    /studio-style-1 (template)                                
        /static (variant)
            ├── css/
            ├── images/
            ├── js/
            ├── php/
            ├── 404.html
            ├── careers.html
            ├── index.html
            ├── privacy_policy.html
            ├── terms_and_conditions.html

    NOTE: File structure may vary by template style.


3. Open the Template in Your Browser

  • Go to any variant folder (static, video, slider etc...)
  • Double click index.html to open it in your default browser
  • You should now see the template running locally.

4. Edit the Template

  • Open the HTML files (e.g., index.html, careers.html) in a text editor like:
    • VS Code (recommended)
    • Sublime Text
    • Atom / Notepad++
  • Modify text, images, and links as needed.
  • The styles are controlled by the css/ folder and interactivity by the js/ folder.

5. Upload to Your Server (Live Site)

  • Use an FTP client (like FileZilla) or your hosting provider's file manager.
  • Upload the contents of the variant folder to your web root (e.g., /public_html/).
  • Once uploaded, your site will be accessible at https://yourdomain.com/.

Setting Up the 404 Error Page

Your template includes a custom 404.html page that you can use when visitors land on a broken or missing link. To enable it, you'll need to configure your server to point to this file.


1. Locate the 404 Page

  • In the template files, look for 404.html.
  • You can customize it like any other page (text, images, styling).

2. Upload the Page

  • Upload 404.html to the root folder of your website (the same place as index.html).

3. Configure Your Server

The way you set up the 404 page depends on your hosting environment:

  • If you're using Apache (most common hosting)

    • 1. In the root folder of your website, create or edit a file called .htaccess

    2. Add this line:

    
    ErrorDocument 404 /404.html

    3. Save and upload the .htaccess file.

  • If you're using Nginx

    • Ask your hosting provider to set it up, or if you manage your own server, add this to your site's config:

    
    error_page 404 /404.html;
  • If you're using cPanel or Plesk

    • 1. Go to your hosting control panel.

    2. Look for Error Pages.

    3. Select 404 (Not Found) and point it to /404.html


    4. Test the Page

    • Try visiting a non-existing URL, like: https://yourdomain.com/something-random
    • You should see your custom 404 page.

FILE STRUCTURE

The main template folder contains the following:

3 Game Page Style and 4 Game Studio Style folders each contain 3-4 template variants like Slider, Video, Parallax or Animated as well as 2 Coming Soon pages.

Each template folder contains and index.html file, Privacy Policy html file and Terms & Conditions html file along with the following folders:

  • css - Bootstrap, the main template stylesheet and other css files.

  • images - Image files, icons and favicons.

  • js - Template js file (main.js or single.js), bootstrap, lightbox, splide carousel as well as contact and newsletter handling scripts.

  • php - PHP scripts for contact and newsletter forms.


HTML STRUCTURE

All HTML files have roughly the same structure, here we are using a single.html file as an example:


    <!DOCTYPE html>
    <html>
        <head>
        ...
        </head>
        <body>
            <!-- Loading Screen -->
            <div id="loader-wrapper">
                ...
            </div>

            <!-- Age Checker -->
            <div id="age-checker-wrapper">
                ...
            </div>

            <!-- HEADER -->
            <header id="main-header">      
                ...
            </header>

            <!-- Cookie Management -->
            <div class="container-fluid">
                ...
            </div>

            <!-- SECTION -->
            <section class="...section">         
                ...
            </section>

            <!-- FOOTER -->
            <footer id="main-footer">       
                ...
            </footer>
        </body>
    </html>

NOTE: Only single page templates contain a loading screen and only game page templates contain an age checker. All templates contain cookie management.


We will now break down each element:

  • The head contains the website title and description, keywords for SEO and META tags that determine how the website will look as a post on social media. The head is also where we load in the favicons, fonts and styles for the page.
  • The loading screen is used on single page templates and provides confirmation that the website is loading for users with slow internet.
  • The age checker is only used on the Game Page Style templates and will pop up when a user first enters the page, if the user passes the age check the script will store a cookie in local storage to remember the user for 30 days so the age checker doesn't show up again for that user. This works even if cookies are blocked by the browser since local storage is allowed.
  • The headercontains the site logo, navigation links and sometimes social links. NOTE: Game Page Style 2 and Studio Style 2 have two headers (one for desktop and one for mobile).
  • cookie management is a cookie notification pop-up with modal for cookie selection, also includes a message for cookies being blocked by browser.
  • The section are standalone elements which contain the page content. Each section will have a class name and some will have a margin class such as large-margin, these determine the bottom margin of each section. You can choose between 4 margin sizes that are customized inside the style.css file under the "general styles" section. Because of their standalone nature you can change the order of each section on the page by cutting and pasting them to your desired place (just don't paste them below the footer or above the header). But keep in mind this may require some adjustments (like removing the margin class from some sections).
  • The footer contains social links, the copyright text for the site, the privacy policy and terms and conditions page links as well as a button to open the cookie preferences menu. Some game pages may also contain a company logo and an ESRB rating sticker.
  • And below the footer is where we load all the javascript files for the page.

SETTING UP THE TEMPLATE

Adding Images

The template contains two types of images: Embeded and imported with CSS

For embeded images copy your custom images into the images folder and add them to the tempalte by editing the img link inside the template.

An image link looks like this in the code:


<img src="imgages/yourimage.jpg" class="img-fluid" alt=" ">

There are also background images imported with CSS like this:

                    
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%), url(../images/hero.webp);

For those images you simply have to copy your custom image inside the "images" folder and change "url(../images/hero.webp)" to your image name.

As you can see the image has a gradient applied to it that you can change the color [rgba(0,0,0)], angle (90deg) or opacity (0.9, 0.7 etc) of as you wish.

I recommend using webp image format for pest performance, or if you are using jpg images you can run them through a jpg compressor to reduce their size.

As you can see the image dimensions for each image used in the template are displayed on the image itself.

You can use different image dimensions to fit your situation, use your own discretion (especially for logos and brand images).


Media gallery and lightbox

Media galleries and some other images in the template are powered by Lightbox (specifically GLightbox javascript plugin), a lightbox element looks like this:


    <a href="images/game-large.webp" data-title="Mountain Castle" class="glightbox" data-gallery="games_gallery">
        <img src="images/game-cover.webp" loading="lazy" alt="Asian style castle on a geen mountain top">
    </a>

Here we have two images being displayed, game-cover and game-large, as the name implies game-cover represents the image thumbnail and game-large is the full size image.

So keep in mind that the full size image is always inside the a tags and the thumbnail / cover image is inside the img tags.

data-title is used to add a title or caption the full size image.

data-gallery is used to group multiple images together in a gallery like so:


    <!-- Game thumbnail with gallery -->
    <a href="images/game1.webp" class="glightbox" data-gallery="game-1">
        <img src="images/game1.webp" class="img-fluid" loading="lazy" alt="Game cover art with a crouching warrior and a dragon in the background">
    </a>

    <!-- Gallery Images -->
    <a href="images/game1_large.webp" class="glightbox" data-gallery="game-1" aria-label="Angry dragon growls at ironclad warrior"></a>
    <a href="images/game1_large2.webp" class="glightbox" data-gallery="game-1" aria-label="Horned helmet warrior calls his dragon to attack with fire"></a>

Here we have a lightbox gallery with multiple images, notice that all the images have the same data-gallery value.

More info on GLightbox can be found here.


Links

Here are some examples of links from the template:

 
<!-- Purchase Button -->
<a href="#" id="steam" class="platform-button" aria-label="Buy on Steam">
        <span class="visually-hidden">Buy on Steam</span>
</a>

<!-- Social media link -->
<a href="#" aria-label="Visit the Ghost Modem Facebook page">
        <i class="fab fa-facebook fa-lg"></i>
</a>

<!-- Game card link -->
<a href="../game-page-style-1/single.html" aria-label="Visit Empire DLC page">
        <img src="images/dlc.webp" class="img-fluid game-img" alt="Empire DLC cover art">
        <div class="overlay"></div>
        <h3>Empire<br><span class="uppercase">DLC</span></h3>
        <p class="promotion uppercase">new</p>
</a>

<!-- mail link -->
<a href="mailto:office@example.com" class="button" aria-label="Apply for the job via mail"><span>apply</span></a>

For the first two links replace the # inside the href with your links.

The game card link points to a game page link, it will look something like https//yoursite.com/single-game.html

The final link is a mailto link and is used for the job application modals inside the career pages, replace with your email address.


Setting and adding game tags

On the game studio pages of the template you can sort and filter your displayed games using tags, here is how it works:


    <!-- Sorting tags -->
    <ul class="game-tags">
        <li><button type="button" data-filter="*">All</button></li>
        <span class="divider">/</span>
        <li><button type="button" data-filter=".pc">PC</button></li>
        <span class="divider">/</span>
        <li><button type="button" data-filter=".xbox">Xbox</button></li>
        ...                
    </ul>

This is what the sorting tags look like, the sorting and filtering is handled automatically by a javascript plugin called Isotope.

When the user clicks on one of the sorting tags the game card or cards corresponding to that category will be displayed.

Notice the data-filter attributes, the plugin looks for elements with the class name mentioned in the data-filter.

Here is what that looks like:


        <!-- Game Card -->
        <div class="row game-card small-margin pc ps xbox new">
        ...
        </div>

Notice the above game card element has multiple classes mentioned in the data-filter (pc, xbox etc), this means it will appear in multiple categories.

To add more categories simply duplicate a line of <li> code inside the "game tags" list and add your own category inside data-filter and then add that category as a class to your game card element.

More info on the Isotope plugin can be found here.


Setting up fullscreen video

The template includes a .webm video running at 720p 29fps. The supported video formats are mp4 , webm and ogg.

When using video, loading times are very important so try to find a ballance between quality and size and limit your video to under 10-15mb in size.

Place your video file inside the images folder. Open index.html with a text editor and navigate to the hero section, here you will find the following lines of code:

                  
<video autoplay loop poster="images/poster.jpg" id="bgvid" class="img-fluid">
    <source src="images/bgvid.webm" type="video/webm">
</video>

Now replace bgvid.wem with the name of your video file and also change type="video/webm" to mp4 or ogg if you are using one of those formats.

If the video cannot be loaded the template will load a poster image instead. So create a .jpg image file and name it poster.jpg and paste it in the images folder.

By default the video will autoplay and loop, defined by the autoplay and loop parameters inside the video tag.


Setting up linked videos

The template also uses linked videos in some places, the linked video code can look like this:


<!-- Game trailer -->
<a href="https://www.youtube.com/watch?v=9E5VH0K2wW4&t=1s" class="glightbox trailer-wrapper" aria-label="Watch the Ghost Modem trailer">
    <img src="images/game-trailer-bg.webp" class="img-fluid trailer-bg" alt="Ghost Modem trailer poster">
    <div class="flexbox-container">
        <img src="images/icons/play-button.svg" class="img-fluid trailer-play-button" alt="">
        <p class="uppercase">Watch Trailer</p>
    </div>
</a>

Or this:


<!-- Game trailer -->
<a href="https://www.youtube.com/watch?v=JaWnEbAsFmc" class="glightbox" aria-label="Watch the Zen Quest trailer">
       <img src="images/icons/play-button.svg" class="img-fluid trailer-play-button" alt="Play Video">
</a>

These are two examples of trailer play buttons, the first one has an image background while the second only has a play button.

In both cases you need to change the link inside the href to you youtube link.

NOTE: YouTube has actively disabled the ability to embed age-restricted videos on external sites!

If your linked video is age restricted you will have to add target="_blank" and rel="noopener" to your link like so <a href="..." target="_blank" rel="noopener" aria-label="Watch the ghost modem trailer"> <. This will open the video in a new youtube tab allowing it to play.


Newsletter & Contact Forms

The template comes with functioning contact & newsletter forms.

To start receiving emails from the contact form you simply need to open the contact-handler.php file inside the php folder and locate the following code:


$config = [
    'to_email' => 'Your email here',
    'from_email' => 'Your email here',
    'subject' => 'New Message From Your Website',
    'rate_limit_seconds' => 30,
    'max_message_length' => 1000,
    'max_name_length' => 50,
    'max_email_length' => 254
];

We will now go over each line and explain its function:

  • to_email is the email address where the form submissions will be sent.
  • from_email is the email address that will appear in the "From" field of the email that gets sent. Sometimes set to a fixed address (like noreply@yourdomain.com) to reduce spam issues.
  • subject is the subject line that will appear in the emails you receive from the form.
  • rate_limit prevents spam by limiting how often someone can send a new message. In this case, a user has to wait 30 seconds before submitting another message.
  • max_message_length restricts how long the actual message can be (up to 1000 characters).
  • max_name_length limits the length of the sender's name to 50 characters. Prevents people from entering excessively long names or trying to break the form.
  • max_email_length limits the email input length. 254 characters is the maximum length for a valid email address.

NOTE: Sometimes emails from the contact form may arrive in the spam folder so make sure to check that as well!


The newsletter form features Mailchimp integration. In order to configure it you have to open the subscribe.php file inside the php folder and look for the following code:


// 🔑 Replace with your Mailchimp details
$apiKey = 'YOUR_API_KEY';
$listId = 'YOUR_LIST_ID';
        ...
        'marketing_permission_id' => 'YOUR_PERMISSION_ID', // from Mailchimp audience settings

Replace:

  • YOUR_API_KEY - your Mailchimp API key found under profile -> extras -> api keys
  • YOUR_LIST_ID - the ID of your Mailchimp audience found inside your audience settings
  • (optional) YOUR_PERMISSION_ID - found under Audience -> Settings -> GDPR fields

Studio page 5 features a pop-up newsletter modal that shows up when the user scrolls a certain distance down the page. To modify this distance open the main.js file and look for the following code:


        // NEWSLETTER MODAL
        function showScrollModal() {
          const scrollY = window.scrollY || document.documentElement.scrollTop;

          if (scrollY > 3500) { // trigger once after 3500px
            const myModal = new bootstrap.Modal(document.getElementById('newsletter-modal'));
            myModal.show();

            // remove listener so it doesn’t fire again
            window.removeEventListener("scroll", showScrollModal);
          }
        }

scrollY > 3500 - sets the number of pixels a user has to scroll down for the newsletter modal to appear (currently set to 3500px).

NOTE: The contact and newsletter forms only work on a live site. You need to have the template uploaded to your server in order to test them.


Google Map

Adding your google map to the template is very simple, open any HTML page that contains a map in your text editor and scroll to the bottom of the page to the scripts section and look for the following line:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Simply replace "YOUR_API_KEY" with your google maps API KEY

NOTE: If your API key is restricted make sure you add your website to the whitelist!

Styling your map

You can style your google map by using the "Map Styles" menu inside the Google Maps Platform. You can create an new style and assign it to your maps through the "Map Management" menu.

Once this is done take your map ID and open the main.js file of your template and look for the following code:


            async function initMap() {
            // Location: New York
            const position = { lat: 40.6700, lng: -73.9400};
            // Request needed libraries.
            //@ts-ignore
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

            // The map, centered at Uluru
            map = new Map(document.getElementById("map-canvas"), {
              zoom: 12,
              center: position,
              mapId: "e3d88613c2783df91546b327",
            });

            // Map marker
            const marker = new AdvancedMarkerElement({
              map: map,
              position: position,
              title: "Office",
            });
        }

Here you can set the positional coordinates of your map with const position, the zoom level and you can paste your mapId to import your map style.

Lastly you can name and customize your map marker. More info on map markers can be found here.


Age Checker

STIRDER features an age checker which will pop up when a user first enters the page, if the user passes the age check the script will store a cookie in local storage to remember the user for 30 days so the age checker doesn't show up again for that user. This works even if cookies are blocked by the browser since local storage is allowed.

The age checker is only used on the Game Page Style Templates.

If the user fails the age check they will get a message and the page will remain locked.

In order to change passing age for the age checker simply open the single.js file inside the js folder and find the following code:


            if (age >= 17) {
                document.getElementById("age-checker-wrapper").style.display = "none";
                document.getElementById("age-checker-overlay").style.display = "none";
    
                // Save verified status with 30-day expiry
                setStorage("ageVerified", "true", 30);
    
                // Start animations after passing age check
                initAnimations();
            } else {
                result.innerHTML = `Sorry, you must be at least 17 years old to enter`;
            }

By default the passing age is set to 17 or above, simply change the age inside if (age >= 17) and change the "text-danger" message to reflect the new age you set.

NOTE: For the best results uploads the template to a server and test the age checker on a live site.


Disabling the Age Checker

If you want to disable the age checker follow these steps:

  1. Remove the age checker section from your HTML file
  2. Remove this line from the single.js file:
    3. 
    // Run Age Checker
    ageChecker();
  3. Inside the singe.js file find this section of code:
    4. 
        // TRIGGER ANIMATION WHEN ELEMENT IS IN VIEW ------------------------------------------------------------------------------------------------
        function initAnimations() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('in-view');
                    }
                });
            }, { threshold: 0.5 });

            // Observe all elements that should animate
            document.querySelectorAll('.animation-element').forEach(el => observer.observe(el));
        }

    Insert this line initAnimations(); at the end of the section like so:

    
         // TRIGGER ANIMATION WHEN ELEMENT IS IN VIEW ------------------------------------------------------------------------------------------------
        function initAnimations() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('in-view');
                    }
                });
            }, { threshold: 0.5 });

            // Observe all elements that should animate
            document.querySelectorAll('.animation-element').forEach(el => observer.observe(el));
        }
        initAnimations(); <-- line goes here after the curly bracket

    For Game Page Style 2 you can skip step 3.

CUSTOMIZATION

Changing Colors

The easiest way to change colors in the template is this:

  1. Open style.css in your text editor
  2. The colors used on each page are listed at the top of the file under the table of contents
  3. Copy a color code from the list (eg. #6734FF)
  4. Press Control + H (command + H on mac) to bring up the replace function in your text editor
  5. This will show a box with 2 input fields "find" and "replace"
  6. Paste the color code you just copied in the "find" field
  7. Paste your new color code in the "replace" field
  8. Click "replace all"

Alternatively you can press Ctrl+F to bring up a search bar and find each instance of the color code.


Social Media

If you want to control the way the posts look like when you share your pages on social media (Facebook, Instagram, Linkedin etc) don't forget to update the Meta Tags.

To add more social media icons simply browse the FontAwesome library and copy / paste your desired icons like this: <i class="fa-solid fa-circle-user"></i>

Add fa-lg or fa-2x inside class to make the icons bigger.


Image Overlays

Certain background images in every template (including the video) have an opacity filter over then to improve readability.

To change the value of this filter look for the background-image property of each image in style.css and edit the opacity value of the linear gradient (it can range from 0.1 to 1).

Some images use a single rgba instead of a gradient but the principle is the same.


    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../images/hero.jpg);

Example:

0.2 Opacity

0.8 Opacity


Animations

STRIDER features a simple to use animation system that allows users to add animations such as fade-in , slide-up, pop-in etc. to almost any element.

In order to animate a HTML element simply add animation-element to its class attribute followed by the desired animation like so: <div class="col-lg-4 animation-element slide-up">

Animations work on any element not just div but some elements may have code that prevents them from animating so use your own discretion (and feel free to contact support if you need any help).

In order to see all available animations or add new ones please refer to the animations.css file inside the css folder.

NOTE: Animations work on all templates except Game Page Style 2 which uses its own custom animations.


Hero Section Animations

The final type of animations we will discuss are the hero section animations of the "Animated" template style, these animations are controlled from the main.js / single.js files inside the js folder.

The code for the animation script looks like this:


            //HERO ANIMATIONS ---------------------------------------------------------------------------------------------------------------------------
            const slides = [
            {
                headline: "Ghost Modem",
                text: "Welcome to Takatoro city, where crime lurks behind every corner and allegiances change by the second.",
                image: "images/hero.webp"
            },
            {
                headline: "Into the Shadows",
                text: "Darkness spreads through the city, and you must decide who to trust before it’s too late.",
                image: "images/hero.webp"
            },
            {
                headline: "Choose Your Fate",
                text: "Every choice pushes you closer to freedom… or destruction. Will you survive Takatoro?",
                image: "images/hero.webp"
            }
            ];

            ....

            setTimeout(() => {
                // Change content
                headlineEl.textContent = headline;
                textEl.textContent = text;
                bgEl.style.backgroundImage = `url(${image})`;

                // Fade-slide in
                headlineEl.classList.add("show");
                textEl.classList.add("show");
            }, 600);
            
            ....

            // Cycle every 5s
            setInterval(() => {
            current = (current + 1) % slides.length;
            showSlide(current);
            }, 5000);

The script cycles through 3 different slides with a headline, description and background image.

In the first part of the script you can change the text and image of each slide, add more slides or remove slides.

The text of the first slide should be the same as in the HTML.

NOTE: The text for each slide should be on one single line.

✅ text: "Every choice pushes you closer to freedom… or destruction. Will you survive Takatoro?"

❌ text: "Every choice pushes you closer to freedom… or destruction.
Will you survive Takatoro?"

setTimeout lets you set the duration of the slide changing animation (by default 600ms).

setInterval lets you set the interval between slides (by default 5s)


Carousels

STIRDER features multiple bootstrap and splide.js carousels, we will now go over each type and how to customize it:

Hero Carousel

The template features two kinds of hero carousel: horizontal and vertical, the horizontal carousels auto-cycle while the vertical ones do not.

To set the cycle interval on a horizontal carousel simply open the main.js or single.js file inside the js folder and look for the following code:


        // HERO CAROUSEL PROGRESS BAR
        var carousel = document.getElementById("hero-carousel");
        var progressBar = document.querySelector(".carousel-progress .progress-bar");
        var interval = 8000; // Set features carousel interval

var interval lets you set the interval for the carousel. (by default 8s)


The vertical carousel also has some options available:


        var splide = new Splide( '#hero-carousel', {
            direction: 'ttb',
            height   : '100vh',
            wheel    : true,
            wheelMinThreshold: 50,
            arrows   : false,
        } );

The important options here for our purposes are wheelMinThreshold and arrows.

wheelMinThreshold sets how much you have to scroll to reach the next slide (feel free to experiment with different values).

arrows displays arrows for the carousel (currently turned off).


Game Page Style 2 Carousels

Game page style 2 features two carousels, one in the about section and one in the features section, the intervals for both carousels can be set from the single.js file inside the js folder.

The about section carousel the code looks like this:


        // About section gameplay carousel
        var gameplayCarousel = document.querySelector('#gameplay-carousel')
        var gCarousel = new bootstrap.Carousel(gameplayCarousel, {
            interval: 8000, // set gameplay carousel interval
            ride: "carousel",
            touch: true,
        });

The features section carousel code looks like this:


        // FEATURES CAROUSEL PROGRESS BAR 
        const carousel = document.getElementById("features-carousel");
        const interval = 8000; // Set features carousel interval

The Studio Style 2 game page carousel looks like this:


        var carousel = new bootstrap.Carousel(gamesCarousel, {
            interval: 8000, // set games carousel interval
            ride: "carousel",
            touch: true,
        });

Cookie Notification

If you want to disable the cookie notification pop-up simply open single.js or main.js amd careers.js files and remove this line showCookieBar();

ACCESSIBILITY

STRIDER is an accessibility tested and friendly template using different features to be as accessible as possible.

Different images, links and elements of the template have an alt or aria-label attribute attached to them.

The text inside these attributes serves the purpose of describing images or elements for screen readers, you will have to edit some of this text to fit you use case. (for example game images, social media links, links to game pages etc)

The easiest way to find alt and aria-label elements is using the search function of your text editor on your HTML files by pressing Ctrl + F or Cmd + F on mac.

Best practices for alt text are as follows:

  • Keep it short, usually 1-2 sentences. Don't overthink it.
  • Consider key elements of why you chose this image, instead of describing every little detail.
  • Example:
    • ✅ alt="Golden Retriever playing with a tennis ball"
    • ❌ alt="A beautiful image of a cute dog"
  • No need to say “image of” or “picture of.”
  • But, do say if it's a logo, illustration, painting, or cartoon.
  • Don't duplicate text that's adjacent in the document or website.
  • End the alt text sentence with a period.

More info can be found here.

You can test your page for accessibility here.

RESOURCES USED

Fonts - Raleway, Montserrat, Quicksand and Varela Round from Google Fonts.

Icons:

Illustrations:

Video - Gaming Setup by Atahan Demir on Pexels

Bootstrap 5

Glightbox

Subtlepatterns

Splidejs


SUPPORT

For any support questions or suggestions please feel free to email us at support@atypicalthemes.com

STRIDER Game Stuio Template by AtypicalThemes