Norman, by Alex22sv

Norman is a website template with multiple features. The name inspired by the character Norman from "The Promised Neverland".

Header

You can customize your own header. The name displayed on the left with the navigation options on the right. You can add a dropdown option and CTA (call to action) button.

How to use

1. Add a header tag with ID main_header.
2. Inside, add the title tag (h1) with class header_title.
3. For navigation, add a nav tag with class header_nav. Inside, add the ul tag with class header_nav_ul.
4. For each option, add a li tag, inside an a tag (for links) with class nav_a.
5. For active pages, you can also add the class nav_active to the a tag.
6. To add submenus, inside the li tag, add an a tag (When hover is triggered, the submenu will be displayed) and a new ul tag.
7. In the new ul tag you'll add all the sub options. The active sub option layout can be added with class nav_submenu_active.
8. For CTA buttons, you can add the class default_button to the a tag.

Elements

Elements like p, bold, strong, i, em, sup, sub, u, code and a don't need classes or IDs to apply the layout. Blockquotes and preformatted codes (just add a code tag inside a pre tag) tags don't need classes or IDs to apply the layout.

Features

You can add your own features with representative icons, descriptions and CTA buttons.

How to use

1. Add a section tag with ID features.
2. Inside features a title tag with class features_title to add your title.
3. Next to the title, add a div with class features.
4. For each feature, add a div inside features with class row.
5. Inside each row, add two divs, one with class feature_icon and the other one with class feature_section (no matter the order, it's automatically interleave).
6. Inside each feature_icon add an i tag and use Font Awesome classes to add the icon.
7. Inside each feature_section add your desired text.

Tables

You can add your responsive tables. With an alternative design which has a hover feature on each row.

How to use

1. Add a div with class table_wrapper
2. Inside the wrapper, add your table elements as you usually do, to add the layout you don't need to add extra classes to the table head, body and footer.
3. If you want an alternative design with hovers for each row, you can add the class table_alt to the table tag.

Lists

You can add your own lists: in order, without order (with alternative layout) and icons (with alternative layout).

How to use

1. Default lists don't need extra classes to apply the layout, you just need the ul or ol element and then add each li element inside.
2. If you want to use the alternative layout for lists without order, use the class alternative_list.
3. If you want to add a list of icons, you need a ul tag with class icons and inside each li tag, add an a tag (if links needed) and i tag with class icon (for default layout) or alternative_icon for the alternative layout.

Buttons

You can add your own buttons with different layouts: big, small, default, fit screen width, buttons with icons and disabled buttons. Each button with an alternative layout.

How to use

1. If you want a list of buttons, you can use the tag ul with class actions_list.
2. To use the default button, use the class default_button (for default layout) or default_button_alt (for alternative layout).
3. To add big buttons use the class big_button.
4. To add small buttons use the class small_button.
5. To add buttons that fit the screen width, you can add a ul tag with classes actions_list and fit_list. Inside each list add the a tag with class default_button (for default layout) or default_button_alt (for alternative layout).
6. To add small buttons that fit the screen width, you can add a ul tag with classes actions_list and fit_list_small. Inside each list add the a tag with class default_button (for default layout) or default_button_alt (for alternative layout).
7. To add buttons with icons, just add an i tag with the Font Awesome classes before the text of the button.
8. To add disabled buttons use the class disabled_button.

Columns

You can add your own sections with multiple columns.

How to use

1. To add two columns, add a div with class columns_2, and inside add two divs with class column for each column.
2. To add three columns, add a div with class columns_3, and inside add three divs with class column for each column.

Forms

You can add your own forms.

How to use

1. The form tag doesn't need any classes to apply the layout.
2. To add two inputs (e.g. for names and emails) in the same line: add a div with class form_columns_2, and inside two divs (no class needed), inside each div add the input tag.
3. To add a select tag, add a div with class select_wrapper, inside the select tag and option tags (no class needed).
4. To add radio and/or checkbox inputs, add a div with class input_list, you can add a label inside if you want. Then add divs for each input and label (no class needed).
5. To add submit and reset buttons, add an ul tag with class form_buttons_list, inside each li element, add the inputs with submit types, and classes default_button or default_button_alt.

Sidebars

You can add documents with sections on the left and right sides.

Left sidebar

How to use

1. Add the class left_sidebar to the div with the class main_wrapper.
2. If you want to add a banner, add a div with the class main_banner that takes 100% width;
3. To add the main section, inside the main wrapper add a div with class main_sidebar.
4. To add the aside section, inside the main wrapper add a div with class aside_left.

Right sidebar

How to use

1. Add the class right_sidebar to the div with the class main_wrapper.
2. If you want to add a banner, add a div with the class main_banner that takes 100% width;
3. To add the main section, inside the main wrapper add a div with class main_sidebar.
4. To add the aside section, inside the main wrapper add a div with class aside_right.

Images

Gallery

You can add your own images as a gallery collection. Images are automatically aligned and change size depending on the screen size.

How to use

1. Create a div with class gallery.
2. For each image, add a div with class gallery_item.
3. Inside each item, add the img tag.

Align paragraphs and images

You can add your own sections which can include images, and the paragraphs align next to the image.

How to use

1. Inside the paragraph (where you want to add the image), add a span tag with class side_img and side_img_left (for images on the left) or side_img_right (for images on the right). Inside the span tag, add the img tag.

Footer

You can customize your own footer. Adding an icons list (e.g. for social media), links (e.g. ToS, privacy policy, etc.) and the legal section. .

How to use

1. Add a footer tag with ID main_footer.
2. If you want to add a social media list, add an ul tag with class footer_social_media. To add the icons, add a li tag, inside an a tag (for links) and add the class icon or alternative_icon plus the Font Awesome classes.
3. To add footer links, add an ul tag with class footer_links. To add the links you don't need extra classes to the li or a tags.
4. To add the legal section, add an ul tag with footer_legal. Inside, add the li tag and the information you want to add.