Header
The header comes with multiple possibilities of integration. For the background you can choose between a video or an image, you can add filters on top of that (colour filters of gradient filters) and then add your text description. You can see below a coded example of a header with and image background, gradient filter and text.
<div class="section section-header"> <div class="parallax pattern-image filter filter-color-black"> <img src="assets/img/startup.jpg"> <div class="container"> <div class="content"> <p><span>by </span>Creative Tim<p> <h1>Play It!</h1> <div class="separator-container"> <div class="separator line-separator">♫</div> </div> <h5>Upgrade your startup presentation</h5> </div> </div> </div> </div>
Inside the element with the "parallax" class, we have the "filter" class that works together with the "filter-gradient-[black | gold | green | blue | purple]". You choose the number from 1 to 5, and see which one suits you best. Besides the gradients, you can choose between multiple colours to add over the image by using the class "filter-color-[black | gold | green | blue | purple]".
The element that contains the text has a specific code that creates an animation on scroll. If you don't what to use the given animation, you should remove the "add-animation" class.
The element with the "separator" class has an icon that separates two text areas. This separator and also be given the class "line-separator" to add a line to the left and right of the icon.
General Description
This is the section where you can add the company/agency/personal description. It can contain text, text with and image of text with a carousel of images. You can see below a coded example of a description area with text and carousel.
<div class="section section-we-are-2" id="whoWeAre"> <div class="text-area"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="title add-animation"> <h5 class="text-gray">Est. 2015</h5> <h2>Find your <br> headphones.</h2> <div class="separator-container"> <div class="separator line-separator">♫</div> </div> </div> </div> <div class="col-md-7 col-md-offset-1"> <div class="description add-animation animation-1"> <p>[text]</p> <p>[text]</p> </div> </div> </div> </div> </div> <div id="carousel"> <!-- example with carousel in startup.html --> </div> <!-- you can also have a simple image here, example in agency.html --> </div>
The wrapper for this area is the general class called "section". If you want to use it without the animation, please delete the class "add-animation" from the elements.
Company Description
This is the area to present what you do with your company/startup or agency. You can choose between simple text areas and areas with icons and text.
To use the option that contains only text, you should use the class "section-we-do-1". You can see the examples here and here.
Here you can find the all icons that are available. See all icons.If you want to go with the option icon + text, you should use the class "section-we-do-2". You can see the examples here and here.
Projects Area
This is the area where you can present your work to the audience. We have created a class called "section-with-hover" that features the image of a project you or your company has built, and on hove it shows the title and a text preview.
The first option for the project makes use of the class "section-we-made-1" and you can see and example with 6 projects here and with 4 projects here.
Another option is using horizontal scrolling to showcase multiple projects, with the class "section-we-do-2", like you can see here with the use of "section-we-do-2". Or you can display the projects with spaces in between them, with the class "section-we-do-3", like you can see here.
Regarding all options for the section: you can more information about a project by adding an extra layer that opens up and offers an extensive description. This area is created outside of the "wrapper" class and has the same id with the project in the area. You can see a coded example below.
<!-- button that activates the project --> <button class="btn btn-neutral" onClick="rubik.showModal(this)" data-target="project_1" > More Details </button> <!-- the code for the project that will be displayed. IMPORTANT: this code MUST stay outside of the div with the class "wrapper" --> <div class="project-content" id="project_1"> <div> <div class="project-details"> <span class="icon-close"><i class="pe-7s-close-circle"></i></span> <div class="container"> <div class="project-title"> <h2>Watch Anish</h2> <div class="separator-container"> <div class="separator line-separator">♦</div> </div> <p>We've been working with Watch Anish since the beginning. We are proud that they enjoy our results</p> </div> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="article"> <div class="project-image"> <img src="assets/img/projects/agency_6.jpg"/> </div> <div class="project-text"> <h3>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce<span>.</span></h3> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress.</p> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress.</p> <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.Celery potato scallion desert raisin horseradish spinach carrot soko<span>.</span></p> </div> </div> </div> </div> </div> </div> </div> </div>
Testimonials
We created multiple options to showcase what your clients/users/media is saying about what you do. To add them, you can use the class "section-clients-1", which uses compony logos. The result looks like you can see here. Or you can use "section-clients-2" and add tabs for clients, like you can see here.
Team Description
This is where you let people know more about your team. We have several options for you to do so. You can use the class "section-team-2", like you can see here in an example with 4 people. Alternatively, you can use the class "section-team-3", like in this example with 3 members. Or you can go for the class "section-team-4", that looks like this.
Statistics Area
This is the are that has all the numbers: you can write here the number of satisfied customer, locations, completed project, or any metric tat bring valuable information for the person reading it. If you want a simple area with white background, you can use the class "section-numbers-1", like you can see here. To use it with an image with the parallax effect, you can use "section-numbers-2", to get this result. Or you can use "section-numbers-3" to have a static image, like you can view here.
Contact Us
The contact area gives you the possibility to show more information about your location and ways to get contacted. it is also a good place to let people get in touch with you.
We have created an option with a map on the left and contact form on the right, like you can see here. The class you will need to use is "section-contact-1". Another option features a bit form for contact on the middle, like the one used here, built with the class "section-contact-2". Or you can use the class "section-contact-3" to create an area with a map on the background and address on the left; you can see an example here.