What do you want to create?

Menu and Hero block 1

A single-column header layout with the option to include images and videos.

Menu and Hero block 2

A single-column header layout with a background image.

Menu and Hero block 3

A single-column header layout with a background video.

Menu and Hero block 4

A two-column header layout with an image or video.

Single column

The simplest layout. Just a single column of content, left to right across the screen.

Two-column split

Text in one column and an image or video in the other. A widely-used layout.

Three columns

Three side-by-side columns of content. Can include images and icons.

Four columns

Four side-by-side columns of content. Can include images and icons.

Contact form

A basic form with Name, Email and Message fields. Add a FormID from Formspree or similar.


A single-column footer with various navigation links and social media contact points.

Files you need to download

You will need to download the following four files:

 The lunevedy.css stylesheet that contains the default CSS classes. This CSS file makes extensive use of so-called custom properties or CSS variables.

 The custom.css stylesheet you will use to amend your web page design according to your requirements.

  The menu.js JavaScript file.

  The index.html 'getting started' web page, which has links to the above CSS and JS files.

This index.html web page also includes some sample semantic HTML mark-up tags and has links to three icon sets: Font Awesome, Line Awesome and Google Material UI.

How to use the Lunevedy UI builder

For each website project you want to build:

  • Create a new project folder and download the 'getting started' index.html web page to it. folders-1
  • Create two sub-folders, named 📁 assets/css and 📁 assets/js, inside your project folder.
  • Download the two lunevedy.css and custom.css stylesheet files and the menu.js JavaScript file to your sub-folders. folders-2

Choose the web layout you want to create from the options above, and then use the app's menu options to style your web page.

copy html

At the bottom-right of the Lunevedy app screen, you can see two buttons:

  • HTML: Use this to copy-and-paste the HTML content into your index.html web page. copy html
  • CSS: Use this to copy-and-paste the CSS styles into your custom.css stylesheet. copy html This CSS button is enabled only if you have added your own CSS styles. folders-1

The placeholder assets

The Lunevedy app links to several placeholder images and video files to help you design your web layouts.

When creating your website projects, replace these assets with your own images and videos.

Also, remove any links to icon sets in the index.html file you are not using. And minify the lunevedy.css stylesheet so that web pages linked to it will load more quickly.

That's it. Happy web designing!