Mood Board Website Template
In the development of the template were used:
- Bootstrap 4;
- CSS Animation;
- JS Animation;
- Fancybox gallery;
- Horisontal Scrollbar gallery;
- Google form.
The template is fully responsive and will look correct both on computer screens and on the screens of tablets and mobile devices. You can use this theme as a portfolio of your work in any service industry (design and photography, business, fashion and beauty, sports, travel, real estate, etc.).
The template is made in a minimalist style and consists of a home page, a page about your team (or company), a gallery page, and three options for pages describing your project (product or service that you provide).
Home page (index.html):
The main page is divided into logical blocks.
The first block: presents the main slogan of the company and a small description, as well as at the bottom there is a link that goes to a page about your team. This block has a background animation for changing pictures. You can replace them in the "img" project folder. (picture names: top-bg-img1.jpg , top-bg-img2.jpg , top-bg-img3.jpg - recommended size 2500 * 1400px).
The second block - Our projects: now three products have been added to the template, by clicking on which you will be taken to the product page (in the future you can add more products). Images for this section are in the folder (img - portfolio - project-img-1.jpg , project-img-3.jpg , project-img-2.jpg). Recommended image size 1000*1500px., but you can experiment with that.
Third block - Who we are: it is section is a summary of the history of your business and your team (links to social media).
Pictures for this block are in the folder (img - team - person-1.jpg , person-2.jpg , person-3.jpg), recommended image size 1000*1500px. There is also a link to the page about your team at the bottom of the section.
Fourth logical partition - Mood board: you can place some text here, and a board with images. Images for this block you can find in the folder (img - bord-gallery). Recommended image size 600*600px. At the bottom there is a button that goes to the gallery page.
Fifth section - Contact Us: this is the section with the contact form and contact information.
The site has a google form, you don't need a server to use it, which is very convenient. The form is attached to your Google account and letters will be sent to your gmail and, plus, will be saved in the Google table.
The form submit script is located in the "google-form" folder. The script itself does not need to be changed.
To set up the form, you need to go through several steps, below I will add a link to an article where it is written in detail what to do. As a result, you will receive a link, which you just need to add to html form (...action=" insert link here "...)
Sixth block - gallery with horizontal scrolling effect: шmages for gallery in folder - (img - gallery-scroll), for correct display use pictures of the same height.
At the bottom there is a button that goes to the gallery page.
Gallery page (gallery.html):
Pictures for this page in the folder (img - gallery-page).
Team page (team.html):
Pictures for this page in the folder (img - team).
Projects pages - (simple-project.html , minimalism-project.html , idea-project.html):
These are three options for pages for your projects, you can choose some one or leave all three.
The structure of all pages is similar, it includes the title, main image, project information, and images.
Features: Responsive, Bootstrap, Mobile Layout Included, Team Members, Light Template, Dropdown Menu, Blog, Gallery, Portfolio, HTML 5, JQuery, HTML plus JS
Gallery Script: Gallery, Grid
Template Software Required: Code editing tool, Code-editor, Code editor
tags: animation, art, beauty, bootstrap, business, company, design, fashion, gallery, minimalism, mood, photography, portfolio, responsive, site, team, blog, html, black and white
Topic: Art & Culture, Design & Photography, Business & Services, Fashion & Beauty
For Any Business
1 200 000+