Moderna

Yet another framework to build landing pages faster with minimalistic design. With pure HTML and CSS, a bit JS without any third party libraries


More info

About Moderna framework

There are many web frameworks on the net, but every new idea has a chance to come true. This framework is built to create landing pages using pure HTML, CSS, JS without any third party libraries. The framework is published under the MIT license and it's free to use.

Components

Use prebuilt component to design your content

Horizontal and Vertical Cards

card image
Horizontal card

This is horizontal card with image and action button. The block is responsive and will be vertical on mobile view and horizontal on large screens. Also has shadow effect on mouse hover.

Action button

card image
Horizontal card

This is horizontal card with image and action button. The block is responsive and will be vertical on mobile view and horizontal on large screens. Also has shadow effect on mouse hover.

Action button

card image
Vertical card

This is vertical card with image. The block always vertical. Has shadow effect like horizontal card, but title is aligned in center.

card image
Vertical card

This is vertical card with image and action button. The block always vertical. Has shadow effect like horizontal card, but title is aligned in center.

More info

card image
Vertical card

This is vertical card with image. The block always vertical. Has shadow effect like horizontal card, but title is aligned in center.

Testimonial

Muhammad (author)

Use this component to share your customer's opinion on the product. It grabs attention and builds confidence. Please use real photos and names, and only honest reviews.

Moderna framework

I'm another framework to build landing pages with pure HTML and CSS, a bit JS without any third party libraries.

Accordion

Use this component to answer frequently asked questions from your users

  • How to use this framework?

    Thank you, that your interested on it. You can download source code from github page. If you are starter on front-end, you can just copy&paste prebuilt components to your file or modify current file. For next steps look How to start? section.

  • How much it cost?

    It's totally free. MIT license means:
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

  • Why it has few component?

    The main goal of creating this framework is to simplify the creation of landing pages without heavy external libraries and dependencies. Therefore, the most popular components have been implemented. Also, do not forget that there are not only those mentioned above, but also this page itself was created using the same framework. Check out what other non-listed components are available. This is the navigation menu, footer, СTA and block with image and text.

  • How lightweight is the framework?

    It weighs less than 12 kb. It has only 2 .css and .js files.

  • Who is author?

    Thank you for not forgetting about the author. It is written about in the next block.

About author

Hi, my name is Muhammad. I'm more than 5 years in programming field. Also I have more than 3 years experience on web front-end development.

I have many ideas for digital products and always need to create landing pages on protyping process to validate idea and check demand. I used many tools to build landing pages, but they have so many unnecassary parts and unused code. Because of it page will be heavy and loads long time.

So I decided to build my own lightweight framework with only necessary components.

How to start?

Just download CSS and JS file from official github repository or clone it. If you like it, don't forget mark with star the repository:)

Github Page

Made by Moderna