Station

One Page Agency HTML Template

created: 12/07/2016
latest update: 12/08/2016
by: ThemeAtelier
email: themeatelierbd@gmail.com

Files Structure

All files and folder organized nicely.

HTML Structure

Every section start with a comment like this

< !-- ========== Section Name start ========== >
and end with comment like this 
<!-- ========== Section Name end ========== >

CSS table structure

Every point of CSS content you will find start with a comment like

/*  ----------------------------------------------------

#. CSS point name

-------------------------------------------------------- */

some code here

Javascript Code Structure

Every point of CSS content you will find start with a comment like in JS folder's main.js file

/*  ----------------------------------------------------

#. Javascript point name

-------------------------------------------------------- */

some code here

Typography

Font family:

All fonts used from google web font directory. We used it by import in css/style.css file. There called 3 fonts like below structure. You could change the fonts. Follow google web font document here

/*  ----------------------------------------------------
1. IMPORT GOOGLE FONTS
-------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Audiowide|Raleway:400,500,600,700|Roboto:400,500,700');

Headings and paragraph:

All headings and paragraphs typography used in css/style.css file. You can manage them easily.

Logo:

You can change current logo text to your own or if you wish to use your custom image logo put the logo into img folder and call it into the logo section of navbar. See image below. Don't forgot to remove text anchor line.

Header menu:

Here is markup for header nav item.

            <!-- menu -->

            <div class="navbar-collapse collapse" id="data-scroll">

                <ul class="nav navbar-nav navbar-nav-op navbar-right">

                    <li><a href="#home">Home</a>

                    </li>

                    <li><a href="#service">Service</a>

                    </li>

                    <li><a href="#project">Project</a>

                    </li>

                    <li><a href="#pricing">Pricing</a>

                    </li>

                    <li><a href="#blog">Blog</a>

                    </li>

                    <li><a href="#contact">Contact</a>

                    </li>

                </ul>

            </div>

            <!--/Menu -->

You can add a new menu paste <li><a href="#section_id">Menu Name<a></li> under the li emenet you want to show.

Buttons:

We have 2 type of styles buttons. You will find CSS for buttons under:
 /* - 3-3 BUTTONS */

<a href="#" class="btn btn_white">Learn More</a>

<a href="#" class="btn gradient-border btn-gredient">Learn More</a>

Section title:

Only one style for all section titles. You will find CSS for them under:

/* - 3-2 SECTION TITLE */

            <!-- section title -->

            <div class="row">

                <div class="col-sm-12">

                    <div class="section-title mb40">

                        <h6 class="fadeIn animated wow" data-wow-delay=".2s">Best <span>Skills</span></h6>

                        <h2 class="fadeIn animated wow" data-wow-delay=".1s">Expertise Areas</h2>

                        <i class="pe-7s-angle-down-circle gradient-text-full"></i>

                    </div>

                </div>

            </div>

            <!-- end section title -->

Footer Logo:

You can change footer exactly like header logo.

Social bookmark:

Here is markup for social media:

                        <!-- footer social icon -->

                        <ul class="footer-social">

                            <li class="fadeIn  wow animated" data-wow-delay=".1s"><a href="#"><i class="fa fa-facebook"></i></a>

                            </li>

                            <li class="fadeIn  wow animated" data-wow-delay=".2s"><a href="#"><i class="fa fa-dribbble"></i></a>

                            </li>

                            <li class="fadeIn  wow animated" data-wow-delay=".3s"><a href="#"><i class="fa fa-behance"></i></a>

                            </li>

                            <li class="fadeIn  wow animated" data-wow-delay=".4s"><a href="#"><i class="fa fa-twitter"></i></a>

                            </li>

                            <li class="fadeIn  wow animated" data-wow-delay=".5s"><a href="#"><i class="fa fa-linkedin"></i></a>

                            </li>

                            <li class="fadeIn  wow animated" data-wow-delay=".6s"><a href="#"><i class="fa fa-google-plus"></i></a>

                            </li>

                        </ul>

                        <!-- End social icon -->

If you wish to add a new icon paste this line <li><a href="#"><i class="fa fa-fontawesomeiconname"></i></a></li> In the # put your link of social media and <i class="fa fa-fontawesomeiconname"></i> replace this with fontawesome icon you need.

    <!-- ========== hero section ========== -->

    <section id="home" class="hero_half_screen text-center parallax-window" data-parallax="scroll" data-image-src="img/hero-bg.jpg">

        <div class="bg-overlay-gradient opacity-9"></div>

        <div class="pt210 pb120">

            <div class="container">

                <div class="hero-content col-sm-6 col-sm-offset-3">

                    <a href="#" class="logo mb30">Station</a>

                    <h1 class="mb40">We Have Talented Team</h1>

                    <p class="mb40">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's typesetting industry standard dummy text ever since the typesetting.

                    </p>

                    <a href="#" class="btn btn_white">Learn More</a>

                </div>

            </div>

        </div>

    </section>

    <!-- ========== hero section  End ========== -->