The Landing Page theme is completely worn out. Although the boom in landing pages has died down a bit, landing pages are still in demand. They are launched by all and sundry, even if for their business niches this is clearly a losing move. Some people do it just to play, and others do it to make money. But it is not so important what goals you pursue, the important thing is that everyone will need page development. Some will order from professionals, while others, for one reason or another, will start creating their own Landing Page themselves. It is precisely for the latter that this collection is dedicated.

People who decide to create a website themselves can start development from scratch, or they can use ready-made ones, because they do not require special knowledge in development. Basic knowledge of HTML and CSS, the kind they teach in school, is enough. Here again the question arises. Should I use paid or free? Of course, the paid one will be of much higher quality, and will probably show higher conversions. The free one will be less beautiful, less elaborate in terms of marketing, layout and design.

This selection consists of free ones in pure HTML for creating a Landing Page. Initially, the selection consisted of 40 positions, but when I woke up in the morning and looked at these templates with fresh eyes, I decided to delete most of them, since it was, frankly speaking, trash, and there is already a lot of trash on the Internet. Only the most worthy templates remain on which you can at least build something. The selection includes landing page templates for a variety of topics, but, for some reason, LPs for mobile applications predominate. They turned out to be of the highest quality.

Previously, we have already made selections from free Landing Page templates. They were tailored to a specific theme. This time I decided to make a collection topic that does not belong to any direction.

Other collections of free HTML Landing Page templates:

By the way. If, for some reason, you want to pull these templates onto the Wordpress engine, then on this topic I once made a selection of plugins for creating a Landing Page on Wordpress. You can try using them. This might save a lot of time. Although, personally, I don’t see much point in doing this, since pure HTML is enough for a simple LP.

So. We bring to your attention 20 free HTML Landing Page templates.

Appi - Template with background videoAnother Landing Page template for a mobile application with a full-screen background video. Unlike the template with a video background, which will be given below, this one is of much higher quality, although it is tailored to a specific theme.

BukkuFree HTML template for creating a Landing Page for selling books. Made in Flat style in green tones. There is some entertaining animation.
The developer also provides for free download sources in PSD format.

Landing Page for selling coffee HTML Landing Page template for selling coffee. The design and implementation of the layout is very interesting. There is animation of elements when scrolling the page. Everything is done in soft colors. Perfect for organizations that deliver coffee. However, this template can easily be remade to suit your theme by replacing the pictures.

Landing Zero - Landing with background video Free HTML template with a background video of a universal theme. Suitable for creating a portfolio for a freelancer of any specialization, be it a photographer or a designer.
In general, it’s difficult to find free templates with background video. So let's download.
The video in the first screen can be replaced with your own, and if there is none, you can download it from a free video stock. I provided a list of video stocks with legal videos earlier.

EngageAnother universal responsive one-pager on Bootstrap. The page is suitable for a simple product presentation. The structure is reminiscent of a presentation page for Apple products.

Landing Page for a cafe or restaurant A free Landing Page template familiar to the average RuNet user with a capture form in the first screen. Designed for creating a landing page for a bar, restaurant, cafe or anything culinary themed. Using the application form you can reserve a table for a specified time.

OleoseVery high quality, adaptive, free, but again for a mobile application. Landing Page is implemented on the Bootstrap framework. It has three color options: light blue, light green and purple. However, it is not so strictly tailored to its theme, so it can be easily remade to suit your needs.

Take - free one-pagerAnd again another free one-pager html template for a mobile application. However, its design is very interesting and unusual. I would even say unique. Most visitors to the guardhouse are not mobile application developers, so you will have to redo everything to suit your theme.

Foodee Free one-page HTML5 template for creating a landing page for a cafe, restaurant or some kind of eatery. Template with full-screen background image and Parallax effects.
There are such blocks as: menu, upcoming events, customer reviews and a standard set of blocks in which you can place advantages, etc.

WHITE I would regard this template as a kind of html framework for creating a one-page website. It is not tailored to any topic, so everything is in your hands. There is support for full-screen background video. Plus, it has a standard set of blocks, typical for a one-page website.

Cyprass Template is suitable for creating a Landing Page for any Digital company: web studio, team of freelancers or the like. It has all the necessary resources for this: a portfolio with a filter by work, various pie charts, tabs, sliders... In addition, it supports background video in the first screen.

» Free landing page WordPress templates - TOP 30

Free landing page WordPress templates - 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.

You may also be interested in For those who are looking for hosting 1.

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.

2.

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.

3. Alhena Lite

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.

4.

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

5. Palmas

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.

6. Brasserie

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

7. XT Corporate lite

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

8.

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.

9.

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.

10.

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.

11. FotoGraphy

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.

12. Integral Theme

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.

13. Square

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.

14.Enliven

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.

15. Latte

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.

16. The Monday

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.

17. Business World

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.

18.

- 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.

19.Onetone

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).

20. Arise

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.

21. Woot

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

22. West

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.

23. Anaglyph Lite

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.

24.

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!

Jevelin

Jevelin is an advanced and multi-functional website template that can serve any user regardless of the niche he or she wants to enter. Or maybe you are already running an online project and are looking to enhance your web space, again, Jevelin is one of the best tools you can choose. With its numerous features and ready-made material, Jevelin gives you unlimited possibilities when it comes to creating the ideal page for your idea.

What’s uniquely impressive about Jevelin is the fact that you need no coding skills to manage and maintain a website like a pro. Not only that, even when it comes to adjusting and tweaking your landing page, Jevelin is effortless to use. That said, utter newbies can hammer out killer websites, ready and set to start attracting new visitors and potential clients, too.

Divi


If you need to push a product, a software, a service or capture more leads, a landing page will come handy. With Divi, you can now make one in a snap of a finger. The versatility and flexibility of Divi know no bounds. That said, no matter what your needs and intentions are, with Divi, you can now realize the ideal landing page or single-page website quicker than your brain will process it. You will soon find out that you really need to do little work for first-class results. And to make edits and improvements, all you need to undergo is just some dragging and dropping.

Divi also supports tons of email opt-in providers, allows you to create custom contact forms and even has a built-in split-testing system. In short, Divi is perfect for your marketing campaigns, making sure you experience outstanding results.

Milu


Milu is an exclusive landing page template for tech and app. Of course, you can easily go beyond that by customizing default settings of Milu with WPBakery page builder. But with the ready-made demos alone, you already have a ton of different options and solutions to match Milu to your marketing needs and requirements. To be more exact, there are nine different samples you can put into play out of the box or improve further. Enjoy the outcome that will take your product or service to new heights.

Additional amenities of Milu include Slider Revolution, portfolio layouts, loads of internal sections, search engine optimization, mega menu and sticky navigation to name a few. You need to be no expert to start working with Milu, as the web design is user- and beginner-friendly, yet powerful enough for experts.

More info / Download Demo Genoa


Another remarkable tool for building landing pages is Genoa. While its default layouts and settings primarily aim towards software and app landing pages, you can easily go beyond that. After all, quick use of Elementor page builder means you can improve the out of the box version of Genoa to what you want with ease.

In the Genoa package, you will discover over ten predefined demos with more dropping in the near future. Each demo is also packed with impressive features and functions for your convenience. The modern look makes the sample quickly adapt to your wants, without the need to spend too much time editing and customizing it. In some cases, you will want to use the layout out of the box and enjoy speedy page implementation.

More amazingness includes a lifetime worth of free updates, support team, Gutenberg compatibility, six widget areas, as well as sticky header and sidebar. The layout is 100% responsive and retina-ready and optimized for speed and SEO to ensure stable and secure site operation.

More info / Download Demo Stash

Stash is a one of a kind WordPress theme. It is a multi-niche design that provides codeless building process and responsiveness. You will get the aid of Visual Composer, +260 blocks and +48 demos. Stash is also built with a professional and creative concept. Additionally, it suits many areas of interest with a personal touch that radiates creativity. You will get a mix between pre-built elements and customizable elements. Stash has lots of focus on display and transitiveness. It is also retina ready and offers famous specialized plugin integrations for free. Moreover, you get to play with Slider Revolution and Essential Grid.

Stash is strong on typography and icons selection. It provides Google and Font Awesome sets. Layout itself comes with unlimited colors, dark/light skins and customizable image backgrounds. What about commercial transactions, forms or speed? Well, you get WooCommerce, Minimal Forms and SEO optimization aming others. Stash is so intented to fit any scenerio, that whatever is not integrated, it is compatible. Still have seconds thoughts? We don’t blame you…We invite you to try it out with free updates at least twice a month and custom support. Oh! And I’m forgetting to mentiona child theme too! Come use these unique instrument now! Use Stash!

Porto

Porto is an incredibly resourceful and feature-rich, technologically ambitious and very mobile friendly, powerfully customizable and very thoroughly developed, extensively clever and thought out, bright and cleanly designed, engaging and dynamic responsive HTML5 multipurpose website template. It’s a seamless and potent framework for the development of sophisticated and full-featured websites that look and feel reliable and modern, cutting edge and secure at the same time. To that end, Porto is built with an effective deployment of the latest and greatest HTML5 web technologies and CSS3 visual scripting built through a , rendering Porto both developer friendly and entirely responsive out of the box.

Porto includes many beautiful and dazzling features that are visually cohesive and integrated as well as deeply functional, making it an excellent HTML5 landing page template for creating and managing modern and top-notch Landing Page websites for business or professional applications of any kind. Porto requires absolutely no coding skills. It offers such powerful features as the Owl Carousel and the Nivo Slider at your fingertips. For the best results possible, Porto should be matched with the Porto Admin backend website template, for maximized customization options and admin user raw power features. Porto is for the pros!

Canvas

Canvas is a comprehensively flexible, unimaginably customizable, visually stunning and dashing, colorful and vibrant, lively and youthful, modern and fully featured, creative and innovative, amazingly powerful and endlessly flexible, graphically refined and aesthetically pleasant responsive HTML5 multipurpose website template. The developers painstakingly created this template with an all-encompassing eye for detail in order to create a polished and perfected HTML5 landing page template capable of handling the demands of truly every single website out there. To that end, Canvas has been built with over 75 readymade, professionally graphically designed and fully fleshed out Homepage demos, and includes a massive, whopping 500 HTML5 files at your disposal for all sorts of specific, narrow or general purposes you could imagine.

Canvas is, of course, wholly prepared to meet the needs of sophisticated and modern Landing Page websites, and its technological profile is vastly sufficient to handle the engaging One Page or Multipage Landing Page websites you have always dreamed up. With plentiful shortcodes to ease your workflow and quickly churn out page after page in a completely customized, professional visual style, Canvas is perhaps the truest multipurpose template on the market today, ready to bend to your every whim and easily customized should you ever find a need not covered already within Canvas.

Rhythm

Rhythm is a trendy and attractive, hip and modern, technologically accomplished and professionally graphically composed layout. It is visually impressive and functionally rich and flexible, expansive and ambitious. Moreover, clever and engaging, elegant and polished responsive HTML5 one page and multipage multipurpose website template. This template has been designed with the utmost care and attention to detail in order to produce a powerful template capable of empowering webmasters from all industries and of any skill level to seamlessly and quickly put together sophisticated and one of a kind websites that are powerfully customizable, extremely intuitive and user friendly, and very modern and current.

Rhythm is very fashion conscious and aesthetically aware, and this tastefulness carries over to every one of Rhythm's over 40 fully fleshed out one and multipage demo websites as well as its over 175 included HTML5 template pages, readymade and preconfigured for all sorts of purposes, including a wealth of Landing Page demo websites and page templates, so you can hit the ground running with your Landing Page projects or ventures, from professional or recreational mobile app-related incoming traffic to campaigns, coupons and more, Rhythm can handle any amount of users you need to receive, inform or reroute, and it will always do so in an impeccably polished, technologically mature presentation.

Weber


Weber is a one-of-a-kind landing page template that easily provides a clean, unique and professional-looking web environment. Due to its multi-purposefulness, you can use the tool for all sorts of aims. Weber applies to business owners, niche websites and even personal bloggers. And with a few tweaks, you can also use the tool for something entirely offbeat compared to what it comes with out of the box.

This particular website template offers not just the usual features of a multi-concept HTML template. Weber is packed with awesome assets including but not limited to animated content sections and elements that come with a smooth transition effect. Thus definitely making your brand a standout among others. On top of that, Weber combines 33 predefined pages, 410 amazing sections, mega menu navigation and a top-notch page builder.

More info / Download Demo Lunatic


To push your mobile application and spread the name out, Lunatic is the landing page template that is ideal for apps. Its modern and sophisticated web design stunningly displays your content, images, screens and other whatnots you want to share with your target audience. In the bundle, Lunatic delivers three main home designs with an addition of three blog looks and a single blog page. Out of the box, you have a complete web solution for your novel and refreshing app to reach a new circle of users.

Moreover, Lunatic has loads of useful features that will save you time and effort during setting yourself up with the cutting-edge page. Every user gets access to Font Awesome icons, a working contact form, smooth transitions and enticing effects, as well as simple color management. Do take a peek at this neat tool and enter web space with a solid online presence.

More info / Download Demo Cryptency ICO


Cryptency ICO is a well-known cryptocurrency and Bitcoin responsive landing page template. It offers functionality, efficiency and aesthetics to all its users. In terms of its appearance, Cryptency ICO exudes a clean, modern and mobile-ready environment, ideal for ICO startup, crypto agencies and other coin market enthusiasts. The template includes all key elements that will be helpful in your cryptocurrency undertaking. To name a few, it comes with AJAX contact form, subscription form, ICO token counter and sports a clean code.

For a quicker site launch, Cryptency ICO comes with four attention-grabbing index pages which are colorful, bright, dark and light. Pick whatever best resonates with your product and start from there.
If you are planning to launch a website for your digital currency enterprise, then Cryptency ICO is a must have tool for your business.

More info / Download Demo ProSoft


By default, ProSoft, hence the name, is a landing page template for professional software of all types. The site canvas immediately adapts to your needs and helps you to launch your web presence in as short space of time as possible. It is all and everything in the bundle, ready for you to employ it and take to your account. Loads of contemporary UI/UX elements come part of the package, as well as other goodies, like W3C valid code, free Google Fonts and call-to-action buttons.

ProSoft also has three stylish and elegant home page demos; default, white hero and video hero versions. Regardless of which design you dig the most, it is a promise that the outcome you will build is first-class. Bring your software to an entirely new level and stand out a mile with the help from the almighty ProSoft.

More info / Download Demo Webify


Pushing products and services online is no big of a deal once you gain access to Webify. This landing page template is a pack of goodness that will help you promote your app like a champ. Out of the box, Webify comes with a contemporary layout which ends up being entirely functional and ready to go live. You just change the default settings and you can have a complete landing page ready and set. What’s more, with the outstanding customization features and convenient page builder, you can also tweak Webify to your likes easily.

When speaking of features, we would need to hammer out an entire article for Webify. The ones that stand out are nifty animations, before/after slider, testimonials, pricing plans and call-to-action buttons. Get things going strong immediately and start seeing downloads go through the roof with Webify.

Rupa


If you are looking for the best value for your money when it comes to a landing page template, then you do not have to look further, for Rupa is here. It is a single product lead capture page intended for entrepreneurs and business people alike. You can easily utilize it for online product marketing purposes which both digital and physical marketers can use. There are little if none limitations when it comes to using Rupa for your offering exactly.

Rupa boasts of its simplicity and highly relevant features for your business. These assets and traits include three homes, responsive and retina-ready layout, slider, dedicated support and a sticky menu. Rupa is based on the Bootstrap Framework, comes with free updates and is entirely optimized for all modern web browsers. Jump in with both feet and start something remarkable with Rupa.

More info / Download Demo Palki


Our landing page templates collection is of a variety of items that will fit all your needs and demands. Even if you happen to be a picky user, there is a guarantee you will find the ideal look for whatever your project may be. For corporate and business websites, Palki is the tool that will do you well. It rocks a with all the necessities and loads more. Besides, Palki follows all the latest trends and practices all the recent technologies for an always amazing and stable encounter.

Palki is powered by Bootstrap Framework what gives it responsiveness and quick adaptability. It provides five homes that vary from slider, animated and YouTube video to particles and parallax effects. Palki also does not miss a full blog section which you can use for content marketing, as well as to go more personal with your current and potential new clients.

More info/Download Demo Apkly


Getting Apkly as your template is basically the best investment you can do for your website. You can use this landing page template as a marketing page to present your brand, your products, your services or your portfolio. It has a user-friendly and contemporary design with full documentation included. Moreover, Apkly is 100% responsive and compatible with all modern browsers. In other words, your landing page will display its content beautifully on all devices, from smartphones to tablets and desktop computers.

There are also multiple elements included, all of which are easily customizable. There are four demos available for you to find the right look for your purpose even more straightforward and quicker. You can also add social links for maximum website growth and testimonials to build customer trust. Last but certainly not least, Apkly allows you to use it out of the box but the code is also entirely customizable to alter it to your regulations and customize the default web design to your needs.

More info / Download Demo Softius


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.

More info / Download Demo Winsoft


Building software demands a perfect balance of discipline and creativity. With Winsoft, you can achieve this harmony by creating a completely unique website that will push your products and services over and above. There’s no need to conform with, nor define yourself to boundaries. This landing page template lets you edit every detail from background colors to images, fonts, sliders, grids, sections and layouts. Or take the easy path and use one of eleven predefined demos exactly as is. Besides, Winsoft also comes with an additional admin dashboard template for your convenience.

Winsoft is built on the Bootstrap Framework with HTML5 and CSS3 files. Needless to say, your SaaS or any other software landing page will look great on all devices and browser. Flexibility and extendability in a website are essential to ensure an outstanding performance for every user. Upgrade your site by employing this theme’s exceptional features. Be a part of the community that loves Winsoft and stand out from the masses.

More info / Download Demo VisaPress


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.

More info / Download Demo Landing Page


You can name your product however you want, but sometimes, you just want to go with something simple and to the point. That’s the exact case when it comes to Landing Page template. You can't be more direct than that. But Landing Page is way more than just a classic lander. You can also use it as a or a one-page website, displaying just the essential details and content. Sure, you can have your personal take on it and craft something unique and original that goes entirely against the norm.

Landing Page has numerous predesigned layouts with a variety of cool effects and distinct looks. With all the available, you do not really need to be an expert to get a fully functional website up and running. The easiest solution would be to go with the demo you like the best as is, enhance it with your material and you are ready to go. Of course, you can improve it with your signature touch, too, and make a custom version of Landing Page.

More info / Download Demo Angular Landing


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.

More info / Download Demo Agency


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.

More info / Download Demo VIGO


Maybe you already are part of the industry or maybe you plan to enter into a health and medicine-related online business or marketing, VIGO can be your go-to website landing page template. Mainly intended for food supplements, body enhancement and medicine affiliate projects, VIGO offers a fresh and professional look to a website. It is highly pliable and it comes with various features for improved user experience.

VIGO has five different homes which are basically five different color presets. Still, for any customization tweaks you would like to perform, by all means, modify VIGO however you see it fit your product best. VIGO is ease to work with and alter according to your needs. Among its top features are over sixteen sections, pixel perfect coding, free fonts and icons, video support and sticky navigation.

More info / Download Demo ZERO


Do not be fooled by its name, ZERO is not an empty nor valueless landing page template. It is a complete opposite. It is packed with numerous features and elements that can be useful for tech personnel and diverse tech groups. ZERO brings to the table a smooth, stylish and elegant layout to capture a horde of new leads and boost your downloads. In general, ZERO is the best fit for software and app showcase type of a website but you can use it for other purposes, too.

ZERO comes with a variety of cool assets that you can take to your benefit right away. In the bundle, you will discover three home demos, over twelve color schemes, attractive scroll animations and a practical contact form. For added efficiency and ease of use, ZERO is fully customizable and RTL ready to cover a broad spectrum of users from all around the globe.

More info / Download Demo Hinata


While it focuses more on the mobile applications, Hinata is a landing page template that you can also use with web and desktop apps and other software. It is a highly flexible and adaptable page canvas that calls for a complete website solution for your product. Expand your horizon with an enticing website and spark the curiosity of even more potential users. Potentially, you will start witnessing a steady increase in downloads. After all, a webpage is still one of the best marketing tools that can take you to the new degree.

Hinata has two main styles of home pages of which each comes in several different approaches. In short, Hinata gives quite a nice selection of different solutions you can take for your expert looking professional online presence. Each is unique and out of this world in its own creative way. The code of Hinata is also a breeze to customize. This gives you the freedom to modify Hinata and make it follow your branding to the T.

More info / Download Demo APPINO!


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.

More info / Download Demo Jonny


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.

More info/Download Demo Paper


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.

More info / Download Demo Apps Craft

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

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

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

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

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.

Thank you for visiting Colorlib and reading this article! We highly appreciate it! Now you might want to learn how to use our free.

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-designed landing page with products. 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.

Examples of creating a landing page + coding for dummies

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 regulates its appearance. You can create pages that look different from each other by applying different CSS styles to the same HTML.

5 initial steps

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


Profitable

Elit, sed diam nonummy


Technically

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


Reliable

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


Profitable

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


Technically

Lorem ipsum dolor sit amet, consectetuer adipiscing


Reliable

Lorem ipsum dolor sit amet, consectetuer adipiscing


Profitable

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.


Tariff No. 1
$10

per month/per person



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Order
Tariff No. 2
$20

per month/per person



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Order
Tariff No. 3
$30

per month/per person



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Order

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 take many forms, but the classic one is customer feedback.



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:



“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."
“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:


Order now!

Reviews will help potential clients make a decision to buy a 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 website. 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.

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

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.

Example 1: with a sentence

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


Order

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 a ready-made open source code, 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.

Example 2: with shape and parallax effect

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 - a transparent background and rounded corners.

The template is ready.

Example 3: with countdown counter

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.





var myCountdown1 = new Countdown((
time: 86400 * 3, // 86400 seconds = 1 day
width: 300
, height: 60
, rangeHi: "day"
, style: "flip" //