Success Page Html Template

Posted onby admin
Update: you can show message boxes with only CSS instead of using the i icon HTML element. Both ways are explained here. (Skip down to the pure CSS solution.)

A collection of 209 One Page HTML templates. Each template includes a review, long screenshot, live demo and download links. These HTML templates require a small amount of coding skill. If you need a content management system, I recommend browsing One Page WordPress Themes. These windows slide down into view on top of the page and come with an array of color choices. These can be used for errors, warnings, success messages, or just basic informational content. Best of all the alerts are easy to customize within this pen so you can make some edits, demo your changes live, then copy/paste the code right into your page.

Success Page Html Template

These message notification boxes use font icons instead of image icons in order to increase page speed. You can also use message boxes without icons. The style of these message boxes is square, but there are style variations below. If you prefer rounded borders, see the variations, below.

This page shows you how to use message notification boxes that look like this:

Html
This is a success message.
This is an error message.

This page has 3 examples for notification message boxes. Example 1 shows you how to display message boxes with icons, in which you’ll have to use the i icon element in your HTML. Example 2 uses pure CSS to display the icons. Example 3 is for message boxes without icons (simple, color-coded message boxes, no icons). For fastest page speed, use Example 3.

Success Page Html Template

Example 1: Message Boxes With Icons, Using The icon HTML Element

To use message notification boxes, use this CSS:

Please note that the CSS imports the Font Awesome stylesheet. If you already have Font Awesome included somewhere in your site, you can delete line 1 above.

The HTML To Generate The Message Boxes:

Four samples follow. In each sample, replace line 3 with your own message.

The blue info-message box:

The green success-message box:

The yellow warning-message box:

Payment success page html template free

The red error-message box:

Success Page Html Template

Example 2: Message Boxes With Icons, Use CSS to Generate Icons

You can generate the icons using the CSS :before pseudo element. This way, you don’t have to use the i icon HTML element as shown in Example 1. To do it this way, use this CSS instead:

Please note that the CSS imports the Font Awesome stylesheet. If you already have Font Awesome included somewhere in your site, you can delete line 1 above.

Now, generate an info message box by using the CSS class my-notify-info. Generate a success message box by using the CSS class my-notify-success. Generate a warning message box by using the CSS class my-notify-warning. Generate an error message box by using the CSS class my-notify-error.

The following sample HTML will show all four message boxes.:

You don’t have to use a div element. You can add the CSS class to any element, for example, a span element.

Example 3: Pure CSS Message Boxes With No Icons

Success Page Html Template Download

If you prefer the message boxes without icons, use the following CSS and HTML instead. The benefit to using these message boxes without icons is that you will not load the Font Awesome stylesheet, and thus have the fastest page speed.

The CSS:

The HTML for just the message boxes without icons:

Style Variations

One Page Html Template

You can use the following CSS style variations for all 3 examples above. The following CSS code lines should be inserted into the CSS code, above, for the example that you are using. If you’re using Example 1 or Example 2, above, insert this into line 6 of the CSS code above. If you’re using Example 3, above, insert this into line 4 of the CSS code.

Payment Success Page Html Template Free

  • CSS Style Variation: Rounded Corners

    If you want your message boxes to have rounded borders, insert this:

  • CSS Style Variation: Borders

    If you want your message boxes to have line borders, whether or not they are rounded, insert this:

  • CSS Style Variation: Box Shadows

    If you want your message boxes to have a bit of shadow around the box to show depth, insert this: