Build Landing Page with Fire-UI

Do you want to generate leads, starting with a qualification process and into new customers? Let's start with a Landing Page

Here's what we are going to build today!!! A Landing Page built using Fire-UI :

For live demo, you can visit the pages here : https://fire-ui.github.io/landing-page-template/

Looks pretty awesome right? How about let's us start the journey!

Gather Resources
Getting Started with Fire-UI
Start building your Landing Page
- Setup Fire-UI
- Create Navigation Bar (Navbar)
- Create Introduction (About Us)
- Create Main Part (Our Products)
- Finishing (Contact Us)

1. Gather Resources

Before we continue further, some resources you might need before we start coding 👩‍💻👩‍💻 :

Basic knowledge of HTML
Text Editor (Either Visual Studio Code or Sublime Text is recommended)
A Search Engine (Google, Mozilla, etc will be fine)

So that's all for our resources, and I believed that you have downloaded all these resources. If haven't, you can open the link provided above.

2. Getting Started with Fire-UI

Fire-UI is a CSS Library allowing for easier and more standards-compliant web design.

You can read the following blog to know more about Fire-UI

Fire-UI : A User-Friendly and Reliable CSS Framework

Stanley Owen ・ Dec 19 '20

#css #javascript #opensource

To keep it simple and fast, we will move on to the next part.

3. Start building your Landing Page

a. Setup Fire-UI

Now open your text editor and type the basic of HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Landing Page with Fire-UI</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Save the following files with index.html, then we will start setting up Fire-UI. There are some methods to config and connect Fire-UI. But in this tutorial, we will use the simplest way to save our time, which is using CDN through unpkg.

<!-- Fire UI CSS -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.css">
<!-- Fire UI Javascript -->
<script src="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.js"></script>

Thus, your index.html will now look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fire UI CSS -->
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.css">
    <!-- Fire UI Javascript -->
    <script src="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.js"></script>
    <title>Landing Page with Fire-UI</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

After that, save the files as .html extension like the picture below:

Find the file that you have just save it recently, run it with your default browser and you will see the result like this:

We have completed the most basic of configuring Fire-UI, let's give applause 👏👏.

b. Create Navigation Bar

Before continue further, you can access our full code in the following link: https://github.com/fire-ui/landing-page-template/blob/master/index.html

Now what we are going to to is to create navigation bar (navbar). If you didn't sure what is navbar, here is how navbar look like:

So what we need is:

Remove the content of body
Add the attribute theme = 'light' in the body element
Copy and paste the Navbar code

 <div class="topnav theme-reverse topnav-shadow">
    <span class="topnav-brand">Product name</span>
    <span class="topnav-hamburger-menu" data-target = "myTopnav">&#x2630;</span>
    <div class="topnav-right" id="myTopnav">
        <a class="topnav-item" href="">Home</a>
        <a class="topnav-item" href="#aboutUs">About us</a>
        <a class="topnav-item" href="#products">Products</a>
        <a class="topnav-item" href="#contacts">Contacts</a>
        <span switch-theme class="topnav-item">Switch theme</span>
    </div>
</div>

At last, your code will look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fire UI CSS -->
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.css">
    <!-- Fire UI Javascript -->
    <script src="https://unpkg.com/@fire-ui/fire-ui@0.1.1/FireUI.js"></script>
    <title>Landing Page with Fire-UI</title>
</head>
<body theme='light'>
    <div class="topnav theme-reverse topnav-shadow">
        <span class="topnav-brand">Product name</span>
        <span class="topnav-hamburger-menu" data-target = "myTopnav">&#x2630;</span>
    <div class="topnav-right" id="myTopnav">
        <a class="topnav-item" href="">Home</a>
        <a class="topnav-item" href="#aboutUs">About us</a>
        <a class="topnav-item" href="#products">Products</a>
        <a class="topnav-item" href="#contacts">Contacts</a>
        <span switch-theme class="topnav-item">Switch theme</span>
    </div>
</div>
</body>
</html>

Save it and ... Voila! You are done with our navigation bar

c. Create About Us

Before we create About Us section, we need to implement some CSS to make sure our page works perfectly. Firstly, create style.css and paste the code:

img{
    width: 100% !important;
}

.heading-title{
    font-size: 2.5rem;
}

@media only screen and (max-width: 600px){
    .intro-image{
        display: none;
    }
}

As a note, make sure that your directory look at least like this:

Landing Page/
├── index.html
├── style.html

Again, save style.css and add a line of code inside the head to connect it with our HTML code:

<link rel="stylesheet" href="style.css">

Also, we will need to download an image for our pages, you can download it through the following link: https://github.com/fire-ui/landing-page-template/raw/master/product.png

Copy and past the following content inside the body element after navbar code:

<div class="row theme-adjust my-5">
    <div class="col-6">
        <img src="product.png" alt="Product image" class="intro-image">
    </div>
    <div class="col-6">
        <div class="m-5">
            <h1 class="heading-title">Product name</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam. </p>
        </div>
    </div>
</div>

<div class="theme-reverse" id="aboutUs">
    <div class="container my-5 py-3">
        <h1 class="heading-title">About us</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam. Cras tempor ipsum ut ex tristique, ac eleifend nibh congue. Praesent imperdiet, lorem quis accumsan efficitur, eros augue finibus nisl, et blandit odio ipsum nec metus. Cras varius, dui luctus eleifend euismod, nunc metus molestie augue, nec posuere tellus urna sit amet purus. Sed ut sem bibendum, lacinia nisl in, vehicula mi. Phasellus vel odio in nulla mattis lobortis. In accumsan tincidunt lectus nec accumsan. Quisque congue arcu vel ante commodo pretium. Pellentesque pellentesque leo vitae eros efficitur scelerisque. Aliquam sit amet facilisis leo, vehicula cursus arcu.</p>
        <p>Nam sed dictum arcu. In hac habitasse platea dictumst. Cras vulputate a felis a eleifend. Nunc sit amet mi iaculis, tempor ex non, ultricies orci. Suspendisse mollis venenatis augue, sit amet sollicitudin tortor maximus ac. Ut scelerisque nisl sed orci ultricies bibendum. In a tortor ut ligula interdum mattis. Ut commodo gravida odio, quis condimentum quam sagittis at. In rhoncus felis sit amet finibus vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet mi nec nisl rhoncus, nec accumsan dui pellentesque.</p>
    </div>
</div>

Again, save it and now your page will be previewed like this:

We're done with our with our About Us section, and lets move one step further!

c. Create Main Part (Our Products)

In this part, we will introduce our recent products to our customer, so paste the following code after the About Us section:

<div class="theme-adjust" id="products">
    <div class="container py-3">
        <h1 class="heading-title">Our Products</h1>
        <div class="row">
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <img src="product.png" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam</p>
                </div>
            </div>
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <img src="product.png" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam</p>
                </div>
            </div>
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <img src="product.png" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam</p>
                </div>
            </div>
        </div>
    </div>
</div>

Now, the main product section similar to the picture below:

Finishing (Contact Us)

We are almost done with our page and we are now in the last part, which is creating a contact section.

Copy the following code and paste it after the main part (Our Products):

 <div class="theme-reverse" id="contacts">
    <div class="container mt-5 py-3">
        <h1 class="box-title">Contact Us</h1>
        <div class="row">
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <h3 class="box-title">Address</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <h3 class="box-title">Phone</h3>
                    <p>+0000000000</p>
                    <p>+1234567890</p>
                </div>
            </div>
            <div class="col-4">
                <div class="box box-shadow m-3">
                    <h3 class="box-title">Email</h3>
                    <p>hello@mail.com</p>
                    <p>world@mail.com</p>
                </div>
            </div>
        </div>
    </div>
</div>

Try refresh your browser and you will see the contact section:

As a note, you can visit the full code on https://github.com/fire-ui/landing-page-template/blob/master/index.html

Well Done 👏👏👏~ You have just created your website with Fire-UI.

Some articles you might like:

Create Your Profile Page From Scratch with Fire-UI

Stanley Owen ・ Dec 23 '20

#tutorial #portfolio #html #css

Todo App with MERN Stack (MongoDB, Express, React, Node)

Stanley Owen ・ Nov 15 '20

#javascript #mongodb #react #showdev

If you are interested in this tutorial, don't forget to give a star in https://github.com/fire-ui/fire-ui.

Happy Coding!

Blog