DEV Community

Stanley Owen
Stanley Owen

Posted on • Updated on

Build Landing Page with Fire-UI

#tutorial #portfolio #html #css

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 :
Landing Pages

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!
Let's Start

Table of Contents

  1. Gather Resources
  2. Getting Started with Fire-UI
  3. 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 👩‍💻👩‍💻 :

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

stanleyowen

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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

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:
Navbar

So what we need is:

  1. Remove the content of body
  2. Add the attribute theme = 'light' in the body element
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  1. 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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Landing Page/
├── index.html
├── style.html
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode

Try refresh your browser and you will see the contact section:
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:

stanleyowen

Create Your Profile Page From Scratch with Fire-UI

Stanley Owen ・ Dec 23 '20

#tutorial #portfolio #html #css
stanleyowen

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!

Top comments (2)

Collapse
 
mansa profile image
Mansa_Forever •

i like this, nice intro to Fire UI. thank you

Collapse
 
stanleyowen profile image
Stanley Owen •

Thankyou, hope you loved it!

Read next

kaja_uvais_a8691e947dd399 profile image

Image with text overlay using HTML and CSS

Kaja Uvais -

hax profile image

OWASP Juice-Shop Walkthrough Tutorial [ DOM XSS ]

haXarubiX -

acahuiche profile image

Angular: Getting Started

Alberto Cahuiche -

msnmongare profile image

Thought-Provoking Questions Every Backend Developer Should Ask

Sospeter Mong'are -