Industrial Web Design: How to Create a Standout Landing Page with HTML and Pure CSS

Faraz

By Faraz -

Take Your Industrial Web Design to the Next Level with this Guide on Creating a Standout Landing Page Using Pure CSS. Learn Tips and Tricks for Optimization

Join us on Telegram
industrial web design how to create a standout landing page with html and pure css.jpg
Read Alsocreate a responsive products dashboard.jpgCreate a Responsive Product Dashboard with HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

In today's digital age, having a strong online presence is crucial for any industrial business. Not only does it allow potential customers to learn more about your products and services, but it also helps to establish your brand as a leader in your industry. One of the most important elements of an effective online presence is a well-designed landing page.

A landing page is the first page that visitors will see when they arrive at your website. It is the gateway to the rest of your site, and it is where you make your first impression. The goal of a landing page is to convert visitors into customers by providing them with the information they need to make an informed decision.

In this article, we will discuss the key elements of an effective industrial landing page and show you how to create one using HTML and pure CSS.

Understand Your Audience

The first step in creating a standout landing page is to understand your target audience. What are their pain points? What are their goals? What do they want to achieve by visiting your website?

By understanding your audience, you can tailor your landing page to meet their specific needs. This will help to increase the likelihood that they will convert into customers.

Use a Strong Headline

Your headline is the first thing that visitors will see when they arrive at your landing page. It is the hook that will grab their attention and entice them to stay. A strong headline should be clear, concise, and communicate the value that your product or service can provide.

For example, if you are a manufacturer of industrial valves, your headline could be something like "Improve Your Process Efficiency with Our High-Performance Industrial Valves".

Include a Call-to-Action

A call-to-action (CTA) is a button or link that encourages visitors to take a specific action, such as contacting you for more information or making a purchase. It is an essential element of any landing page, as it helps to guide visitors towards your desired outcome.

Your CTA should be prominently displayed, easy to find, and stand out from the rest of the page. It should also include a clear and compelling message, such as "Contact Us Now for a Free Quote" or "Buy Now and Save 10%".

Use Images and Videos

Images and videos can be powerful tools for communicating your message and engaging visitors. They can help to break up text and make your landing page more visually interesting.

When selecting images and videos, be sure to choose ones that are relevant to your product or service and that help to communicate your value proposition. For example, if you are a provider of industrial automation solutions, you might include a video that demonstrates how your products can increase productivity and reduce downtime.

Optimize for Mobile

With the increasing use of mobile devices to access the internet, it is essential that your landing page is optimized for mobile. This means that it should be designed to look and function well on a variety of screen sizes and resolutions.

To ensure that your landing page is mobile-friendly, you should use a responsive design, which automatically adapts to different screen sizes. You should also use clean and simple layouts, with a single column of content and large, easy-to-read text.

Let's start making an amazing responsive industrial landing page design using HTML, and Pure CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our industrial landing page.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our industrial landing page using HTML, and now we can move on to styling it using CSS.

Read AlsoCreate an Archery Game with HTML, CSS, and JavaScript.jpgCreate an Archery Game using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the industrial landing page is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our industrial landing page. We will also add some padding and margin properties to ensure that everything looks correct.

This will give our industrial landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

/* Global */
* {
  box-sizing: border-box;
}

html, body {
  font: 700 62.5% 'Montserrat', sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  line-height: 1.2;
}

a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

main, section {
  width: 100%;
}

section {
  padding: 3%;
}

/* Headbutting/padding issue: this code doesn't work  */
/* section::before { 
  display: block; 
  content: " "; 
  margin-top: -5.5rem; 
  height: 5.5rem; 
  visibility: hidden; 
  pointer-events: none;
} */

/* This doesn't help either but I added in because it makes the CTA section look better on my phone! */
main {
  margin-top: 5.5rem;
}

img {
  vertical-align: middle;
}

hr {
  border-color: #4E5254;
  width: 10rem;
}

h1, h2 {
  text-transform: uppercase; 
}

h1, h2, h3 {
  text-align: center;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2.2rem; }
a { font-size: 1.5rem; }
p, li { font-size: 1.9rem; }
cite { font-size: 1.7rem; }

li, cite { font-weight: 500; }

/* Header */
.fas {
  color: #4E5254;
  padding-right: 1rem;
}

.fa-times {
  padding-top: 1rem;
}

#header-img {
  padding: 0.5rem;
}

.logo-text {
  font-size: 1.5rem;
  vertical-align: middle;
  color: #4E5254;
  text-transform: uppercase;
}

#header {
  position: fixed;
  height: 5.5rem;
  top: 0;
  left: 0;
  right: 0;
  background-color: #EAE2DF;
}

.logo-toggle-flex {
  display: flex;
  justify-content: space-between;
}

.nav-bar-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  right: -300px;
  top: 0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: visible;
  transition: left 0.3s ease,
              box-shadow 0.3s ease;
  z-index: 999;
}

.menu-toggle {
  align-self: center;
}

.nav-bar-wrapper ul {
  margin: 0;
  padding: 2.5rem 0 0;
  min-height: 100%;
  width: 20rem;
  background: #E79744;
}

.menu-wrapper li {
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding: 1.5rem;
}

.menu-wrapper a {
  color: white;
  border: none;
}

.menu-close {
  position: absolute;
  right: 0;
  top: 0;
}

.nav-bar-wrapper:target {
  right: 0;
}

.nav-bar-wrapper:target .menu-close {
  z-index: 1001;
}

.nav-bar-wrapper:target ul {
  position: relative;
  z-index: 1000;
}

.nav-bar-wrapper:target + .backdrop {
  position: absolute;
  display: block;  
  content: "";
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: rgba(0,0,0,.5);
  cursor: default;
}

@supports (position: fixed) {
  .nav-bar-wrapper,
  .nav-bar-wrapper:target + .backdrop {
    position: fixed;
  }
}

/* CTA */
.cta-img {
  background: url(https://res.cloudinary.com/sharonnt/image/upload/v1535301352/hero-1920.jpg) 0 0 / cover no-repeat;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100%;
}

.cta-banner {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
}

.cta-wrapper {
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
}

.cta-wrapper h1,
.cta-wrapper h2 { 
  padding: 1%;
  width: 100%;
}

.cta-wrapper h1 {
  color: #E79744;
  margin-bottom: 5%;
}

.cta-wrapper h2 {
  color: #F2F2F2;
  font-size: 1.8rem;
  margin-bottom: 5%;
  text-transform: none;
}

.cta-wrapper a { 
  align-self: center;
  background-color: #E79744;
  border-radius: 3rem;
  color: #F2F2F2;
  font-size: 1.8rem;
  padding: 2rem 1.5rem;
  text-align: center;
  width: 20rem;
}

/* Products */
.products {
  background-color: #808080;
}

.products h2 {
  color: #F2F2F2;
  margin: 10%;
}

.products-wrap {
  display: flex;
  flex-direction: column;
  margin: 3% auto;
  width: 80%;
}

.product-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 2%;
}

.product-item img {
  margin: 1%;
}

.product-description {
  align-self: stretch;
  margin: 1%;
  padding: 1%;
  text-align: center;
}

.product-item a {
  border: 1px solid #F2F2F2;
  border-radius: 3rem;
  color: #F2F2F2;
  margin: 2% auto 15%;
  padding: 1.3rem 0.7rem;
  text-align: center;
  width: 11rem;
}

/* Clients-video */
.project-bridge h2 {
  margin: 10%;
}

.clients-video {
  align-items: center;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.client-logo-wrapper {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.client-logo-wrapper img {
  margin: 2%;
}

.video-wrapper {
  display: flex;
  justify-content: center;
}

iframe {
  margin-bottom: 10%;
  max-width: 560px;
  width: 100%;
}

.customers {
  margin-bottom: 10%;
}

.quote-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

blockquote {
  margin: 3rem 3rem 2rem;
  padding: 0;
}

blockquote p {
  font-style: italic;
  margin-bottom: 1rem;
}

blockquote p:first-child:before {
  color: rgba(0,0,0,.3);
  content: '\201C';
  font-size: 112px;
  line-height: 0;
  vertical-align: bottom;
}

cite {
  align-self: flex-end;
  margin: 0 30px 10% 0;
  text-align: right;
}

/* About */
.about {
  background-color: #4E5254;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.about-text {
  align-self: center;
  display: flex;
  flex-direction: column;
  width: 90%;
}

.about-text h2 {
  color: #E79744;
  margin: 10%;
  text-align: center;
}

.about-wrapper {
  align-self: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%; 
}

.about-wrapper > img {
  align-self: center;
  margin-bottom: 2rem;
  max-width: 92rem;
  width: 100%;
}

.p-text {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-bottom: 10%;
}

.p-text p {
  align-self: center;
  color: #F2F2F2;
  padding-bottom: 2%;
  text-align: left;
  width: 100%;  
}

.acc-logo {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 10%;
}

.acc-logo img {
  margin: 2%;
  max-width: 35%;
}

.acc-logo img:last-child {
  max-width: 75%;
}

/* Contact */
.contact {
  background-color: #807060;
}

.contact-wrapper {
  display: flex;
  flex-direction: column;
  margin: 10% auto;
  width: 90%;
}

.contact-wrapper h2 {
  color: #F2F2F2;
}

.form-wrapper p {
  margin: 3% 3% 3% 0;
}

.form-wrapper h2,
.contact-details h2 {
  text-align: left;
}

#form {
  align-items: center;
  display: flex;
  flex-direction: column;
}

input {
  border: 0;
  border-radius: 2px;
  padding: 1.5rem;
  width: 100%;
}

textarea {
  border: none;
  border-radius: 2px;
  padding: 1.5rem;
  width: 100%;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.enquiry {
  background-color: #807060;
  border: 1px solid #F2F2F2;
  border-radius: 3rem;
  color: #F2F2F2;
  font-weight: 500;
  font-size: 1.5rem;
  margin: 3%;
  padding: 1.3rem 0.7rem;
  text-align: center;
  width: 11rem;
}

.privacy {
  margin: 8% 0;
}

.privacy p {
  font-size: 1.5rem;
  font-weight: 500;
}

.contact-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 430px;
}

.contact-details h3 {
  font-size: 1.9rem;
  font-weight: 700;
  text-align: left;
}

.contact-details p {
  font-size: 1.7rem;
  font-weight: 500;
  text-align: left;
}

#footer {
  background-color: #4E5254;
  color: #F2F2F2;
  font-size: 1.2rem;
  padding: 1.5rem;
  text-align: center;
}

@media (min-width: 460px) {
  .product-item {
    flex: 1 0 50%;
  }
  .product-description {
    align-self: stretch;
    flex: 1;
  }
  .products-wrap {
    flex-flow: row wrap;
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 550px) {
  .cta-wrapper h2 {
    font-size: 2rem;
  }
  .customers h3 {
    margin-bottom: 2%;
  }
  .client-logo-wrapper {
    flex-wrap: nowrap;
  }
  .client-logo-wrapper img {
    margin: 1%;
    width: 120px;
  }
   .quote-wrapper {
    max-width: 570px; 
  }
  .p-text {
    margin-bottom: 5%;
  }
  .privacy {
    margin: 4% 0 8%;
  }
  .contact-details p {
    font-size: 1.9rem;
  }
}

@media (min-width: 768px) {
  .contact-wrapper {
    flex-flow: row wrap;
    justify-content: space-between;
  }
  .contact-wrapper div:nth-child(2) {
    order: 3;
  }
  .contact-wrapper > div {
    width: 45%;
  }
  .client-logo-wrapper img {
    width: 150px;
  }  
}

@media (min-width: 820px) {
  .products-wrap {
    width: 90%;
  }
  .product-item {
    padding: 2.5%;
  }
  .product-item img {
    width: 120px;
  }
  .project-bridge {
    display: flex; 
    flex-direction: column;
  }
  .clients-video {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
  }
  .clients-video :nth-child(2) { 
    order: 3;
  }
  .client-logo-wrapper {
    margin-bottom: 5%;
  }
}

@media (min-width: 920px) {   
/*  remove toggle and display menu  */
  .menu-toggle, 
  .menu-close {
    display: none;
  }
  .nav-bar-wrapper {
    display: inline-flex;
    position: relative;
    right: auto;
    top: auto;
    height: auto;
    overflow: initial;
  }
  .menu-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .nav-bar-wrapper ul {
    display: flex;
    padding: 0;
    box-shadow: none;
    height: auto;
    width: auto;
    background: none;
  }
  #header {
    display: flex;
  }
  .logo-toggle-flex {
    margin-right: auto;
  }
  .menu-wrapper li {
    align-self: center;
    border: none;
  }
  .menu-wrapper a {
    color: #4E5254;
    font-weight: 700;
  }
/*  section styles  */
  .cta-wrapper { 
    width: 80%; 
  }  
  .cta-wrapper h1 {
    font-size: 3rem;
  }
  .cta-wrapper h2 {
    font-size: 2.3rem;
  }
  .products h2 {
    margin: 5%;
  }
  .customers {
    margin-bottom: 5%;
  }
  .about-wrapper {
    flex-flow: row wrap;
    justify-content: space-around;
  }
  .about-wrapper > img {
    width: 50%;
    align-self: flex-start;
  }
  .p-text {
    width: 45%;
  }
  .acc-logo img {
    max-width: 150px;
  }
}

@media (min-width: 1020px) {
  .products h2,
  .about-text h2 {
    margin: 5%;
  }
  .products-wrap {
    margin-bottom: 5%;
  }
  .product-item {
    flex: 0 auto;
    padding: 2%;
  }
  .product-item img {
    width: 140px;
  }
  .product-item a {
    margin-bottom: 0;
  }
}

Final Output:

industrial web design how to create a standout landing page with html and pure css.gif
Read AlsoHow to Create a Pill Loader Using HTML and CSS.webpHow to Create a Pill Loader Using HTML and CSS: Step-by-Step Guide

Conclusion:

In conclusion, industrial web design is an essential aspect of modern business marketing strategies. Creating a standout landing page with HTML and Pure CSS is a powerful tool for businesses to engage with their audience and showcase their products or services.

To create a successful landing page, it is important to keep the design simple and clean, use high-quality images, and focus on clear and concise messaging. Additionally, incorporating animation and interactive elements can enhance the user experience and make the page more engaging.

Overall, a well-designed landing page can increase user engagement and conversion rates, ultimately leading to business growth and success. By utilizing the tips and techniques discussed in this article, businesses can create a standout landing page that effectively communicates their brand message and drives results.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: pure css, industrial design, landing page, web design, industrial web design, pure css techniques, landing page optimization
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post