A Simple Website Built from Material Design

This template is an example of a simple website based on the Material Design theme. It includes a landing page, an about-us page, a contact-us page and a pricing page.

Get started with the template by clicking the clone link below:

Open in Anvil

How it’s Built

The Main Form

The Main form contains the app bar at the top, an empty ColumnPanel and a Card at the bottom, which acts as a footer containing links and info about the company. The pages of the website are added as components to the empty ColumnPanel. This way, the app bar and footer will be on every page.

The Landing Page

The landing page consists of a series of Cards containing images and labels with information about the company. At the top of the page is a ColumnPanel with an image and a gradient overlay as the background. This effect is created by first uploading an image called “home-img.jpg” as an asset to the app and then adding a new role with the following CSS:

.anvil-role-home-header {
  background-image: linear-gradient(180deg, %color:Primary 500% 0%, %color:Primary 500%00 150%), url(_/theme/home-img.jpg);
  background-size: cover;
  background-attachment: fixed;
  min-height: 40em;
}

The header images on the landing page and the pricing page can easily be changed by uploading a new image under Assets and giving it the same name as the existing images. You can read more about styling Anvil apps with CSS in our documentation.

The Contact Us Page

The Contact Us page consists of a form so that customers can submit questions and comments. The TextBoxes, TextAreas and DropDown menus were modified to have a more stylized look befitting of the theme. When the submit button is clicked, the entries are stored into a DataTable and emailed to the app owner.

Get Started

You can check out the app and modify it yourself by clicking here:

Open in Anvil

Want to learn more about using Anvil? Check out one of our tutorials.

Data Dashboard

In this tutorial, you will learn to plot data using client-side Python code and deploy it online for others to see.
Go

Build Database-Backed Apps

In this tutorial, you will learn how to build a simple news aggregator app.
Go

Build a Simple Feedback Form

Build a data-entry app, and learn the techniques fundamental to building any Anvil app. In this tutorial, you will:

  • Write server-side Python
  • Build your User Interface
  • Write client-side Python
  • Store data in a database
  • Deploy your app
Go