Download Project
Note: Please Save before Download to update and store any currently unsaved changes.
All saved and uploaded projects can be viewed on the user uploads webpage.
Save time creating HTML markup & content.
Get started with a free user account to upload, edit, save and export (download) HTML templates and various web projects.
Sign In
Select any of the samples below to insert them into your HTML webpage. They can be added under the <body> tag.
Note: In some cases, a custom CSS styling may also be included which may lead to changes across the entire webpage.
Accordion (Black)
Stuff to show on expansion...
More Stuff to show on expansion...
Even more Stuff to show on expansion...
Et cetera...
An accordion expands and pushes content other content to display an item. It is different from a drop-down since a drop-down overlays/floats over other content.
Accordion (Gray)
Stuff to show on expansion...
More Stuff to show on expansion...
Even more Stuff to show on expansion...
Et cetera...
An accordion expands and pushes content other content to display an item. It is different from a drop-down since a drop-down overlays/floats over other content.
Accordion (White)
Stuff to show on expansion...
More Stuff to show on expansion...
Even more Stuff to show on expansion...
Et cetera...
An accordion expands and pushes content other content to display an item. It is different from a drop-down since a drop-down overlays/floats over other content.
Basic Button (Circle)
A circular button with the color blue (by use of 'w3-blue' css class).
On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class).
Feel free to customize it by using both CSS and class attributes using the HTML Editor.
Basic Button + Round Corners 1
A button with the color blue (by use of 'w3-blue' css class).
On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class).
'w3-round' class attribute is added to make it have rounded corners.
Feel free to customize it by using both CSS and class attributes using the HTML Editor.
Basic Button + Round Corners 2
A button with the color blue (by use of 'w3-blue' css class).
On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class).
'w3-round' class attribute is added to make it have rounded corners.
Feel free to customize it by using both CSS and class attributes using the HTML Editor.
Basic Button + Round Corners 3
A button with the color blue (by use of 'w3-blue' css class).
On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class).
'w3-round' class attribute is added to make it have rounded corners.
Feel free to customize it by using both CSS and class attributes using the HTML Editor.
Basic Button
A simple button with the color blue (by use of 'w3-blue' css class).
On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class).
Feel free to customize it by using both CSS and class attributes using the HTML Editor.
Navigation bar that can be placed at the top of a page. This nav-bar includes an accordion (drop-down like) menu making it suitable for various screen-sizes (responsive) especially with mobile devices.
Navigation bar that can be placed at the top of a page. This nav-bar includes an accordion (drop-down like) menu making it suitable for various screen-sizes (responsive) especially with mobile devices.
Navigation bar that can be placed at the top of a page. This nav-bar includes an accordion (drop-down like) menu making it suitable for various screen-sizes (responsive) especially with mobile devices.
A basic side-bar menu that expands from the left side of the page.
For proper use, this item will require the entire HTML page's layout to be arranged in a left-right manner.
Ensure that the expanded side-bar is not mixed with the actual page content.
Tabs (Horizontal)
Tab 1
This tab corresponds to the button 1 in the tabs
Tab 2
This tab corresponds to the button 2 in the tabs
Tab 3
This tab corresponds to the button 3 in the tabs
Tabbed content with usable tabs.
For example, Tab-1 will target Div-1. This will require you have an equal number of tab buttons and tab divs respectively.
Tabs (Vertical)
Tab 1
This tab corresponds to the button 1 in the tabs
Tab 2
This tab corresponds to the button 2 in the tabs
Tab 3
This tab corresponds to the button 3 in the tabs
Tabbed content with usable tabs.
For example, Tab-1 will target Div-1. This will require you have an equal number of tab buttons and tab divs respectively.
Beta Version: This is still a work in progress. Feel free to make suggestions or ask for any new (missing) HTML elements
Block Templates -Planned Feature ::: Add HTML templates e.g. image gallery, tabbed-container, auto-fit-window, etc
New HTML page
Insert page name or path e.g. index.html, blog/title.html
Select a page to duplicate
Select a page to rename
Select a page to delete
Saved successfully!
Provided below is a web link to view the saved project
Access & edit using the same web link : https://www.pagesection.com/editor/0-_bootstrap-3-hero-1-1
Use the toggle setting above to enable or disable public access to this editor project (web url link).
Private projects cannot be accessed by other users, the owner must be required to log-in to get access.
Public projects can be accessed, edited and or copied by other users of the editor using the same web url link.
HTML Editor projects are private by default. You can enable public access to allow other users edit this (HTML Editor) project using the same url web link. However, if the project is made public, changes you make to it will also be public. Other users cannot make public changes to a project (that they do not own) unless they save a personal clone/copy which they can also make private or public. You have the option to enable/disable public access to this project at any other time, as long as you are signed-in and authenticated as the owner of the project.
Save project changes?
This is important if you want to view/share a link to this project with updated changes.
Would you like to save & update changes?
