HTML Landing Page

To view current live examples of our landing page template please visit Tier 2 - Landing Pages.

Row 1

The current landing page template is made up of different rows which serve different purposes, and boxes within each row. The firs row will have either an image block and a text box, or it will have the image block taking up the entire row.

The image block with a text block beside it was originally set up to only accommodate a single image, but a slideshow can also be used here. The full image block was designed to make for multiple images, but may be used for one static as well, but is not recommended as such.

When making the landing page, everything is separated by <div>s with special classes. When beginning a new row you must encase the entire row in <div class="row"></div>

Boxes within each row are made up of two different <div>s. The not full image blocks are
<div class="medium-12 large-8 columns">
<div class="main-panel row1-box">
<img src="" alt="Static image (width: 730px by height: 400-500px)">
</div></div>

The medium-12 large-8 columns classes tell us how large the block should be and that it will become part of a column of blocks. The main-panel row1-box classes tell us what kind of content is within the block and what row the block should be associated with for sizing purposes. Each block in a row will be as tall as the tallest block so each row will have different row classes.

Responsive Slider

The entire slider is encased within three sectioning <div> tags which just set the slider up as a whole. Each image that you will want within it will have its own section to put them within any order you like. Totally it will look like this:
<div class="row small-collapse">
<div class="large-12 columns">
<div class="slider">
<ul class="rslides">
<li><img alt="slide 1" src="path_to_image1.jpg" />
<div class="caption">
<h2><a href="#">Slide Heading 1</a></h2>
<p>Slide Caption 1.</p>
</div></li>
<li><img alt="slide 2" src="path_to_image2.jpg" />
<div class="caption">
<h2><a href="#">Slide Heading 2</a></h2>
<p>Slide Caption 2.</p>
</div></li></ul></div>

It is actually an unordered list that makes up the slider and gives it the ordering choice that you would prefer. Each image is then in a <li> tag to place within the slider, adding more of these will ultimately add more images into the slider. After the image you will notice a new section encased under the <div class="caption">. This allows for captioning of your images when they are in the slider. This is completely optional, but highly recommended. You can provide links here or just language to enhance your pictures and the look of your site.

Row 2 and 3

The second and third row boxes are all for content. Each one of the blocks can have plenty of text, links, and even link buttons which we will get to later down the page. Now for the second and third rows you will need another <div class="row"></div> to put everything in. The first <div> for each box can be the same as this will only indicate the size of the box as <div class="medium-4 columns">.

It is important to note that the content boxes have two different class options. They can either be class="medium-12 large-4 columns" or class="medium-4 columns". The difference between the two is how they will be sized when in a tablet sized viewing window. In the tablet view the class="medium-12 large-4 columns" will jump out of its row and become the entire width of the space, and then size down from there. The class="medium-4 columns" will stay in the smaller size until getting to a mobile sized viewing window where every block will then be the same size in one column.

Core Message

Each landing page should have one of their blocks being their "core message block." This is designed to give you a space specifically for stating who your page is representing. To further illustrate this you can see from the image on the left that there is the MSU flame in the background for added effect. It is possible to use it for additional content that you wish, but that is what it is designed for. To see where these are placed within the current template see the Tier 2 - Landing Pages and options under there.

To make a block appear with the flame behind it, the id="core" and the class core-panel must be associated with the inner <div> for the block. The code for the block would then appear as such:

<div class="medium-12 large-4 columns">
<div class="core-panel row1-box" id="core">
<h2 class="subheader">This is an example header</h2>
<p>This is some example text</p>
</div></div>

Wide Box

In an effort to add a little more customization to the landing pages you can also combine two of the column blocks within the same row into one. This makes for one larger space instead of two smaller ones. If you have information you would like to have on your landing page, but it is a little long to put into the smaller blocks then this is a great option to solve that issue.

To make a block like this the outer <div> must have one of its associated classes be large-8. This will make it so it will be the two column width when in a desktop sized browser. An example of how this would look:

<div class="medium-12 large-8 columns">
<div class="panel row1-box">
<h2 class="subheader">This is an example header</h2>
<p>This is some example text</p>
</div></div>

MSU Button

The new MSU button can be found on just about every landing page with the new template. This has been designed to allow you to highlight links that you would like people to click on. This is not to say that you can't have normal text links, and this certainly doesn't mean that every link on your landing page should be a MSU button link. The MSU button is to most easily direct people where they should be going to from the landing page. A MSU button may be used on pages other than the landing pages as well. The code for the button looks as such:

<div class="msu-button">
<p><a href="www.path/to/the/site.html">Button Option</a></p>
</div>

CSS Classes

row - defines a row of blocks
slider - defines the responsive slider
rslides - defines the list ordering of the images in the slider
caption - defines the captioning of the image in the slider
large-4 - defines a small block size in a desktop sized browser
large-8 - defines a medium block size in a desktop sized browser
medium-4 - defines a small sized block in a tablet sized browser
medium-8 - defines a medium sized block in a tablet sized browser
medium-12 - defines a large sized block in a tablet sized browser
main-panel - defines a block that is used for an image
core-panel - defines a block that has the flame in the background
panel - defines a normal block
row1-box - defines a block being in the first row
content-box - defines a block being in the second row under row1-box row
rox3-box - defines a block being in the third row under content-box row
columns - defines the padding within the block to make columns of content
subheader - defines the style for a heading within a block
msu-button - defines the styles for a MSU button