Page templates. Landing page templates. Landing page: examples of codes with offer, parallax and counter

Success in all ventures in this modern age is as complex a goal as it has ever been throughout history. Setting out to do something, whether it is starting a business, creating a tool or a game, coordinating a large scale project or event or even simply trying to make a few bucks, success eludes the many and welcomes the few, the well prepared, and often, the downright lucky. However, those who consistently succeed will tell you that luck simply isn’t all it’s cracked up to be.

Preparation means everything. And to be prepared, one must know their business and their times. And these are fast-paced, on-the-go times for all businesses, owing to the widespread reach of the World Wide Web and of powerful mobile devices. Innovation is the name of the game, and if you can’t swim, you will definitely sink. That is why you need a solid technological foundation for all your ventures, and nothing beats HTML5 in terms of cutting edge potency. It is the language of the modern world, and the modern world and its opportunities are knocking at your door. Do you have somewhere to receive them? The following collection of HTML5 landing page templates has been constructed to include the best and brightest Landing Page templates on the market today. Have a look!

With Softius, your website will look a lot more innovative and engaging, helping you win over even more users. This landing page template is well-known for its specialization on businesses that focus on providing software for an assortment of different purposes. Even if you are building the next big mobile application, Softius will do its best to present it professionally and attractively.

Each template fits your company background, ensuring success in your endeavors. Speaking of templates, Softius comes with three striking demos that you can utilize and improve to your needs and regulations. Thanks to its minimalistic and clean approach, Softius works with multiple users out of the box even if you have a meticulous taste.

Modify fonts, colors, layouts, images and other details to infinity and beyond and personalize the experience. Integrate widgets to streamline customization and organization of your online appearance. Softius is 100% efficient and documented so anyone can get the most out of it with ease.

VisaPress is an ideal landing page template for any immigration and visa consulting agencies and companies. However, since this tool is highly flexible, you can freely use VisaPress for all sorts of other intentions as well, like lawyers, agents, coaching services and migration consultancy to name a few. VisaPress is entirely responsive and mobile-ready, smoothly working on all retina screens and popular web browsers. No matter where they come from, your VisaPress-powered website will always work without a hitch.

The template offers three home page designs, namely classic, regular and transparent looks. Additionally, VisaPress includes four landing pages, coaching and classes, testimonials section and all other must-haves. If this particular topic is what you are interested in, VisaPress is the best solution that you can go with. No need to do any additional research when you have it all right in front of you.

Angular Landing, as the name would suggest, is a lead capture page template. Bear in mind, it is not just your everyday landing page template due to its efficiency and extensiveness. Angular Landing is put together with flex layout and angular CLI and angular material. Besides, each section of the landing page template is composed of HTML, SCSS and TypeScript files. It is also organized in its own directory for easy customization and reuse for users.

Additional features of this neat and tidy template include pricing tables, carousels, regular updates and scroll to navigation. Angular Landing has two original variations for you to choose from which both are of the highest quality. Enjoy Angular Landing’s clean design and fantastic appearance that will help you reach the goals you always wanted to see for yourself.

If you are looking for the best web solution to get your agency online, needless to say, Agency is the landing page template you should consider. It is optimized and organized for the best performance to keep all your visitors satisfied and excited to learn more about what you do. The style of Agency is nifty and creative, pushing your content front and center for everyone to get the most out of it. Due to its single page layout, users do not need to jump from page to page and pressing the back button to find and discover what they are looking for.

Agency has sixteen different homes, separated into two groups: classic and form version. From image and slider backgrounds to all sorts of different effects, like winter, water, rain, particles and gradient to name a few. On scroll animations, SEO-ready, integrated MailChimp, practical contact form and retina-ready Font Awesome icons, all this and a ton more assets Agency treats you to.

Appino is considered by many as one of the perfect mobile app landing page templates. It is highly favored by app developers, marketers and the like because of its sleek, clean and powerful elements. As an , Appino comes with multiple ready to use layouts that can greatly influence app downloads and sales what translates into growth of your brand. You sure can achieve fantastic result with a solid page that you are about to bring into being with Appino.

With its highly customizable sections, headers, sliders, colors and pre-made elements, using Appino as your mobile app lead capture is convenient and efficient. Serving as an icing on the cake, Appino offers lifetime updates that are free of charge. Besides, each Appino user also gets six months of free support that will answer all your questions and concerns.

Jonny is a two-in-one landing page template. It is a coming soon template, as well as a leads generation lander that also serves as a contact page. There are twelve different niche demos available which you can use right off the bat. And if it happens that you are in a different niche compared to those available, with a few quick tweaks, you can alter Jonny to suit your brand. After all, Jonny is organized and simple to edit. No matter your experience, you can all get the most out of the solid Jonny.

Some of the grant assets of the tool are SEO friendliness, twelve useful buttons, working contact form, modal pop-up and gallery. Of course, the list of assets Jonny brings does not end here. However, to truly understand the power of Jonny, you better see its live preview page. The level of expertise it delivers to your screens will leave you in amazement.

Paper is a supreme multi-purpose landing page template for websites of all genres and industries. It comes ideal for business people, entrepreneurs, charity groups, startups, freelancers and knowledge base online projects. With the tiniest amount of work involved and a small investment, you can have a high-end page up and running quickly and efficiently. It is one of the most advanced, contemporary and innovative templates which you can use for nearly any page.

With its wide range of features and elements, establishing your website with Paper is less tedious and more convenient. Paper comes with a massive horizon of responsive layouts, eighteen and counting homes, blog and shop pages as well. Optimized for insane performance and fast loading speeds, Paper gives your visitors a steady and relaxed skimming experience. Start now with paper and see first results coming your way shortly after.

Apps Craft is a specialized landing page HTML template. With its modern, edgy concept, Apps Craft appeals to the curious clickers of the world. You will get it +10 customizable homepages and with Parallax effect included. Apps Craft is proudly one of the most responsive template out there. It is also cross-browser compatible to go through any browser and reach as many folks as possible. Boost your sales easily with SEO improvements specially made for your business. Apps Craft provides both MailChimp subscription form and Ajax Working Contact Form. With either of them you’ll get awesome feedback connection with customers. Social media sharing is also available for several well-known platforms.

Apps Craft also includes layered PSD files to make very cool customizations. Moreover, it is compatible with Bootstrap and includes gorgeous Parallax effect. Beautiful skin colors, Google Web Fonts and high quality Font Icons are also part of the offering. Furthermore, Apps Craft provides the adequate documentation files for you to download easily. All of the above reasons make it extremely versatile and thought to adapt to mobiles and tablets. It you consider its inclination to apps, you will have no doubt of its adaptability. Go for something dynamic and made with the finest specialized features! Get Apps Craft!

LeadGen is a flexible and responsive HTML marketing multipurpose website template. It’s a resourceful framework for webmasters from all walks of life to get results. LeadGen comes ideal for a range of industries and applications to benefit from. With a huge span of landing page demo websites to choose from, the options are limitless. LeadGen doesn’t need any coding for you to get professional quality websites. LeadGen is a purposeful solution for designers, architects, creatives and professionals. Deploy over 300 polished elements through an intuitive premium page builder.

LeadGen provides a robust framework for marketing your products and services to all. Seamless crafting is possible through a few easy clicks, with advanced admin options. Fine-tune your transitions and animations, customize video and image backgrounds and more. Let your creativity loose with LeadGen and take your business up a notch. Optimized for marketing and SEO, LeadGen will drive your traffic through the roof. Sleek and lightweight, it won’t clog up your server loads under any traffic. From bloggers and magazines to eCommerce stores and portfolios, LeadGen has it all. Not to mention, out of the box cross-compatibility with all browsers and devices. Set up shop online today, check out LeadGen!

Pivot is a visually stunning and comprehensively malleable, technologically well polished and professionally graphically designed, extremely intuitive and easy to use, developer friendly and cleanly composed, vastly well documented and with Page Builder. This theme is an extremely innovative and capable of letting users of any skill level produce handsome and impressive one page or multipage websites without any coding whatsoever. To achieve this, Pivot deploys a very effective and highly intuitive visual Page Builder, featuring a block-based interface wherein over 70 custom built, fully customizable content blocks are available for your convenience, to simply drop into place on your pages and then freely fiddle with their individual settings and overall appearance and behavior.

That is why Pivot is such a flexible and versatile choice as a Landing Page website template. It really puts you in the driver's seat of your website's navigational experience every step of the way and through every nook and cranny, with wonderful functionality at your fingertips, including Campaign Monitors, MailChimp integration, gorgeous HTML5 Video Backgrounds and hardware Parallax visual effects to dazzle and engage your incoming traffic. Welcome your visitors with elegance and flexibility, with Pivot, and center the world around your website!

Massive is hugely ambitious, comprehensively well designed, technologically articulated and cutting edge, functionally resourceful and extremely feature-dense, clever and neatly thought out, modern and current, aesthetically attractive and polished responsive HTML5 one page and multipage multipurpose website template. This template has been carefully and expansively developed over time to constitute a formidable all-in-one website solution. It is capable of handling virtually every and any task a website could require, through ample quantity and professional quality. Deploying over 50 wonderful demo websites fleshed out with inner pages, over 260 individual HTML5 template pages and dozens of purpose-specific pages, Massive is truly overwhelming. That is why Massive can easily muscle the demands of a Landing Page website.

With its deep-running functionality and its excessive variety of powerful features and extensive visual customization capabilities, Massive is perfectly decked out right out of the box to create handsome and modern Landing Page websites incorporating MailChimp integration, over 150 amazing shortcodes, smooth and beautiful Parallax sections, Pricing Tables, 20 menu styles, 15 readymade Sliders, 10 Page Titles and similarly vast amounts of choices for every visual element making up your Massive Landing Page website. Built on a reliable with a responsive Bootstrap design, you can rest assured that every user will enjoy your Massive website in its proper visual glory.

JANGO is a technologically sophisticated, visually expansive and well designed, incredibly graphically customizable and amazingly intuitive, powerful and fast loading, nimble and easy to use, search engine optimized and developer friendly responsive HTML5 multipurpose website template. This template has been built to be the most efficiently coded, mobile friendly, developer friendly and easy to use template on the market. JANGO uses a solid and reliable HTML5 framework for your convenience. It is styled through sophisticated SASS CSS3 stylesheets that are easily customizable and fast loading. It is designed in an entirely modular fashion based on Twitter’s Bootstrap. This makes it especially responsive and cross compatible with all browsers, platforms and screen sizes.

JANGO is perfect for building your dream Landing Page website without any coding whatsoever. Its Component-Based Framework includes over 300 custom built components, with a streamlined, 3-step page building process. Go from header to components and ordering to footer, and done! Professional and polished Landing Page websites as easy as clicking and dragging, ready within minutes, right out of the box. JANGO also deploys its modular design throughout its codebase, with a highly legible, developer friendly code that is well annotated, with extensive documentation to ease modification and adaptation of JANGO to your specific requirements.

Disclosure: This page contains external affiliate links that may result in us receiving a commission if you choose to purchase mentioned product. The opinions on this page are our own and we don"t receive additional bonus for positive reviews.

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.

So before you create a 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 arrange 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 regulates 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

The headline and subheadings are key places that help convey the value of the offer in a clear manner.

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 the “tarifs” class 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: Grid and Mobile Friendly Integration

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 view of the 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 when javascript help 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 a new background requires reassigning 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 customers
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.