Landing page template design. Landing page templates. Landing Page for coffee sales

» Free landing page templates WordPress - TOP 30

Specifically, this article will discuss the best landing WordPress templates that may be suitable for you. They will all include a screenshot and a demo version of the design so that you can evaluate the theme and immediately download it if you like it.

Very often, landing page templates for WordPress are distributed for a fee, but for you I have collected best and free in this article to make your search easier.

is a one-page theme that will help you create a website without much effort. On the other hand, it has a professionally drawn design, parallax scrolling, which allows us to call this theme “beautiful”. This template is suitable for startups and small businesses.

is a multifunctional WordPress theme. It includes a vibrant interface, classic parallax effect and other animations that make viewing the theme even more enjoyable. Zerif Lite is a cross-browser theme that is also well written in terms of code.

Alhena Lite is a free enterprise WordPress theme that is fully integrated with the WooCommerce plugin to allow you to easily set up your online store.

is a clean, simple business theme that is fully responsive and includes many of the popular features for easy creation site.

Palmas is a modern theme made in light colors, which is suitable for running a personal or fashion blog. This template also supports plugins such as Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache and many others.

Brasserie is a simple WordPress template that is perfect for a restaurant, cafe or culinary site. Includes animation effects, as well as a large number of functionality.

XT Corporate lite is a simple and minimalist theme that is suitable for a small product or service.

is a pleasant theme done in light colors. Includes various animations and visually stunning transitions and parallax effect. In addition, Freesia Empire supports plugins such as Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack by WordPress.com, Polylang, Newsletter, bbPress and WooCommerce.

is a topic that is suitable for the presentation of small or medium-sized businesses. It includes a huge number of functions and add-ons for complete management of the landing structure.

is a versatile theme with a lot of functionality. It is adaptive, all elements are animated with a parallax effect. One page is easy to customize and allows you to view changes in real time. The current landing theme also supports a large number of basic WordPress plugins.

FotoGraphy is a landing page that is suitable for photographers or designers. Simplicity and the presence of a large number of functions make it even more scalable and customizable.

Integral Theme is a one-page parallax theme suitable for creatives, business owners or agents. It will only take you a couple of minutes to set it up.

Square is a minimalist theme that can be used for any type of website. It is best suited for small and medium businesses. Square is configured for many popular WordPress plugins and is also SEO optimized.

Enliven is a high-quality theme. I would call it premium, as it combines quality and beauty in one bottle. It also supports many popular plugins and is easy to customize.

Latte is a template for photographers. It has everything so that you can adequately show your portfolio, as well as tell about yourself. The setup takes place in a couple of clicks.

The Monday is an elegant theme suitable for a business or freelancer. It comes with a large number of features and extras and add-ons.

Business World is a template that is related to business topics. It combines style and quality. Business world can also be customized for a personal, corporate or photographer's website. Its capabilities allow you to make almost anything you want out of it.

- This is a pleasant theme, which is made in light colors. It is perfect for small and medium-sized businesses, as well as for a personal website. You can customize anything you want in it. There are many features and additions that make this template even better and more attractive.

Onetone is a one-page template for WordPress that is suitable for presenting “I” on the Internet (show your portfolio and/or talk about yourself).

Arise is a minimalist one-page WordPress template suitable for a small product or small business. There is nothing superfluous in it, only everything that is most important.

Woot is a minimalist template made in dark colors for running an online store. It works with WooCommerce and many other popular plugins.

West is a simple theme suitable for an agency, small business or portfolio website. It includes a large number of functions, settings and arrangement of elements.

Anaglyph Lite is a simple and elegant template that is suitable for blogging and online stores. It is already configured with WooCommerce and other popular plugins.

is a nice theme made in dark colors combined with colored elements, which is suitable for presenting your business, portfolio or product. After following the link, click on “Download now” in the BeOnePage Lite block and you will download free version this topic.

is a one-page template that is included in the category: fitness, yoga, pilates, health club, and many others. etc. The style is made in dark colors, cross-browser, adaptive and works on all devices.

Aglee Lite is a simple corporate template designed in light gray and blue tones. This theme is perfect for a startup or small business.

is a powerful and functional business theme. It has a convenient editor that allows you to view changes in real time. Wimpie Lite is cross-browser compatible, responsive, and easy to load pages.

- it is multi-purpose WordPress theme, which is made in light colors and is suitable for a business website, personal portfolio or blog.

Want to buy landing template page? Why buy when you can download for free? You are in the right place! Here we have selected 36 of the most interesting free landing page templates from the English-speaking Internet. Simple and complex, modern and retro, minimalistic and sophisticated - all these landing page templates are unique, take a look and test them for yourself. And the best thing is that all these landing page templates are completely free!

Installing and using these templates is very simple and does not take much time. All that is required from you is and then install with the click of one button free template landing page. Using WordPress will give you a huge advantage because it is the most popular and secure in the world free CMS, which is used by sites such as the New York Times, information Agency Bloomberg, Forbes magazine, McDonald's and many other famous brands, as well as millions of businessmen and ordinary people around the world.

A landing page template is a one-page website template that is designed to sell a single product or service, does not contain a lot of information and does not overload the user with unnecessary content. The landing page templates selected in this article are very easy to manage, stylish, modern, beautiful, simple, adapted for mobile devices and in some cases are the best choice for SEO, usability and sales purposes.

A clean and creative WordPress landing page template for your business, created as a one-page website. This landing page template features smooth scrolling, parallax effects, and a stunning Pinterest-like store. Hestia is a great choice whether you use it for personal or business purposes. It makes no sense to buy a landing page if there is such a cool free landing page template!

Characteristics:

• adaptive design;
• compatible with WooCommerce and page builders;
• integration with the Sendinblue service (for feedback forms);
• SEO optimized;
• footer that can be changed using widgets;
• Live Customizer support.

More details Demo

Interactive landing page for WordPress with a full-width image and a simple white menu bar. The main colors are classic black and white, but some sections go from classic to brighter green, yellow or red. The Zerif Lite landing page template has seven menu categories that appear directly—without scrolling—when you click on them. The overall design is elegant and classic.

Characteristics:

• clean and verified code;
• theme settings panel;
• localization (full translation);
• responsive landing page template design.

More details Demo

Parallax One is a simple and elegant WordPress landing page template that can be used for any purpose. It comes with a clean and beautiful design created primarily for content placement. Stylish appearance This landing page template comes with a fancy parallax effect, hence its name. Parallax One has a store section, smooth scrolling and a modern look. Overall, this is a highly customizable WordPress theme.

Characteristics:

• responsive landing page template design;
• parallax effect;
• custom logos, icons and menus;
• different color schemes;
• many social icons;
• integration with Google maps.

More details Demo

A clean full screen landing page template for businesses with a full screen slider, smooth scrolling and beautiful animations. The template has a professional look, a widgetized footer and a simple design. You can use it for any purpose.

Characteristics:

• responsive layout;
• ready for translation;
• parallax effects;
• slider or static image of the first screen;
• social links;
• Google fonts.

More details Demo

Llorix One is an elegant and user-friendly landing page template for small businesses and startups. It has a professional yet memorable and positive design. Parallax scrolling makes it even more elegant and smooth. The template offers colorful fonts and buttons that make it even more fresh.

Characteristics:

• adaptive design;
• parallax scrolling;
• one-page landing page template layout;
• social links;
• custom ribbon;
• ready for translation.

More details Demo

Why buy a landing page template if there is a good simple landing page template for small businesses and agencies, with a beautiful, colorful design and elegant interface. It looks modern and provides fast scrolling parallax. Ember has beautiful icons and ribbons, as well as a clean look.

Characteristics:

• adaptive design;
• parallax effect;
• blog layout;
• minimalist appearance;
• one-page landing page template;
• multi-purpose design;
• social icons.

More details Demo

A beautiful multi-user landing page template for WordPress for business and corporate purposes, with a clean and minimalist design. The template is elegant, provides smooth scrolling, full-width slider, beautiful portfolio and beautiful layout.

Characteristics:

• adaptive design;
• unlimited colors;
• full layout control;
• custom shortcodes;
• custom typography;
• parallax scrolling;
• WooCommerce support.

More details Demo

Free multi-purpose landing page template with great modern design and full screen design. It has a full width slider, clean look and smooth parallax scrolling. Moreover, the Himalaya template provides a portfolio and colorful sections. Overall, the template looks friendly and professional.

Characteristics:

• adaptive design;
• social icons;
• custom menu;
• four custom widgets;
• amazing slider integration;
• parallax scrolling;
• change of colors.

Characteristics:

• adaptive design;
• readiness for translation;
• custom widgets;
• parallax backgrounds;
• customizable first screen;
• custom blocks;
• social network icons.

More details Demo

A stunning landing page template with a multi-purpose design that comes as a one-page landing page layout with elegant parallax scrolling. It has a modern and memorable interface, an online store and a portfolio. Overall, a beautiful template that will suit all your purposes.

Characteristics:

• adaptive landing page template layout;
• parallax effect;
• stylish slider;
• advanced post settings;
• multiple layouts;
• full customization.

More details Demo

A great WordPress landing page template for small businesses, online agencies and freelancers, with a one-page landing page layout and professional design. The template has smooth scrolling, friendly animation and parallax feeds. Latte also features a portfolio, blog, pricing tables, dropdown menu, parallax header, and sleek appearance.

This WordPress template under the landing page has a scroll slider in width and height and a black and white design. The sections are animated and appear as you scroll down the landing page. They contain well-organized and structured information so visitors can easily find what they need. The blog section has a separate page that is not included in the template's home page. Overall, Quill is a very interactive theme.

Characteristics:

• adaptive design;
• custom header;
• readiness for translation;
• custom widgets;
• animation;
• social media buttons.

More details Demo

If you have a small business and need a free landing page for your website, this could be an option. good choice! Featuring elegant parallax scrolling and some warm orange and white colors, this one-page WordPress template is a great way to promote your business. It also has a portfolio section and a blog.

Characteristics:

A fully customizable landing page template designed for any purpose. You can use it for a blog, business or portfolio website. ZBlackbeard provides a full-width static header and has a friendly and colorful design with great animations and interactive sections. Each feature, along with smooth parallax scrolling, gives this free one-page landing page template a modern and memorable look.

Characteristics:

• adaptive design;
• easy to set up;
• parallax effect;
• modern widgets;
• animation.

More details Demo

Zifer is a template created for photography websites. The template has modern look, photo galleries and photos in messages. It's more like a photo blog. Zifer has an elegant look, responsive layout, widgets and social icons. Whether you are a professional photographer or a hobbyist, this free WordPress landing page template may be what you need.

Characteristics:

• responsive layout;
• photo blog layout;
• optimized for social networks;
• modern widgets;
• easy customization.

More details Demo

An amazing and interactive free landing page template for any business. Its full-screen layout, great effects and animations make it impressive. Gaga Lite has colorful fonts and sections, as well as many modern features.

Characteristics:

• parallax scrolling;
• adaptive design;
• various fonts and colors;
• various layouts;
• price tables;
• SEO optimized;
• various widgets.

More details Demo

This is a one-page portfolio landing page template for WordPress. It has a fixed background image. Here you can add your portfolio, which will look like a photo gallery. In the top right corner, you can click on the menu and the sections will slide elegantly. The background image can be replaced with one you like better, and the navigation menu can be improved if you add your own sections.

A neat and minimalist landing page template for small online stores. It comes with a full-screen parallax header, a simple dedicated online store section, fast scrolling, colorful icons and buttons, and customer reviews.

Characteristics:

• Woocommerce compatibility:
• unlimited colors:
• adaptive design:
• ready for translation:
• blog layout:
• simple contact form with integration with Google maps:
• social links.

More details Demo

Great free one page landing page template for WordPress with YouTube video V background. You can also play relaxing music if you turn it on in the bottom left corner home page. When you click any menu item, the page will slide down and an alternate background will appear.

Characteristics:

• created using HTML5/CSS3;
• fully responsive design;
• full screen slider;
• YouTube video integration;
• ready for translation.

An excellent free one-page landing page template for business, with a modern and memorable design that can suit any website purpose - creative or corporate. The template has a one-page design, convenient full-screen layout, smooth parallax scrolling, beautiful and elegant appearance.

Characteristics:

• adaptive design;
• unlimited color variations;
• several banner/slideshow options;
• layouts suitable for displaying photos;
• parallax sections;
• The template is tailored for SEO.

More details Demo

The simple and colorful design of this one-page template is amazing. The main images in the main window are pictures that fill the entire screen on multi-colored backgrounds. You can find the menu bar under background image, and it consists of eight sections. The rest of the page is dominated by White background. Landing sections move smoothly from one to another.

Characteristics:

• easy template customization;
• parallax background;
• layout designer;
• more than 60 animation effects;
• more than 600 Google fonts;
• unlimited color schemes.

More details Demo

A modern and simple one-page landing page template for WordPress with a full-width background image and “moving” texts, making it memorable and interactive. The nuances of white, gray and yellow make it look friendly, and the menus slide one after another as you click on them. This theme is ideal for business websites.

Characteristics:

• adaptive;
• template customization;
• parallax background;
• ready for translation;
• Google fonts;
• animated text titles.

More details Demo

This is a complex and interesting one-page landing page template. First of all, notice the navigation menu, which looks great: alternating black and blue circles look like stylish dials. Category names animate and move when you click on them. Everything about this theme is interactive, playful and has pretty calm colors like blue, grey, white and brown.

Characteristics:

• built on Bootstrap;
• update notifications;
• Retina-ready;
• responsive layout;
• smooth scrolling;
• interchangeable colors.

A beautiful one-page landing page template for small businesses, with a modern and colorful design and full-screen layout. It has fast parallax scrolling and an elegant design. You can use it for creative or corporate purposes.

Characteristics:

• parallax effect;
• adaptive design;
• social icons;
• one-page landing page template;
• multi-purpose design;
• blog layout;
• minimalist look.

More details Demo

Free one page WordPress landing page template with parallax effects, advanced slider, eye-catching animations and a beautiful black and yellow color combination. This landing page template is modern and can be used for personal blogs, business websites or portfolios.

Characteristics:

Free rainbow colored WordPress landing page template for small businesses. Cuda is best for happy and joyful people. Each section has its own color and nice animation effects. This theme has a modern design.

Characteristics:

• responsive layout;
• static and dynamic slider;
• filtering sections and on/off sections;
• unlimited background colors;
• smooth scrolling;
• images may be used in each section.

A great landing page template for small businesses and startups that combines colorful fonts, icons, widgets, and animations. It comes with a full width slider, clean background and portfolio. This best template one-pager!

Characteristics:

• fully adaptive;
• price table;
• adaptive carousel slider;
• integrated font Awesome;
• integrated contact form 7.

A great modern landing page template for small businesses and startups. It has amazing parallax scrolling and it comes with colorful buttons and sections. ResponsiveBoat has a nice look and is compatible with WooCommerce. It was designed as a one-page template. Modern animation along with parallax make it even more elegant.

Characteristics:

• responsive layout;
• ready for translation;
• customizable background and menu;
• parallax scrolling;
• WooCommerce compatibility;
• social icons;
• custom content blocks.

More details Demo

Starter is a modern portfolio landing page template with full-size images and full interactivity. Created as a one-page landing page, it is optimized for those people who would like to make a name for themselves on the Internet and effectively promote their work. This is one of the best free one page templates!

Characteristics:

• clean design;
• flexible structure;
• SEO optimized;
• parallax scrolling.

Switch is a modern one-page WordPress landing page template for businesses and startups. It has a clean and professional look, with smooth scrolling and a full-screen slider home page. It has modern animations, widgets, a convenient contact form and social buttons.

Characteristics:

• adaptive design;
• type of portfolio entries;
• parallax effect;
• widgets and social links;
• created based on the Redux framework.

An amazing multi-purpose free landing page template that works for any business. It has a nice, cheerful and modern look, with a full-screen header, colorful elements and sections, and nice animations. Parallax makes scrolling smooth and easy.

Characteristics:

• fully adaptive;
• powerful customization options;
• video integration (YouTube and Vimeo);
• parallax effect;
• SEO optimized;
• price table;
• integration into social networks;
• support Google Maps and Contact Form 7.

A truly beautiful and elegant template for any business. It has a full-screen header, stylish icons, and a modern look and feel. Its smooth scrolling makes navigation more enjoyable and stylish. One Paze comes with cool animated typography and icons that are sure to look beautiful on your website.

Characteristics:

• adaptive;
• SEO-friendly;
• three menu layouts;
• custom logo;
• several blog layouts;
• portfolio;
• high download speed;
• parallax effect.

More details Demo

Amazing one page landing page template with lots of colors, animations and modern visual effects. It has smooth parallax scrolling, a full-screen layout and many interactive elements such as buttons, animated ribbons, forms, boxes, etc. The template is multi-purpose, so it works for almost everything.

Characteristics:

• optimized for Retina;
• adaptive design;
• parallax scrolling;
• Ajax portfolio;
• unlimited typography and colors;
• videophone;
• social network icons.

Talon is a beautiful and clean one page landing page template for your business. It is multi-purpose and has a modern, elegant look. Talon can be used by both corporate and creative firms and agencies as it has a flexible and stylish appearance.

Characteristics:

• custom header/slider;
• custom icons;
• Google Fonts and Colors;
• support for SiteOrigin landing page builder;
• widgetized footer;
• blog layouts;
• adaptive design.

More details Demo

EVision Corporate is a one-page landing page template for corporate businesses, startups, small businesses, portfolios, etc. This landing page template has a simple and colorful design that is friendly and professional at the same time.

Characteristics:

• fully adaptive;
• one-page design;
• Retina-ready;
• CSS3 animations;
• color control;
• font Awesome and Google Fonts;
• flexible layout;
• ready for translation.

Did you want to buy a landing page? What's the point? If there is a minimalist and clean landing page template for business and corporate websites with a simple and elegant one-page layout, a full-width slider, a nice portfolio and a ribbon bar with animated statistics. Overall, a neat design that will make your business stand out.

Characteristics:

• adaptive design;
• 6+ widget areas and 11+ custom widgets;
• landing page builder;
• change of colors;
• fixed and rubber layout;
• excellent filters for products;
• optimized for high speed downloads and SEO.

Did you want to buy a landing page template? Why buy? All landing page templates selected for this article are good in their own way and they are all free. I couldn't choose the best one, but they all have this in common: they are free, responsive, professional, and very beautiful.

If you want to know what other options there are for creating landing pages for free, then you will be 100% interested in the article: “ “.

Greetings, my dear readers. Today we’ll talk about technical aspects with which we can increase the sales conversion of our goods or services. One of the important points is a well-thought-out landing page with goods. The so-called landing page, the creation of which we will talk about later and get ready-made page codes.

What is a landing page? This is the page that people usually land on after clicking on an ad. Created for one offer: product, service or subscription. An effective landing page is the cornerstone of successful online marketing. The product may be the best on the market, the ads are perfected, but without a good landing page, efforts do not produce 100% results. It tells visitors what is on offer and why they should want it. A sense of urgency contributes to quick decision-making and the transition of the user to the category of a client.

How to create a Landing Page? It is wrong to believe that the answer lies in the ability to typeset. A good landing page is the result of coordinated work on goals, text, design and code. Landing pages, examples of which will be below, will help beginners learn the basics of working with layout, but will not replace conversion texts and understanding of the target audience. You can also create them using various Landing Page designers.

Therefore, before creating landing page, ask yourself:

• What will a person do after landing on the landing page? Will he buy anything? Will you fill out the form? Subscribe to the newsletter? Before you track your conversion rate, set clear goals.
• Who are my competitors? In reality, these are three questions: who, how successful are they, and how can their achievements be applied? Imitation is the sincerest form of flattery. If your competitors are doing something that works, replicate it on your site.
• Who is my audience? The better you understand your niche and target audience, the greater the chance that your efforts will pay off.

You need to offer all the necessary information, but not so much that you overwhelm and drive away your potential client.

Before we get started, let's take a quick look at HTML and CSS. Understanding how they work will help you create a landing.

HTML is a browser markup language for website visualization. Written using tags enclosed in angle brackets that define the content.

The tag opens () and closes () around the filling:

content

For fine-tuning, attributes are added after the name:

content

CSS - defines how to position HTML elements. Consists of selectors, properties and values:

#selector (property: value;)

The selector matches the name of a specific tag in html. Changing values ​​and adding properties adjusts its appearance. You can create pages that look different from each other by applying different CSS styles to the same HTML.

For quick layout, we will use a template with minimal design based on bootstrap. This is a system with its own selectors, which is used all over the world to speed up layout.

It looks modest.

From this fish a website for every taste is created in several stages.

Directory structure in the folder:

• index.html: This is the main file that we will edit.
• /assets: auxiliary files are located here:
• /css: The directory contains bootstrap and icon styles. The file we will edit is main.css.
• /img: folder for site images.
• /fonts: icon fonts.
• /js: bootstrap javascript files.

Step 1: Using a Header

Heading and subheadings - key places, helping to clearly communicate the value proposition.

Let's change the title and name of the site. Here you don’t need to have typing skills - you write your own text in the places highlighted in yellow on the screen.

Step 2. Brevity is the sister of conversion. Adding benefits and rates

You will need 4 sections:

• advantages;
• rates;
• reviews;
• call to action.

Let’s create a section of the main content “main”, into which we will insert the necessary sections:

…..
…..
…..
…..

Fill with filling instead of dots.

For the benefits section you will need this code:

Advantages
Fast

Reliable

Sed diam nonummy

Elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Content for clarity:

It still looks sloppy, but there is no reason to panic, let’s continue.

We write down prices. The content changes in the same way as in the first step. general description with class “tarifs” and three tariffs.

Tariff plans

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

per month/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

per month/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

per month/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Looks like that.

For now, we are not interested in the appearance of the future landing page - we will look at examples of changing styles below.

Step 3: Trust Signals and Call to Action

Using targeted signals indicates to visitors that the brand is trustworthy. Signals can be received different kinds, but the classics are customer reviews.

Customer Reviews

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

Let's set a call to action.

Benefit when ordering today

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Reviews will help potential customers decide to buy the product. For clarity, we need avatars, so we’ll immediately put them in place - under each quote.

Client name.

Step 4: Integration with Grid and Mobile Friendly

To implement the grid, we need Bootstrap containers. It is important to remember the total number of valid column segments - 12. The class determines the width of the content display. The good thing about this pre-made grid is that the containers are designed with responsiveness in mind and are immediately usable on mobile devices. Detailed description on the official site . The grid looks like this.

The contents of “main” will be wrapped in a container. To do this, the following is written at the top:

… .

If you need the block to fit the entire width of the screen, then container is inserted inside. Here it will be a jumbotron and a call to action.

We will wrap all elements that require placement on top of each other with line separators.

We can now adjust the width of the columns, focusing on the bootstrap grid. After wrapping, the filling stopped sticking to the edges of the screen and neat indents appeared.

We set prices in a row using the column class col-lg-4. Inside row lines, it is no longer necessary to write separate divs for wrapping; they can be combined with existing ones separated by a space.

By analogy, we set up columns for the reviews and benefits section. If you need to move an element to the side, use the offset column class col-lg-offset-2. The number at the end determines how many base columns the shift will occur by.

Step 5. Fonts and Icons

We implement Google Font heading fonts. When selected, open the import tab and copy the data from it to the main.css file. We also add title selectors to the file for which the new font is used.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* import font for headings */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; /* Googlefont output */
}

For clarity, the advantages are described by a class with the self-explanatory name text-center and FontAwesome icons from the bootstrap set.

At this point the preparation is completely completed.

We use the three most popular types: with a sentence, a form and with a countdown counter. As the layout progresses, the template will be supplemented with effects.

Let's set the background of the main part and the padding so that the first screen is covered.

Jumbotron (
background: #f5f5f5 url(../img/fon.jpg) top center no-repeat;
max-width: 100%;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}

Let's change the jumbotron header size from h2 to h1. Next, we write styles for the elements that need to be changed.

Let's start with the icons.

Benefits i(
color: #cac4c4;
}

After the hash sign, a color is specified. You can choose your own option using html color tables or an image editor.

Indentation for section headings

section h2 (
padding-top: 30px;
margin-bottom: 25px;
}

We are tidying up the appearance of tariffs. For convenience, we create our own classes for the elements that we want to highlight specifically.

Tariff No. 1
$10

per month/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

And a lot of CSS. What places the sections are responsible for are stated in the comments - /* between slashes with an asterisk */

/* =========Tarif styles======== */
/* general form tariff */
.pricing_item(
background: #f2f2f2;
position: relative;
display: -webkit-flex;
display: flex;

flex-direction: column;

align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #262b38;
cursor: default;
overflow: hidden;

}
/* change background when clicked */
.pricing_item:hover (
color: #444;
background: #daebef;
}
/* individual price tag background in each tariff */
.pricing_item:first-child .price (
background: #9ba9b5;
}
.pricing_item:nth-child(2).price (
background: #1f6098;
}
/* on wide screens the middle tariff column is indented and highlighted */
@media screen and (min-width: 66.250em) (
.pricing_item(
margin: 1.5em 0;
}
.featured(
z-index: 10;
margin: 0;
font-size: 1.15em;
}
}
/* title */
.pricing_item h3 (
font-size: 2em;
margin: 0.5em 0 0;
color: #1d211f;
}
/* price tag background */
.price (
font-size: 2em;
font-weight: bold;
color: #fff;
position: relative;
z-index: 100;
line-height: 95px;
width: 100px;
height: 100px;
margin: 1.15em auto 1em;
border-radius: 50%;
background: #77a5cc;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
/* currency */
.currency(
font-size: 0.5em;
vertical-align: super;
}
/* clarification of the proposal */
.sentence (
font-weight: bold;
margin: 0 0 1em 0;
padding: 0 0 0.5em;
color: #2a6496;
}
/* list */
.pricing_item ul (
font-size: 0.95em;
margin: 0;
padding: 1.5em 0.5em 2.5em;
text-align: left;
}
/* list items */
.pricing_item li (
padding: 0.15em 0;
}
/* rate order button */
.pricing_item button(
font-weight: bold;
margin-top: auto;
padding: 1em 2em;
color: #fff;
border-radius: 5px;
background: #428bca;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
/* change color when button is pressed */
.pricing_item button:hover,
.pricing_item button:focus (
background-color: #285e8e;
}
/* tariff background*/
.bg-2 (
background: #dddddd;
}

Result

Customer reviews. Let's give them a neat look and indicate their location.

/* =========Testimonials styles======== */
testimonials (
padding: 4em 0;
text-align: center;
}
.testimonials .avatar img (
border-radius: 50%;
float: left;
display: inline;
margin-right: 1em;
width: 65px;
height: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p (
text-align: left;
padding-top: 1em;
color: #5d5d5d;
font-weight: 900;
}

All that remains is to decorate the last call to action and the footer.

/* Action */
.action(
background: #476177;
min-height: 180px;
width: 100%;
padding: 4em 0;
text-align: center;
}
.action h2 (
color: #fff;
font-weight: 300;

}
.action p(
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
font-size: 1.2em;
}
.action .container (
margin-top: 3em;
}
/* Footer */
footer (
background: #333333;
padding: 1em 0;
text-align: right;
}
footer p(
color: #fff;
line-height: 1;
text-transform: uppercase;
font-size: 0.7em;
margin-top: 0.5em;
}

The footer button is assigned the built-in bootstrap class btn-default.

Bringing the template to life. We will introduce smooth scrolling and buttons for sections, as well as text animation on the first screen.

For the transitions to work, we will replace some of the section classes with id - for benefits and tariffs. And we will add links to the id to the buttons. Screenshot - what is attached to what, highlighted with a yellow marker.

We set indents for buttons - jbutton. Scrolling when pressed works, but very abruptly.

Smooth transitions are created using javascript or jquery. The latter is connected to Bootstrap templates by default.

Scrolling is now smooth.

Adding animation to text using Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). This is ready open source, it can be used on any website. Place the file from Github in the css folder and specify the path.

We select the effects here: https://daneden.github.io/animate.css/. We have fadeInDown selected. It is written in the code like this:

Now when the page is loaded or refreshed, the text will be animated. Ready.

The more form fields a visitor is presented with, the less likely he is to fill them out. Ask for only the minimum necessary information.

It is assembled by analogy. We will change backgrounds and colors. And, of course, we'll add a shape.

Let's start with parallax.

Let's change the background of the jumbotron to transparent:

background: transparent;

Inside head we will insert the script:

$(window).scroll(function(e)(
parallax();
});
function parallax())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

The first line in the body is a container for parallax:

And in CSS its behavior is:

Bgparallax (
background: url(/../img/fon.jpg) repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}

Parallax is ready. But making changes to the code and new background requires reassignment of the color scheme.

Making the menu dark:

Navbar-default (
background-color: #333;
border-color: #444;
color: darkgrey;
border-radius: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
color: darkgrey;
background-color: rgba(0, 0, 0, 0.5);
}

We replace the sentence in jumbotron with a new one - with the form code:

Landing Page turns visitors into clients
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

And we prescribe the appearance

/* form */
.headform-list(
list-style-type: none;
line-height: 26px;
font-weight: 400;
padding: 0px;
margin-bottom: 40px;
}
.headform(
overflow: hidden;
position: relative;
background-color: rgba(0,0,0,.4);
padding: 35px 40px;
border-radius: 8px;
}
input, button, select, textarea (
width: 100%;
margin-bottom: 10px;
}
.headform-list li .fa (
position: absolute;
top: 0px;
left: 0px;
width: 42px;
font-size: 24px;
text-align: center;
}
.headform-list li(
position: relative;
min-height: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p (
color: #fff;
font-size: 16px;
font-style: italic;
}

The text of the jumbotron also ended up here, as it demanded changes.

We are changing the tariffs.

/* general view of the tariff */
.pricing_item(
background-color: rgba(0,0,0,.4); /* line changed */
border-radius: 4px; /* line changed */
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #f2f2f2; /* line changed */
cursor: default;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* change background when clicked */
.pricing_item:hover (
color: #444;
background: #ddd; /* line changed */
}

Now they look like this - transparent background and rounded corners.

The template is ready.

We change the filling of the jumbotron again and recolor the template to match the new background, similar to the previous template. Connect the counter script:

HTML





Time doesn't wait
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.