Page Main 
main class="anita-main"
    ...
/main

Page Background

The only exception is the page background used on some content pages. This block is placed before the main class="anita-main"/ tag.

 Page Background 
div class="anita-page-background-wrap"
    div class="anita-page-background" data-src="img/background/about.jpg" data-opacity="0.07"/div
/div

 Page Main 
main class="anita-main"
    ...
/main

In the attribute data-src, you specify the URL to the image or the video file. If you use the video for the background, you also need to add the class is-video to the div.anita-page-background. And the attribute data-opacity is used to specify the background opacity value, where 0 - is fully transparent and 1 is 100% opacity.

Content Sections

For the fullscreen gallery layouts, the content is placed right inside the main class="anita-main"/ tag. More details about that, you can find in the Albums Listing and Album Posts chapters. But, here, we will consider the situation with simple content pages. So, here we will show you the basic markup for a regular content page.

 Page Main 
main class="anita-main"

     Page Container 
    div class="anita-container"

        section class="anita-section"
            ...
        /section

        section class="anita-section"
            ...
        /section

    /div
/main

All sections except the last one have a bottom spacing. If you need to use the section without bottom spacing, you can add the anita-section-no-spacing class. Also, you can adjust the bottom spacing with the following classes: anita-bottom-gap--none, anita-bottom-gap--small, anita-bottom-gap--medium, and anita-bottom-gap--large. These classes apply not only to sections but to any blocks. By default, values for these spacings are 0px, 40px, 80px, 120px. To know how to adjust them on your own, look to the Customization section.

Grid System

Our template uses its own Grid system. The grid block starts with div class="anita-grid".../div, and with the additional classes, you can specify columns pattern for the grid. Also, you can twice reduce the gap of the grid with the class anita-grid-small-gap.

div class="anita-grid anita-grid--2cols"
    ...
/div

div class="anita-grid anita-grid--3cols"
    ...
/div

div class="anita-grid anita-grid--4cols"
    ...
/div

div class="anita-grid anita-grid--33-66"
    ...
/div

div class="anita-grid anita-grid--66-33"
    ...
/div

Offsets

Also, you can use offsets for blocks where you want to add some side spacing.

div class="anita-offset-left--25"
     Adds 25% spacing on the left. 
/div

div class="anita-offset-left--33"
     Adds 33% spacing on the left. 
/div

div class="anita-offset-left--50"
     Adds 50% spacing on the left. 
/div

div class="anita-offset-left--66"
     Adds 66% spacing on the left. 
/div

div class="anita-offset-right--25"
     Adds 25% spacing on the right. 
/div

div class="anita-offset-right--33"
     Adds 33% spacing on the right. 
/div

div class="anita-offset-right--50"
     Adds 50% spacing on the right. 
/div

div class="anita-offset-right--66"
     Adds 66% spacing on the right. 
/div

Alignment

And one more useful thing. You can adjust inner alignment using the following classes:

div class="align-left"
 Left Alignment 
/div

div class="align-center"
 Center Alignment 
/div

div class="align-right"
 Right Alignment 
/div

Responsive Classes

For tablets, our template has custom classes to define the number of grid columns and offset options. When you add one (or more) of these classes, you will see the result when the screen resolution is less than 960 pixels wide. To change the number of grid columns for tablet screen size, you can use the following classes: anita-grid--tablet-1col, anita-grid--tablet-2col, and anita-grid--tablet-3col.

As for offset options, here's a table of useful classes:

div class="anita-offset--tablet-left--25"
     Adds 25% spacing on the left for Tablet. 
/div

div class="anita-offset--tablet-left--33"
     Adds 33% spacing on the left for Tablet. 
/div

div class="anita-offset--tablet-left--50"
     Adds 50% spacing on the left for Tablet. 
/div

div class="anita-offset--tablet-left--66"
     Adds 66% spacing on the left for Tablet. 
/div

div class="anita-offset--tablet-right--25"
     Adds 25% spacing on the right for Tablet. 
/div

div class="anita-offset--tablet-right--33"
     Adds 33% spacing on the right for Tablet. 
/div

div class="anita-offset--tablet-right--50"
     Adds 50% spacing on the right for Tablet. 
/div

div class="anita-offset--tablet-right--66"
     Adds 66% spacing on the right for Tablet. 
/div