25% OFF First Invoice

Code at Checkout: CAVES

Typography

All Elements have dropdowns, you can copy code inside of dropdowns located bottom right.

Responsive Media

Includes Repsonive Images/Media Rows


Paragraphs/Images & Rows

Includes Repsonive Images/Text Rows


Lists

Includes Ordered and UnOrdered lists

Other/Banners

Includes BlockQuotes, Strong Texts, Code Tags, etc


Banners

Sales Banners


Classes

Includes Additional Customization Classes

H1 Title

P Tag Subtitle

This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.

<h1>H1 Title Goes Here</h1>
        <div class="sub-title"><p>Subtitle Here</p></div>
        <p>"Content Goes Here"</p>

H2 Title

P Tag Subtitle

This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.

<h2>H2 Title Goes Here</h2>
        <div class="sub-title"><p>Subtitle Here</p></div>
        <p>"Content Goes Here"</p>

H3 Title

P Tag Subtitle

This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.

<h3>H3 Title Goes Here</h3>
        <div class="sub-title"><p>Subtitle Here</p></div>
        <p>"Content Goes Here"</p>

H4 Title

P Tag Subtitle

This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.

<h4>H4 Title Goes Here</h4>
        <div class="sub-title"><p>Subtitle Here</p></div>
        <p>"Content Goes Here"</p>

Triple Text Columns

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.

<div class="row">
            <div class="span4">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.</p>
            </div>
            <div class="span4">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.</p>
            </div>
            <div class="span4">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.</p>
            </div>
        </div>

Double Text Columns

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.

<div class="row">
            <div class="span6">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.</p>
            </div>
            <div class="span6">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias exercitationem nulla ipsa, laudantium nobis non.</p>
            </div>
        </div>

Accordion

Lorem ipsum...

<button class="accordion-typography">Accordion Title</button>
        <div class="panel">
            <p>Lorem ipsum...</p>
        </div>

Responsive Media


Responsive Triple Images

<div class="row">
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
        </div>

Responsive Double Images

<div class="row">
            <div class="span6">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span6">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
        </div>

Responsive Single Images

<div class="row">
            <div class="span12">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
        </div>

Paragraphs with Images


Content with Image Right

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi ipsam ipsa ipsum? Ab laborum veniam sapiente deserunt molestias reiciendis culpa similique, vel sit! Explicabo libero fugit mollitia assumenda sapiente.

<div class="row">
            <div class="span4">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
            <div class="span4">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
        </div>
Content with Image Center

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

<div class="row">
            <div class="span4">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span4">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
        </div>
Content with Image Left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi ipsam ipsa ipsum? Ab laborum veniam sapiente deserunt molestias reiciendis culpa similique, vel sit! Explicabo libero fugit mollitia assumenda sapiente.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

<div class="row">
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span4">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
            <div class="span4">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
        </div>
Double-Wide Content with Image Left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

<div class="row">
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span8">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
        </div>
Double-Wide Content with Image Right

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

<div class="row">
            <div class="span8">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
        </div>
Double Wide Content with Image Right [SubTitle]
SubTitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

<div class="row">
            <div class="span8">
            <div class="sub-title">SubTitle</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
        </div>
Double Wide Content with Image Left[SubTitle]
SubTitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!

<div class="row">
            <div class="span4">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span8">
            <div class="sub-title">SubTitle</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum reprehenderit eius nihil tenetur minima aperiam, corrupti dolore quam aspernatur voluptatum tempore!</p>
            </div>
        </div>
Double Wide Image with Text Aligned Right

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum!

<div class="row">
            <div class="span3">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span3">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span6">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum!</p>
            </div>
        </div>
Double Wide Image with Text Aligned Left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum!

<div class="row">
            <div class="span6">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi itaque accusamus commodi magnam delectus earum totam quibusdam nostrum!</p>
            </div>
            <div class="span3">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
            <div class="span3">
                <img class="res-img-100" src="https://cdn.apexminecrafthosting.com/img/uploads/2020/12/25053659/survivability.jpg" alt="">
            </div>
        </div>

Lists


Unordered List

  • This is an Unordered List Item
  • This is an Unordered List Item
  • This is an Unordered List Item
  • This is an Unordered List Item
  • This is an Unordered List Item
<ul>
            <li>This is an Unordered List Item</li>
            <li>This is an Unordered List Item</li>
            <li>This is an Unordered List Item</li>
            <li>This is an Unordered List Item</li>
            <li>This is an Unordered List Item</li>
        </ul>

Ordered List

  1. This is an Ordered List Item
  2. This is an Ordered List Item
  3. This is an Ordered List Item
  4. This is an Ordered List Item
  5. This is an Ordered List Item
<ol>
            <li>This is an Ordered List Item</li>
            <li>This is an Ordered List Item</li>
            <li>This is an Ordered List Item</li>
            <li>This is an Ordered List Item</li>
            <li>This is an Ordered List Item</li>
        </ol>

Other


Strong Text

This is some content to prove that our content is the best. We can go on and on about how good our content but the rankings prove themselves. With content like this who needs to market.

<p><strong>Content Here</strong><p>
EM Text

This is some content to prove that our content is the best. We can go on and on about how good our content but the rankings prove themselves. With content like this who needs to market.

<em><strong>Content Here</strong><em>
Code Tag
/*This is a code tag*/
<code>
        /*This is a code tag*/
            #code {
                color: red;
                text-style: underline;
            }
        </code>
Code W/ Pre Tag
/*This is a code tag*/
            #code {
                color: red;
                text-style: underline;
                                }

The pretag wraps the code in a text/code box like you see on dropdowns

<pre><code>
        /*This is a code tag*/
            #code {
                color: red;
                text-style: underline;
            }
        </pre></code>
Inline code block
This is an inline code block
This is an inline <code class="inline-code">code</code> block
Blockquote/cite

This is a block quote about block quotesCited Here

<h6>Blockquote/cite</h6>
        <blockquote><p>This is a block quote about block quotes<cite>Cited Here</cite></p></blockquote>

Sales Banners


Start Your Minecraft Server

Get started with your own minecraft server in 5 min and start trying out these great features.

<div id="sales_banner">
        <div class="wrapper">
            <h2>Start Your Minecraft Server</h2>
            <p>Get started with your own minecraft server in 5 min and start trying out these great features.</p>
            <div class="sales_btn_container">
                <a class="button" href="/pricing">Checkout</a>
                <a class="button" href="/features/">More Info</a>
            </div>
        </div>
        </div>

Start Your Minecraft Server

Get started with your own minecraft server in 5 min and start trying out these great features.

<div id="sales_banner_alt">
        <div class="wrapper">
            <h2>Start Your Minecraft Server</h2>
            <p>Get started with your own minecraft server in 5 min and start trying out these great features.</p>
            <div class="sales_btn_container">
                <a class="button" href="/pricing">Checkout</a>
                <a class="button" href="/features/">More Info</a>
            </div>
        </div>
        </div>

Components


Table
Stat ID#In-Game Stat*
0Health
1Stamina
2Oxygen

    <table class="apex-table">
        <thead>
            <tr>
                <th>Stat ID#</th>
                <th>In-Game Stat*</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>0</td>
                <td>Health</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Stamina</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Oxygen</td>
            </tr>
        </tbody>
    </table>

Customization Classes


.float-left .float-right

floats any span left or right within the element.

.text-left .text-center .text-right

Assigns alignment to text.

.responsive-vid

Assigns the responsive video class

.res-img-100 .res-img-80 .res-img-50

Assigns width of image for resposiveness (for example res-img-80 is 80%) default images

.res-img

Assigns width/height: auto; and width: 100%; to the image. This class will give the image its original dimension.

.sub-title

Gives element sub-title appearance