Each template is divided into the following sections and subsections:

• Hero Section

• About Section

• Media Section

• Features Section

• CTA Section

• - Newsletter

A section looks like this:

                        
    <div id="about-section" class="large-margin">
        ...
        ...
        ...
    </div>
                        

The "large-margin" class sets the bottom margin of the section.

You can customize section margins individually, these margin classes can be used to modify the bottom margin of each section:

• tiny-margin
• small-margin
• medium-margin
• large-margin

The value for each class varies by template and you can change the value of each margin class by going into the style.css file.

!Note that the em and rem values in this template are calculated for a 16px base font-size!

You can change the base font-size of the template by opening style.css and navigating to the "body" class.

CUSTOMIZATION

---

Changing Colors

The easiest way to change the main color of the template is this:

1. Open style.css with your preferred text editor;

2. Press Ctrl+F (Cmd + F on mac) on your keyboard to bring up the search bar;

3. Type "highlight" into the search bar, it should take you to a line with a color code like so:

                               
       .highlight {
           color: #d71414;
           }
                               

4. Copy the color code (in this case #d71414;), press Ctrl+F once again to bring up the search bar and paste the color code in there;

5. This should highlight all the instances of that color inside the style.css file.

6. Now you can just replace the color codes with your preferred hex color.

Alternatively in some text editor programs you can press Ctrl+H to bring up a search & replace bar in which you can paste and replace the hex color codes.

Cookie Notification Popup

The template features a notification pop up that informs users if your site uses cookies.

The pop-up is enabled by default in every template.

In order to disable the notification we simply need to open the arsnl.js file inside the js folder and look for the following lines:

Now simply delete or comment out the code (by adding // in front of each line).

Discount Bar Popup

As of version 1.1 ARSNL Also features a discount bar notification pop up, It can be disabled the same way as the cookie notification pop up by finding and commenting out the following line of code inside arnsl.js like so:

                        
    //showDiscountBanner();
                        

Setting up embedded videos

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

<a href="https://www.youtube.com/watch?v=JaWnEbAsFmc" class="glightbox play-button" aria-label="Watch the ghost modem trailer"> <!-- Your video goes here -->
    <img src="images/play-button.svg" class="img-fluid" alt="Play Video">
    <h2>WATCH TRAILER</h2>
</a>                       
                    

You simply 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 use this code instead:

<a href="https://www.youtube.com/watch?v=JaWnEbAsFmc" class="play-button" target="_blank" rel="noopener" aria-label="Watch the ghost modem trailer"> <!-- Your video goes here -->
    <img src="images/play-button.svg" class="img-fluid" alt="Play Video">
    <h2>WATCH TRAILER</h2>
</a>                       
                    

This will open the video in a new tab allowing it to play.

Social Media

If you want to control the way the posts look like when you share the landing page on social media don't forget to update the Meta Tags at the top of the index.html

To add more social icons in the footer please the footer section in the index.html file accordingly and add your preferred icons from the FontAwesome library.

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 linear gradient value (it can range from 0.1 to 1)

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

Example:

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 green 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/media1.webp" class="glightbox" data-gallery="game-1">
        <img src="images/media1.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/media1_large.webp" class="glightbox" data-gallery="game-1" aria-label="Angry dragon growls at ironclad warrior"></a>
    <a href="images/media1_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.

ACCESSIBILITY

---

ARSNL 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 - Montserrat, Mulish, Quicksand, Noto Sans and Anurati Free Font by Emmeran Richard

Icons - FontAwesome

Bootstrap 4

Glightbox

Bootstrap Validator

Subtlepatterns

JQuery 3.4.0