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

<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

<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

<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.

<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.

<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

<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

<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

<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

<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

<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

<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!

<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!

<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

This is an Ordered List Item
This is an Ordered List Item
This is an Ordered List Item
This is an Ordered List Item
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.

Checkout More Info

<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.

Checkout More Info

<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*
0	Health
1	Stamina
2	Oxygen


    <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