dever-product
/
site


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874
							<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Basic Page Needs -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Responsive Gas &amp; Oil Industry HTML Template">
    <meta name="author" content="Surjith S.M">

    <!-- Page Title -->
    <title> Shortcodes - Offshore - Responsive Gas &amp; Oil Industry HTML Template </title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png">

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

</head>

<body class="shortcodes-page">

    <!-- Preloader -->
    <div class="loader-wrapper">
        <div class="sk-cube-grid">
            <div class="sk-cube sk-cube1"></div>
            <div class="sk-cube sk-cube2"></div>
            <div class="sk-cube sk-cube3"></div>
            <div class="sk-cube sk-cube4"></div>
            <div class="sk-cube sk-cube5"></div>
            <div class="sk-cube sk-cube6"></div>
            <div class="sk-cube sk-cube7"></div>
            <div class="sk-cube sk-cube8"></div>
            <div class="sk-cube sk-cube9"></div>
        </div>
    </div>

    <!-- Page Wrapper
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <div class="wrapper">
        <!-- Header Section -->
        <header>
            <div class="header-area">

                <!-- Top Contact Info -->
                <div class="row logo-top-info">
                    <div class="container">
                        <div class="col-md-3 logo">
                            <!-- Main Logo -->
                            <a href="index.html"><img src="images/logo.png" alt="Offshore Logo" /></a>
                            <!-- Responsive Toggle Menu -->
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                                <span class="sr-only"> Main Menu </span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="col-md-9 top-info-social">
                            <div class="pull-right">
                                <div class="top-info">
                                    <div class="call">
                                        <h3> CALL US </h3>
                                        <p> 1800 425 4646 </p>
                                    </div>
                                    <div class="email">
                                        <h3> EMAIL US </h3>
                                        <p> info@offshoreinsustry.com </p>
                                    </div>
                                    <div class="market">
                                        <h3> MARKET </h3>
                                        <p> 256.78 <span class="forex"> <i class="fa fa-caret-up" aria-hidden="true"></i> + 4.26 </span> </p>
                                    </div>
                                </div>
                                <div class="social">
                                    <ul class="social-icons">
                                        <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                                        <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Main Navigation Section -->
                <nav id="navbar" class="collapse navbar-collapse main-menu">
                    <div class="container">
                        <ul class="main-menu">
                            <li> <a href="index.html"> Home </a></li>
                           <li class="dropdown"> <a href="#" data-toggle="dropdown"> About
<i class="fa fa-chevron-down dropdown-toggle"> </i> </a>

                                <ul>
                                    <li> <a href="about.html"> The Company </a> </li>
                                    <li> <a href="mission.html"> Vision &amp; Mission </a> </li>
                                    <li> <a href="approach.html"> Our Approach </a> </li>
                                    <li> <a href="leaders.html"> Our Team </a> </li>
                                </ul>
                            </li>
                           <li class="dropdown"><a href="#" data-toggle="dropdown"> Services
                                <i class="fa fa-chevron-down dropdown-toggle"> </i>  </a>
                                <ul>
                                    <li> <a href="services.html"> Services List </a> </li>
                                    <li> <a href="services-list.html"> Services List Fullwidth </a> </li>
                                    <li> <a href="services-single.html"> Services Single </a> </li>
                                    <li> <a href="services-full-width.html"> Services Full Width </a> </li>
                                </ul>
                            </li>
                            <li><a href="technology.html"> Technology </a> </li>
                            <li><a href="blog.html"> News &amp; Media </a> </li>
                           <li class="dropdown active"> <a href="#" data-toggle="dropdown"> Pages
                                <i class="fa fa-chevron-down dropdown-toggle"> </i>  </a>
                                <ul>
                                    <li> <a href="blog.html"> Blog </a> </li>
                                    <li> <a href="blog-single.html"> Blog Single </a> </li>
                                    <li> <a href="careers-single.html"> Careers Single </a> </li>

                                    <li> <a href="shortcodes.html"> Shortcodes </a> </li>
                                    <li> <a href="404.html"> 404 page </a> </li>
                                    <li> <a href="blank-page.html"> Blank Page </a> </li>
                                </ul>
                            </li>
                            <li><a href="careers.html"> CAREERS </a> </li>
                            <li><a href="contact.html"> CONTACT </a> </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
        <!-- Header Section -->

        <!-- Main Content Section -->
        <main class="main">
            <!-- Page Title -->
            <div class="page-title text-center">
                <h2 class="title"> Shortcodes </h2>
                <p class="description light"> Holisticly brand sustainable solutions rather than clicks-and-mortar applications.
                    <br> Phosfluorescently whiteboard fully tested initiatives. </p>
            </div>
            <!-- Page Title -->
            <!-- Breadcrumbs -->
            <div class="breadcrumbs">
                <div class="container">
                    <span class="parent"> <i class="fa fa-home"></i> <a href="index.html"> Home </a> </span>
                    <i class="fa fa-chevron-right"></i>
                    <span class="child"> Shortcodes </span>
                </div>
            </div>
            <!-- Breadcrumbs -->

            <!-- Content Section -->
            <div class="container">
                <section class="shortcodes">
                    <div class="row">
                        <div class="col-md-6">
                            <!-- Horizontal Tabs -->
                            <div class="tab-widget">
                                <ul id="myTab" class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Tab Number One</a></li>
                                    <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Tab Number Two </a></li>
                                    <li role="presentation"><a href="#profile" role="tab" id="about-tab" data-toggle="tab" aria-controls="profile">Tab Number Three </a></li>
                                </ul>

                                <div id="myTabContent" class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
                                        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                                        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                                    </div>

                                    <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab">
                                        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                                        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                                    </div>

                                    <div role="tabpanel" class="tab-pane fade" id="about" aria-labelledBy="about-tab">
                                        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                                        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>

                                    </div>
                                    <!-- end tabpanel -->
                                </div>
                                <!-- end tab-content -->
                            </div>
                            <!-- Horizontal Tabs -->
                        </div>

                        <div class="col-md-6">
                            <!-- Accordion -->
                            <div class="panel-group" id="accordion">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title"> 
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Petrolium Engineering</a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <p>Synergistically build professional communities vis-a-vis best-of-breed paradigms. Quickly empower world-class networks with prospective methodologies. Enthusiastically morph cross functional web-readiness via virtual niche markets. Synergistically enhance one-to-one partnerships after go forward metrics. Competently facilitate alternative networks for fully tested internal or "organic" sources. Synergistically disintermediate an expanded array of niche markets through value-added value. Dynamically communicate cost effective results after intuitive scenarios. Distinctively impact synergistic experiences. </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">International Trade </a> </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p>Synergistically build professional communities vis-a-vis best-of-breed paradigms. Quickly empower world-class networks with prospective methodologies. Enthusiastically morph cross functional web-readiness via virtual niche markets. Synergistically enhance one-to-one partnerships after go forward metrics. Competently facilitate alternative networks for fully tested internal or "organic" sources. Synergistically disintermediate an expanded array of niche markets through value-added value. Dynamically communicate cost effective results after intuitive scenarios. Distinctively impact synergistic experiences.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Chemicals and Refining </a> </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p>Synergistically build professional communities vis-a-vis best-of-breed paradigms. Quickly empower world-class networks with prospective methodologies. Enthusiastically morph cross functional web-readiness via virtual niche markets. Synergistically enhance one-to-one partnerships after go forward metrics. Competently facilitate alternative networks for fully tested internal or "organic" sources. Synergistically disintermediate an expanded array of niche markets through value-added value. Dynamically communicate cost effective results after intuitive scenarios. Distinctively impact synergistic experiences.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Accordion -->
                        </div>
                    </div>

                    <div class="spacer-50"></div>

                    <div class="row btn-row">
                        <!-- Normal Button Styles -->
                        <div class="col-sm-6 col-xs-12 btn-col">
                            <a href="#" class="btn btn-primary btn-lg">Read More</a>
                            <a href="#" class="btn btn-default btn-lg">Read More</a>
                            <a href="#" class="btn btn-primary btn-normal">Read More</a>
                            <a href="#" class="btn btn-default btn-normal">Read More</a>
                            <a href="#" class="btn btn-primary btn-sm">Read More</a>
                            <a href="#" class="btn btn-default btn-sm">Read More</a>
                        </div>

                        <!-- Block Button Styles -->
                        <div class="col-sm-6 col-xs-12">
                            <a href="#" class="btn btn-primary btn-lg btn-block">Read More</a>
                            <a href="#" class="btn btn-default btn-lg btn-block">Read More</a>
                            <a href="#" class="btn btn-primary btn-normal btn-block">Read More</a>
                            <a href="#" class="btn btn-default btn-normal btn-block">Read More</a>
                            <a href="#" class="btn btn-primary btn-sm btn-block">Read More</a>
                            <a href="#" class="btn btn-default btn-sm btn-block">Read More</a>
                        </div>

                    </div>

                    <div class="spacer-50"></div>

                    <div class="row">
                        <!-- Alerts -->
                        <div class="col-sm-6">
                            <div class="alert alert-success alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                    &times;
                                </button>
                                Success! Well done its submitted.
                            </div>
                            <div class="alert alert-info alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                    &times;
                                </button>
                                Info! take this info.
                            </div>
                            <div class="alert alert-warning alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                    &times;
                                </button>
                                Warning ! Dont submit this.
                            </div>
                            <div class="alert alert-danger alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                    &times;
                                </button>
                                Error ! Change few things.
                            </div>
                        </div>
                        <!-- Alerts -->

                        <!-- Basic Form -->
                        <div class="col-sm-6">
                            <form id="short_form" class="form-horizontal" action="short-form.php" method="post">
                                <fieldset>
                                    <!-- Text input-->
                                    <input name="first_name" placeholder="Full Name" class="form-control" type="text">

                                    <!-- Text input-->
                                    <input name="email" placeholder="Email Address" class="form-control" type="text">

                                    <!-- Text input-->

                                    <input name="phone" placeholder="Phone Number" class="form-control" type="text">

                                    <!-- Text area -->

                                    <textarea class="form-control" name="comment" placeholder="Message"></textarea>

                                    <!-- Button -->
                                    <button type="submit" class="btn btn-block btn-warning"> SEND MESSAGE </button>

                                </fieldset>
                            </form>
                        </div>
                        <!-- Basic Form -->

                    </div>

                    <div class="spacer-30"></div>

                    <div class="row">
                        <!-- Headings -->
                        <div class="col-sm-6 headings">
                            <h1>H1 Heading</h1>
                            <div class="spacer-10"></div>
                            <p>Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</p>

                            <div class="spacer-20"></div>

                            <h2>H2 Heading</h2>
                            <div class="spacer-10"></div>
                            <p>Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</p>

                            <div class="spacer-20"></div>

                            <h3>H3 Heading</h3>
                            <div class="spacer-10"></div>
                            <p>Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</p>

                            <div class="spacer-20"></div>

                            <h4>H4 Heading</h4>
                            <div class="spacer-10"></div>
                            <p>Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</p>

                            <div class="spacer-20"></div>

                            <h5>H5 Heading</h5>
                            <div class="spacer-10"></div>
                            <p>Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</p>

                            <div class="spacer-20"></div>

                            <h6>H6 Heading</h6>
                            <div class="spacer-10"></div>
                            <p>Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</p>
                        </div>
                        <!-- Headings -->

                        <div class="col-sm-6">
                            <!-- Blockquote Style-1 -->
                            <h3>Blockquote</h3>
                            <div class="spacer-10"></div>
                            <blockquote>Pellentesque tempor tellus eget pellentesque. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</blockquote>
                            <div class="spacer-40"></div>

                            <!-- Blockquote Style-2 -->
                            <div class="quote-post">
                                <blockquote>Pellentesque tempor tellus eget pellentesque. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.</blockquote>
                            </div>
                            <div class="spacer-20"></div>

                            <h3>Drop Caps</h3>
                            <div class="spacer-10"></div>
                            <!-- Dropcap style-1 -->
                            <div class="drop-caps">
                                <p>Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. </p>
                            </div>
                            <div class="spacer-40"></div>
                            <!-- Dropcap style-2 -->
                            <div class="drop-caps blue">
                                <p>Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. </p>
                            </div>

                        </div>

                    </div>

                    <div class="spacer-50"></div>

                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <h3>Striped Table</h3>
                            <div class="spacer-10"></div>
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            First Name
                                        </th>
                                        <th>
                                            Last Name
                                        </th>
                                        <th>
                                            Username
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            1
                                        </td>
                                        <td>
                                            Mark
                                        </td>
                                        <td>
                                            Otto
                                        </td>
                                        <td>
                                            @mdo
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            2
                                        </td>
                                        <td>
                                            Jacob
                                        </td>
                                        <td>
                                            Thornton
                                        </td>
                                        <td>
                                            @fat
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            3
                                        </td>
                                        <td>
                                            Larry
                                        </td>
                                        <td>
                                            the Bird
                                        </td>
                                        <td>
                                            @twitter
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="col-md-6 col-sm-6">
                            <h3>Bordered Table</h3>
                            <div class="spacer-10"></div>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            First Name
                                        </th>
                                        <th>
                                            Last Name
                                        </th>
                                        <th>
                                            Username
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            1
                                        </td>
                                        <td>
                                            Mark
                                        </td>
                                        <td>
                                            Otto
                                        </td>
                                        <td>
                                            @mdo
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            2
                                        </td>
                                        <td>
                                            Jacob
                                        </td>
                                        <td>
                                            Thornton
                                        </td>
                                        <td>
                                            @fat
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            3
                                        </td>
                                        <td>
                                            Larry
                                        </td>
                                        <td>
                                            the Bird
                                        </td>
                                        <td>
                                            @twitter
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="spacer-50"></div>

                    <div class="row styled-list">
                        <div class="col-md-4 col-sm-4">
                            <h3>Ordered List</h3>
                            <div class="spacer-20"></div>
                            <ol>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Consectetur adipiscing elit</li>
                                <li>Integer molestie lorem at massa</li>
                                <li>Facilisis in pretium nisl aliquet
                                    <ol>
                                        <li>Phasellus iaculis neque</li>
                                        <li>Purus sodales ultricies</li>
                                        <li>Vestibulum laoreet porttitor sem</li>
                                        <li>Ac tristique libero volutpat at</li>
                                    </ol>
                                </li>
                                <li>Faucibus porta lacus fringilla vel</li>
                                <li>Aenean sit amet erat nunc</li>
                                <li>Eget porttitor lorem</li>
                            </ol>
                        </div>

                        <div class="col-md-4 col-sm-4">
                            <h3>Unordered List</h3>
                            <div class="spacer-20"></div>
                            <ul>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Consectetur adipiscing elit</li>
                                <li>Integer molestie lorem at massa</li>
                                <li>Facilisis in pretium nisl aliquet</li>
                                <li>
                                    Nulla volutpat aliquam velit
                                    <ul>
                                        <li>Phasellus iaculis neque</li>
                                        <li>Purus sodales ultricies</li>
                                        <li>Vestibulum laoreet porttitor sem</li>
                                        <li>Ac tristique libero volutpat at</li>
                                    </ul>
                                </li>
                                <li>Faucibus porta lacus fringilla vel</li>
                                <li>Aenean sit amet erat nunc</li>
                            </ul>
                        </div>

                        <div class="col-md-4 col-sm-4">
                            <h3>Icon List</h3>
                            <div class="spacer-20"></div>
                            <ol class="list-unstyled">
                                <li><i class="fa fa-dot-circle-o"></i> Lorem ipsum dolor sit amet</li>
                                <li><i class="fa fa-dot-circle-o"></i> Consectetur adipiscing elit</li>
                                <li><i class="fa fa-dot-circle-o"></i> Integer molestie lorem at massa</li>
                                <li><i class="fa fa-dot-circle-o"></i> Facilisis in pretium nisl aliquet
                                    <ol>
                                        <li><i class="fa fa-dot-circle-o"></i>Phasellus iaculis neque</li>
                                        <li><i class="fa fa-dot-circle-o"></i>Purus sodales ultricies</li>
                                        <li><i class="fa fa-dot-circle-o"></i>Vestibulum laoreet porttitor sem</li>
                                        <li><i class="fa fa-dot-circle-o"></i>Ac tristique libero volutpat at</li>
                                    </ol>
                                </li>
                                <li><i class="fa fa-dot-circle-o"></i> Faucibus porta lacus fringilla vel</li>
                                <li><i class="fa fa-dot-circle-o"></i> Aenean sit amet erat nunc</li>
                                <li><i class="fa fa-dot-circle-o"></i> Eget porttitor lorem</li>
                            </ol>
                        </div>
                    </div>

                    <div class="spacer-50"></div>

                    <h3>IV Columns Layout</h3>

                    <div class="spacer-10"></div>

                    <div class="row">
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                    </div>

                    <div class="spacer-50"></div>

                    <h3>III Columns Layout</h3>

                    <div class="spacer-10"></div>

                    <div class="row">
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                    </div>

                    <div class="spacer-50"></div>

                    <h3>II Columns Layout</h3>

                    <div class="spacer-10"></div>

                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                    </div>

                    <div class="spacer-50"></div>

                    <h3>I Column Layout</h3>

                    <div class="spacer-10"></div>

                    <div class="row">
                        <div class="col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                    </div>

                    <div class="spacer-50"></div>

                    <h3>I Fourth /III Fourth Column Layout</h3>

                    <div class="spacer-10"></div>

                    <div class="row">
                        <div class="col-md-3 col-sm-3 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta. Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.</p>
                        </div>
                    </div>

                    <div class="spacer-50"></div>

                    <h3>I Third / II Third Column Layout</h3>

                    <div class="spacer-10"></div>

                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem Lorem ipsum dolor sit amet, consectetur a adipisicing elit ipsum quia dolor sit dicta. </p>
                        </div>
                        <div class="col-md-8 col-sm-8 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta. Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua.</p>
                        </div>
                    </div>

                    <div class="spacer-50"></div>

                    <h3>II Third / I Third Column Layout</h3>

                    <div class="spacer-10"></div>

                    <div class="row">
                        <div class="col-md-8 col-sm-8 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi ipsum quia dolor sit dicta. Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem ipsum quia dolor sit dicta.Lorem amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua.</p>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <p>Lorem ipsum dolor sit amet, consectetur a adipisicing elit, sed do eiusmod tempor on incididunt ut labore et dolore magna zaras aliqua strud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis no at with strud exercitation ullamco laboris nisi dolorem Lorem ipsum dolor sit amet, consectetur a adipisicing elit ipsum quia dolor sit dicta. </p>
                        </div>
                    </div>

                </section>
            </div>
            <!-- Content Section -->

        </main>
        <!-- Main Content Section -->

        <!-- Footer Section -->
        <footer>
            <div class="footer">
                <div class="container">
                    <!-- Prefooter Section -->
                    <div class="row pre-footer">
                        <div class="col-md-4">
                            <div class="contact-box">
                                <i class="fa fa-map-marker" aria-hidden="true"></i>
                                <div class="contact-details">
                                    <h4 class="pre-footer-title">HEAD OFFICE</h4>
                                    <p>PO Box 16122, Collins Street West,
                                        <br> Victoria 8007 Australia </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="contact-box">
                                <i class="fa fa-phone" aria-hidden="true"></i>
                                <div class="contact-details">
                                    <h4 class="pre-footer-title">CALL US</h4>
                                    <p>SUPPORT: 1800 425 4646
                                        <br> OFFICE: +1 (253) 2587 220</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="contact-box">
                                <i class="fa fa-envelope" aria-hidden="true"></i>
                                <div class="contact-details">
                                    <h4 class="pre-footer-title">EMAIL US</h4>
                                    <p>hello@offshoreindustry.com
                                        <br> sales@offshoreindustry.com </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Prefooter Section -->

                    <!-- Footer widgets -->
                    <div class="row widgets">
                        <div class="col-md-4 col-sm-6">
                            <div class="about-txt widget">
                                <img src="images/footer-logo.png" alt="logo" />

                                <p>Collaboratively deliver partnerships progressive alignments. Assertively premier supply chains before emerging solutions. Monetize high-payoff action items before wireless internal or "organic" sources exceptional action items. </p>

                                <div class="widgets-social">
                                    <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i> </a>
                                    <a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i></a>
                                    <a href="#"> <i class="fa fa-linkedin" aria-hidden="true"></i></a>
                                    <a href="#"> <i class="fa fa-instagram" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-6">
                            <div class="quick-links widget">
                                <h2 class="widget-title">QUICK LINKS</h2>
                                <ul>
                                    <li> <a href="#"> Careers </a> </li>
                                    <li> <a href="#"> Contact </a> </li>
                                    <li> <a href="#"> Market Info </a> </li>
                                    <li> <a href="#"> Technology </a> </li>
                                    <li> <a href="#"> Latest News </a> </li>
                                </ul>
                            </div>
                        </div>

                        <div class="spacer-50 visible-sm"></div>

                        <div class="col-md-3 col-sm-6">
                            <div class="our-services widget">
                                <h2 class="widget-title">OUR SERVICES</h2>
                                <ul>
                                    <li> <a href="#"> Chemicals &amp; Commercial Fuels </a> </li>
                                    <li> <a href="#"> Aviation Fuels &amp; Marine Fuels </a> </li>
                                    <li> <a href="#"> Lubricants Services </a> </li>
                                    <li> <a href="#"> Liquified Petrolium Gas </a> </li>
                                    <li> <a href="#"> Shell Sulphur, Trading &amp; Supply </a> </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="newsletter widget">
                                <h2 class="widget-title">Newsletter</h2>
                                <p>Subscribe to our newsletters to receive latest news and updates.</p>
                                <!-- ============= Mailchimp Subscribe Form ============= -->

                                <form action="php/subscribe.php" id="subscribeform" method="post">
                                    <div class="form-group">
                                        <input type="email" id="email" name="email" placeholder="Enter your email" class="form-control" title="Please enter your email" data-msg-email="Please enter a valid email">
                                    </div>
                                    <button type="submit" class="btn btn-block" id="js-subscribe-btn"> Subscribe Now! </button>

                                    <div id="js-subscribe-result" data-success-msg="Done. Subscribed" data-error-msg="Oops. Error!"></div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- Footer widgets -->
                </div>
            </div>
            <!-- Copyright -->
            <div class="copyright">
                <div class="container">
                    <div class="row copyright-bar">

                        <div class="col-md-6">
                            <p>Copyright © 2016 Offshore Industries. All rights reserved.</p>
                        </div>
                        <div class="col-md-6 text-right">
                            <p>
                                <a href="#"> Terms of use</a> <a href="#">Privacy Policy</a> <span> | </span> Made with <i class="fa fa-heart" aria-hidden="true"></i> by Surjith S M </p>

                        </div>
                    </div>
                </div>
            </div>
            <!-- Copyright -->
        </footer>
        <!-- Footer Section -->

        <!-- back-to-top link -->
        <a href="#0" class="cd-top"> Top </a>
    </div>
    <!-- Page Wrapper
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->

    <!-- Javascripts
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->

    <!-- Jquery Library -->
    <script src="js/jquery.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Back to top -->
    <script src="js/back-to-top.js"></script>

    <!-- Form Validation -->
    <script src="js/validate.js"></script>

    <!-- Subscribe Form JS -->
    <script src="js/subscribe.js"></script>

    <!-- Main JS -->
    <script src="js/main.js"></script>

</body>

</html>